Типографика в веб-дизайне для начинающих

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

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

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

Начнём с понятий шрифта и гарнитуры. Шрифт — единая стилистическая система графических начертаний букв и символов, набор элементов определённого размера и рисунка. Гарнитура, или ещё можно слышать название «семейство шрифтов» — это группа шрифтов, имеющих схожие характеристики и композиционные законы, но отличающиеся разным начертанием (то есть, тем, с каким контрастом и наклоном эти шрифты выполнены).

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

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

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

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

Оптимально для экранов компьютеров и планшетов — 16−20 px, для мобильных устройств — 14−18 px.

Соотношение толщины основных штрихов к соединительным. Оно очень сильно влияет на дискомфорт или его отсутствие при длительном чтении. В этом можете убедиться сами:

И ощущение «воздуха» в композиции — всегда хорошо (ну, если только кучкообразность не обусловлена стилистическим решением создать напряжение в композиции).

Чтобы читатель быстрее мог анализировать информацию и легко по ней ориентироваться, используются заголовки. Они должны емко отражать суть последующего за ними текста и хорошо отделены. Заголовки также могут быть подчинены друг другу и тут так же играет правило «внутреннее ≤ внешнее», что можно увидеть даже на примере этого текста, который вы недавно прочитали – основной заголовок самый крупный и привлекающий внимание, заголовки к разделам чуть меньше, подзаголовки ещё меньше:

Три способа выделить заголовок:

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

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

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

Элементы списка выделяются числами, буквами или буллетами - маркерами списка. Иногда в качестве буллетов выступают не только точки, галочки и другие элементы, но и иконки, которые способствуют быстрому визуальному пониманию текста - сначала читатель быстро воспринимает смысл из иконок, а затем подкрепляет его, прочитав текст.

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

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

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

Выключка - выравнивание текста - бывает разных видов:

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

Для больших блоков текста считается стандартным использовать чёрное на белом или белое на чёрном.

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

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

Чёрточки бывают разного размера и для разных целей.

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

Минус (alt и 045) — чуть длиннее, чем дефис, но часто может быть заменен на него.

Короткое тире (alt и 0150) — используется между интервалами чисел (1000−2000). Короткое тире не отделяется пробелом.

Длинное тире (alt и 0151) — используется по правилам русского языка, основные из них:

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

Хотелось бы сказать, что, но всё же дизайн — не математика, и правила правилами, но здесь также очень важно чувство вкуса и опыт. Формируйте его через насмотренность: изучайте классные дизайны, современные выставки, а главное анализируйте, почему были использованы те или иные приёмы, и со временем вы почувствуете, что ваши работы стали лучше. Это реально работает :)

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