Как стать автором
Обновить

Революция веб-типографики с HTML 5? Не так быстро

Время на прочтение 4 мин
Количество просмотров 2.9K
Новое поколение браузеров поддерживает HTML 5, а вместе с ним, кроме всех полезных нововведений, и возможность использовать любые шрифты на веб-страницах. Когда только об этом стало известно, счастью многих веб-дизайнеров (а особенно тех, кто работает еще и с печатью) не было предела. Еще бы, раньше шрифты, подходящие для использования в вебе, можно было пересчитать на пальцах одной руки, а теперь бери и ставь вообще любой шрифт!

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

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

И вот почему


Эта студия из Уэльса, как и многие другие дизайнеры, в том числе и я, работает на Макинтошах. Когда они открывают браузер на своих компьютерах и смотрят на свой сайт они действительно видят красивую типографику. Проблема в том, что пользователи Windows, которые по-прежнему составляют более 90% от всех пользователей интернета, видят все иначе.





Как видно из этих скриншотов, отображение нестандартных шрифтов в Windows варьируется от сносного до безобразного, в зависимости от рисунка шрифта, его размера и типа сглаживания. На Маке шрифт везде выглядит одинаково хорошо. Это происходит потому, что Apple и Microsoft используют разные алгоритмы сглаживания шрифтов.

Историческая справка
Если упростить идеологическое различие в рендеринге шрифтов, то Apple ставит во главу угла рисунок шрифта, в то время как Microsoft – пиксельную сетку. Подход Майкрософта позволяет увеличить четкость отображения шрифта в мелких кеглях, правда для этого приходится разрабатывать специальные экранные шрифты. Их разработка – процесс куда более трудозатратный, чем разработка обычных шрифтов, однако в MS посчитали что дело того стоит и создали специальные мультиязычные гарнитуры, которые поставляются вместе с программными продуктами компании. Все мы их прекрасно знаем – ведь это и есть те самые стандартные шрифты, которые мы используем в веб-дизайне.

10 лет назад, когда разрабатывалась технология рендеринга ClearType, всё это казалось логичным и актуальным. Однако проверка временем показала недальновидность подхода Microsoft. С ростом разрешения экранов, появилась потребность в отображении крупных кеглей, а ClearType справляется с этой задачей из рук вон плохо – рисунок шрифта портится и дробится. Кроме того изначально не вполне адекватная идея разрабатывать шрифт под технологию отображения, а не наоборот, показала свою несостоятельность. За все время существования технологии ClearType было разработано так мало специальных шрифтов, что приходится ровно по одному шрифту на год.

Теперь, когда с HTML 5 мы можем можем использовать любой шрифт на веб-странице, от этого нет никакого толку, ведь эти шрифты на экранах пользователей (пользователей Windows) выглядят ужасно. Думаю, лишним будет говорить, что дизайн, который по сути игнорирует 90% пользователей – плохой дизайн, каким бы красивым он не был для оставшихся 10 (по самым оптимистичным подсчетам).

Таким образом


Из всего вышесказанного становится очевидным, что если мы хотим использовать нестандартные шрифты, но при этом все еще делать качественные сайты, есть только три пути:
  • Все таки использовать только шрифты, оптимизированные под технологию ClearType. Как правило, любой шрифт с качественным хинтингом должен более-менее хорошо отображаться. Узнать оптимизирован шрифт или нет, можно только одним способом – проверить.
  • Подождать. На авторитетнейшей конференции типографов и шрифтовиков ATypI'09 многие шрифтовые дизайнеры были очень воодушевлены открывающимися с HTML 5 возможностями. При этом они всецело понимают как убого выглядят обычные шрифты в браузерах большинства пользователей и планируют разработать много новых шрифтов, специально для экрана. Эти новые шрифты мы и будем использовать.
  • Подождать еще больше. На этой же конференции присутствовал представитель Microsoft Саймон Дэниэлс (Simon Daniels). По его словам, главной проблемой использования нестандартных шрифтов является именно проблема рендеринга. Хорошо, что в MS это понимают и возможно, в новых версиях Windows шрифты уже будут отображаться так же хорошо как в Mac OS. Но ждать придется действительно долго.
В этой статье я еще не упомянул проблем лицензирования, которые уже худо-бедно придумали как решить, а так же проблем отображения шрифтов не на персональных компьютерах. Суть однако в том, что по моему мнению, использование ограниченного набора стандартных и проверенных шрифтов в вебе по прежнему актуально.

UPD
В названии и тексте поста есть существенная техническая ошибка. То, что несистемные шрифты стали поддерживаться новыми браузерами (кроме Internet Explorer, который поддерживал эту функцию уже с 1997 года) одновременно с HTML 5 не означает, что HTML 5 имеет к этому какое-то отношение. Функция отображения несистемных шрифтов реализуется через CSS.
Теги:
Хабы:
+58
Комментарии 145
Комментарии Комментарии 145

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн