VI Международная студенческая научная конференция Студенческий научный форум - 2014

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

С помощью стандартных шрифтов трудно сделать что-то оригинальное. А нестандартные шрифты – это различного рода креатив. Такие шрифты более выразительные и их большое количество, они могут являться неотъемлемой частью бренда, поэтому каждая компания стремится активно их использовать, раз появилась такая техническая возможность. Большую роль при выборе шрифта играет его целесообразность и соответствие способу использования и возложенным на него задачам, ведь шрифт – это не просто оцифрованный набор букв, созданный кистью на бумаге или в иллюстраторе, это еще и 98% доводки и полировки, хинтовки и тестирования на различных носителях и в разных размерах. Такой шрифт хорошо выглядит, его стиль отточен, с ним не возникнет проблем ни на принтере, ни на экране, от него веет добротностью.

Отрисовкой шрифтов занимается специальная графическая подсистема ОС: в Windows это GDI или DirectWrite, а на OS X и iOS — CoreText (а раньше QuickDraw). Всего есть 3 распространенных механизма растеризации (рендеринга) шрифтов: двухцветное (черно-белое) пиксельное (рис. 1), монохромное пиксельное (его еще часто называют antialiasing или обычное сглаживание) (рис. 1) и субпиксельное (рис. 1). Субпиксельное использует особенность ЖК и плазменных дисплеев, где каждый пиксель разделен на 3 части (красную, зеленую и синюю), для того, чтобы увеличить горизонтальное разрешение отрисованной картинки и повысить четкость.

Рис. 1.

Однако браузеры могут самостоятельно выбирать способ отрисовки, из тех которые предоставлены ОС. Например, в составе GDI есть 3 варианта рендеринга: ч/б, обычное сглаживание и субпиксельный ClearType (рис. 2). Особенность последнего в том, что сглаживание происходит только по горизонтали, в соответствии с расположением субпикселей. Именно поэтому при его использовании мы часто наблюдаем ужасные зубцы на горизонтальных и диагональных штрихах шрифта. К счастью, Microsoft начала потихоньку совершенствовать механизм, и на смену GDI пришла технология DirectWrite(рис. 2), где таки появилось сглаживание по вертикали. Сравните:

Рис. 2.

А теперь попробуем выяснить, что же еще влияет на отображение. Иногда способ растеризации лучше задавать вручную. Например, в браузерах с движком Webkit можно использовать CSS-свойство -webkit-font-smoothing и включить вручную обычное сглаживание вместо субпиксельного, и наоборот.Нельзя забывать и про размер шрифта (font-size). Форма контуров, контраст штрихов и читаемость могут сильно отличаться для разных кеглей. Отложите графический редактор и посмотрите, как веб-шрифт выглядит в браузере, в боевых условиях (рис. 3).

Рис. 3.

Еще один способ сгладить недостатки сглаживания — это управление цветом и контрастом. С целью ослабить эффект хроматического контура (при использовании ClearType проявляются желтые и пурпурные контуры по краям), можно попробовать ослабить тональный контраст, приблизив цвет фона к цвету текста (рис.4). Однако, данный способ опасен, стоит не забывать о пользователях с ослабленным зрением.

Рис. 4.

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

Когда вы «покупаете шрифт» – это ближе всего к покупке ПО, когда вы получаете лицензию на его использование, а не права на сам файл программы. Получается, юридически скомпилированный файл шрифта — это программа. Модификация и изменение, если этого не разрешает лицензия, рассматриваются как нарушение авторского права. Удобный способ покупки шрифтов – через каталоги шрифтов (Fonts.com, MyFonts, Ascender, Typekit). Вы сможете просмотреть, сравнить и выбрать один из имеющихся вариантов использования, оплатить картой. Для компаний проще всего будет напрямую связаться со студией-производителем или же предоставить покупку шрифтов заказчику.

СПИСОК ЛИТЕРАТУРЫ

1. «20 вопросов про веб-шрифты» [Электронный ресурс] – Режим доступа: http://habrahabr.ru/company/adv/blog/184864/ – Загл. с экрана.

Код для цитирования: Скопировать