Интерактивный справочник по типографике: сделайте текст на сайте красивым и удобным для чтения

Что такое типографика?

Типографика (от греч. τύπος — «отпечаток» и γράφω — «пишу») — это художественное оформление текста посредством набора и верстки. При этом для оформления текста используется размер и начертания шрифтов, интервалы между строками, абзацами, разные начертания заглавных букв, стили для заголовков и т. д. 

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

Типографика глазами финского дизайнера

Именно поэтому финский дизайнер-фрилансер Томми Кайкконен (Tommi Kaikonnen) решил в своем блоге опубликовать быстрое практическое руководство с наглядными примерами для тех, кто хочет изменить текстовый облик своего сайта. 

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

Принципы типографики, которые надо учесть

Отображение текста

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

Расстояния и размеры в тексте

Расстояния измеряются в количестве символов, помещающихся в ту или иную строку. 50-80 символов — оптимальная длина строки на странице. Старайтесь соблюдать этот параметр при верстке и выборе визуальных стилей для своих постов и страниц.

Высота строки

Здесь финский дизайнер рекомендует использовать в качестве ориентира значение высоты строки в 150% от размера основного шрифта, используемого на странице сайта.

Другие важные компоненты типографики для вашего блога:

- Визуальная иерархия компонентов / блоков / разделов
- Заголовки
- Абзацы
- Шрифты и их начертания
- Размер шрифта
- Цвета

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

Изображение: Baloncici