Сочетание гарнитур

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

Изображение 1: Типографика работает с одной гарнитурой – Baskerville

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

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

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

Изображение 2: Выбор сочетания гарнитур. Источник: BetterWebType

1. Найдите якорь

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

2. Найдите вторую гарнитуру для возможных комбинаций

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

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

Изображение 3: Google Fonts популярное хранилище шрифтов, но с ограниченными возможностями фильтрации.

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

Изображение 4: На Fonts.com больше коллекция шрифтов и лучше способ фильтрации, чем у Google.
Изображение 5: У TypeKit очень мощная фильтрация шрифтов. Благодаря этому можно отфильтровать по классификации, рекомендациям для абзацев и заголовков, и другим свойствам гарнитур, таким как вес, ширина, х-высота, контраст, стиль рисунка и т.п.

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

3. Оцените комбинации

Я рекомендую делать это в браузере и, при возможности, в нужном контексте. У вас уже есть первичный дизайне вашего сайта? Используйте его. Или у вас есть лишь небольшое представление, как будет выглядеть макет? Сделайте быстрый прототип. Не знаете, как сделать веб-вёрстку? Объединитесь с вашим разработчиком. Не слишком много знаете о дизайне и проекте? Объедините усилия с вашим дизайнером. Помните, обе эти роли очень важны в веб-типографике. Если вы обладаете навыкам одной профессии, то совместная работа – ключ к созданию лучшей веб-типографики.  

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

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

Изображение 6: Старая кирпичная стена и современная мебель в одной комнате. Гармония через контраст. (Источник: home-designing.com).

Как мы можем применить это в типографике? Давайте возьмём гарнитуру Baskerville для нашего основного текста. Baskerville разработал Джон Баскервилл в 1754 году. Это была современная гарнитура в то время и расширяло границы возможного в типографике. В наши дни это считается классикой. Он создает ощущения доверия и тепла. На основании эксперимента, проведенного Эрролом Моррисом, он считается самым надежным шрифтом. Теперь давайте дополним его с гарнитурой Futura с прописными буквами для заголовков. Futura разработал Поль Реннер в 1927 году. Это геометрическая гарнитура без засечек. Она считалась очень современной, когда была спроектирована и до сих пор ощущается как весьма современная. Эта гарнитура – наиболее популярная в вебе на текущий момент.

Изображение 7: Гармония через контраст – Futura и Baskerville (контент адаптирован с idsgn.org).

Наш дизайн выглядит дорого. Люксово. У него есть история, которую можно рассказать. Но главное – он работает. Он использует 2 гарнитуры из разных эпох. Каждая находится в противоположных частях шкал современный/холодны и классический/теплый. Вместе, они выглядят как огонь и лёд, которые превращаются в текущую воду. Гармония через контраст. Это подводит нас к первому типу оценки комбинаций шрифтов: на основании истории.

Основанные на истории

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

Изображение 8: Baskerville и Futura разделяют почти 300 лет.

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

Сочетание гарнитур на основании x-высот

Помните, когда я рассказывал вам запомнить x-высоту в 3-м уроке про анатомию гарнитур? Здесь это пригодится. Другой способ оценить сочетаемость гарнитур – взглянуть на их x-высоты, чтобы увидеть, насколько они совпадают. Как минимум, они должны быть очень близки друг к другу. Гарнитуры с одинаковой x-высотой лучше работают друг с другом, потому что у них одинаковый визуальный вес. Особенно когда это касается вертикального ритма (эту тему мы рассмотрим в следующем уроке).

Изображение 9: Futura и Baskerville имеют одинаковые х-высоты, которые усиливают их в качестве хорошей комбинации гарнитур.

Некоторые гарнитуры созданы для совместного использования

Существуют так называемые супер-гарнитуры. Гарнитуры, которые входят более, чем в один стиль. С засечками и без. Merriweather – отличный пример. Также как Roboto. Вы просто не можете ошибиться, если будете использовать стили одного супер-семейства. Это отличный способ, чтобы начать развивать ваши навыки сочетания гарнитур.

Изображение 10: Некоторые гарнитуры идут со стилями антиква и гротеск. Вы не сможете ошибиться, если будете использовать их.

4. Исключайте или выбирайте комбинации

Опираясь на предыдущие шаги, соответствуют ли гарнитуры одному из критериев оценки? Если нет, вы должны исключить потенциального кандидата. Повторяйте шаги 3 и 4 до тех пор, пока вы не останетесь только с одной гарнитурой. Соответствует ли она вашей гениальной дизайнерской идее? Чувствуете ли вы себя с ней комфортно? Выглядит ли это правильно? Не уверены? Вернитесь к этому вопросу на следующий день. Я не шучу. На текущий момент вы, вероятно, потратили несколько часов, разглядывая гарнитуры и их комбинации. Пришло время сделать перерыв.  После этого вы сможете взглянуть на результаты вашей работы свежим взглядом. Моё личное правило – вернись завтра, и если чувствуешь, что это правильно, двигайся дальше, а если нет – замени это.

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

Смотрите также

Уроки

  1. Введение в типографику
  2. Равносторонний треугольник идеального абзаца
  3. Анатомия гарнитуры
  4. Выбор гарнитур
  5. Сочетание гарнитур
  6. Ритм в веб-типографике

 

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

По материалам https://betterwebtype.com/