Типографика в веб дизайне в цифрах

В данной статье мы разберемся как типографика может помочь при проектировании дизайна. При этом мы будем оперировать точными и измеримыми понятиями. И максимально постараемся уйти от абстрактных определений по типу “Для привлечения внимания увеличьте размер шрифта”. Данная статья даст вам точные числа – в каких случаях и на сколько пикселей увеличить. Все кто заинтересован прошу под кат.

Прежде чем понять как типографика относится к веб-дизайну, давайте разберемся с самим понятием.

Типографика – это набор правил, который помогает сделать написанный вами текст приятным для глаз читателя. Если вы будете использовать в дизайне этот свод законов, то возможно читателю не захочется выколоть глаза после прочтения статьи. Но это только возможно)

Свод правил включает следующее:

  • Стиль шрифта – сюда относятся все стили, которые вы можете применить к тексту через CSS (font-size, font-weight, line-height и др.)

  • Иерархия – это то, как вы отделяете блоки текста по важности. К примеру заголовок, помещенный между тегами H1, будет выделяться на фоне заголовков меньшего уровня. А они в свою очередь будут иметь больший вес, чем обычный текст.

  • Стиль текстового блока – это ширина и отступы блока в котором находится текст.

Давайте разберем каждую группу детальнее и выясним как сделать ваш текст приятней для глаз.

Стиль шрифта

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

Font-Family

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

Как же выбрать подходящий шрифт ? Если вы не являетесь экспертом, то самым верным будет зайти на страницы популярных блогов и посмотреть что используют они. Эти ребята давно работают с текстом. И если их читают, то есть небольшая вероятность, что они используют верный шрифт. В любом случае, никто не запрещает вам взять за основу их шрифты и адаптировать под ваш сайт (главное не перестарайтесь).

Font-Size

При выборе размера нужно начинать с вашего основного шрифта (Тот который используется в большинстве случаев). И уже отталкиваясь от него задавать размер для заголовков и подписей. Размер основного текста должен быть в диапазоне от 14 до 18 px. А лучше даже больше, к примеру 16 px для мобильных и 20 px для десктопа. Это приблизительно тот размер текста, который мы привыкли видеть в книгах.

Что касается размера для заголовков и подписей, то их размеры должны находится в отношении 2 к 3 по отношению к основному. К примеру:

10 px – подпись

16 px – основной текст

24 px – заголовок

Существуют и другие пропорции между шрифтами разных уровней. 2 к 3 это лишь один из примеров.

Font-Weight

Несмотря на то, что у нас есть большой диапазон толщины шрифта. Сильной разницы между толщиной 100 и 200 вы не увидите. Поэтому можете считать, что есть 3 значения для толщины. 400 - normal, 700 – semi-bold, 900 - bold.

Normal иcпользуется для основного текста. Bold для заголовков, а semi-bold для выделений в тексте важных моментов. Semi-bold также можно использовать для заголовков.

Line-Height

Нет строгого правила сколько устанавливать межстрочный интервал, но правилом хорошего тона считается установка его в значение в 1.5 раза большее чем размер шрифт. То есть в нашем примере 16 * 1.5 = 24.

Color

Не используйте чистый черный цвет. Не нужно выставлять значение цвета в #000. Цвет выглядит слишком резким. Сделайте его немного серым. Это намного приятней для глаз.

Можно даже иметь цветовую палитру и использовать несколько цветов. Один для основного текста, второй для заголовков, третий в качестве пометок. Вот пример такой палитры.

Типографика в веб дизайне в цифрах

Вы сами можете найти цветовую палитру. В сети много таких сайтов. Вот один из примеров.

Иерархия

Так выглядит простыня текста. Все мы хорошо ее знаем.

Типографика в веб дизайне в цифрах

Попробуем расставить акценты в этом тексте.

Как уже было сказано ранее, иерархия нужна для выделения блоков текста. В HTML даже есть специальные теги для выполнения этой задачи. Теги H1 – H6. Но это не единственный способ создать иерархию. Всего их существует 4:

  • · Размер шрифта

  • · Жирность

  • · Цвет

  • · Расположение

Размер шрифта

Самый простой широко используемый метод. Просто сделайте шрифт заголовка больше относительно основного текста.

