Awebdesign's Blog

Как правильно подбирать шрифты

(Перевод Виктории Шидловской статьи Best Practices of Combining Typefaces из журнала Smashing Magazine)

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

Итак, все шрифты делятся на те, что с засечками (serif) и без засечек (sans serif, от французского sans — без). Шрифты без засечек по-русски принято называть рублеными.

И оказалось, что по европейской традиции шрифты с засечками делятся на 4 класса:

Пример старостильного шрифта - Garamond

Old style или Humanist (Старый стиль) – шрифт появился в 1465 г., характеризуется диагональным акцентом (это означает, что самая тонкая часть шрифта находится под углом, а не точно посередине сверху или снизу), небольшой разницей между толстыми и тонкими линиями шрифта, а также отличной читабельностью.

Старо-стильные шрифты делятся на категории Venetian и Aldine (также называют Garalde). Примеры шрифтов класса Old style Adobe Jenson (Venetian), Janson, Garamond, Bembo, Goudy Old Style, и Palatino (все Aldine или Garalde).

Пример шрифта класса Transitional - Times New Roman

Пример шрифта класса Transitional - Times New Roman

Transitional или Baroque (Переходный или Барочный) – впервые появился в середине 18-го века. Эти шрифты наиболее широко распространены, среди них Times New Roman (1932) и Baskerville (1757). Этот класс шрифтов с засечками находится между старостильными и современными (modern), отсюда и название Transitional. Разница между тонкими и толстыми линиями шрифта более отчетливая, чем в старом стиле, но не такая драматичная, как в современном.

Пример шрифта класса Modern - Bodoni

Modern или Didone (Современный) – появился в конце 18-го века. Характеризуется экстремальным контрастом между тонкими и толстыми линиями знака. Современный шрифт имеет вертикальный акцент (тонкие линии точно посередине вверху и внизу), тонкие красивые засечки. Шрифт тонкий, но вертикальные линии очень толстые. Большинство шрифтов класса Modern менее читабельные, чем Old style и Transitional. Примеры шрифта — Bodoni, Didot, и Computer Modern.

Пример шрифта класса Slab serif - Rockwell

Slab serif или Egyptian (Брусковый) – обычно имеет совсем незначительную, если вообще имеет, разницу между тонкой и толстой частью знака. Slab serif обладают «толстым», квадратным видом и иногда имеют фиксированную ширину, что означает, что все знаки и пробелы между словами имеют одинаковую ширину (как typewriter). Иногда такие шрифты называют рубленными с засечками, так как они имеют вид шрифтов без засечек. Slab serif появился примерно в 1800 году. Примеры шрифтов — Clarendon, Rockwell и Courier.

Ну а теперь перейдем к теме статьи — как правильно подбирать и сочетать шрифты при создании макета.

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

Сочетайте шрифты с засечками со шрифтами без засечек (sans serif и serif)

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

На рисунке внизу — типичная текстовая раскладка. На примере слева в заголовке использован Trade Gothic Bold No.2, а в тексте — Bell Gothic. Оба шрифта – рубленые. Однако, у них очень разные «личности». Хорошее правило при создании макета, не привлекать излишнее внимание читателя к виду шрифта. Trade Gothic предполагает серьезность, а Bell Gothic, наоборот – динамику и экспрессивность.

Как правильно подбирать шрифты

Сочетание этих шрифтов вызывает нежелательный дизайнерский конфликт. Trade Gothic хочет перейти прямо к фактам, а Bell Gothic хочет веселиться. Такое напряжение между шрифтами – не наша цель, его следует избегать.

Теперь рассмотрим пример справа. Мы заменили Bell Gothic шрифтом Sabon. Sabon, как шрифт с засечками, очень хорошо работает с Trade Gothic. Они оба нацелены на ясность и читабельность благодаря хорошей высоте знаков (x-height, грубо говоря, это высота строчной буквы x в шрифте, она определяет расстояние между базовой линией и верхней) . Таким образом, у обоих шрифтов одна и та же цель, потому они и составляют отличную пару.

Избегайте шрифтов из одного класса

Шрифты одного класса, но из разных семейств могут запросто вызвать разногласие при их комбинировании. Их ярко выраженные личности будут тянуть одеяло каждая на себя, в результате макет станет «грязным».

На примере внизу, слева, в заголовке использован шрифт Clarendon Bold, который относится к классу Slab serif. В теле статьи использован Officina Serif который также относится к slab serif. Шрифты класса Slab serif отличаются ярко выраженным характером, им нравится доминировать на странице. Использование двух шрифтов класса slab serif в одном месте может вызвать ненужное напряжение.

Как правильно сочетать шрифты

А теперь обратите внимание на правую сторону примера. Clarendon Bold в заголовке поставлен рядом с более нейтральным New Baskerville. New Baskerville относится к универсальному классу Transitional serif с широкими знаками, которые хорошо сочетаются с жирным Clarendon.

Подбор шрифтов из разных классов с самого начала избавит вас от головной боли по поводу макета.

Присвойте шрифтам разные роли

