Мини-учебник — руководство по комбинациям шрифтов

«Типографика — это двухмерная архитектура, основанная на опыте и воображении и управляемая правилами и удобочитаемостью». — Герман Цапф

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

Хотя веб-шрифты были технически возможны в конце 90-х годов, они не получили широкого распространения до 2009 года, когда стал доступен формат WOFF и часть открытых стандартов W3C. Это открыло совершенно новый мир типографских возможностей для дизайнеров.

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

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

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

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

Тип Характеристики

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

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

Классификация

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

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

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

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

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

Масса

Вес относится к толщине шрифта внутри гарнитуры. Тонкий, обычный, полужирный, полужирный и черный являются примерами весов.

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

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

Стиль

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

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

Контраст

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

Контраст при комбинировании шрифтов относится к любому способу различия шрифтов, включая классификацию, вес, стиль и структуру.

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

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

Например, сочетание более обычного шрифта, такого как Amatic SC, с очень формальным шрифтом, таким как Baskerville, приведет к конфликту, а не к контрасту. Но сочетание чего-то вроде Amatic SC с другим случайным шрифтом, таким как Josefin Slab, работает прекрасно.

X-высота

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

Структура

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

Настроение

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

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

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

Оформление, цвет и текстура

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

Эффективные комбинации шрифтов

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

В Work Notes шрифт с засечками Adobe Caslon Pro сочетается со шрифтом Interstate без засечек, чтобы создать комбинацию шрифтов, которая имеет кивок в сторону традиции, не чувствуя себя устаревшим или старомодным. Сочетание разных начертаний и стилей добавляет дополнительный визуальный интерес и делает типографику более сложной, чем она есть на самом деле.

Adjuvant Capital использует современный, немного причудливый шрифт с засечками Orpheus Pro в сочетании с современным шрифтом без засечек GT America. Для фирмы, предоставляющей финансовые услуги, это очень современный выбор, но он хорошо сочетается с их миссией социально ответственного глобального инвестирования.

Bloomscape использует повседневный шрифт с засечками Morion вместе с шрифтом без засечек Raisonne для создания яркого современного типографского дизайна. Морион не обязательно будет очевидным выбором для основного текста из-за его более декоративных форм букв, но при использовании соответствующего размера (как здесь) он отлично подходит для более коротких фрагментов основного текста. Raisonne имеет схожие декоративные формы букв, что позволяет двум веб-шрифтам прекрасно работать вместе.

Vogue использует современный элегантный шрифт с засечками Savoy в сочетании с гротескным шрифтом без засечек Franklin Gothic, который был первоначально разработан в 1902 году. Сочетание этих двух создает высококлассный дизайн шрифта, который привлекает культурную аудиторию, на которую нацелен журнал.

Южный журнал о стиле жизни Garden & Gun имеет более сложную типографику на своем сайте, чем другие, представленные здесь, что действительно выделяет его. На сайте используются четыре основных шрифта: в заголовках основных статей используется шрифт Domaine Display с засечками; основной текст и некоторые заголовки на главной странице написаны шрифтом Domaine Text с засечками; метаинформация, навигация и заголовки разделов используют шрифт без засечек Avenir Next; а заголовки дополнительных разделов на главной странице выделены шрифтом Domaine Sans Display.

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

Ваш выбор шрифта так же важен, как и то, что вы с ним делаете.

— Бонни Сиглер

Заключение

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

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

Дальнейшее чтение в блоге Toptal Design:

• Дизайн для удобства чтения — руководство по веб-типографике (с инфографикой)
• Понимание нюансов классификации шрифтов
• Анализ тонкостей анатомии типографики (с инфографикой)
• Как структурировать эффективную типографскую иерархию
• Стили шрифтов для веб-дизайна и полиграфического дизайна