Типографика в веб дизайне в цифрах

Жирность

Просто сделайте заголовок жирнее.

Типографика в веб дизайне в цифрах

Цвет

Заголовок можно сделать цветным, так часто делают не только на сайтах, но и в книгах.

Типографика в веб дизайне в цифрах

Расположение

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

Типографика в веб дизайне в цифрах

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

Типографика в веб дизайне в цифрах

Стиль текстового блока

В плане текстового блока мы имеем 3 параметра, которыми мы можем управлять: ширина, внутренние и внешние отступы. Начнем с последних.

Внешние отступы

Это расстояние между соседними блоками текста. Частным случаем является величина отступа между 2-мя параграфами. Она должна быть достаточно велика, чтобы мы легко смогли понять, что перед нами 2 блока, а не один. При этом не слишком большой, чтобы параграфы не выглядели отстраненными. Отступ равный 50 – 100% от размера шрифта, должен удовлетворять этим требованиям. При этом размер отступов между блоками основного текста можно сделать равным 70%, отступ от заголовка 100% от размера заголовка, а отступ между картинкой и подписью 50% от размера шрифта самой подписи, т.к нам наоборот нужно сделать ее “частью картинки”.

Типографика в веб дизайне в цифрах

Внутренние отступы

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

Ширина

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

Есть 2 подхода для выбора ширины.

  • На основе фиксированного значения (например ширина нашего текста будет составлять 70% от ширины экрана. Можно также задать это значение в пикселях)

  • 1) На основе числа символов в строке (рекомендованный диапазон от 50 до 75 символов в строке, с пробелами)

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

Применяем на практике

А теперь давайте применим на практике все перечисленные правила и взглянем что у нас получится.

Начнем со шрифта. Чтобы далеко не ходить посмотрим что использует VC. VC использует Roboto, как для заголовков, так и для основного текста.

Размер основного шрифта выберем равным 14 пикселям для мобильных и 18 пикселей для десктопа. Основываясь на этих размерах вычислим размеры заголовков. Поскольку у нас лишь тестовый пример, то будем использовать лишь заголовки H1, H2, H3. Также высчитаем размеры для подписей. Будем использовать соотношение 2/3.

P = 14 – размер основного шрифта

H3: 14 * 3/2 = 21 px

H2: 21 * 3/2 = 32 px

H1: 32 * 3/2 = 48 px

PP: 14 * 2/3 = 9px – размер шрифта для подписей.

Также вычислим аналогичные размеры для десктопа. P = 18, H3 = 27, H2 = 40, H1 = 60, PP = 12.

С размером шрифтов разобрались. Следующее свойство line-height. Как было сказано line-height устанавливаем в полуторное значение относительно размера шрифта.

Жирность для основного текста и подписей установим в 400, у заголовков в 700.

Будем использовать цветовую палитру, приведенную в начале статьи. Для основного текста установим цвет - #010101, для заголовков #1C1C1C, для подписей - #4A4A4A.

Ширину блока установим в 50% от ширины экрана. Отступ между основными блоками текста установим в 70% от размера шрифта, отступ для заголовков в 90%, для подписей в 50%. В итоге мы получаем следующую таблицу значений:

Типографика в веб дизайне в цифрах

А теперь сверстаем страничку на основе этих данных.

Типографика в веб дизайне в цифрах
Типографика в веб дизайне в цифрах

А вот как будет выглядеть то же самое на мобильных устройствах.

Типографика в веб дизайне в цифрах
Типографика в веб дизайне в цифрах

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

Итог

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

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

Что думаете об этом вы ? Готов пообщаться на эту тему в комментариях.

3535
4 комментария

спасибо, очень полезная статья для новичков точно)
параллельно тренировалась в фигме при прочтении, чтобы наглядно всё увидеть самой)

3
Ответить

Берёшь шрифт Arial.
И чёрным по белому пишешь: «продам айфон недорого».
PROFIT.

Ответить

Большое спасибо. Коротко и по сути. Идеально.

Ответить

Классная статья, спасибо большое! Изучала подробно типографику на курсе от Alice K, и вот как будто кратко и быстро повторила, кайф)

Ответить