Недавно я сделал редизайн этого блога. И по ходу дела опять пережил рецедив бурного недовольства стандартными шрифтами, которые можно использовать в web дизайне. Вы спросите – ну разве так уж сильно различие между Джорджией и Баскервиллем, чтобы из-за этого переживать? Отвечу так: качественная разница – это часто различие в доли процента. Возьмем мозг. Отношение веса мозга к весу тела у обезьян доходит до 1,9%, у нас – 2%. Т.е. добавить шимпанзе лишних сто грамм серого вещества – и она будет рисовать, писать симфонии, кататься на сноуборде и болтать по мобильнику. Заголовок, набитый Баскервиллем – даже такой незначительный, как «Баскервилль рулит» приобретает величие и глубину. Джорджия – тоже классный шрифт, но все-таки не такой изящный. Но – мне пришлось остановиться именно на нем, поскольку имеющиеся технологии внедрения своих шрифтов в веб-страницу пока оставляют желать. Вот три испробованные мною способа с комментариями:

1. Шрифты от Гугл

Однозначно, самый лучший способ. Прост в реализации, шрифты выглядят отлично. Единственный и главный недостаток: кириллических шрифтов всего 4 (все их вы видите выше). Алгоритм внедрения описан здесь. Зато если вы создаете сайт на английском языке, выбор значительно больше.

2. Cufon (внедрение шрифтов с помощью JavaScript)

Способ хорошо и доходчиво описан здесь. Набором шрифтов в данном случае вы не ограничены. Нужен только .ttf (TrueType) файл шрифта, который вы собираетесь использовать. Однако результат получается, на мой взгляд, ужасный. Шрифты выглядят нерезко, замыленно. По крайней мере те гарнитуры, что я испробовал.

3. Сервис TypeKit

Это платный буржуйский сервис, у которого есть free план, позволяющий использовать 2 шрифта на сайте со средней посещаемостью. Плюсы: большой выбор шрифтов, внедрение реализовано на порядок качественнее, чем cufon. Минусы – нет поддержки кириллицы. Но для заграничных проектов – самое то. 

Простые задачи

Я рекомендую накачать свои типографические мускулы на простых задачах, когда нужно оформить всего одну-две колонки текста. В этом смысле, идеальный пример – блог дизайнера Марка Болтона. Исключительно легкочитаемый, минималистичный, в типографическом смысле – на уровне невидимого мастерства. Обратите внимание, как Марк структурирует свои тексты, пользуясь очень ограниченным арсеналом: меняя размер шрифта, стиль начертания, выравнивание.

Блог Рэя Гловера тоже производит впечатление абсолютной элегантности, текст оформлен одновременно просто, изобретательно и очень эстетично. Чтобы избежать газетной монотонности, Рэй использует очень красиво сделанные заголовочные блоки. Много воздуха, классическая комбинация «Заголовок + легенда» и графично оформленная дата поста (уменьшенная вдвое, она уже не будет так смотреться, ритм, который придают текстовому массиву эти круги с датами, исчезнет):

Ритм и контраст

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

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

PS Присылайте  свои ссылки на сайты с элегантной, читаемой (не в стиле «мусорный гранж») типографикой.