Один из простых способов подбора шрифтов, это составление ролевой дизайнерской схемы для каждого шрифта. В примере ниже мы использовали Akzidenz Grotesk Bold прописными для имени автора статьи. Для заголовка — Rockwell Bold. Вводный абзац и основной текст статьи в одном шрифте – Bembo, но разного размера. И, наконец, подзаголовок — Akzidenz Grotesk Medium.

Присвойте шрифтам разные роли

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

В общей сложности мы использовали 4 шрифта из 3-х гарнитур, все они привели к связанному, сплоченному дизайну, так как у каждого шрифта своя роль, четко определенная в типографической иерархии. Так что если сомневаетесь – распределите роли!

Контрастная жирность шрифтов

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

На примере слева у нас разные размеры шрифта, но недостаточный контраст по толщине. Myriad Light рядом с Minion Bold «пропадает» и теряет визуальный авторитет. Как бы то ни было, но глаз читателя должен в первую очередь выделять заголовок, а не превью.

Сочетайте шрифты разной жирности

Справа мы использовали Myriad Black над Minion нормальной толщины. Возможно, заголовок тяжеловат, но по крайней мере, у читателя не возникает сомнений по поводу того, что читать первым.

Создайте на странице различную тональность текста

В типографии тональность достигается различными способами – толщиной, размером, шириной строк, кернингом и пр. Самый простой способ «увидеть» тональность – смотреть на макет не прямо, а боковым зрением. Посмотрите на пример внизу, направив взгляд немного справа или слева от картинки, так, чтобы вы уже не могли читать текст, но могли видеть его общий тон.

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

Используйте разную шрифтовую насыщенность

Умное использование текстовой тональности усиливает визуальную иерархию на странице, что напрямую связано с передачей смысла сообщения.

Не смешивайте настроения шрифтов

Одна из частых ошибок – незамечание присущего шрифту настроения. Шрифты имеют свою личность. Иногда настроение шрифта может меняться в зависимости от контекста, но несущественно. Одна проблема – неправильно подобрать шрифт для конкретной работы. Но еще большая проблема – составить два шрифта с разным настроением!

На примере слева мы соединили Franklin Gothic Bold и Souvenir. Общее впечатление от Franklin Gothic – мужество, сила, стойкость, но с налетом элегантности. Он не ублажающий взор, но очень функциональный. А Souvenir – игривый, легкомысленный, немного равнодушный, но очень симпатичный. Эти два шрифта рядом, как бифитер перед Букингемом и маленькая девочка, которая пытается его рассмешить. Такое смешение плохо работает. Разное настроение шрифтов привлекает внимание к самим шрифтам, а не содержанию, что свидетельствует о слабом дизайне.

Не смешивайте разные по настроению шрифты

Справа в пару к Souvenir мы поставили более подходящего соседа. У Futura Bold много лиц, но он очень хорошо сочетается с Souvenir по многим причинам. Во-первых, у обоих шрифтов высокие x-height. Оба шрифта обладают округлостью форм и незначительной, но тем не менее заметной закрученностью концов. Ни один из них не доминирует над другим. Оба работают на создание веселого, приподнятого настроения. Напряжения между ними нет.

Сочетайте яркое с нейтральным

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

На примере слева Dax Bold стоит рядом с Bernhard Modern. Плохой выбор хотя бы по двум соображениям.

Сочетайте яркое с нейтральным

Во-первых, Dax имеет узкие знаки и большую x-height, в то время как Bernhard Modern, наоборот, при большой ширине глифов обладает одной из самых низких x-height среди популярных классических гарнитур. Во-вторых, Dax неформальный, современный и яркий. Идеально подходит при подачи текста технарям, компьютерщикам и вообще современной молодежи. Bernhard Modern, наоборот, классический, спокойный, рафинированный и даже немного личный. Объедините неподходящие физические характеристики шрифта с личностными, и получите очень плохо функционирующую типографику.

Взглянем на более удачный выбор. В правой колонке Dax Bold поставили рядом с Caslon. Caslon относится к классу Old style (Старый стиль), но был модернизирован и смягчен для лучшей сочетаемости с другими шрифтами. В данном контексте он выглядит удовлетворительно рядом с Dax. Заметьте, как в первую очередь мы видим личность Dax в заголовке, и как Caslon отступает назад и приглашает нас к чтению. В этом примере Caslon является нейтральным выбором для поддержки более яркого Dax.

Избегайте несоизмеримых сочетаний

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

Слева мы поставили Antique Olive Nord – чрезвычайно жирный шрифт, — рядом с Garamond Narrow. Контрастный перебор очевиден. В большинстве подобных случаев, такой контраст идет дальше обычного привлечения внимания и вызывает ощущение неуклюжести. Следовательно, он не доносит до читателя смысла текста.

Избегайте слишком большого контраста

Справа в заголовок мы поставили Antique Olive Nord. Garamond Narrow мог бы быть заменен на тот же Garamond в варианте book weight, но более хороший выбор — после некоторых колебаний — это Chaparral. У Chaparral более высокая x-height, чем у Garamond, и в общем у него более современный и нейтральный вид рядом с характерным Antique Olive Bold.

Будьте проще – не используйте более двух шрифтов

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

