Стандартные веб-шрифты: курсивы и наклоны

Стандартные веб-шрифты: курсивы и наклоны

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

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

Основными (самыми распространёнными) приёмами оформления основного текста в веб, конечно же, является выделение шрифта жирным и курсивным начертанием. Выделение с помощью <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 или другом графическом редакторе.

* * *

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 41

  1. Михаил, 07.01.2010 в 12:42

    Ой, а у вас тег неправильно проставлен: «typgraphy» вместо «typography».

    Ответить

  2. CSS Ninja, 07.01.2010 в 18:35

    Этот математически просчитанный курсив называется oblique, и он присутствует во многих семействах шрифтов, наряду с italic и bold версиями. Согласен с тем, что для чтения в вебе oblique не подходит, но при создании логотипов широко используется (например, в корпоративных лого, где курсив уже будет перебором). Я к тому, что это не такой злодей, как кажется :)

    Ответить

    • rotor, 07.01.2010 в 19:02

      Oblique = «наклоный, косой». Или мы не по-русски пишем?

      Хотя, вы правы, термин нужно было упомянуть, как и то, что эта стилизация присутствует в CSS. Спасибо за дополнения.

      Ответить

      • rotor, 07.01.2010 в 19:17

        Добавил термин в статью.

        Ответить

      • CSS Ninja, 08.01.2010 в 4:44

        Ну, я учился исключительно по зарубежной литературе и блогах, поэтому в русских терминах не але. Лучше уж написать как я знаю наверняка, чем написать по-русски и ошибиться.

        Ответить

  3. Михаил, 07.01.2010 в 18:57

    Приложите, пожалуйста, скриншоты «рыбы» вместо или вместе с текстовой вставкой. Иначе на в браузерах не под Windows не будет заметна разница.

    Ответить

    • Михаил, 07.01.2010 в 19:10

      В моем /браузере не под Windows/ все отлично видно.

      Ответить

      • Вжаси, 13.03.2013 в 13:37

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

        Ответить

  4. blogavod, 08.01.2010 в 18:36

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

    Ответить

  5. zazik, 02.02.2010 в 19:59

    Я вообще не думал об этом. всегда использовал стандартные.

    Теперь буду пользоваться вашим советом

    Ответить

  6. Semen16, 12.02.2010 в 21:02

    Я тоже мало уделял внимания шрифтам. А теперь думаю что может зря. Спасибо.

    Ответить

  7. Dashuha, 15.02.2010 в 20:15

    ну надо будет как то со шрифтами поэкспериментировать, но руки пока до этого не доходят. соглашусь, пост хороший, автору плюсик:)

    Ответить

  8. Ruslanka, 18.02.2010 в 17:20

    а шрифт с засечками вообще для блогов подходит? Или повсеместно без засечек используют?

    Ответить

  9. Romul, 27.02.2010 в 23:57

    Мда, выбор шрифтов для веб и так не богатый, а тут еще не у всех есть курсив.

    Ответить

  10. Zerohold, 01.03.2010 в 15:13

    Шрифты это 50% залога успеха блога.

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

    На самом деле подбор шрифтов это не очень важная составляющая сайта.

    Рекомендую не пожалеть время и уделить этому вопросу еще больше внимания чем даже в этой статье затронуто.

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

    Ответить

  11. Александр, 02.03.2010 в 17:18

    Я напротив хотел поменять стандартные шрифты но не знал как. Спасибо за статью.

    Ответить

  12. sanya, 07.03.2010 в 11:04

    Берем за урок. Спасибо

    Ответить

  13. Апокалиптик, 10.03.2010 в 15:40

    Да уж в дизайне все тонкости важны. У самого никак не дойдут руки поработать над тем, чтобы подобрать хороший шрифт.

    Недавно читал статью что у Лебедева часто тырят его шрифт, шрифт называется что то вроде «Artemi», шрифт реально красивый.

    Ответить

  14. Алексей, 10.03.2010 в 16:17

    Хорошо себя ведет Segoe UI как обычный, так и italic.

    Причем это хорошая альтернатива Arial, их можно и чередовать для получения разнообразия на страницах

    Ответить

  15. Darkin, 13.03.2010 в 23:09

    Я, конечно, знал, что шрифт важен для блога. Читателю надо, чтобы все хорошо просматривалось и читалось. Но нюансов, оказывается, много. спасибо за пост!

    Ответить

  16. seowords, 19.03.2010 в 13:31

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

    Ответить

  17. Роман, 27.03.2010 в 2:00

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

    Ответить

  18. Mashkovtsev, 09.04.2010 в 23:16

    Всегда много внимания уделяю шрифтам. Очень не люблю, когда на каком-нибудь сайте невтемные шрифты...

    Ответить

  19. sergey77, 19.04.2010 в 13:44

    Я на сайтах обычно тахомой 12 пишу. ВРоде красиво смотриться.

    Ответить

  20. Farllok, 20.04.2010 в 12:59

    Взял тоже на заметку, спасибо за статью. Тахомой 12 весде стоит.

    Ответить

  21. лена, 20.04.2010 в 14:36

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

    Ответить

  22. Ike, 22.04.2010 в 16:27

    Лена, а зря не замечаете разницы в шрифтах, это всё-таки важный аспект. Автору спасибо за статью!

    Ответить

  23. CyberMan, 25.04.2010 в 13:19

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

    Ответить

  24. @ Klim, 30.04.2010 в 12:25

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

    Ответить

  25. Denis, 11.05.2010 в 23:31

    Я, признаться, к помощи тестеров никогда не прибегал... Всегда всё на глаз. Нет, ну мнение коллег, друзей спрашивал, конечно.

    Ответить

  26. manyunya, 18.05.2010 в 21:46

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

    Ответить

  27. Converlab, 21.05.2010 в 12:02

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

    Ответить

  28. Гомельчанка, 23.05.2010 в 15:39

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

    Ответить

  29. Agata, 16.07.2010 в 1:11

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

    Ответить

  30. haserk, 07.08.2010 в 18:14

    Спасибо за шрифтики

    Ответить

  31. logvi, 07.09.2011 в 14:29

    Спасибо автор, ато я уже начал искать методы сглаживания шрифтов скриптами))) А после прочтения статьи просто заменил тахому на ариал и счастлив). У меня правда не курсив был, а transform:rotate (353deg);, который корежил текст тоже не хило.

    Ответить

  32. damir-tote, 12.09.2011 в 9:40

    Проблем то особых нет при выборе шрифта, достаточно написать в Ворде и все

    Ответить

  33. @ Онлайн, 16.10.2014 в 19:47

    Ценная информация. Спасибо!

    Ответить

Есть что сказать?