К счастью, типографика - поле, да-а-авно распаханное. Принятые в этой сфере правила и условные обозначения давно сложились и закрепились, и справочных ресурсов в помощь вам развелось превеликое множество. Одна беда - углубившись в Интернет в поисках ответов на ваши вопросы, вы утонете там в море взаимоисключающих мнений! Посмотрим, не удастся ли нам кое-что прояснить прямо здесь.
Вот краткий список аспектов, которые мы последовательно рассмотрим в нашем пособии:
* Как намечать цели
* Сколько шрифтов выбирать для работы
* Покупать или не покупать
* Каков характер вашего контента?
* Как составлять удачные шрифтовые пары
* Пары шрифтов 1-го типа: Гармония
* Пары шрифтов 2-го типа: Контраст
* Пары шрифтов 3-го типа: Несовместимость
Как намечать цели
Помните о главном. Подбирая несколько шрифтов для оформления одного проекта, важно стремиться к органичности, но не ценой утраты своеобразия.
Сколько шрифтов выбирать для работы
Из скольких шрифтов вы будете составлять вашу типографскую палитру, полностью зависит от вас, только не теряйте из виду намеченный к достижению ориентир. Шрифты подобны людям - у каждого свой норов. И, опять же, подобно людям, шрифты порой между собой не ладят. Представьте, будто ваши шрифты - гости за свадебным столом; одного балагура там обычно вполне достаточно, а сразу несколько бравых удальцов вместе могут даже испортить праздник, как в одной из серий шоу Big Brother.
Но непременно разбавьте это общество присутствием хотя бы одной харизматичной фигуры; когда ни одному из восьмерых нечего сказать, в комнате повисает томительное ожидание выступлений с речами по очереди...
Рекламный сайт 2011 года Fusion Ads уже не функционирует, но в моей памяти он остался ярким примером удачного многоярусного совмещения разнородных шрифтов.
Строгих правил, разрешающих или запрещающих использование на одной странице некого количества шрифтов, нет. Совместить разнородные шрифты в рамках общей разметки бывает сложно, достичь органичности в таком деле - трудная задача, но если вам удастся её решить, то результат, наверное, порадует вас своей яркостью и свежестью. Можно упростить себе задачу, сократив количество задействуемых в проекте шрифтов. Старайтесь брать лучшее с обеих сторон, а именно, шрифты, доступные в различных по начертанию и толщине штриха модификациях. Тем самым вы расширите себе выбор оформительских решений, точно зная, что между собой они будут сочетаться безо всяких сложностей.
Покупать или не покупать
Множество бесплатных сервисов открывают нам доступ к ресурсам для внедрения с помощью @font-face: google fonts, fonts.com, fontsquirrel’s font kit generator, но не спешите отказываться от рассмотрения и платных вариантов, если проект того стоит. Цена лицензии на использование материалов в пределах одного домена может варьироваться, но порой и раскошелиться бывает выгодно.
Качество. Старание и тщательность, вложенные в коммерческое производство шрифтов, как правило, отражаются на качестве данной продукции. Это вовсе не означает, что дизайнеры бесплатных шрифтов просто дурью маются вместо дела, совсем нет, но разница в качестве бывает весьма заметной. Особенно, в мелочах; в толщине линий, в проработке контуров, в величине пробелов и мастерстве применения кернинга (настройки межбуквенных интервалов).
Сравните между собой эти два схожих шрифта...
В случае с Museo кернинг выполнен превосходно. А в случае с Quicksand - не столь безукоризненно (посмотрите на "o" и "i", например), хотя видно, что попытка была, но в онлайн-текстах наскоро выполненный кернинг не слишком-то и заметен. Есть инструменты, например, kern.js, позволяющие вам выполнять кернинг посимвольно, но для обработки больших массивов текста они едва ли годятся.
Вы можете сказать: "Подумаешь, велика разница!", но ведь в мелочах бес-то и прячется. Моя бабуля так говорит.
Оригинальность. Ещё одно преимущество - возможность выделиться на общем фоне чем-то необычным. Покупая шрифты, вы повышаете вероятность неповторимости ваших разработок хотя бы в отдельных элементах.
Общественная польза. Поддерживая отрасль материально, вы способствуете её развитию. Шрифтовики повышают своё мастерство, зарабатывая на жизнь честным трудом. Мы, в любом случае, учитываем собственные расходы, выставляя заказчику проекта счёт.
Каков характер вашего контента?
При выборе шрифтов важно учитывать характер материала, с которым вы работаете. Это почти полностью сплошной текстовый массив? Много ли там заголовков и подзаголовков? А может, это журнальная страница со вводными вступлениями и врезками-цитатами? Работая с целой группой шрифтов, используйте их строго по назначению, не путайте "роли"; если подзаголовок уже набран вами одним шрифтом, то и для остальных подзаголовков применяйте этот же шрифт. Пусть будет видно, для чего предназначен каждый из них.
Мы пока ограничимся рассмотрением всего нескольких пар шрифтов. Мы выясним, при каких условиях они будут удачно сочетаться, и спросим себя, почему.
Как составлять удачные шрифтовые пары
Вы это, наверное, уже слышали; удачные парные комбинации образуются по принципу гармонии или контраста, но не путём несовместимого противопоставления. То есть, выбранные вами шрифты могут вместе составить удачное сочетание, если у них есть некие общие черты, либо, наоборот, если они совершенно разные. Однако, признаков несовместимости у различных пар шрифтов довольно много, слишком большое сходство – один из них.
Давайте проанализируем каждый из удачных вариантов.
Пары шрифтов 1-го типа: Гармония
Когда говорят, что два шрифта гармонируют между собой, имеется в виду наличие неких общих для них обоих черт. Сходство может прослеживаться в том, как выполнен кернинг, в их пропорциях, в одинаковой высоте "плоских" прописных букв. Взгляните на примеры, которые приводит Керри Скотт Дженкинс (Kerry Scott Jenkins), и вы заметите явное следование общим пропорциям.
Один из способов составления гармоничного сочетания шрифтов - подбор их пары из одного семейства. Кому же ладить, как не родственникам?! В любом случае, семейство Droid - разработка Стива Мэтисона (Steve Matteson) для устройств на базе Android от Google - включает различные по толщине штриха и начертанию модификации, как с засечками, так и без. Пожалуй, они немного простоваты, зато вместе смотрятся отличной парой. Один из них подойдёт для набора им заголовков, другой - для основного текста.
В любой комбинации выглядят отменно.
Чётко очерченные, современные, к тому же (отвечая вашим ожиданиям), рассчитаны специально на использование в веб-среде и на портативных устройствах - вытянуты по икс-высоте.
Икс-высота шрифта - расстояние от базовой линии до верхних точек символов нижнего регистра, подобных "x". Пропорциональный по икс-высоте шрифт легче читается. Что относится к обоим этим шрифтам.
Шрифты одного дизайнера тоже часто обладают общими свойствами, что повышает гармоничность их сочетаний. Оцените разительное сходство пропорций этих двух шрифтов (обратите внимание на "o")...
Отметьте для себя чёткость проработки контуров этих двух шрифтов. С первого взгляда можно не найти между ними ничего общего, но сочетание двух тщательно отшлифованных шрифтов может оказаться гораздо удачнее, чем вы думаете:
Не менее эффектно могут смотреться рядом и размытые контуры:
Пары шрифтов 2-го типа: Контраст
Контрастное сочетание шрифтов часто оказывается весьма выигрышным, но в чём состоит их контрастность? Вот лишь несколько её аспектов:
* Модификация: Откройте любой сайт, где хранятся шрифты, и вы увидите, в каких категориях они представлены - готические "под старину", моноширинные, "рукописные", с прямоугольными засечками и т. д. Часто контраст достигается за счёт стилистических различий в оформлении шрифтов.
* Размер: Крупный шрифт, мелкий шрифт. Этим всё сказано.
* Толщина штриха: Варьированием толщины контура шрифта обычно задаётся наглядно видная иерархия фрагментов текста. Иерархия по признаку контраста.
* Конфигурация: Оцените пропорции шрифта определённого начертания. Относительную величину подстрочных элементов символов, выпуклость изгибов, направление вычерчивания контуров.
* Цвет: Мы не будет слишком вдаваться здесь в подробности, но по цвету шрифтов сразу видно, могут ли они составить удачное сочетание.
Проще всего проиллюстрировать контрастность, сопоставив шрифты с засечками и без.
Классический способ подбора парных вариантов; для заголовка подойдёт декоративный шрифт с засечками, а для основного массива текста - спокойный, размеренный шрифт без засечек. Или можно заголовок набрать шрифтом без засечек и прочих излишеств, а основной текст - отчётливым, разборчивым шрифтом с засечками. Во многих случаях это наилучшее решение. Давайте рассмотрим несколько примеров, а начнём с двух системных шрифтов. Да, даже они порой неплохо смотрятся вместе.
Где можно увидеть эту пару в действии? Посмотрите на текстовый "ярлык" Skeleton. Никакой мишуры, Georgia и Arial отлично "нашли общий язык".
Немного изящнее...
Помните о характере текста, для которого подбираете шрифты. В приведённых выше примерах иерархия задана через разницу размеров шрифта; заголовки крупнее основного текста. Кто здесь главный, можно показать и иначе, в том числе, наглядно подчеркнув значимость текстового фрагмента толщиной штриха его шрифта.
Предположим, что мы имеем дело не с полноценной текстовой страницей. Допустим, у нас два заголовка и всё (например, объявление о том, что страница на реконструкции). Можно дать себе чуть больше воли, ведь текст наш не слишком вытянут в длину, и его не так много. Что, если нам уравновесить броский h1 основательным h2?
Узкие шрифты всегда привлекают внимание, заполняя текстом много пространства по вертикали.
Вот пример подобной комбинации, составленной очень удачно:
Если вам интересно, то вот краткая справка об использованных шрифтах:
* "Рукописный": Scriptorama Tradeshow JF
* Шрифт основного текста: Actor (Google Web Fonts)
* Заголовок: Авторская разработка Саймона Уокера (Simon Walker)
Ещё один пример резкой контрастности и, вместе с тем, наглядной иерархии, заданной через выбор цвета шрифтов - сразу ясно, "кто есть кто"...
А что вы скажете о двух приятелях без засечек и всяких там претензий? Крупный заголовок в следующем примере набран "полым" шрифтом, специально предназначенным для заглавий (Conqueror). Этот шрифт состоит из одних прописных букв, так что, вам, возможно, придётся слегка расширить межбуквенные интервалы, как показано ниже.
"Полым" называется шрифт с гарнитурой, символы которой насквозь прочерчены по линиям контура белым. – fonts.com"
Увы, его веб-версия нам недоступна (пока), так что, в данный момент приходится пользоваться им лишь для графических построений в пикселах... Определённо, один из моих любимцев...
Взгляните на этот образчик шрифта с брусковыми засечками; одним ударом семерых.
Шрифты с брусковыми засечками очень привлекают внимание публики, но могут ей и "нагрубить", если вы это допустите. Как тот слон в посудной лавке. Приведённый выше пример - как раз удачная пара, более изящный участник которой одновременно и контрастирует с первым, и имеет с ним явное сходство. Эти шрифты кажутся очень разными, но присмотревшись к изгибам их контуров, вы заметите, что не так уж они непохожи.
Среди шрифтов встречаются такие красавцы, что делать на них ставку можно почти без опаски. Например, Buttermilk; воплощение пышности, изысканности и нарядности. Он в любой компании будет смотреться шикарно (разве что вы нарочно попытаетесь его кем-нибудь затмить)! В нашем примере его "дама" - Georgia:
Можно поставить его и с Aller, столь же изящным шрифтом без засечек:
А этот пример был задуман мной для иллюстрации дисгармоничного сочетания данного шрифта – уж слишком яркая "личность" рядом с ним оказалась. Но знаете, что? Я обойдусь без отрицательного примера, ведь они вместе здорово смотрятся! Наверное, лучше не загадывать заранее...
Пары шрифтов 3-го типа: Несовместимость
Давайте не углубляться слишком в рассмотрение неудачных шрифтовых комбинаций, мы же не хотим испортить себе приятное впечатление от всех остальных примеров в нашем пособии, правда? Тогда, предлагаю просто взглянуть на два, вроде бы, очень похожих между собой шрифта, вместе составляющих, тем не менее, совершенно "несъедобное" сочетание.
Но почему же они не сочетаются? Разве не к прочному единству нужно стремиться через контраст?
Стилистика оформления этих шрифтов различна; один готический, другой прямой с засечками, убедитесь сами.
У них разные пропорции; один узкий, довольно большой по икс-высоте, другой скорее растянутый, с более выраженными надстрочными элементами, посмотрите.
Но толщина штриха и размер их одинаковы, и эти причудливые бородки в основании контура символов тоже.
В том-то и загвоздка. Их сходство по последним трём признакам (толщине штриха, размеру и наличию декоративных элементов) нивелирует их индивидуальность. Они решают задачу практически одними и теми же средствами, но различия в мелочах вступают в настолько явное противоречие, что портят общее впечатление.
"Бородки", например, загнуты совершенно по-разному:
Осевые линии не совпадают:
И конфигурирован готический шрифт слегка наклонно в противоположность вертикальному строению прямого:
В других случаях такие различия не испортили бы картину, но здесь у нас два идентичных (на первый взгляд) шрифта. Представьте себе живую знаменитость рядом с её восковой копией в музее мадам Тюссо. Видеть их вместе не слишком приятно.
Трудно выразить собственное ощущение того, что "годится" и что "не годится", языком сухих определений и цифр, обычно вы просто чувствуете, видите это, и всё тут. Поняв, что некое сочетание шрифтов вам не нравится, попытайтесь проанализировать, почему, тогда в дальнейшем вы сможете принимать нужные решения скорее.
Совет напоследок
Сейчас, открыв каталог шрифтов Web Font от Google, вы найдёте там готовые рекомендации по подбору для каждого из них парных вариантов. Неплохо.
Заключение
Надеемся, наше пособие для новичков по подбору шрифтовых пар упростит вам такую задачу. Важнейшее правило, которое вам действительно стоит для себя извлечь, гласит: "Пока сам не попробуешь, не узнаешь!"
Будьте смелее. В нашем, веб-дизайнеров, распоряжении находится постоянно пополняемый новинками архив шрифтов для использования в проектах. Не бойтесь экспериментировать, но с учётом основополагающих принципов. Результаты ваших творческих поисков вас непременно удивят.
