Сочетание шрифтов в веб-дизайне

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

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

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

Комбинатор шрифтов

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

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

Основные составляющие шрифтов

Каркас

Каркас

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

Насыщенность

Насыщенность

Представляет собой отношение толщины основных шрифтов к высоте прямого знака. При изменении этого отношения получаются такие начертания:
Сверхсветлое (Ultra Light, Extra Light, Thin)
Светлое (Light)
Нормальное (Book, Regular, Roman)
Полужирное (Medium, Demi Bold, Semibold)
Жирное (Bold, Heavy)
Сверхжирное (Extra Bold, Black, Ultra Bold)

Аксессуары

Аксессуары

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

Шрифт, начертание, гарнитура, семейство

Шрифт – это система отображения информации при помощи символов, совокупность букв, цифр, специальных знаков определенного стилистического размера и рисунка. Roboto Bold или Roboto Italic – это название шрифта, который вы используете.

Гарнитура – совокупность шрифтов, объединенных общим дизайном. Шрифты в гарнитуре отличаются между собой насыщенностью и начертанием. Гарнитура обычно содержит алфавитно-цифровые, пунктуационные знаки и специальные символы. Roboto или Pt Serif, например, — это гарнитуры.

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

Семейство – это набор объединенных общим стилем гарнитур. Например, Roboto Slab и Roboto Сondensed входят в семейство Roboto.

Гарнитура «Exo 2» имеет 18 начертаний с насыщенностью и наклоном знаков

Шрифт

Гарнитура «Zamenhof» имеет 4 начертания c декоративной обработкой контура знаков

Шрифт

Анатомия шрифтов

Шрифты

Правила сочетания шрифтов

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

Гармоничные сочетания

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

  • Контраст размера
  • Контраст размера и насыщенности
  • Контраст размера и начертания
  • Контраст размера, насыщенности и начертания
  • Контраст аксессуаров и размера
  • Контраст аксессуаров, размера и насыщенности
  • Контраст аксессуаров, размера и начертания
  • Контраст аксессуаров, размера, насыщенности и начертания

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

Контрастные сочетания

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

  • Нет сходства
  • Сходство аксессуаров

Шрифты

  • Сходство художественного стиля

Шрифт Шрифт Шрифт

Плохие сочетания

Абсолютное и необоснованное противопоставление шрифтов, смешивание разных семейств и стилей.

  • Плохая читаемость
  • Слишком похожие шрифты
  • Шрифты моветон

Примеры сочетания шрифтов (ресурсы):

http://fontpair.co
http://typespiration.com
http://femmebot.github.io
http://100daysoffonts.com
https://www.canva.com
https://www.typotheque.com
https://fontsinuse.com
https://www.typewolf.com
https://justmytype.co/

Обсуждение закрыто.