В данной статье, я хочу рассказать о базовых принципах, которых следует придерживаться, чтобы дизайн продукта был удобным и понятным для пользователя.
Немного терминологии
Типографика – это набор правил оформления текстов, которые позволяют донести информацию до пользователя. Она обеспечивает единство композиции, расставляет акценты, грамотно и доступно рассказывает о продукте.
Она дает:
- удобство и восприятие информации
- профессиональный внешний вид
- создание целостного образа бренда
Гарнитура (typeface) – семейство шрифтов, которое имеет разное начертание. Например, у шрифта Roboto есть слуначертания:
Гарнитура бывает двух видов: шрифты с засечками (антиква) и без засечек (гротеск).
Данные шрифты чаще всего вы можете увидеть в печатных продуктах. Они подчеркивают элегантность, премиальность и серьезность.
Данные шрифты используются чаще всего в веб интерфейсах. Гротеск в большинстве случаев выбирают, чтобы показать неформальность и простоту в общении с пользователем.
В зависимости от вашего проекта, вы можете самостоятельность подобрать шрифт, который лучше передаст тематику продукта.
Кегль – это высота букв (размер шрифта). Он измеряется в типографических пунктах – pt = px.
Интерлиньяж (межстрочный интервал) – это расстояние между базовыми линиями соседних строк.
Кернинг – это межбуквенное расстояние.
Разрыв абзацев (Paragraph break) – настройка расстояния между абзацами в одном текстовом блоке
С помощью этих терминов, мы обеспечиваем читабельность текста, расставляем акценты и доносим смысл продукта до пользователя.
Характеристика типографики
- Читаемость. Насколько удобен данный шрифт и легко воспринимаем для пользователя. Элементы, которые отвечают за это: шрифт, кегль, расстояние между буквами и строками, а также контраст (работа с цветом, жирностью и размером)
- Выравнивание. Есть 4 вида выравнивания: по левому краю, посередине, по правому краю и на всю ширину фрейма. Последний способ часто используют в статьях, где есть разбиение текста на колонки. Первый способ (по правому краю) чаще всего использую в веб-дизайне.
- Стилистика. Очень важно для каждого продукта подбирать свой шрифт. Часто данную характеристику используют в графическом дизайне (создание баннеров/карточек товаров). То есть, если вы делаете какой-то тематический сайт (игра например), то и шрифт нужно выбрать соответствующий – нестандартный, с засечками.
- Контраст. Важный элемент в создании типографики для каждого блока. За счет него можно построить последовательность чтения контента (куда пользователь в первую очередь обратит свой взгляд). Контраст достигается за счет цвета, жирности и размера.
Правила типографики
1. Создание и использование единого набора стилей шрифта. Перед началом создания дизайна, вы подбираете стилистику (цвет, шрифт итд). На данном этапе, в работе с типографикой, необходимо задать стили: заголовки (heading), основной текст (body), надписи (caption).
2. Использовать не более 3х шрифтов, а лучше 1-2. Если вы хотите подчеркнуть акцент на заголовках вашего проекта, то можно использовать шрифтовые пары.
Шрифтовая пара – это несколько шрифтов, которые хорошо сочетаются между собой. Задача заголовка - привлечь и акцентировать внимание, задача текста - донести информацию до пользователя.
Для чего это нужно?
- структурирование информации (однако, этого можно достичь используя и 1 гарнитуру)
- подача (это больше про бренд, который вы хотите преподнести)
- эстетика (использование 2 разные гарнитуры позволит украсить дизайн и сделать его интересным для восприятия)
Примеры шрифтовых пар:
- Alegreya Sans Regular и Alegreya Sans Extra bold
- Trocchi и Source Sans Pro
- SAOL и Helvetica / Lato / Open Sans Alegreya Sans /Georgia (использовать для англ)
- Playfair Display и PT Sans / Open Sans / Lato
- Oswald Lato / Open Sans / Helvetica
3. Оптимальная длина строки. Средний размер контейнера с текстом - 600/700пх. Слишком маленькие и слишком большие контейнеры делать не следуют, так как это будет трудно читаемо для пользователя.
4. Грамотное использование интерлиньяжа (межстрочное расстояние).
Запомните правило: к размеру (кеглю) текста прибавляйте его половину. То есть 16пх - интерлиньяж = 16+ (16/2) = 24.
Погрешности возможны в зависимости от гарнитуры, которую вы выбрали. В данном случае, вы должны смотреть на результат и подбирать межстрочное расстояние по визуалу.
5. Соблюдение контрастности. Для того, что текст был доступным для пользователя, а также вел пользователя по нужному следу продукта, необходимо правильно расставлять акценты. В этом помогает контрастность: размер, жирность и цвет.
6. Соблюдение смыслов. Чтобы текст правильно был донесен до пользователя необходимо правильно соотнести по смыслу элементы.
На данном примере, в случае «плохо» можно понять, что лейбл «новости» с датой относится к заголовку, а текст относится к кнопку. В данном случае, не понятно, это единый блок, или же разные.
В случае «хорошо» можно увидеть, что:
- 1 ступень иерархии: заголовок + текст
- 2 ступень: (заголовок+текст) + лейбл с датой
- 3 ступень: ((заголовок+текст) + лейбл с датой) + кнопка
Это единый блок, который благодаря своей иерархии дает целостное представление о данном элементе.
Оптимальные размеры шрифтов для рабочего стола
Нет точных правил для размера шрифта, но есть несколько хороших практик, о которых следует подумать при разработке для настольных ПК (также есть рекомендации Google):
Body text (Основной текст) — размер шрифта должен составлять от 16 до 18 пикселей для удобочитаемости.
Headings (Заголовки) — заголовки должны быть примерно в 1,5-2 раза больше основного текста, чтобы создать достаточный контраст. Это будет означать, что если использование 18 пикселей для размера основного шрифта, тогда будет применено около 26-36 пикселей для заголовков.
Subtitle (Подзаголовки) — они должны быть немного меньше, чем размер заголовка, с некоторыми корректировками, такими как меньший вес, чтобы создать контраст между ними. Например, если использовались 36 пикселей для заголовка, то для подзаголовка использовать около 24-30 пикселей.
Caption – надписи. Их размеры 12пх / 10пх
Input fields (Поля ввода) — они должны точно соответствовать правилам основного текста.
Оптимальные размеры шрифтов для мобильных устройств
На мобильных устройствах меньше места для отображения контента. Кроме того, пользователи обычно держат устройства ближе к глазам, чем к экрану ноутбука или рабочего стола, а это значит, что ваши шрифты могут (и должны) быть меньше, чем на настольных компьютерах:
Body text (Основной текст) — размер шрифта для основного текста должен быть не менее 16 пикселей. В некоторых случаях можно уменьшить размер шрифта (например, если шрифт имеет необычно большие символы или используются прописные буквы), при этом минимальным размером будет 14 пикселей. Для контекста в Material Design от Google используется минимальный предлагаемый размер дополнительного шрифта в 14 пикселей, а в рекомендациях Apple — 15 пикселей.
Headings (Заголовки). Заголовки должны быть примерно в 1,3 раза больше, чем основной текст, чтобы создать достаточный контраст. Это будет означать, что если используется 16 пикселей для размера основного шрифта, то для заголовков должен использоваться ~ 22 пиксель.
Subheadings (Подзаголовки) — здесь тоже часто бывают уменьшены по сравнению с размером заголовка, но есть небольшая проблема, в которой подзаголовок может выглядеть слишком похожим на размер шрифта основного текста. По этой причине некоторые дизайнеры предпочитают визуально отличать подзаголовки за счет использования веса, форматирования, например курсива и межбуквенного интервала. Если использовался 22 пиксель для заголовка, можно выбрать 18 или 16 пикселей для подзаголовка, но с меньшим весом, чем заголовок или основной текст.
Caption – надписи. Их размеры 12пх / 10пх
Input fields (Поля ввода) — они должны точно соответствовать правилам основного текста.
