Элементы веб-типографики

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

Совет 1: Не ограничивайте себя в выборе размера шрифта

Поначалу мы были ограничены 7 размерами шрифта, которые задавались через тег <font>, к счастью, сейчас CSS дает нам гораздо лучший контроль над шрифтом.

Сравнительные размеры шрифтов

Относительные размеры шрифтов позволяют пользователю адаптировать их размер в соответствии со своими потребностями, поэтому не забывайте проверить как выглядит сайт при различных размерах шрифта. «Em» называется так потому, что 1em равен ширине строчной буквы «m» (equal m), при установках по умолчанию 1em равен 12pt.

Размер не ограничен целыми числами, к примеру, 0.8em отлично подходит для основного текста, и обычно будет равно 10pt. CSS позволяет использовать шрифты любого размера, который требует дизайн, а не ограничиваться 24pt.

Совет 2: Работайте с межбуквенным расстоянием

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

Межбуквенные расстояния для шрифтов различного размера1

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

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

Совет 3: Высота строк и расстояние между словами

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

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

Варьируя расстояние между словами и высоту строк можно точно контролировать плотность текста на странице. Обычно я указываю высоту строки в процентах, 120-140% будет достаточно в большинстве случаев. Читабельность длинных текстов можно улучшить немного увеличив высоту строки (но не более 200%). Малая высота строки (100% и меньше) помогает избавиться от больших разрывов между строками крупных заголовков.

Разрыв в заголовке из-за большой высоты строки

Все методы уменьшающие плотность текста должны использоваться осторожно и осмотрительно, никто не любит читать текст растянутый в 3-4 раза или наоборот чересчур сжатый. Установки по умолчанию были выбраны не случайно, а потому, что в большинстве случаев они соответствуют наиболее читабельному тексту, поэтому изменяя их вы должны четко представлять, что делаете, чтобы не ухудшить читабельность вместо ее улучшения.

Совет 4: Попробуйте использовать старого фаворита по новому

Я уже упоминал о том, что Times New Roman используется только на 5 из 100 лучших блогов2. Когда-то он доминировал в веб, будучи основным шрифтом для большинства браузеров, возможно, именно это сделало его слишком скучным, но если подойти к его использованию творчески и инновационно, Times может быть очень эффектным.

Сравнительные размеры шрифтов

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

Попробуйте нестандартные размеры и плотность текста (или все прописные) и Times будет выглядеть интересно и свежо.

Совет 5: Не бойтесь экспериментировать

Крупные шрифты, плотный текст, разреженный текст, цвет, использование first-letter и first-line могут выделить ваши тексты, среди скучной и типичной веб-типографики. Эспериментируйте и пробуйте новое не только ради читабельности, но и ради создания своего запоминающегося стиля.