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

Пару слов о шрифтах для сайтов. В нете используют как правило гарнитуры, которые есть на любом компьютере, в целях перестраховки: чтобы тот шрифт, который вы задали для блока, гарантированно отобразился на любом компьютере. Из таких можно упомянуть Verdana, Arial, Trebuchet MS, Lucida, Georgia, Times, CourierCyr, Palatino Liniotype. В упаковки новой винды входит еще и Calibri, а у макинтошей большой популярностью пользуется Helvetica.

Есть один существенный момент. Я не силен в верстке, но многие следующим образом задают шрифт:

Arial, Verdana, Helvetica, sans-serif

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

При этом можно использовать массу других шрифтов, ведь мы научились подключать разнообразные гарнитуры к сайтам. Вариантов использования масса, начиная с SIFR и заканчивая Fontface. Но при этом нужно учитывать одну важную особенность: такие экзотические акценты хороши только в заголовках, причем крупных. На мелком основном тексте (12–14 пикс.) вся прелесть шрифта теряется из-за его разбиения на пикселы.

А сейчас поговорим об общих принципах.

Итак, сабж.

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

Мы используем пока что один шрифт, в этом случае Minion Pro. Как видите, массив текста можно сделать удобочитаемым и красивым, используя возможности даже одной гарнитуры. Но у нас задача подобрать сочетание разных шрифтов. Для этого определимся с какими блоками текста мы будем работать:

1. заголовок;
2. вступление (врезка);
3. основной текст;
4. цитата.

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

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

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

Воспользуемся советом, сделает заголовок гротеском. Для этого берем Myriad Pro, который есть у каждого встречного (хотя он не является системным, он загадочно устанавливается вместе с адобовским пакетом программ).

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

Характерный пример использования безопасных веб-шрифтов: это Verdana в заголовке и врезке, Georgia в основном текстовом массиве. Цитата, опять же, гротескной Верданой.

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

Хорошее сочетание, например, гарнитур Baskerville и Garamond. Здесь мы сталкиваемся с другой характерной особенностью: это свойство сочетаемости шрифтов одного времени. Эти шрифты не идеально подходят, но хорошо смотрятся рядом. При этом Garamond был разработан одноименным автором в 1540-е годы (ага), а Baskerville был создан в Англии в 1757 году. Это и обуславливает то самое «почти». Шрифты примерно разных, смежных эпох.

В цитате я оставил Вердану.

Для наглядности я приведу два откровенно ужасных приема: в первом явное несоответствие шрифтов по времени. Это Bauhaus (начало 20-го века, эпоха Конструктивизма в искусстве) в заголовке и тот же самый «лорд» Баскервиль в основном тексте с Клодом Гарамоном во врезке.

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

 

Еще один интересный способ это использование одного шрифта в разных начертаниях. Такое подходит для шрифтов с большим набором начертаний. Примером можно привести Myriad Pro, но это будет некорректно. Вся разность начертаний у него состоит в контрасте между condenced и обычным, несжатым начертанием. А это по сути два разных шрифта.

Хорошим примером будут шрифты коллекции бюро Paratype:  PF Agora, PF Bulletin, PF Beau Sans.

Попробуем Агору:

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

В заголовке, врезке и цитате Agora Sans (от начертания Black до Thin), в тексте Agora Serif.

Подбор по языковому признаку

Это отдельная тема, наверное даже более масштабная чем предыдущая.

Мы знаем, что разные шрифты разрабатывались не только в разное время, но и в разных странах. Например, французы создали Гарамон, англичане — Баскервилль и Кезлон, итальянцы — Бодони.

Каждый шрифт хорош для своего языка.

Вот и пример:

Franklin Gothic и уже знакомый вам Baskerville для англоязычного текста;

Bulletin и Garamond для французского (Бюллетень – это паратайповский шрифт, но с таким вот национальным уклоном);

Bodoni для итальянского текста.

Ergo,

запомним несколько правил:

1. Гарнитуры для заголовков хороши гротескные, а для текста серифные;

2. Шрифты должны примерно совпадать по времени разработки. Например, эпохи Возрождения, Просвещения, конструктивизма, футуризма имели разные шрифты хорошие не только для текстов тех времен, но даже соответствовавшие форматам книг.

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

4. Помните о языковом принципе.

И на закуску: для какого языка больше всего подходит шрифт Classic Russian? :)