На примере внизу мы составили четкую типографскую иерархию, добились разнообразия, получили интересную разбивку по тональности текста и его возрастающую читабельность. Все это было сделано с помощью всего двух шрифтов. Хотя, строго говоря, у нас здесь пять шрифтов: три Helvetica Neue и два Garamond.

Используйте два шрифта

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

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

Используйте различные размеры шрифта

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

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

Используйте разные размеры шрифта

Справа мы использовали те же два шрифта, но другого размера. TheMix Italic был значительно увеличен, в то время как New Century Schoolbook уменьшен до более нормального, хоть и все еще читабельного, размера.

Использование различных шрифтовых размеров помогает четко распределить иерархию и увеличить тоновое разнообразие в типографии.

Реклама

комментариев 9

Subscribe to comments with RSS.

  1. Сергей said, on 19.06.2011 at 3:17 дп

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

    Нравится

    • awebdesign said, on 19.06.2011 at 7:43 дп

      Статья посвящена СОЧЕТАНИЮ шрифтов, а не их классификации. И мои «огромные» старания были направлены в сторону помощи дизайнерам при подборе шрифтов в макете.
      С брусковыми — правда, проверила, исправила.
      Насчет остального — у нас в универе был курс, посвященный шрифтам, мы их не только классифицировали, мы их еще и по модульным сеткам рисовали. И, кстати, классификация русскоязычная есть, но в ней нет именно деления внутри шрифтов с зесечками, у нас другая классификация:
      рубленые шрифты — малоконтрастные, не имеющие засечек;
      шрифты с едва наметившимися засечками — среднеконтрастные, с несколько утолщенными концами вертикальных штрихов;
      медиевальные — с умеренной контрастностью и небольшими засечками, близкими по форме к треугольнику; оси округлых букв с небольшим наклоном;
      обыкновенные шрифты — с контрастными штрихами и тонкими длинными засечками, соединяющимися с вертикальными штрихами под прямым углом; оси округлых букв вертикальны;
      брусковые шрифты — малоконтрастные, с длинными утолщенными засечками в форме брусков, соединенными с основными штрихами под прямым углом с едва заметными закруглениями;
      новые малоконтрастные шрифты — с длинными утолщенными засечками, имеющими закругленные концы и соединенными с основными штрихами под прямым углом с небольшими закруглениями.

      И беседовала с человеком, который раньше занимался версткой еще на станках, когда текст набирали металлическими брусками со шрифтом. Было подтверждение, что особым разнообразием шрифтов СССР не отличался. Слишком накладно выпускать металлические шрифты разнообразно.
      А с появлением компов начался массовый обвал безвкусицы.
      В США и Европе все годы нашего застоя напротив развивались рекламное дело и афишное искусство. У нас тоже развивалось, но как-то так, из под палки. А у них развитие дизайна шло такими же темпами, какие мы сейчас в России наблюдаем.
      Так что учитесь учиться у более продвинутых дизайнеров, которые на полвека впереди нас.

      Нравится

  2. Вячеслав said, on 02.01.2011 at 5:14 дп

    Очень полезная статья. Спасибо за перевод. Надеюсь и дальше будете радовать подобными переводами.

    Нравится

  3. Bronx said, on 09.11.2010 at 12:01 пп

    Супер статья! Спасибо)

    Нравится

    • awebdesign said, on 10.11.2010 at 8:57 дп

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

      Нравится

      • M.O.Z.G said, on 25.12.2010 at 9:58 пп

        Хорошая статья, самое правильное начало. Про отсутствие культуры, так проблема как раз в том что она таки была, только теперь про нее никто уже не помнит. Слишком много революций за короткий период времени было. Сначала большевики, потом вот капиталисты. А наши революции характерным тем что очень хорошо умеем выжигать все что было присущее «старому» строю, религию, ценности, традиции, да и людей в общем тоже. Откуда традициям взяться. При социализме формировались новые традиции. Ну точнее как, сначала убивались старые, а потом война, восстановление после нее, многих не стало. Так что на традиции оставалось совсем немного времени, да и те зарезали после перестройки позорным «совком». Нужно было всенепременно ровняться на запад, а как на него ровняться, если его почти сотню лет от нас прятали под ватным одеялом. Можно было взяться за старые дореволюционные и адаптировать их, но их уже никто не помнит, так как большевики упорно выбивали всю царскую «ересь» из умов населения. Да и русский язык уже изнасиловали давным-давно чисто западными примочками вроде всех заглавных в названиях или смешанного регистра. У меня даже пару раз был прикол, когда заказчики просили убрать кавычки-елочки в тексте, и заменить на английские лапки, мотивируя это тем что с елочками непонятно и как-то неправильно, я в ту пору не мог убивать заказчиков, политика фирмы такая была, а следовало бы:)

        Нравится

      • awebdesign said, on 26.12.2010 at 12:56 пп

        А сейчас можете убивать заказчиков? :))

        Нравится

      • awebdesign said, on 26.12.2010 at 12:57 пп

        Блин, в нетерпении — когда вы сайт откроете — заглушка внушает!

        Нравится


Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: