Fundamentals of typography in web design.

​

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

Всего мы рассмотрим 11 пунктов, с которым я посчитал нужным ознакомиться начинающему и не только дизайнеру:

1. Начертания, контраст и иерархия;
2. Размер текста;
3. Теория близости;
4. Межстрочный интервал (интерлиньяж);
5. Трекинг и кернинг;
6. Рыба-текст;
7. Выравнивание текста (выключка);
8. Ширина текста;
9. Числа и денежные единицы;
10. Типографские знаки;
11. Типограф Артемия Лебедева;

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

И так, начнём с основного — начертания шрифта.
Что такое начертание шрифта?

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

Начертания — очень важная часть контраста и иерархии. С помощью начертания вы можете отделить основной текст от заголовка либо подзаголовка, сделать любой текст более заметным, тем самым сделав на него акцент.

Самые распространённые начертания — Bold, Semi Bold, Medium и Regular.
Bold и Semi Bold — более жирное начертание, оно чаще всего используется в заголовках и кнопках, а Medium и Regular — в основном тексте и вспомогательных элементах.

Рекомендуется использовать не более трёх начертаний, чтобы не путать пользователя. Выберите три основных начертания, например Bold для заголовка на главной, Semi Bold для заголовков в блоках и Medium для текста.

Bold и Medium

Что такое контраст?​

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

Существует несколько основных способов, как разделить текст с помощью контраста:

1. Размер;
2. Цвет;
3. Регистр;
4. Начертание;

1. Размер.
Большой размер шрифта указывает на значимость, так как он приковывает внимание читателя и поэтому этот метод обычно применяется к заголовкам.

2. Цвет.
Цветовой контраст — это обычный путь различия между навигацией, заголовками, ссылками и основным текстом.

3. Регистр.
Строчные притягивают больше внимания, чем прописные, следовательно, этот метод больше подходит для заголовков или подзаголовков.

4. Начертание.
Подчеркнуть значимость определенного текста можно, выделив его полужирным шрифтом.

Пример

Заголовок хорошо отделён от текста с помощью размера, цвета и начертания, а подзаголовок отделён от заголовка с помощью регистра и трекинга.

Что такое иерархия?​

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

Например: заголовок привлекает внимание, подзаголовок — помогает пользователю определиться с тем, нужна ли ему информация в тексте или нет, а основной текст — основная информация, за которой пользователь зашёл на ваш ресурс. Заголовок, подзаголовок и текст можно разбить на уровни, то есть заголовок — первый уровень, подзаголовок — второй уровень, а текст — третий. Таким образом мы задали иерархию для нашего текста, и уже можем работать с ним.

Пример

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


Неправильно. Заголовок уходит на второй план, а текст привлекает к себе всё внимание, это может сбить пользователя с толку.

2. Размер текста.
Минимальный размер текста — 12px, оптимальный вариант — 14-18px. Важно всегда сохранять размер у одних и тех же элементов, например если вы решили что у вашей кнопки размер текста будет 18px — не нужно в следующем блоке делать кнопку и менять там размер текста на 16px.

Рекомендую ознакомиться с дизайн-системами популярных брендов и адаптировать их размеры под себя, например я начинал с дизайн-системы от Google — Material Design. Там всё более чем подробно расписано: категория, размер, начертание и так далее.

3. Теория близости.
Очень простое но очень важное правило, которое очень легко запомнить: объекты, расположенные близко друг к другу, воспринимаются связанно.

Пример от Артемия Лебедева

Тут Ж находится посередине между двумя М, и нельзя определить, к которому она ближе:

А тут по расположению совершенно очевидно, что Ж вместе с правым М:

Источник: https://www.artlebedev.ru/kovodstvo/sections/136/

4. Межстрочный интервал (интерлиньяж).
Было доказано, что правильное использование пробела между абзацами повышает понимание до 20%.

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

На самом деле существует простая формула, благодаря которой можно рассчитать правильный межстрочный интервал, и звучит она так:
px * n = межстрочный интервал, где px — размер шрифта, а n — коэффициент от 1.2 до 1.5. Чем больше размер текста, тем меньше коэффициент, на больших размерах интервал можно не трогать вообще (если вы работаете в фигме).
Пример: 16 * 1.5 = 24

Для тех кто работает в Figma

Для тех кто работает в фигме — вы можете рассчитывать интервал прямо в фигме. Записывайте формулу в инпут, и фигма посчитает всё сама.

Пример

Правильно. Текст удобно читать, он не слипается и не разваливается, как примеры ниже.


Неправильно. Текст слипается, выглядит некрасиво и читать его некомфортно.


Неправильно. Текст слишком широкий, выглядит некрасиво и читать его некомфортно.

5. Трекинг и кернинг.
Трекинг определяет пробел между буквами в целом слове и предложении, позволяя контролировать пространство в тексте равномерно.
Не такой бесполезный как кернинг, но используется не так часто, и скорее для красоты. Про трекинг я упоминал в первом пункте, с помощью него мы отделили заголовок от подзаголовка.

Пример

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

Параметр

6. Рыба-текст.
Рыба-текст — это текст, который имеет некоторые характеристики реального письменного текста, но является случайным набором слов или сгенерирован иным образом.

Не используйте Lorem Ipsum. Если поставите сначала Lorem Ipsum, а потом кириллицу, макет будет выглядеть иначе. Используйте русские аналоги, например www.fishtext.ru. Текст выглядит правдоподобно и в глаза не бросается то, что это рыба.

7. Выравнивание текста (выключка).
Выключка — это способ выравнивания текста. Есть 4 вида выключки: слева, справа, по центру и по ширине. В веб-дизайне принято использовать выключку по левому краю, потому что это привычно, у нас принято что текст идёт слева направо.

Выключку по правому краю используют в редких случаях, например в таблицах при работе с цифрами или при вёрстке текста для стран Ближнего Востока и Северной Африки (поменяйте на YouTube язык на арабский и посмотрите что будет), по центру выключку используют для заголовков и подзаголовков, для обычного текста его использовать не рекомендуется. Выключку по ширине используют в газетах и книгах, для того чтобы текст был ровным со всех краёв. Не рекомендую его использовать, ведь выключкой по ширине в основном пользуются профессиональные верстальщики, которые специализируются на вёрстке текста для книг или газет.

Следите за тем, чтобы в вашем тексте не было «ступенек», выравнивайте текст в ручную. Дописывайте/убирайте ненужное, чтобы визуально текст смотрелся красиво.



8. Ширина текста.
Правильное количество символов в каждой строке — ключ к удобочитаемости вашего текста. Ширина текста должна определяться не только дизайном, но и удобочитаемостью.

Согласно исследованиям института Баймарда норма для ширины текста является 50-60 символов, 75 и больше уже является ошибкой и такой текст будет не удобочитаемым, потому что если строка слишком короткая, придется очень часто переводить взгляд, а это нарушает ритм чтения. Если строка слишком длинная, то пользователю будет очень сложно сосредоточиться на тексте.



Вместо количества символов можно измерять ширину в пикселях, в среднем контейнер размером 560-600 пикселей является нормой.

9. Числа и денежные единицы.
Для максимальной комфортности считывания чисел рекомендуется следовать правилам типографики:

• Внутри десятичных чисел ставятся неразрывные пробелы через каждые 3 разряда справа-налево, например: «1 098 675 432»;
• Дробные числа записываются без пробелов: «4.56», «4,56», «6/8»;
• В русском языке единого правила об употреблении знака рубля до или после цифр не сформировалось, но принято использовать знак рубля именно после числа, но в америке наоборот, знак доллара идёт перед числом, а вместо пробела числа отбиваются запятой, а дробные числа пишутся через точку, например: «$ 13,535.23»;
• Процент пишется слитно с числом: «67%»;

10. Типографские знаки.
Используйте типографские знаки, вместо кавычек используйте ёлочки, вместо буквы Р используйте знак рубля. Благодаря такой, казалось бы, мелочи пользователю будет намного проще ориентироваться в интерфейсе, а текст будет красивей и приятней. Подробней со всеми знаками можно ознакомиться в ководстве Артемия Лебедева — www.artlebedev.ru/kovodstvo/sections/62/.

11. Типограф Артемия Лебедева.
Используйте типограф Лебедева, когда пишите текст. Он учитывает десятки правил типографики: убирает висячие предлоги, ставит правильные кавычки, заменяет дефис на тире. В том числе с помощью него я писал эту статью, а так же использую каждый день в работе. Цените своё время.

Ссылка — www.artlebedev.ru/typograf/.


Конец!
Вот и конец этой статьи, если ты дочитал её до конца — выражаю тебе огромную благодарность. Я вложил много сил и времени в написание этой статьи, и буду рад отзывам и критике, если где-то допустил ошибку — пишите, постараюсь всё исправить. Я думаю что это не последняя моя статья, буду время от времени писать и публиковать что-то подобное, но уже, конечно, на другие темы. Может быть через некоторое время напишем своё ководство и свергнем Лебедева. Принимаю пожертвования на маркет!