10 правил сочетания шрифтов в дизайне

Сочетаем 1: согласование

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

Один из способов сочетания шрифтов – сочетать шрифты из одной семьи. Если они в одной семье, то они должны отлично сочетаться, верно?! В любом случае, семейство Droid, разработанное Стивом Маттесоном для использования на Google Android устройствах, включает огромный набор стилей и толщины текста, шрифты как с засечками, так и без. Возможно не так здорово, как могло бы быть, но эти два отлично работают вместе. Один отвечает за заголовки, другой за текст в параграфах.

Droid Serif и Droid Sans

В любом случае прекрасная комбинация.

Droid Sans и Droid Serif

Они чисты и современны, плюс (как вы и ожидаете)  они отлично подходят для веба и маленьких устройств ввиду их большой x-высоты.

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

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

Cowboyslang и Supria Sans Condensed от Hannes von Döhren

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

Bevan и Arapey Italic

Более мягкие линии могут также отлично сочетаться:

Anodyne и Poulaire

Правила которые помогут вам выбрать нужный шрифт.

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

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

Определите каждому шрифту его задачу и придерживайтесь её.

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

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

Сравните начертание шрифтов: оно должно быть разным. (Например, Didot и Rockwell выглядеть очень плохо вместе по многим причинам, но одна из главных — потому что они оба имеют жирное начертание).

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

Найдите умный способ для создания контраста. Увеличьте трекинг  для одного шрифта и проверьте, как смотрится сочетание.
Не пренебрегайте тем, чтобы использовать различные шрифты из одного семейства.  Например, можно выбрать Helvetica Black для заголовка и Helvetica normal для основного текста.

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

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

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

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

Так вы сможете быстрее и проще создавать различные пары.

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

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

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

Используйте не больше 2 гарнитур. Это даст вам до 8 шрифтов для работы: нормальный, полужирный, курсив и полужирный курсив

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

Измените размер кегля. Сочетание шрифтов может не согласоваться, но если вы измените размер одного из шрифтов, всё станет на свои места.

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

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

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

Нарушайте правила. Найдите свой уникальный способ. Не бойтесь экспериментировать, но делайте это разумно!

Как правильно подобрать сочетание

Теперь, когда мы разобрались с тем, какие бывают шрифты, давайте посмотрим как они работают вместе.

Вот несколько подсказок, которые помогут вам правильно выбрать гарнитуры, которые будут соседствовать на странице.

1. Контраст вместо конкуренции

Шрифты должны контрастировать, а не конкурировать на странице

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

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

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

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

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

2.  Найдите большое и классное семейство шрифтов

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

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

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

3.  Не используйте больше трех разных шрифтов

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

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

4. Работайте с кернингом

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

Однако далеко не все шрифты хорошо выглядят с увеличенным межбуквенным расстоянием.

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

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

В этом примере слово “mozzarella” написано рукописным шрифтом со стандартным расстоянием между буквами, а подзаголовок “the superior cheese” выведено заглавными буквами, шрифтом без засечек и с увеличенным кернингом.

5.  Не используйте заезженные шрифты

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

Некоторые из заезженных шрифтов: Comic Sans, Impact, Arial, Bradley Hand, and Papyrus.

Основные понятия в типографике

Трекинг — расстояния в строке между символами.

Кернинг — регулирование межбуквенного расстояния для каждой отдельной буквенной пары. Например, в сочетаниях букв AW или Го расстояние между буквами может быть нулевым или даже минусовым, потому что одна буква идеально сочетается с другой, как две части пазла. Без кернинга в некоторых комбинациях букв будут огромные непропорциональные апроши — межбуквенные пробелы.


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

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

Гротеск — более современный шрифт без засечек. Читается легче и быстрее антиквы.

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

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

Прямое начертание — это классический машинописный шрифт.

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

Графема — это общий скелет буквы. Букву можно нарисовать или сложить из чего угодно, но благодаря единой графеме вы сможете отличить А от Б.


Разные варианты написания буквы А, соблюдающие общую графему

Насыщенность определяется толщиной линий. Чем толще линии, тем выше насыщенность.

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


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

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


Пример использования акцидентного шрифта с высокой контрастностью

Акцидентный шрифт используют в заголовках, афишах, обложках книг, визитках и так далее

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

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


Примеры наборного и акцидентного шрифта

Пропорциональный и моноширинный шрифты отличаются размерами литер.


Наглядный пример отличий пропорционального шрифта от моноширинного

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

Сервисы, которые помогут в работе

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

Google Fonts

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

Typeconnection

Любите игры? Сервис предлагает освоить навыки в игровой форме, составляя из гарнитур пары для свиданий. Начните с выбора главного героя и подбирайте ему подходящую пару, попутно изучая полезные термины и получая советы.  

Typography

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

Logaster

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

Где брать шрифты.

Шрифты гугл для сайта

Для начала разберемся где брать шрифты для сайта. Сайтов со шрифтами много. Есть как платные, так и бесплатные. Но я рекомендую начать с бесплатных от Google. Для этого необходимо посетить соответствующую страницу http://google.com/fonts/. Ресурс на английском языке, но интерфейс простой и разобраться не сложно.
Если ваш сайт на русском языке, то нужно отфильтровать шрифты с кириллицей. Делается это в левой части экрана.

Как использовать google шрифты и добавить их на сайт

Понравившийся шрифт необходимо подключить к вашему сайту. Для того чтобы браузер посетителя знал какой шрифт вы используете и где его взять. Есть несколько способов, я использую следующий вариант.
К примеру, для шрифта Amiro в начале CSS файла стилей вашего сайта делаем следующую запись:

@import url(http://fonts.googleapis.com/css?family=Arimo&subset=latin,cyrillic);

А в свойствах элемента, который вы хотите отобразить этим шрифтом (пусть это будут все заголовки H1, H2, H3, H4, H5, H6), пишете следующее:

h1, h2, h3, h4, h5, h6 {
font-family: 'Arimo', sans-serif;
}

Если не разобрались, то просмотрите оригинальную документацию по использованию шрифтов от Гугла — https://developers.google.com/fonts/docs/getting_started

Обзор классических и трендовых шрифтов

Bodoni

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

Meta

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

Headline News

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

Futura

Futura — это классический геометрический гротеск и двадцатые годы, когда эстетизировалось промышленное производство. До этого в шрифтах прослеживались следы пера, а здесь пера не осталось: все формы и линии — это либо идеальный круг, либо прямая линия. Даже в сравнении с Gill Sans она выглядит более строгой и геометричной, если сравнить по буквам «a».

Альтернатива Roboto, меняющая представление о том, что такое типовой шрифт.

San Francisco

Первый шрифт от Apple за последние 20 лет, пришедший на смену Helvetica.

Обязательно посмотрите презентацию Apple о том, как его создавали, чтобы понять, что такое типографика.

IBM Plex

IBM Plex — это Helvetica XXI века. Стильный шрифт со своим настроением, комбинирующий плавные рукописные и жесткие «машинные» линии.

Что такое гарнитура

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


Различные начертания шрифта Montserrat

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

Начертание

характеристика

Толщина

Светлое (Thin, Light); нормальное (Regular); полужирное (DemiBold, SemiBold); жирное (Bold, Extra Bold)

Наклон

Прямое, курсивное

Ширина

Узкое (Narrow, Condensed); нормальное; широкое (Wide, Extended, Expanded)

Как упростить работу

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

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

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

Контраст на нейтральности

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

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

С правой стороны Bernard Modern заменен на Caslon. Caslon гарнитура старого стиля, но была модернизирована и приятно играет с другими шрифтами

Обратите внимание как Caslon отходит в тень на фоне более яркого Dax

Хорошие шрифтовые пары для:

Roboto

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

Приятный результат дают:

  • Garamond;
  • Georgia;
  • MS Serif;
  • Palatino;
  • Times;
  • Roboto;
  • PT Serif;
  • Lora.

Текст в Roboto хорош, если заголовок идет тем же шрифтом. Хорошо смотрятся заголовками:

  • Bookman Old Style;
  • Courier;
  • Garamond;
  • Georgia;
  • Palatino;
  • PT Serif;
  • Lobster.

Proxima nova

Лучшими парами к этому шрифту семейства Sans Serif будут:

  • Helvetica;
  • Garamond;
  • Lucida Grande;
  • Georgia;
  • Atrament;
  • Skolar;
  • Futura PT;
  • Century School;
  • Adelle;
  • FF Meta Serif Web Pro.

Для полного понимание как сочетать шрифты смотрите видео:

Montserrat

Еще один шрифт Sans Serif. Лучше всего сочетается с:

  • Source Sans Pro;
  • Open Sans;
  • Lora;
  • Esteban;
  • Lato;
  • Gill Sans;
  • Georgia;
  • PT Serif;
  • Roboto;
  • Tinos.

Контрастность

Контрастность часто бывает выигрышным приемом. Но каким образом можно подобрать такие шрифты?

Вот некоторые способы:

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

Размер: Больший шрифт, маленький шрифт.

Вес: Изменение толщины линий является наиболее распространенным способом выстраивания визуальной иерархии.

Форма: Пропорции шрифта, наклон (нужно применять очень осторожно), противопоставление прописных и строчных букв.

Цвет: Для цвета конечно нужна отдельная статья, здесь можно сказать только что хорошо контрастируют ахроматические (бесцветные) и хроматические цвета, а так же холодные и теплые.

Самый простой способ контрастности это комбинация шрифтов без засечек и с засечками.

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

Пример:

Georga и Arial

Более утонченный пример:

PT Serif и PT Sans

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

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

Bebas Neue и Alex Brush

Уплотненные шрифты всегда хорошо работают для привлечения внимания благодаря своей большой плотности.

Gerren Lamson и Simon Walker

Опять же четкая иерархия через контрастность и цвет.

Alpha Slab One и Mako

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

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

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

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

  • Какой имидж у вашей компании?
  • Какие качества ценят клиенты?
  • Какие качества вашей компании вы хотите подчеркнуть: надежность, креативность, стабильность?
  • Опишите свой бренд в трех словах. Какие бы это были слова?
  • Кто ваш идеальный клиент?

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

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

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

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

Используйте простые и стандартные шрифты. Не слушайте тех, кто говорит, что стандартные шрифты это скучно. С их помощью можно создавать сильные знаки. Пример простой типографики: логотип студии DILETTANT. Денис Башев набрал его с помощью Arial.


Даже Arial может выглядеть хорошо. Лучше пусть текст будем скучным, чем уродливым или нечитабельным.

У многих зарубежных компаний в основе логотипа лежит шрифт Helvetica, например, — старый логотип Microsoft, Lush, Nestle и Toyota.

Не ориентируйтесь на конкурентов. По статистике Tasty Placement, 63% мировых брендов используют гротески, из них треть — Helvetica. Это не значит, что вы должны писать все тексты на сайте и упаковке тем же шрифтом. Контраст не должен быть кардинальным. Достаточно взять шрифт с более яркими выносными элементами или другим типом засечек, выбрать более открытый гротеск, заменить шрифт на антикву или брусковый.

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

Хороший пример того, как можно выделиться среди конкурентов, — это рынок медиа. В соцсетях большинство СМИ оформляет картинки гротесками, но посты The Village заметнее благодаря антикве.

Издание Meduza использует отдельные шрифты для разных рубрик: для новостей — антиква, для историй — гротеск.

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


На картинке пять разных шрифтов — это утомляет. О цветовых решениях даже не говорим.

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

Согласие

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

Один из способов достижения согласия это выбор шрифтов из одного семейства.

Пример: семейство Droid разработанное Стивом Матесоном для использования в первых версиях Android от Google. Шрифт с засечками для заголовков и без для основного текста.

Droid Serif и Droid Sans

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

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

Посмотрите на два шрифта ниже обратите внимание на совпадающие пропорции и овал буквы «O». Cowboyslang и Supria Sans Condensed от Hannes von Döhren

Cowboyslang и Supria Sans Condensed от Hannes von Döhren

На первый взгляд между шрифтами ниже ничего общего, но посмотрите на линии изгибов и буквы «u» «t»

Bevan и Arapey Italic

Более мягкие линии могут быть так же эффективны.

Anodyne и Poulaire

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector