Гайд по типографике: как правильно оформить текст

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

Введение

Опыт дизайнеров по всему миру показывает, что пользователь не читает, а просматривает контент, размещенный на странице. Это значит, что дизайн сайта не столько про эстетику, сколько про решение конкретной задачи. И оформление текста — тоже часть дизайна. 

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

Это сразу видно на примере: 

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

Основные параметры текста: какие бывают и как выбрать

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

Базовые понятия о шрифтах и семействах

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

Разные шрифты используются в разных ситуациях, так как выполнены по-разному. Некоторые не подходят для основного текста, зато прекрасно акцентируют заголовки или важные детали, сразу приковывая внимание к определенным зонам страницы.

Основные шрифты:

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

Основное требование к шрифту на сайте — читабельность. Каждый посетитель должен легко воспринимать текст и понимать его смысл. Красивые и необычные шрифты мешают восприятию смысла.

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

Пример выбора шрифтов:

Кегль

Простыми словами кегль — это размер шрифта. 

Как он считается:

В веб-дизайне и традиционной типографике размеры различаются:

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

Как они соотносятся друг с другом:

12 пунктов или pt умножить на (96/72) = 16 пикселей или px.

Какой кегль выбрать веб-дизайнеру:

• для десктопной версии — от 16 до 20 пикселей;
• для смартфонов — от 14 до 18 пикселей.

Контрастность

Этот параметр важно учитывать, даже если вы не публикуете объемных материалов. Чем уровень выше, тем сложнее воспринимать текст.

Посмотрите сами:

Контрастность рассчитывается на основании соотношения основного штриха к соединительному. Для веб-дизайна лучше всего выбирать шрифты без контраста или с низким уровнем. Чем проще и заметнее — тем лучше.

Межбуквенный интервал

• Кернинг — настраивает расстояние между отдельными буквами вручную.
• Трекинг — настраивает расстояние не только в тексте в целом, но и в абзаце, и даже в отдельном слове.

В чем разница между понятиями:

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

Пример отрицательного, нормального и положительного расстояния:

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

Как работает кернинг:

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

Еще немного о расстояниях: между строчками

В веб-дизайне для повышения читабельности рекомендуется выбирать интерлиньяж в 150%. 

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

Формула для расчета расстояний на сайте:

Размер текста 16 пунктов, интерлиньяж 24 пикселя. 16/2 = 8+16 = 24.

Насыщенность

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

Оформление структуры текста

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

Воздух и расстояния

Два базовых правила композиции при оформлении структуры:

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

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

Примеры:

Как рассчитывается иерархия размеров:

Оформление заголовков

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

Как оформить заголовок:

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

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

Как действовать для разработки собственной иерархии:

• Отталкивайтесь от базовой величины в 16 пикселей. Это минимальный размер для читабельных заголовков.
• Определите оптимальный множитель шкалы. Для Золотого сечения он составляет 1,618, для Perfect Fourth — 1,33. Базовый размер умножается на это значение и округляется до целого числа. Например, умножаем 16 на 1,618 и получаем 25,888, округляем в большую сторону до 26.
• Следующий больший размер определяется таким же образом: полученное число (до округления) снова умножается на выбранное значение, а результат округляется.

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

Оформление списков

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

Сравните текст со списком и без:

Перенос предлогов

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

Иногда от предлога в конце строки никак не получается избавиться, так как это существенно влияет на композицию. В каждом случае важно отталкиваться от удобства пользователя.

Запрет переноса

Некоторые сочетания нельзя разделять и переносить по отдельности:

• сочетание фамилии и инициалов;
• сокращения слов;
• цифры в сочетании с единицей измерения или раскрывающим смысл словом.

Автоматический перенос не учитывает это правило, поэтому необходимо использовать ручной способ оформления: сочетание Alt и 0160 позволит разместить элементы на одной строке.

Выравнивание текста

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

По центру — для выделения небольшого текста, заголовков или цитат. Выравнивание, привлекающее внимание. Хорошо подходит для коротких акцентных вещей, в основном — цитат или заголовков.

По правому краю — не подходит для пользователей, которые пишут и читают слева направо. Выравнивание по правому краю используется только в регионах, где читают и пишут справа налево.

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

Настройка ширины строки

Если строка длинная, читатель быстро устанет. Если слишком короткая — будет трудно воспринимать информацию.

Как это выглядит в оформлении:

Рекомендованная ширина:

• для широких экранов от 40 до 80, оптимально — от 50 до 60 символов выбранного шрифта;
• для мобильных устройств — от 30 до 45 символов.

Улучшение читабельности

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

• Насыщенность и контрастность. Для крупных блоков текста рекомендуется придерживаться классики: черное на белом или белое на черном. Слишком насыщенный и контрастный шрифт неудобно читать долго: глаза пользователя устают.
• Фон. Если текст размещается на неоднородном фоне с дополнительными элементами, важно чтобы он одинаково хорошо читался на всем изображении. Проверить это можно, прищурив глаза: если буквы не сливаются, менять ничего не надо.
• Шрифт. Рекомендуем выбирать максимально простые и удобные для чтения шрифты: креативность в дизайне хороша только для оформления заголовков и выделения смыслов в презентации.

Полезные типографские символы для оформления текста

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

Все виды «черточек»: от дефиса до минуса

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

Минус (alt+045) — немного длиннее дефиса и часто выступает в его роли при неправильной настройке символов.

Короткое тире (alt+0150) используется только при оформлении ряда чисел, пробелы также не ставятся. Например, «3000−4000» пишется через короткое тире.

Длинное тире (alt+0151) используют в соответствии с правилами правописания, а именно:

• между словами, которые подразумевают расстояние «от и до» (маршрут Москва — Сочи);
• между подлежащим и сказуемым, выраженным существительным (дизайн — это не сложно);
• для замены членов предложения (при нарушении правил — выселение);
• между двумя предложениями, которые описывают результат и действие, но не соединены союзами (заполни заявку — получи скидку).

Кавычки

• Елочки по действующим правилам — основной вид. Они выглядят так: «»
• Дополнительные кавычки используют для выделения текста внутри уже оформленной елочками цитаты. Они выглядят так: «»
• Английские кавычки применяют для выделения переводного слова. Они выглядят так: ‘’

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

Есть сервисы по автоматической замене символов, например — Типограф.

Показываем и рассказываем

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

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