Стандартные веб-шрифты: курсивы и наклоны Пятница 26 Март 2010 12:28:38

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

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

 

Основными (самыми распространёнными) приёмами оформления основного текста в веб, конечно же, является выделение шрифта жирным и курсивным начертанием. Выделение с помощью <strong> и <em> (или font-weight: bold и italic в CSS) чрезвычайно полезные способы выделения, но удачно применимы далеко не ко всем стандартным веб-шрифтам.

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

Наклонный sans-serif

Я столкнулся с этой проблемой в дизайне этого блога, когда использовал Tahoma, как основной шрифт для статей (мои постоянные читатели наверняка это помнят).

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

Для примера, «рыба», выделенная курсивом (Tahoma, «курсив» (на самом деле Oblique)):

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

Теперь тот же текст, в более «мелком с виду» Arial:

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

Второй вариант читается, несомненно, легче и быстрее, поэтому основной шрифт на этом блоге, со временем, я поменял.

 «Почему?» и «Как?»

Когда мы ставим в коде <em> или пишем стили font-style: italic, мы заранее уверены, что увидим на экране курсивное начертание шрифта. Но это не так.

Умные браузеры, конечно, показывают нам то, что мы хотим видеть, но не всегда это то, что есть на самом деле. Те шрифты, которые не имеют курсива (!), мы видим в наклонном начертании — наклоненный вправо прямой шрифт (Oblique), а не специально разработанная для экранного чтения курсивная версия. Отсюда же и все визуальные последствия: изменение пропорций в штрихах, плохая читабельность и восприятие букв.

Из стандартных Windows-шрифтов не имеют курсива:

• Tahoma
• Comic Sans MS
• Impact
• Lucida Console
• Lucida Sans Unicode
• Microsoft Sans Serif

Кроме того, шрифты Arial Black (вполне понятно почему:), Impact, Lucida Console и Lucida Sans Unicode не имеют жирного начертания. Применив к ним font-style: bold или <strong> вы снова получите «математическую модель» жирного шрифта, а не реальный жирный.

Нет проблем у serif

К счастью, у Win-стандартной тройки Times New Roman, Georgia и Palatino Linotype, таких проблем не наблюдается. Единственное, что, в кегле до 18 px, Times заметно проигрывает в рендере своих курсивов — часто проявляется «эффект выпавшик пикселей» как в обычном, так и в жирном курсиве, а лучше всего сглаживается Palatino Linotype.

Злоключение

Чтобы избегать всех вышеперечисленных проблем, рекомендую сначала прочитать этот пост :) и почаще тестировать свои текстовые идеи/дизайны/сайты на сервисах вроде typetester, параллельно просматривая все доступные начертания выбранного шрифта в Photoshop или другом графическом редакторе.

 

Теги:

• сайт
,
• пример
,
• FF
,
• ff
,
• http
,
• тип
,
• стили
,
• web
,
• ё
,
• html
,
• дизайн

Комментарии

• Хм... Нет комментариев... Но вы пожете исправить это!