Какой выбрать шрифт для сайта: цвет, масштаб, стиль

В большинстве интерфейсов используется избыточное количество размеров шрифтов. Если в команде нет жесткой системы проектирования, нередко можно обнаружить, что каждое значение от 10 до 24 пикселей где-то использовалось в UI.

Выбор размера шрифта

Не системный выбор размеров шрифта является плохой идеей по двум причинам:

1) Это при водит к досадным несоответствиям в ваших проекта.

2) Это замедляет ваш рабочий процесс.

Итак, как определить систему размерности?

Как и в случае с интервалами, линейность не будет работать. Меньшие переходы между размерами шрифта полезны при маленьких масштабах (в нижней части шкалы), но вы же не хотите тратить время на выбор между 46px и 48px для большого заголовка.

Метод "Модули"

Один из подходов состоит в том, чтобы рассчитать размер шрифтов, используя соотношения, например 4: 5 («большая треть(Терция)»), 2: 3 («идеальная пятая часть (чистая квинта)») или, возможно, «золотое сечение», 1: 1,618. Это часто называют «модульной размерностью».

Вы начинаете с разумного базового значения (16 пикселей обычно, так как это размер шрифта по умолчанию для большинства браузеров) и применяете свой коэффициент для получения следующего значения, чтобы получить следующее значение и так далее и тому подобное:

Математическая чистота этого подхода заманчива, но на практике она не идеальна по нескольким причинам.

1) Вы получите дробные значения

Используя основание 16px и соотношение 4: 5, ваш масштаб получит множество размеров, которые не попадают прямо в пиксель, например, 31.25px, 39.063px, 48.828px и т. Д. Браузеры все обрабатывают субпиксельное округление немного по-разному, поэтому лучше по возможности избегать дробных размеров.

Если вы хотите использовать именно этот подход, убедитесь, что вы сами округляете значения при определении масштаба, чтобы избежать проблем с пикселями в браузерах.

2) Вам обычно нужно больше размеров

Этот подход может хорошо работать, если вы определяете масштаб типа для контента длинной формы, такого как статья, но для дизайна интерфейса переходы, которые вы получаете, используя модульную размерность, часто слишком ограниченные.

С помощью округленной шкалы типа 3: 4 вы получите размеры, такие как 12px, 16px, 21px и 28px. Хотя на первый взгляд это может показаться не слишком ограничительным, на практике вы захотите размер от 12 до 16 пикселей, или - от 16 до 21 пикселя. Вы можете использовать более плотное соотношение, например, 8: 9, но на данный момент вы просто пытаетесь выбрать шкалу, которая соответствует размерам, которые вы уже знаете, и хотите.

Выбор "Вручную"

Для проектирования интерфейса более практичным подходом является простой выбор значений вручную. Вы не должны беспокоиться об ошибках субпиксельного округления таким образом, и у вас есть полный контроль над тем, какие размеры существуют, вместо того, чтобы передать эту работу какой-то математической формуле.

Вот пример шкалы, которая хорошо работает для большинства проектов :

Она ограничена настолько, чтобы ускорить принятие решений, но не так сильно, чтобы заставить вас чувствовать, что вам не хватает нужного кегля.

Избегайте единиц измерения em

При построении шкалы шрифтов не используйте единицы измерения em для определения размеров. Поскольку единицы измерения относятся к текущему размеру шрифта, вычисленный размер шрифта для вложенных элементов зачастую не является значением в представленном масштабе. Например, скажем, вы определили масштаб типа на основе em следующим образом:

Если вы даете элементу размер шрифта 1,25em (по умолчанию 20 пикселей), то внутри этого элемента lem теперь равен 20 пикселям. Это означает, что если вы дадите одному из вложенных элементов размер шрифта 0,875em, фактический вычисленный размер шрифта будет 175px, а не значение из вашей шкалы типов! Придерживайтесь единиц измерения px или rem – это единственная гарантия соблюдения системы.