Итак, давайте теперь разберемся, какие шрифты и с каким процентом вероятности могут быть применены в различных ОС или в каких-либо особых случаях (к примеру, установка пакетов MS Office, Adobe Creative Suite, CorelDRAW Graphics Suite) или в «девственных» ОС, что представляет наиболее приемлемый, бесспорно, вариант. Нам нужно также узнать, какие именно из этих шрифтов годятся к использованию в той или иной ситуации.
Вспомним, прежде всего, шрифты, которые применяли ранее и применяют сейчас в тех или иных операционных системах как средство для оформления графического интерфейса, а также в различных служебных приложениях. Не будем пока уделять внимание шрифтам, входящим в стандартную конфигурацию ОС, и предназначенным непосредственно для работы с текстами и вебом (это Arial, Verdana и пр.). Поговорим о них попозже.
В семействе Windows присутствуют такие системные шрифты: Fixedsys, MS Gothic, MS Serif, MS Sans Serif, System, Terminal. Эти шрифты можно обнаружить в любой версии MS Windows, следовательно, они могли бы вполне послужить базой для оформления текстовых фрагментов.
Правда, с одной оговоркой — только при условии выключения экранного сглаживания и указании размера шрифтов фиксированными значениями (10 или 12 px), так как большая часть таких шрифтов являются растровыми, т.е. отображаются корректно только в изначальном начертании. Гарнитура MS Sans Serif успешно использовалась еще 8-10 лет тому назад. Сегодня эти шифры в веб-разработках широкого применениях уже не находят. В Windows Vista применяется масштабируемый системный шрифт Segoe UI, но это мы уже забегаем вперед, более подробно об этом — ниже.
Вот перечень системных гарнитур, которые применялись и применяются (кроме упомянутой Lucida Grande) в различных версиях Mac OS: Apple Chancery, Capitals, Charcoal, Chicago, Courier, Gadget, Geneva, Helvetica, Hoefler Text, Monaco, New York, Palatino, Sand, Skia, Techno, Textile, Times, VT100. Положение здесь более сложное. Одни гарнитуры с появлением System 7 исчезли, хотя в ранних версиях Mac OS находили себе применение. Другим нашлась замена при переходе на платформу OS X — например, появление Charcoal вместо Chicago.
Вывод таков: одновременно увидеть все перечисленные шрифты на Mac не получится, но, по правде говоря, это и не нужно. Поскольку Mac OS X практически вытеснила собой на ПК Apple все предыдущие версии Mac OS, нас должны интересовать только те гарнитуры, которые вошли в состав именно этой операционной системы. Наиболее употребимые из них — Geneva, Helvetica, Courier, Times. До сих пор мы видим их в перечислении шрифтов:
font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
font-family: Georgia, Times New Roman, Times, serif;
font-family: Courier New, Courier, monospaced;
Очень редко, но попадается аккуратное применение и Charcoal, Palatino, Techno. Это больше похоже на исключение, чем на правило. В вебе удельный вес «маков» относительно небольшой. С достаточной степенью приближения можно произвести замену этих шрифтов на подобные в других операционных системах (например, заменой Palatino может послужить Times New Roman, хотя и с существенной натяжкой).
В стандартной поставке ОС семейства Linux перечень шрифтов может быть ещё более разнообразным. В одних версиях Linux могут быть одни гарнитуры, в других – иные, но существует набор X11 core fonts set, который признан более или менее общим. Вот его состав: Helvetica, Courier, Fixed, Terminal, New C.Schlbk, Lucida, Lucidabright, Lucidatty, Charter, Utopia, Times, Palatino, Clean, Avantgarde, Bookman, Zapf Chancery. В среде Linux пользуется также популярностью системный шрифт DejaVu. У него три начертания (Sans, Serif и Sans Mono), а знаки Unicode представлены в весьма широком спектре. В других операционных системах отсутствуют прямые аналоги DejaVu, но с определенным допуском можно утверждать, что DejaVu Sans соответствует Verdana, DejaVu Serif — Georgia, а DejaVu Sans Mono — Andale Mono.
Многие шифры у Mac OS X и Linux практически одинаковы. Немного отличаясь по характеру рисунков, в целом они демонстрируют схожесть: Helvetica, Courier, Times, Palatino.
Это актуально в том случае, когда в системе отсутствует специфическая гарнитура, указанная нами в стиле, так как дает возможность отрегулировать отображение шрифтов.
В данном случае важен очень фактор предсказуемости. Допустим, есть такая ситуация:
font-family: Verdana, sans-serif;
font-family: Georgia, serif;
font-family: Courier New, monospaced;
В ОС Windows будут обнаружены и применены указанные в стиле шрифты, и отображение получится абсолютно верным. В других ОС этих шрифтов может не быть. В этой ситуации используются гарнитуры, прописанные по умолчанию в настройках броузера или непосредственно в настройках ОС как sans-serif (гротески), serif (антиквы) и monospaced (моноширинные). И ничто не гарантирует, что дефолтными шрифтами не служат какие-либо экзотические варианты. Вероятность такого, естественно, ничтожна. Но не исключено, что дизайн сайта «посыплется», казалось бы, из-за мелочи: например, у гротескной гарнитуры, используемой по умолчанию, штрихи более жирные и крупнее очко.
Если поместить до того, как будут указаны обобщающие классы (serif, sans-serif и т.п.), конкретные шрифты, рисунок которых можно заранее прогнозировать и, значит, тестировать, такую ситуацию можно не допустить. Полезными для такого случая как раз и будут шрифты, имеющиеся и в ОС Linux, и в Mac OS. В ОС Windows они отсутствуют, поэтому между шрифтами операционных систем придется установить некоторое негласное соответствие. Представим нашу конструкцию в новом виде:
font-family: (шрифт без засечек), Arial, Helvetica, sans-serif;
font-family: (шрифт с засечками), «Times New Roman», Times, serif;
font-family: (моноширинный шрифт), «Courier New», Courier, monospaced;
Узнаваемо? Подобные схемы встречаются на большинстве сайтов. Не размышляя особо об их назначении, веб-девелоперы копируют эти строки. Иногда бывают непредсказуемые курьёзы, если по неизвестным и непонятным причинам вдруг меняется порядок следования шрифтов. Поменяем, к примеру, Arial и Helvetica местами. Произойдет следующее: первым будет применена в Windows Helvetica, если таковая установлена. Страшного ничего нет? Да, но вы уверены в том, что в системе не оказался неудачный вариант Helvetica — криво нарисованный или не полностью русифицированный?
Чтобы не допустить нежелательные последствия, рекомендуется всегда и во всех стилях применять указанные выше три конструкции именно в таком порядке потому, что все шрифты условно разбиваются именно на эти три группы. Вне нашего внимания остался fantasy (класс декоративных шрифтов). Его проигнорируем, поскольку применения в современной вёрстке он не находит по двум причинам. Во-первых, отсутствуют общие для всех ОС шрифты декоративного назначения. Во-вторых, в употреблении они слишком сложны. Альтернатива есть: равноценной заменой служат изображения или Flash.
Таким образом, если использовать упомянутые конструкции, тот всегда можно предвидеть, каков будет внешний вид страницы в случае, если нужный шрифт система не содержит.
Но давайте стремиться к большему.
Мы уже знаем о том, что стандартным Arial и Times New Roman далеко до идеала. Поэтому сайты с этими шрифтами на сегодняшний день отстают от моды и выглядят грубовато.
Рассмотрим в качестве примера любой параграф Ко/водства Артемия Лебедева. Автор сам нередко противился явно указывать шрифты в HTML, и поэтому в его Ко/водстве текст часто отображается так, как в броузере задано по умолчанию – для идентификации базового текста в файле /kovodstvo/main.css должен присутствовать параметр font-family, а он там не встречается. Таким образом пользователю Mac OS предстанет следующая картинка с использованием шрифта Times, который применяется по умолчанию как serif в Mac OS:
Теперь посмотрим, как этот же текст будет выглядеть в Windows с участием шрифта Times New Roman (в этой операционной системе для serif именно он стоит по умолчанию):
Многие заявят, что нет совершенно никакой разницы между восприятием Times New Roman и Times, глубоко ошибившись при этом.
Дело в том, что рисунок шрифта Times New Roman меняется от кегля к кеглю. И если в средних размерах (12-15pt), несмотря на рендеринг в одном случае в округлой форме, в другом – вытянутой, он вполне прилично читается, то в мелких или, наоборот, крупных кеглях шрифт безобразен:
Особенно трудночитаемым Times New Roman становится при снижении размера базового шрифта до 10 pt. Если хорошо присмотреться к жирному начертанию, то можно увидеть, насколько не отстроены кернинговые пары. Буквы «m» и «e» в слове «Times» сильно отстоят друг от друга по сравнению с такой же точно надписью, но выполненной шрифтом Times (Mac ОС). У букв «Э» и «т» размер засечек гораздо меньше требуемого, а полукружия у буквы «ф» не выдерживают никакой критики. Из-за таких нюансов очень быстро возникает утомляемость, поскольку читается неравномерный шрифт из-за некачественно выполненных штрихов труднее, чем ровная и детально проработанная гарнитура.
Убедились в том, что уважаемый и известный в сети Артемий Лебедев не потрудился позаботиться о ценителях своих нетленных параграфов? Читатели были бы ему благодарны за использование, к примеру, хорошо зарекомендовавшей себя Georgia. Но пусть останется сей факт на совести тех, кто противится явному указанию шрифтов, а в данном обзоре мы пытаемся уяснить для себя способы унификации и, соответственно, облегчения чтения текстов по максимуму из любых броузеров и в любых операционных системах.
Именно эта причина побудила, очевидно, Microsoft подготовить к выпуску в 1996 году набор Core fonts for Web, вошедшего тогда в состав пакета MS Office. Начав с Windows 98, его стали включать в стандарт операционных систем.
Набор Core fonts for Web содержит такой перечень гарнитур:
- Andale Mono -моноширинный,
- Arial — гротеск,
- Comic Sans MS – гротеск декоративный,
- Courier New — моноширинный,
- Georgia -антиква,
- Impact — компактный сверхжирный гротеск,
- Times New Roman — антиква,
- Trebuchet MS — гротеск,
- Tahoma — гротеск,
- Verdana — гротеск,
- Webdings — символьный.
Гарнитура Webdings дополняет уже имеющийся шрифт Wingdings и предлагает целый ряд интересных буллетов и иконок, предназначенных исключительно для веб-дизайна. К сожалению, популярной она так и не стала, хотя многие ее «штучки» веб-девелоперам были бы полезны:
Обратите внимание на то, что набор Core fonts for Web содержит одновременно четыре варианта гротескных шрифтов, не считая Impact и Comic Sans. Моноширинных и антиквенных при этом по два. Случайностью это не является, так как рубленые шрифты, т.е. гротески, гораздо удобнее для чтения с экрана. В мелком размере шрифта это особенно заметно (вспомните Lucida Grande и Myriad Pro). Попытки Microsoft создать «идеальный» вариант гротеска на этом не закончились, в чем можно убедиться дальше.
Поскольку в данном наборе мы достаточно уже разобрались в таких шрифтах, как Arial, Courier New, Georgia, Times New Roman, Tahoma, Verdan, рассмотрим остальные.
Andale Mono применения широкого так себе и не нашел из-за своей непропорциональности — слишком тяжел для повседневного чтения с экрана. Но зато программисты и веб-девелоперы его оценили как замену устаревшей и не очень удобной гарнитуры Courier New. В веб-дизайне Andale Mono неплохо выглядит, например, в подзаголовках, но чаще всего оптимально его используют в статьях по программированию, содержащих большое количество кодов в качестве примеров. Укажите в установках броузера в качестве моноширинного шрифт Andale Mono, если такой у вас имеется, и убедитесь, насколько не годится он для чтения.
Comic Sans MS и Impact — это сугубо декоративные шрифты. Они не подходят для широкого применения в оформлении основных текстов. В сети можно обнаружить страницы, созданные на основе одного лишь Comic Sans MS, но на серьезных корпоративных сайтах, новостных порталах выглядят они нелепо и очень быстро утомляют зрение. Более или менее терпимо они воспринимаются в заголовках юмористической и детской тематики.
Impact был задуман изначально правильно, но реализован на практике не лучшим способом. Рисунок шрифта — компактный сверхжирный гротеск, немного похожий на начертание Helvetica Compressed. Более близким аналогом является коммерческая гарнитура Compacta (Monotype, ITC) – даже названия похожи. Compacta (и его аналог в кириллице Compact у Paratype) вполне пригоден в качестве сжатого шрифта для заголовков, если его определённым образом адаптировать для экранного применения. Бесплатный Impac, увы, в использовании крайне ограничен.
Его проблема состоит в наличии всего лишь одного начертания — сверхжирного (black). Тем более, что реально это выполнено чрезмерно жирно. Шрифт настолько тяжел, что «давит» даже на крупных кеглях. От 18pt и выше его еще можно использовать, но для более мелких заголовков он непригоден в принципе, поскольку создает дискомфорт в восприятии экрана у посетителей сайта своим мрачным и грузным рисунком. Пожалуй, можно привести лишь один образец активного применения этого шрифта — автомобильный портал Drive.ru использует Impact для анонсов и заголовков своих статей. Увидеть этот пример и дать ему оценку могут только те, у которых установлена ОС Windows и, возможно, Linux, так как MacOS X применяет Helvetica CY – в каждой операционной системе используются отдельные файлы CSS.
Абсолютно для всех систем вначале стиль прописывается так:
.title { font-family: Impact, Arial, Verdana, Tahoma, Geneva, sans-serif; font-size: 22px; color: #900; line-height: 18px; letter-spacing: -1px; }
Потом в отдельных файлах css (impact.css, helvetica.css) уточняется — остается ли шрифт Impact для класса .title или заменяется на Helvetica CY.
Обратим внимание на то, что шрифтам Verdana и Tahoma, присутствующим в системе обычно вместе, предшествует более распространенный Arial. Есть ли здесь логика, если ясно, что шанса быть использованным у Verdana, а тем более – у Tahoma, на 100% нет?
Такая странная конструкция – издержки, вероятнее всего, копипаста в процессе создания продукта, когда разработчики, особо не задумываясь, копировали неоднократно информацию с других сайтов, манипулируя со строками, добавляя новые параметры и т.п.
Шрифт Helvetica CY — это какой-то особый «ужатый» подвид этого шрифта, ранее не встречавшийся и документально не оформленный, но на деле очень даже неплохой для заголовков в случаях, когда требуется жирный сжатый шрифт. Одна проблемка все-таки есть — прилипание букв по причине того, что в стиль вписан отрицательный трекинг. Неплохо было бы программистам, обслуживающим сайт, решить этот вопрос, возвратив трекингу нуль в файле helvetica.css. В этом случае получится такая строка:
.title { font-family: Helvetica CY, Tahoma, Arial, Geneva, sans-serif; font-weight: bold !important; letter-spacing: 0px; }
Иначе, вместо слова «Californication», например, в заголовке можно прочитать «Califomication». Но это, скажем, не очень существенные, замечания:
Несмотря на такие недоработки, оправдана целесообразность применения шрифта Helvetica CY на Mac OS. Если принудительно задать отображение заголовков версией Impact с кириллицей (ее нужно искать отдельно, поскольку изначально чаще всего стоит некириллизованная версия), то абсолютно все броузеры в Mac OS дают такую не очень приглядную картину:
Пользователи Windows данный шрифт видят гораздо лучше, но использовать его в любом случае рекомендуется осторожно.
И, наконец, популярный и любимый всеми Trebuchet MS.
Ажиотаж вокруг этого шрифта в англоязычной среде возник еще в конце 90-х годов, русской версии долгое время не было. Русифицированный вариант появился лишь с выпуском Windows XP и MS Office 2007. Тут же новинкой воспользовались давным-давно и завистливо поглядывающие в сторону зарубежных коллег отечественные веб-дизайнеры.
Шрифт Trebuchet MS, разработанный Microsoft еще в 1996 году (автор — Vincent Connare, дизайнер этой компании), получился очень неплохим и стал достойной альтернативой прочим гротескам Microsoft. Одинаково отлично выглядят крупные кегли заголовков и основной текст (вплоть до самого мелкого экранного размера символов — bourgeois, 9pt). Шрифт великолепно читается за счет округлого очка, лёгкого и не насыщенного излишествами рисунка, ряда характерных только для него элементов: наклон бокового ската у буквы «M», низко расположенная перекладина у буквы «A», округлость точек у «i» и «j», оригинальность «загогулин» у «Q» и «g» и др.:
Сравнивая все гротескы в наборе Core fonts for Web, можно убедиться, что исполнение текстов с применением Trebuchet MS выглядит более стильно и легко.
Особенно это касается текстовых страниц с крупными расстояниями между блоками и большими боковыми отступами от левого и правого края (20px и более). То же самое касается увеличенного интерлиньяжа (+ 4-8 пунктов вместо принятых +2 пунктов к кеглю шрифта). Этому шрифту «нужен воздух», стандартные параметры «давят» на него, отчего теряется привлекательность и присущая ему изысканность. Если будете применять Trebuchet MS в своих разработках, не забывайте об этом – в противном случае результат окажется не намного лучше, чем в ситуации с Verdana:
Теперь обратимся еще раз к фрагментам сайта Apple и Ко/водства для того, чтобы представить, как бы выглядели они при замене шрифта Lucida Grande на Trebuchet MS:
Разместим для наглядности оба шрифта рядом:
Неплохо. Не зря популярность Trebuchet MS у дизайнеров ничуть не ниже, чем удачной гарнитуры Georgia. Хотя есть и иное субъективное мнение: предпочесть Myriad Pro в большинстве случаев, если бы он был не менее распространенным, оставив Trebuchet MS для цитат и некоторых подзаголовков.
Беспокоиться по поводу наличия шрифтов Core fonts for Web не стоит. Набор является компонентом Windows, он лицензирован компанией Apple и входит в состав Mac OS X Leopard. Эти шрифты поставляются и с графическими оболочками наиболее распространённых сборок Linux. Практически каждый обнаружит у себя Georgia, Tahoma, Verdana. Русифицированная версия Trebuchet MS встречается в восьми случаях из десяти. Понятно, что об отживших свой век старых Mac OS и практически уже не встречающейся Windows 95 мы не говорим.
В Windows можно обнаружить и ряд других шрифтов – их либо включают в поставку операционной системы, либо они появляются с установкой очередной версии Internet Explorer, либо попадают с содержимым пакета MS Office. В Mac OS эти шрифты тоже можно получить с Office. Попробуйте обнаружить в своем компьютере среди шрифтов следующие: Algerian, Antique Olive, Arial Black, Arial Narrow, Arial Rounded MT, Book Antiqua, Bookman Old Style, Braggadocio, Brush Script MT, Century Schoolbook, Century Gothic, CG Times, Cursive Elegant, Garamond, Gill Sans, Haettenschweiler, Matura MT Script, Modern, Old English, Univers, Zapf Chance. Верстать с ними нужно осторожно, потому что не все из них русифицированы, да и степень их распространения тоже трудно предсказать.
Наверняка рекомендовать из приведенного списка можно Arial Black (это сверхжирный Arial) и Arial Narrow (представляет собой «узкий» подвид Arial). Применение этих шифров иногда встречается на российских сайтах. Нужно предостеречь всех и сказать, что жирные и узкие гарнитуры коварны. В разных броузерах и на разных компьютерах они рендерятся по-разному. Причина этого не ясна. Понятно, что сей факт нервирует разработчиков дизайна сайтов и подталкивает их к поиску обходных путей, например, к работе с изображениями или Flash. Можно поэкспериментировать и с Book Antiqua, Bookman Old Style и Century Schoolbook — это три очень даже неплохих антиквы, которые заменяются в других системах на Palatino:
font-family: «Book Antiqua», Palatino, «Times New Roman», Times, serif;
Названия шрифтов следует обрамлять кавычками, если они содержат пробелы — не забывайте об этом.
В сравнении с Times New Roman, Book Antiqua будет выглядеть так:
Позже мы вернемся еще раз к этим трём шрифтам. А в следующей части будут рассмотрены новые шрифты, содержащиеся в стандартных поставках ОС с тем, чтобы выбрать представляющие наибольший интерес варианты использования в тех или иных ситуациях.
Продолжение следует…
Послесловие…
PS. Здесь умышленно нет примеров, в которых отключено сглаживание. В этом случае победу одержали бы Verdana и Tahoma. Пусть это будет субъективная точка зрения, но несглаживаемый текст — атавизм прошлого, от которого лучше избавиться как от 256-цветной палитры, от меню выбора кодировки (WIN/KOI/DOS/LAT – помните?), от <font face=»» size=»»> и от разрешения 640х480, в которое невозможно было втиснуть сайт. Пришло время беречь зрение и уходить от пиксельных букв, напрягающих глаз — благо, что для этого есть качественные средства отображения. А что касается сглаживания, то его включение снижает утомляемость в несколько раз.
