5 - 2002

Традиционная и электроннаятипографика

Николай Дубина, vedi@d-s.ru

Общие положения

Антиква старого стиля (ренессансная)

Переходные шрифты (антиква барокко)

Шрифты нового стиля (антиква классицизма)

Брусковая (египетская) антиква

Гротески (рубленые)

Свободная антиква (вариа-антиква)

Рукописныеи каллиграфические шрифты

С засечками или без?

Типографика и Интернет

Антиалиасинг

Интернет-технологии

Пункты и пикселы

Изображения в формате GIF

Flash

SVG (Scalable Vector Graphics)

Acrobat

Избранные ресурсы

Сегодня по классической типографике можно найти массу публикаций, а вот в области экранной типографики теоретических и практических исследований российских авторов практически нет, особенно в области Web-дизайна. Например, при написании данной статьи я даже не нашел источников, на которые можно было бы сослаться. Разве что на некоторые статьи в знаменитом «Руководстве» Артемия Лебедева (http://www.design.ru/kovodstvo/).

Правила типографики вырабатывались веками и прошли долгий путь — от каллиграфических школ Китая, с их изысканными иероглифами, до современных взрывных форм Дэвида Карсона (David Car­son). Сегодня даже начинающему дизайнеру понятно, что шрифт не только передает информацию, но при правильном подходе может стать великолепным инструментом для создания определенной эмоциональной атмосферы.

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

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

Общие положения

Многим из тех, кто только приступает к изучению книжного дела, типографика кажется таинственной наукой, граничащей с магией. Загадочная терминология, принципы верстки, подбор шрифтов — все это повергает начинающих дизайнеров в священный трепет. Когда-то так было и со мной. Сегодня я могу сказать, что ничего заумного в этой науке нет. Главное, что вам надо уяснить: типографика — это искусство визуального представления текста. Все остальное — лишь методы достижения конечной цели.

Например, понятие удобочитаемости тесно связано с рисунком шрифта и размещением текста на странице. Не сомневаюсь, что вы легко найдете литературу по этой теме. Однако стиль изложения в различных умных книжках таков, что читать их могут только профессионалы, имеющие не меньший апломб, чем у авторов этих книжек. Вы же должны просто уяснить себе, что методы достижения удобочитаемости — это не просто алгоритм действий типа «в строке не должно быть более 65 символов» или «шрифты с засечками более удобочитаемые, чем шрифты без засечек». Все гораздо проще и в то же время сложнее. Если вы не можете прочитать текст или, все-таки прочитав его, не в состоянии выделить в нем смысловой центр, то перед вами неудобочитаемый текст. Удобочитаемость зависит от рисунка шрифта, расстояния между словами, размера знаков, размещения слов в строке, на листе или на экране. И конечно же, вы должны добиваться соответствия между содержанием текста и его визуальным представлением на странице или экране. Особенно это касается рисунка шрифтов.

У начинающих дизайнеров закономерно возникает вопрос: а почему бы, собственно, не использовать для набора различных текстов какой-нибудь один полюбившийся шрифт, например Bodoni или Helvetica? Это же классика, в конце концов!

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

Вы хотите подчеркнуть (выделить) значение фразы (или слова в тексте)? Выбор шрифта может очень сильно повлиять на конечный результат. Обратите внимание на рис. 1.

Согласитесь, что применение шрифта Techno (сверху на рис. 1) лучше передает смысл написанного, чем использование шрифта Nestor (внизу на рис. 1). На рис. 2 показана обратная ситуация.

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

Освещение проблем книжного и газетно-журнального набора выходит за рамки данной статьи, но в любом случае вы должны понимать, что произведения Пушкина нельзя набирать «Гельветикой».

Также в процессе работы нужно помнить о том, какие ассоциации вызывает тот или иной шрифт. Например, гарнитура SchoolBook (рис. 3) напомнит о букваре и детской литературе, а шрифт Stensil (рис. 4) вызовет воспоминания о надписях на армейских ящиках. Ориентируясь на возникающие ассоциации, и надо использовать шрифты. Хотя и тут есть исключения: многие дизайнеры жалуются, что некоторые шрифты (например, уже упомянутая «Гельветика») «затасканы» до такой степени, что ни с чем не ассоциируются. Но и это не беда — было бы кому взяться за дело!

Обратите внимание на рис. 5. На нем изображен логотип IBM — это очень интересный пример. Для логотипа использован самый обычный шрифт, декорированный горизонтальными полосами. Многие думают, что горизонтальные полоски свидетельствуют о том, что IBM производит компьютеры. Но на самом деле линии появились на логотипе совсем по другой причине: они визуально делают логотип легче, ведь использованный шрифт довольно массивный. А ассоциация с компьютерами возникает от того, что этот примелькавшийся логотип принадлежит очень известной компьютерной компании.

Даже форма букв используемого шрифта ассоциируется у нас с разными историческими эпохами и различными культурами. Значимую роль могут иметь засечки, контраст знаков, орнаментация и многое другое (рис. 6).

Любой шрифт характеризуется такими параметрами, как кегль (size), высота строчных знаков(x-height), линия нижних выносных элементов (descenderline) и др. Он может быть контрастным и малоконтрастным, рукописным или геометрическим гротеском. Сначала все это может показаться вам китайской грамотой, но не отчаивайтесь. Попробуйте для начала обращать внимание только на какой-нибудь один параметр и выделять его в различных шрифтах. Дальше — больше, и со временем придет понимание всего многообразия шрифтов.

Теперь давайте взглянем на шрифты в историческом аспекте. Следует отметить, что история развития шрифта — это, по сути, история развития технологий. И не делайте скоропалительных выводов, что, например, шрифт Didot более современный, чем Bembo! Нет, сегодня это качество можно использовать лишь для подчеркивания стиля эпохи, что часто используется в рекламе (или, к примеру, при наборе стихотворений Пушкина, Шекспира и др.).

Итак, как же выглядит классификация шрифтов, в том числе и в исторической ретроспективе?

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

До начала ХХ века шрифты условно делились на антиквы и брусковые. В Германии и Англии использовался дополнительный вид — готика.

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

Давайте посмотрим, что собой представляет эта классификация и какие современные версии шрифтов из каждой категории имеются в нашем распоряжении (рис. 7).

Антиква старого стиля (ренессансная)

В этой группе шрифтов можно выделить ренессансную антикву Йенсона, антикву Гриффо (конец XV — начало XVI века) — из современных шрифтов им соответствует гарнитура «Лазурский»; французскую антикву Гарамона (середина XVI века) — нынешние версии к ней близких шрифтов «Гарамон» и гарнитура «Мысль»; голландскую антикву ван Дейка (XVII век), нашедшую отражение в современных шрифтах «Таймс Нью Роман» и «Нью­тон».

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

Переходные шрифты (антиква барокко)

К этой категории можно отнести шрифты Кэслона, Баскервилла, Фурнье (XVIII век). Из современных шрифтов им соответствуют, например, «Петербург» и «Нью Баскервилл». Такие шрифты более контрастны, менее разноширинны, их форма обусловлена процессом гравирования, засечки более острые, оси овалов почти вертикальны.

Шрифты нового стиля (антиква классицизма)

К ним относятся шрифты Дидо, Бодони, Вальбаума (конец XVIII — XIX век). Форма этих шрифтов связана уже не с рукописным начертанием букв, а с процессом гравирования на металле. Такие шрифты контрастны, тяготеют к одноширинности, засечки длинные и тонкие, оси овалов строго вертикальны.

Брусковая (египетская) антиква

Эти шрифты изобрели в Англии в начале XIX века для акциденции и выделений. Они практически не имеют контраста, засечки прямо­угольной формы, почти без скруглений в местах присоединения к основным штрихам. Разновидности: итальянские шрифты (брусковые с обратным контрастом), тосканские (с декоративными разрезными засечками), типа Кларендон (малоконтрастные, брусковые, с засечками, скругленными в местах присоединения к основным штрихам). К этой категории относятся такие современные шрифты, как «Балтика», «Ксения Вестерн», «Школьная».

Гротески (рубленые)

Неконтрастные шрифты, без засечек. Были разработаны в Англии в начале XIX века. Широкое распространение получили в эпоху конструктивизма (20-30 годы XX века). Среди их современных разновидностей известны такие, как «Прагматика», «Футурис», «Авангард Готик» и др.

Свободная антиква (вариа-антиква)

Это все антиквенные шрифты, не вошедшие в предыдущие группы: ленточная антиква, антиква-гротеск и др. в стилях модерн, ар деко, баухауз. В качестве примера можно назвать шрифты «Оптима», «Бродвей», «Банниковская», «Новая журнальная».

Рукописныеи каллиграфические шрифты

Тут практически не требуется объяснений. Эти шрифты имитируют написание кистью, пером, шариковой ручкой и т.д.

В отдельные группы, как правило, выделяют шрифты, рисунок которых имеет национальные особенности. Например, готические (текстура, фрактура, ротунда и т.д.), кириллические (устав, полуустав и др.).

При выборе шрифта надо учитывать то, как вы собираетесь его использовать. В этом отношении все шрифты обычно подразделяют на текстовые (наборные) и декоративные. Однако это не значит, что текстовые шрифты не могут использоваться для акцидентного набора.

Декоративные шрифты, как правило, набираются крупным кеглем — от 14 пунктов и более. И это понятно, так как декоративные шрифты в мелком кегле практически нечитаемы (рис. 8). Это обстоятельство особенно важно при подборе шрифтов для Web-публикаций, так как с экрана читать еще тяжелее, чем с бумаги. Удобочитаемость становится определяющим критерием, если текст обязательно должен быть прочитан.

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

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

Давайте посмотрим, какие структурные элементы шрифта влияют на комфортность чтения.

Межбуквенное расстояние. При восприятии текста мы обращаем внимание не только на форму и размер букв, но и на их расположение относительно друг друга. По этой причине очень важное значение приобретает сбалансированность промежутков между буквами (рис. 10). Сегодня во всех пакетах верстки и графических редакторах существует функция кернинга, предназначенная именно для настройки межбуквенных расстояний.

Междустрочное расстояние. Расстояние между строками текста может иметь решающее значение, когда речь идет об удобочитаемости. Если оно слишком мало, то трудно удержать взгляд на строке, если слишком велико — приходится затрачивать дополнительные усилия для перемещения взгляда с одной строки на другую (рис. 11).

Длина строки. Существует не одно мнение относительно оптимальной длины строки (количества знаков в строке). Идеальная длина строки часто определяется второстепенными причинами, например размером печатного поля, размером экрана. С одной стороны, длинная строка затрудняет чтение, так как глазам трудно преодолевать большое расстояние. С другой стороны, если строки слишком короткие, то читателю приходится часто переключаться с одной строки на другую, что тоже утомляет зрение.

Считается, что длина строки в 60-70 знаков (включая знаки пунктуации и пробелы) обычно вполне достаточна и разумна. Однако для небольших массивов текста более короткая длина строки может быть предпочтительнее.

Высота строчных знаков. Различные шрифты при одинаковом кегле могут иметь разную величину строчных знаков (рис. 12). Шрифты с небольшой высотой строчных знаков менее удобочитаемы, со строчными знаками большей высоты не слишком экономичны и требуют увеличенного межстрочного пространства.

С засечками или без?

Сколько копий уже сломано и сколько еще сломается в спорах о том, что же лучше читается — текст, набранный Bodoni или Helvetica? Дело в том, что шрифты с засечками подчеркивают горизонтальное направление и помогают глазу скользить вдоль строки, чем способствуют беглому чтению. Но это тоже слишком упрощенное суждение, которое, как всякое упрощение, способно ввести спорящих в заблуждение. Такие факторы, как степень открытости знаков шрифта, кегль, межбуквенное и межстрочное расстояние, оказывают гораздо большее влияние на удобочитаемость. Кроме того, некачественно отхинтованные шрифты с засечками при отображении на устройствах с низким разрешением (в том числе на экранах мониторов) часто превращаются в символы с нечеткими формами. Это не способствует их широкому применению в экранной типографике, которая приобретает все большее распространение в связи с развитием Интернета.

Таким образом, мы плавно переходим к рассмотрению проблем электронных публикаций.

Типографика и Интернет

Спросите любого хорошего Web-дизайнера о типографике, применительно к дизайну Web-страниц — и вам дадут ответ, смысл которого будет сводиться к следующему: Интернет — это жесткая и непри­влекательная среда для реализации идей, требующих деликатных переходов форм и сочетаний цветов. Причем следует помнить о неполной совместимости между платформами и о сравнительно низкой разрешающей способности экрана. По этим причинам для электронных публикаций можно использовать только тщательно отобранные шрифты.

Самая большая проблема, связанная с использованием шрифтов для электронных публикаций (страница Web-сайта на экране монитора, текст на дисплее Palm Pilot или сотового телефона), заключается в том, что при небольшом кегле даже «Гельветику» бывает узнать довольно сложно (рис. 13). И не важно, какой у вас экран — 72 или 96 ppi.

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

Антиалиасинг

Это понятие означает сглаживание зубчатых краев неких форм путем заполнения соседних ячеек промежуточными цветами (рис. 14). Однако при использовании антиалиасинга текст кажется недостаточно четким. Использовать этот метод рекомендуется, если вы работаете со шрифтами в большом кегле.

Пиксельные шрифты

Шрифты подобного рода появились недавно. Они не имеют сглаженных контуров (рис. 15) и предназначены для набора шрифтом одного определенного кегля, как правило, довольно мелкого. Очень популярны у Web-дизайнеров, так как делают четкими даже мелкие надписи.

Интернет-технологии

Как показывает практика, любые попытки создать «крутой» дизайн в большинстве случаев наталкиваются на проблему кросс-платформенности. Для ее преодоления дизайнерами используются самые различные технологии: HTML и CSS, графика в формате GIF, Flash, SVG и PDF.

HTML и CSS. Спецификация HTML-версии 3.2 (http://www.w3.org/MarkUp/) позволяет Web-дизайнерам задавать лишь несколько параметров шрифтов. Можно выбрать только кегль, цвет и гарнитуру:

<font face=”Verdana” size=”3” color=”#000000”>

Другое дело — каскадируемые стили (CSS). Конструкции типа:

@font-face { font-family: mGillSans; font-style: normal; font-weight: nor­mal;    src: url(stuff/GILLSAN0.eot); }

.gillsans { font-family: mGillSans, Verdana, Sans-serif}

.default { font-family: Verdana, Sans-serif; font-size: 12pt}

.todo { font-size: 14pt; color: #FF0000}

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

Embedding. Отличная идея по внедрению шрифтов формата EOT или OTE вместе со страницей. Но проблема все равно остается. Во-первых, не все браузеры поддерживают отображение внедренных шрифтов, а во-вторых, не все кириллические шрифты адекватно конвертируются в вышеупомянутые форматы.

Метод «дробовика». Этот метод состоит в том, что в процессе создания Web-страниц можно указать не конкретный шрифт, а сразу несколько стилистически похожих. В процессе вывода страницы на экран будет подставляться существующий шрифт, первым встреченный в определенном списке. Например, указав в тэге определения шрифта «Verdana, Arial, Helvetica», можно ожидать того, что текст будет отображен каким-либо из перечисленных гротесков.

Какие же шрифты можно указывать, ожидая более-менее адекватного результата?

Windows Mac OS

Serif Georgia Georgia*

MS Serif New York

Book Antiqua Palatino

Times New Roman Times

Sans-serif Verdana Verdana*

MS Sans Serif Geneva

Arial Helvetica

Trebuchet Chicago

Monospace Courier New Courier

*Georgia и Verdana устанавливаются на Macintosh при установке MSIE, так что, в принципе, у пользователей Maков их может и не быть.

«Verdana, Arial, все похожее»

Наконец-то появилась возможность указывать в тэге определения шрифта конструкции типа «Verdana, Arial, Helvetica, Sans-serif». Пользователи, которые просматривают вашу страницу и не имеют шрифта Verdana, получат текст, набранный Arial, Helvetica или, в случае отсутствия всех указанных шрифтов, чем-то похожим из семейства sans-serif. Согласитесь, это не совсем то, на что вы рассчитывали, но все-таки лучше, чем ничего. Радует, что технологии продолжают развиваться. Например, мне встречался Java-скрипт (http://www.webreference.com/dhtml/), который проверяет список шрифтов, установленных на пользовательской машине, и делает соответствующую подстановку. Правда, подобные изыски умельцев единичны и не имеют широкого распространения.

Пункты и пикселы

Традиционно шрифты измеряются в пунктах. Пункт равен 1/72 дюйма. Однако мы рассматриваем экранную типографику, а при разговоре об экранах приходится опираться на другое понятие — пиксел. CSS позволяет дизайнеру непосредственно указывать размер шрифта в пикселах. Но вот незадача — это может вызвать ряд проблем. Например, сбой принтера, который не сможет при распечатке Web-страницы перевести «пикселы» в «пункты» (это абсолютно реальный случай).

Я не случайно останавливаюсь на частных случаях. CSS является очень гибкой технологией и, используя ее правильно, можно предусмотреть практически любые критические ситуации. Вот пример решения проблемы для страницы, которую будут не только читать с экрана, но и распечатывать на принтере:

<style type=”text/css” media=”print”>

.someClassName { font-family: Bodoni, Georgia, serif; font-size: 10pt }

</style> 

<style type=”text/css” media=”screen”>

.someClassName { font-family: Georgia, serif; font-size: 12px }

</style> 

или если вы прилинковываете стили:

<link rel=”stylesheet” type=”text/css” media=”screen” href=”screen.css”/>

<link rel=”stylesheet” type=”text/css” media=”print” href=”print.css”/>

Изображения в формате GIF

В какой-то момент вы можете решить, что недостаточный контроль над отображением текста, вызванный отсутствием у пользователей необходимых шрифтов, способен вызвать серьезные проблемы. А почему бы не сделать вроде бы «текстовую» Web-страницу, состоящую только из графики? Ведь это действительно выход! Но хорошо ли это? И да и нет. С одной стороны, каждый посетитель увидит страницу именно в том виде, в каком вы ее задумывали. С другой стороны, большие трудности вызовет необходимость оперативного обновления информации, масштабирования текста на экране, да и скорость загрузки существенно замедлится, а потенциальный посетитель редко ждет более десяти минут…

Flash

Говоря о текстах, реализованных в графике, нельзя не упомянуть о великолепной программе Flash (Macromedia), базирующейся на векторном представлении информации.

Она имеет множество преимуществ. Во-первых, это размер: при прочих равных условиях одна и та же надпись, выполненная одним и тем же шрифтом, во Flash «весит» примерно в три раза меньше, чем оптимизированная графика в формате GIF.

Во-вторых, при масштабировании размер растрового изображения в килобайтах будет увеличиваться, а объем надписи, сделанной во Flash, останется прежним.

В-третьих, текст в файле Flash можно легко менять из внешнего источника, например из XML-файла.

Но так ли все хорошо? Конечно, Flash имеет и недостатки. Самый серьезный из них проявляется при использовании антиалиасинга. Дело в том, что Flash делает весь текст в ролике либо со сглаживанием, либо без. Но текст, набранный шрифтом Georgia, 10 пт и отображаемый без сглаживания, выглядит хорошо — четко и контрастно. А вот заголовок, набранный тем же шрифтом, 36 пт, смотрится плохо и явно требует режима антиалиасинга. При больших кеглях достоинство становится недостатком. Интересно, представители Macromedia прочитают эту статью?

Другой недостаток Flash заключается в невозможности распечатать флэш-вставки вместе с содержимым Web-страницы — в результате вы увидите на местах «анимашек» просто белые пятна. Дело в том, что во Flash предусмотрен собственный механизм печати, никак не стыкующийся со страницей, на которой он находится.

Еще один недостаток — часто используемые «самопальные» элементы прокрутки и навигации, никак не согласующиеся с принципами эргономики и usability (http://www.flazoom.com/usability/). Лучше уж стандартные, привычные пользователю панели Windows или Macintosh.

SVG (Scalable Vector Graphics)

SVG, подобно Flash, использует векторный формат. Сравнительно недавно разработанный, он уже утвержден W3C (http://www.w3.org/Graphics/SVG/Overview.htm). Главное же отличие заключается в том, что SVG — текстовый, а не бинарный формат, как Flash. Его исходник выглядит примерно так:

<rect

x=”100” y=”100”

width=”400” height=”50”

fill=”#33cc33”

stroke=”#000000” stroke-width=”2”

/>

Все настолько понятно, что комментарии не требуются, не правда ли?

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

Acrobat

Известная среди дизайнеров и верстальщиков программа. Файлы Acrobat не стыкуются с Web-страницей, а «живут» в собственной замкнутой вселенной, если не считать наличия в них ссылок и поддержку скриптов.

Самым большим преимуществом публикаций в формате PDF можно считать отображение страницы в полном соответствии с задумкой автора.

Избранные ресурсы

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

• Web Page Design for Designers (http://www.wpdfd.com/wpdtypo.htm)
• Microsoft Typography (http://www.microsoft.com/typography/links/default.asp)
• U&lc: Upper & lowercase Magazine (http://www.itcfonts.com/itc/ulc/default.asp)
• FUSE (http://www.research.co.uk/fuse/issues.html)
• Createivepro — fonts (http://www.creativepro.com/category/home/228.html)
• Robin Williams’ Type Talk (http://www.eyewire.com/magazine/columns/robin/)
• Fontsite (http://www.fontsite.com/)
• Type books (http://www.typebooks.org/)
• X-height (http://www.fordesigners.com/xheight/)
• Lines & Splines (http://www.linesandsplines.com/)
• Textism (http://www.textism.com/)
• Typographer.com (http://www.typographer.com/)

Помните, что лучший путь познания — эксперимент. Старайтесь пользоваться всеми доступными вам способами верстки и дизайна электронных публикаций, а затем сравнивайте — и выбирайте лучшее.

КомпьюАрт 5'2002