Стереотип о том, что для чтения с экрана компьютера подходят только шрифты без засечек, со временем потерпел крах. В это время в журналах и газетах в качестве гарнитур используются исключительно антиквенные гарнитуры, например, Times. Здесь важную роль играют два фактора.
Первый – это увеличение размера экранов и улучшение качества передачи цветов и чёткости изображения.
В последнее время практически не используются старые ЭЛТ мониторы с маленьким разрешением, мерцающим экраном, ограниченной цветопередачей и выпуклым экраном. Их можно даже не брать в расчёт, так как почти все пользователи персональных компьютеров перешли на плоские жидкокристаллические мониторы.
Изменились и негласные стандарты для разрешения: если в самом начале развития веб-типографики сайты создавались для разрешения экрана 640 на 480 пикселей, а затем для разрешения 800 на 600 пикселей, то сейчас стандартом является разрешение 1024 на 768 пикселей. Появились широэкранные мониторы с высоким разрешением и стандарт разрешения мог быть изменён на 1280 на 960 пикселей. Но в последнее время среди пользователей интернета особенно популярны различные компактные устройства: нетбуки, смартфоны, коммуникаторы, планшетники, поэтому не исключен вариант изменения в будущем стандарта разрешения в меньшую сторону.
Но в рассматриваемом случае это не важно, потому что сейчас разрешение экрана напрямую зависит от его физического размера, а величина одной отображаемой точки достаточно мала по сравнению с пикселями десятилетней давности, что позволяет на любых современных устройствах отображать шрифты одинаково качественно.
Это приводит ко второму фактору: экранное сглаживание шрифтов используется всё активнее. Практически любая операционная система предлагает пользователю включить экранное сглаживание шрифтов (антиалиасинг), существуют даже технологии субпиксельного рендеринга. Это открывает для дизайнеров сайтов новые горизонты. Раньше приходилось подбирать размер шрифта в пикселях, чтобы он хорошо вписывался в общий дизайн и не рябил в глазах, сейчас же дизайнер использует более привычные параметры, указывая размеры шрифтов в пунктах (pt) или эмах (em) не думая о том, сколько пикселей будет занимать каждая строчка текста.
При наличии экранного сглаживания шрифтов вёрстка сайта ничем не отличается от вёрстки печатного издания, во всех аспектах проявляется формула WYSIWYG (What You See Is What You Get – «что видишь, то и получишь»). Дело остаётся за малым, воздействовать на посетителей сайтов, чтобы они использовали на своих компьютерах экранное сглаживание шрифтов.
Многие производители операционных систем уже позаботились об этом, например, компания Apple в операционной системе MacOS предлагается только один тип отображения шрифтов – с экранным сглаживанием. Есть возможность отключить антиалиасинг для кеглей меньше 12 пунктов, но всё равно все большие кегли будут сглажены. Операционная система Windows Vista отображает все шрифты сглаженными по умолчанию, используется технология ClearType для TFT-дисплеев. Windows XP предлагала промежуточный вариант – большинство кеглей не сглаживаются, а очень крупные получают какой-то не самый удачный рендер экранного сглаживания. Но во всех операционных системах Windows можно принудительно отключить экранное сглаживание, тогда можно будет поностальгировать и посмотреть на зубчатые буквы, какими они были в 80-х и 90-х годах. В Linux с графическими оболочками в последнее время так же применяется экранное сглаживание шрифтов.
Самый лучший алгоритм антиалиасинга всё же предлагает компания Apple, по сравнению с ним способы экранного сглаживания, предлагаемые программой Adobe Photoshop (sharp, crisp, smooth, strong), кажутся хуже.
Есть и ярые противники экранного сглаживания шрифтов в веб-типографике. Они отключают антиалиасинг и создают эскизы в программе Photoshop, подбирая старые шрифты, оптимизированные для вывода текста без сглаживания. Но с каждым разом снова убеждаются, что читатели просматривают созданные сайты совсем иначе, чем задумывали противники сглаживания. Действительно, стоит на пару часов включить экранное сглаживание, например, в MacOS, и затем отключить его. Сразу станет сильно заметно, как рябит в глазах при чтении, и как быстро устают глаза. Становится понятно, что архаичные пиксельные буквы, на самом деле годные лишь для первобытных игр и программ под компьютеры с чёрно-белыми мониторами CGA, выглядят нелепо и даже глупо.
Так что же ждёт нас в ближайшем будущем в области веб-типографики? Попробуем разобраться в этом.
Совсем скоро появятся новые языки разметки и средства стилевой вёрстки (HTML 5, XHTML 2, CSS 4 и т.п.). Они позволят внедрять в веб-документы любые шрифты, как это реализовано в Acrobat и Flash. Также стоит отметить факт повсеместного использования качественных систем отображения данных и продуманных алгоритмов отрисовки линий, кривых и шрифтов.
Всё это указывает, что в данный момент мы находимся на пороге открытия полной свободы для веб-дизайнеров. Теперь не нужно задумываться и беспокоиться о том, что посетитель увидит текст не так, как было задумано дизайнером. Веб-дизайнеры могут реализовывать любые, даже самые смелые и необычные задумки, не имея никаких ограничений. И посетитель сайта обязательно оценит все эти задумки. В этом смысле веб-типографика приближается к полиграфии. То, что казалось многим веб-дизайнерам несбыточной мечтой, скоро станет вполне реальным и доступным.
Но в настоящее время всё не так радужно, ведь большинство сайтов и сейчас создаётся старыми способами. Девять из десяти сайтов содержат строки родом из 90-х годов, скопированные друг у друга. В худшем случае это <font face=”Tahoma, Arial, Helvetica; sans-serif” style=”font-size: 11px;”>, а в лучшем – то же самое, только с указанием параметров font-family: Tahoma, Arial, Helvetica, sans-serif; и font-size: 11px; в каскадных таблицах стилей. При этом подавляющее большинство дизайнеров забывает о междустрочном расстоянии (интерлиньяже), оставляя стандартные плюс два пункта к кеглю шрифта. А ведь известно, что чаще всего шрифт читается лучше, если междустрочное расстояние больше. И ещё можно поиграть с трекингом и кернингом… Возможностей масса, но веб-технологии пока не располагают средствами взаимодействия с сотнями заданных кернинговых пар. Даже с включенным сглаживанием, с идеально подобранной цветовой гаммой и общей аккуратностью макета, сайты выглядят как то не так. Именно это и не нравилось клиенту, про которого говорилось в начале первой статьи.
Если просмотреть таблицу стилей сайта apple.com, можно обнаружить там строку
/* TYPE */
body { font: 12px/18px “Lucida Grande”, Arial, Verdana, sans-serif; background-color: #fff; color: #333; }, и всё сразу становится на свои места.
На сайте apple.com в качестве основы для всего текста используется шрифт Lucida Grande, который входит в систему MacOS X. Для других операционных систем необходимо использовать шрифты Verdana либо Arial. Такое решение немного непонятно, ведь там где есть шрифт Verdana, есть и Arial, поскольку он был включён в набор почти всех операционных систем раньше. Чередование этих шрифтов следовало бы поменять местами. Но не будем зацикливаться на этом, пусть это останется особой идеей разработчиков сайта apple.com.
Независимо от размера шрифта используемое междустрочное расстояние не изменяется и постоянно равно 18 пикселям. Это создаёт так называемую жёсткую сетку вёрстки, похожую на ту, которая создаётся в программах InDesign и QuarkXPress (align to baseline). Благодаря жёсткой сетке, строчки в стоящих рядом колонках не скачут и появляется ощущение деловой строгости и оптимального взаимодействия всех текстовых блоков.
Используемый на сайте apple.com шрифт Lucida Grande был разработан специально для компании Apple дизайнерами Charles Bigelow и Kris Holmes. Шрифт входит в большое семейство Lucida, которое используется во всех основных компонентах операционной системы MacOS X. Версия 5.0d8e1 (Revision 1.002) этого шрифта содержит 2,826 глифов в таблице Unicode (2,245 символов) и покрывает весьма широкий диапазон поддерживаемых языков: латиницу со всеми расширениями, греческий, кириллицу, арабский, иврит и тайский язык.
Но получается, что сайт таким, каким он был задуман создателями, могут увидеть только пользователи MacOS? Фрагмент сайта показан на рисунке.
Однозначного ответа на этот вопрос дать нельзя. Ответ положительный, если посетитель сайта, зашедший с другой операционной системы, не указывает принудительной замены всех шрифтов, используемых на сайте на свой собственный. Пользователь ОС Windows увидит такую картинку со шрифтом Arial ( здесь использована функция принудительной замены шрифта, реализованная в браузере iCab):
На первый взгляд всё смотрится неплохо, но если побродить по страницам apple.com, появляется утомление от чтения текста и страницы кажутся вялыми. Это особенно заметно на «тёмных» страницах. Стоит только вернуть первоначальный Lucida Grande, как сайт становится более живым и привлекательным, приобретает особый фирменный «эппловский» глянец и лоск.
Так бы выглядел сайт при использовании шрифта Verdana:
Опять же на первый взгляд выглядит нормально, но характерная шрифту Verdana «пузатость» букв и отдельное их расположение вызывает ощущение сырости без необходимой компактности и элегантности текстового блока.
Примерно также выглядел бы сайт с использованием шрифта Tahoma:
Только в этом случае недостатком было бы «прилипание» близко стоящих символов друг к другу.
В любом из приведённых выше вариантов текст хорошо читается, но Lucida Grande по субъективной оценке после просмотра разных вариантов, подходит для этого сайта гораздо лучше. Lucida Grande практически не утомляет глаза при быстром чтении и вызывает ощущение законченности, стилевой ценности и эстетического удовольствия при просмотре. Помимо этого шрифт весьма свеж по характеру своего рисунка.
Именно за этой “свежестью” рисунка пытаются угнаться многие успешные западные издания, которые периодически меняют гарнитуры. На первый взгляд шрифты практически не отличаются друг от друга. Зачем же тогда создатели гарнитур постоянно выпускают колоссальное количество антиквенных гарнитур, которые простому пользователю кажутся полными клонами гарнитуры Times? И по какой причине эти шрифты хорошо и быстро покупаются?
Ответ уже дан выше, дело в субъективном восприятии всей картины целиком. При рассматривании небольших фрагментов текста сложно увидеть различия в шрифтах. Разница чувствуется только на уровне подсознания когда меняется характер отрисовки очка символов, меняется пространственная насыщенность и «тёмность» шрифта. И применение абсолютно нового шрифта придаёт публикации свежесть и абсолютно другой вид, у читателя возникают новые ощущения при просмотре и чтении страниц. Опытные дизайнеры знают об этом и всё время пытаются найти новые интересные неиспользованные никем гарнитуры.
Необходимо отметить, что новые шрифты “работают” только в случае использования латиницы. Количество латинских шрифтов во много раз превышает количество кириллических. Особенности кириллического шрифта не позволяют так интересно оформлять текст, как при использовании латиницы. Русский язык включает в себя много символов, которые выглядят негармонично по рисунку. Например, буквы ъ, ч, щ, г, ц, ь. Также в русском языке нет сверхтонких литер, как, к примеру, в латинице литеры i и l. У литер русского языка очень мало выносных элементов, как в латинских символах d, b, q, j, g, h, k, t. Всё это ограничивает дизайнеров, и они не могут использовать все прелести современной типографики. Но это не причина для расстройства, японским дизайнерам в этом плане ещё хуже. В японском языке три типа азбук, при этом символы имеют очень широкий диапазон по насыщенности рисунка. Это вызывает у читателя ощущения грязи, неряшливости и неаккуратности.
Для того, чтобы наглядно убедиться в этом, достаточно просмотреть несколько русских сайтов и для сравнения китайские, японские и корейские сайты.
Но и в латинице хорошо смотрятся лишь сайты на английском и испанском языке. Во всех других языках есть символы, которые увеличивают детальность в насыщенности шрифта (различные «умляуты» и «акуты»). Наличие слишком большого количества деталей плохо сказывает на восприятии текста читателем.
В следующей части статьи будут рассмотрены варианты для тех, у кого нет под рукой ни операционной системы Mac OS, ни шрифта Lucida Grande. Также будет проведён своеобразный рейтинг экранных шрифтов и сделаны выводы, которые позволяют создавать сайты в соответствии с современными тенденциями в веб-типографике.