Сочетания кириллических шрифтов: Таблица, советы, примеры

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

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

Таблица сочетания шрифтов

Скачать таблицу в .pdf
Проверить сочетания в интерактивной таблице

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

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

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

Важно учитывать характер и объем материала, с которым вы работаете. Это почти полностью сплошной текстовый массив? Много ли там заголовков и подзаголовков? Работая с целой группой шрифтов, используйте их строго по назначению, не путайте “роли”; если подзаголовок уже набран вами одним шрифтом, то и для остальных подзаголовков применяйте этот же шрифт. Пусть будет видно, для чего предназначен каждый из них.

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

Каркас

Базовая форма по которой построен шрифт. Каркас определяет общие пропорции элементов буквы, ширину букв, высоту строчных букв (x-height) и высоту заглавных (cap-height), форму скруглений и скосов, основные принципы построения.
 
 
 
 
 
 
 

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

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

Базовая форма по которой построен шрифт. Каркас определяет общие пропорции элементов буквы, ширину букв, высоту строчных букв (x-height) и высоту заглавных (cap-height), форму скруглений и скосов, основные принципы построения.
 

Аксессуары

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

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

«Семейство» — это набор связанных гарнитур объединенный общим стилем (serif, sans-serif, mono, condensed и др.), например Pt Sans, Pt Serif и Pt Mono входят в семейство Public type (Pt), a Roboto, Roboto Slab и Roboto Сondensed входят в семейство Roboto.

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

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

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

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

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

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

Жмя на картинку для хорошего качества

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

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

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

Гармоничное сочетание строиться на шрифтах со схожим каркасом и должно иметь наименьшее количество контрастов 1-4. Приемлем контраст в размере, насыщенности, начертании и аксессуарах.

Контраст размера

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

Использование одной гарнитуры
Использование одной гарнитуры самый простой способ гармонизации шрифтов. Для подбора хорошей гарнитуры, обращайте внимание на наличие в ней нейтрального (малоконтрастного) шрифта для текстовых блоков, наличие насыщенного (жирного) шрифта, наличие курсива, минускульные цифры* (некоторые шрифты имеют оба комплекта цифр, другие только один). Также обращайте внимание на различия между знаками Il1. В некоторых гарнитурах они плохо различаются, что усложняет читаемость.

Контраст размера и насыщенности

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

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

Контраст размера и начертания

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

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

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

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

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

Контраст аксессуаров и размера

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

Использование одного семейства
Семейства строят на общем каркасе и создают вариации Антиквы (serif) и Гротеска (sans serif). Большое семейство всегда располагает массой толщин и начертаний на выбор. У некоторых гарнитур есть несколько вариаций ширины (Narrow, Condensed, Regular, Extended, etc. — узкий, уплотненный, обычный, расширенный и т.д.). Использование двух гарнитур одного семейства даст от 4 до 36 шрифтов для работы.

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

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

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

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

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

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

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

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

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

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

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

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

Нет сходства

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

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

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

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

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

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

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

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

Плохая читаемость

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

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

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

Слишком похожие шрифты

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

Шрифты моветон

Некоторые шрифты признаны дизайнерами как не красивые их использование считается плохим вкусом к ним относят: Comic sans, lobster, Curlz, Papyrus, список постоянно дополняется. Сюда так же относят шрифты плохого качества, которые имеют дефекты контура, недоработанный кернинг, разный масштаб знаков, плохое выравнивание и прочие недоработки.

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

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://typeconnection.com
https://justmytype.co/
https://www.typetester.org/

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

Источник: pomelnikov.com

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

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

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

На самом деле, здесь нет порядка важности…

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

Источник: dejurka

10 практических советов по сочетанию шрифтов

Перевод статьи “Best Practices of Combining Typefaces” от американского дизайнера Douglas Bonneville о том как правильно комбинировать шрифты и на что в первую очередь стоит обращать внимание при подборе шрифтовой пары.

Используйте разную цветность набора

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

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

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

Избегайте несопостовимых комбинаций шрифтов

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

Справа Antique Olive Nord был заменен не таким выдающимся Antique Olive Bold. Garamond Narrow можно было бы тоже заменить Garamond нормальной насыщенности, но лучшим выбором после некоторого размышления стал шрифт Chaparral. Chaparral имеет более высокое очко шрифта, чем Garamond, и в целом, более современный и, следовательно, более нейтральный по сравнению со специфическим своеобразием Antique Olive Bold.

Контраст выразительных и нейтральных шрифтов

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

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

Давайте взглянем на более удачный выбор. В правой колонке Dax Bold соседствует с Caslon. Caslon относится к антиквам старого стиля, но он был усовершенствован и сделан более приемлемым для сочетаний с другими шрифтами. Он удовлетворительно работает с Dax в данном случае. Заметили, как выделяется характер Dax в заголовке, а Caslon отступает и направляет читателя к содержанию текста? В данном контексте Caslon работает хорошо как нейтральный шрифт, поддерживая более пышный Dax.

Как создать шрифтовой контраст?

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

Справа для заголовка был взят Myriad Black, а для текста нормальное начертание Minion. Возможно, заголовок немного тяжеловат, но здесь нет путаницы в том, куда читатель должен посмотреть в первую очередь.

У кажого шрифта своя задача

Еще один простой способ сочетать несколько шрифтов из различных шрифтовых семейств — придумать систему, в которой каждый шрифт или гарнитура будут играть определенную роль, и придерживаться ее. В следующем примере для имени автора вверху статьи мы использовали жирный Akzidenz Grotesk, набранный прописными. Затем мы взяли жирное начертание Rockwell для заголовка статьи. Шрифт для вступления и основного текста — Bembo разных размеров. Ну и наконец, мы набрали подзаголовок Akzidenz Grotesk Medium.

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

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

Избегайте сочетания шрифтов, принадлежащих одной группе

Шрифты из одной группы, но различных шрифтовых семейств, могут легко создать диссонанс, если их поставить рядом. Их яркая индивидуальность не позволит им мирно ужиться и создаст типографическую грязь, если не уделить этому соседству достаточного внимания.
В первом примере слева заголовок набран жирным начертанием Clarendon, который является брусковым рубленым (или египетским). Основной текст набран Officina Serif, который тоже брусковый рубленый шрифт. Шрифты этой группы обладают яркой индивидуальностью, и они занимают доминантную позицию везде, где их применяют. Ставить их рядом значит создавать ненужное и некрасивое напряжение.

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

Как сочетать шрифты? Гротеск плюс антиква

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

В примере внизу слева — это стандартный газетный макет — Trade Gothic Bold No.2 поставлен вместе с Bell Gothic. Это два гротеска. Тем не менее, у них очень разный характер. Когда мы сталкиваемся с проблемами между заголовком и основным текстом, тут можно вспомнить хороший прием, который заключается в том, чтобы не привлекать излишнего внимания к индивидуальному характеру каждого шрифта. Trade Gothic, пожалуй, строгий шрифт. Bell Gothic, наоборот, гораздо более динамичный и выразительный.

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

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

Не сочетайте шрифты с разным настроением

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

В левом примере мы соединили Franklin Gothic Bold с Souvenir. Общее впечатление от Franklin Gothic — мужественный, крепкий, мощный, но с тонким ощущением элегантности и значительности. Он не привлекательный, а функциональный. С другой стороны, Souvenir — живой, немного легкомысленный и отстраненный, и очень красивый. Эти два шрифта подходят друг другу как гвардеец Букингемского дворца, который с сознанием долга равнодушно взирает на маленькую шаловливую девочку, которая у его ног пытается вызвать его улыбку. Это смешение двух разных настроений просто недостаточно хорошо работает. Оно привлекает внимание к самой типографике, а не смыслу текста, в результате чего получается плохой дизайн.

Справа мы нашли для Souvenir более дружелюбного соседа. У Futura Bold много разных характеров, но он более подходит Souvenir по нескольким причинам. Во-первых, у обоих шрифтов одинаковая высота строчных. У них широкие знаки и очень округлые буквенные формы. Оба шрифта выглядят немного, но не чересчур причудливо. Ни один не доминирует над другим. Оба в данном примере создают веселое и приподнятое настроение. Нет ощущения излишнего напряжения.

Будьте проще — используйте только две гарнитуры

После всех попыток найти среди огромной шрифтовой библиотеки «самую лучшую комбинацию» часто можно легко забыть о более очевидном и простом решении: остановиться на классическом сочетании антиквы и гротеска.
В примере, приведенном ниже, мы построили четкую визуальную иерархию, добились большого разнообразия и достигли стойкого ощущения интересного типографического цвета и в то же время повысили читабельность текста. Но все это было достигнуто с помощью лишь двух гарнитур. Между тем, мы использовали в итоге пять шрифтов: три Helvetica Neues и два Garamond.

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

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

Используйте разные размеры кегля

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

Справа у нас два тех же самых шрифта, но разных размеров.TheMix Italic был сильно увеличен, в то время как New Century Schoolbook был уменьшен до читаемого и более вспомогательного размера.

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

Шрифтовые пары для сайта: что с чем сочетать?

Сайт – это текст!
Если открыть страницу выбранного сайт, то увидим, что львиную долю ее занимает текст. По-разному организованный, но текст. Выделение цветом, размерные буквы, шрифты… Иногда надпись даже выполняет роль изображения. Когда это в балансе, то сайт смотрится читабельно и удобен для пользователя. Как этого добиться?

Правила подбора шрифтовых пар

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

Правило 1: «Мы с Татьяной ходим парой»

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

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

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

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

Правило 2: «Гармония в контрасте»

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

Правило 3: «Размер, начертание, цвет – разве товарищей нет?».

Исходя из правила 2, как шрифтовую пару можно использовать один и тот же шрифт! Контраст создадут размер кегля (или написание в режиме «ЗАГЛАВНАЯ/прописная»), начертания (нормал, болд (жирный) и италик (курсив)), наклон (вместо курсива) и цветовые решения (цвет символов) и дизайнерские решения-аксессуары (вроде теней и прочего). Данное правило, подтверждает всякий текстовой редактор, организующий текст на странице.

3 самых важных правил типографики в веб дизайне и главные тенденции.

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

Правило 4. «Каркас – всему голова»

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

На базе близкого каркаса сочетаются шрифты с засечками и без. Антиква и Гротеск, например.

«Плодородно» поле каркаса на «скрещивание» шрифтов одного семейства. Шрифты семейств serif и sans serif — обладатели широкого выбора толщин и начертаний, ширины символов и межсимвольного расстояния. Это дает до 40 вариантов написания даже у одной шрифтовой пары.

Правило 5. «Подобное к подобному».

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

Правила 6. «Фи!!! Какая гадость!».

Ряд шрифтов в дизайнерской среде считается моветоном, признаком отсутствия вкуса. Назовем несколько из них: lobster, Papyrus, Curlz, Comic sans и подобные. Не сказать, что кто-то где-то просто решил, что они плохие, и все. Эти шрифты из-за своей «разлапистой» графики и вправду с трудом сочетаются с другими. К тому же они «настроенческие» (см. правило 7).

Правило 7. «Когда очень хочется, то можно. Но осторожно!».

(Только для опытных дизайнеров и любителей экспериментировать!)

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

• Вариант 1 (Совершенно нет сходства)

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

• Вариант 2 (Настроение)

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

С настроением шрифта нужно работать аккуратно: легко перестараться. Текст быстро визуально перегружается и разваливается.

• Вариант 3 (Найти общее)

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

Таблица сочетания шрифтов

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

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

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

Онлайн сервисы для подбора шрифтовых пар

Type Genius. Здесь можно подобрать шрифт, а заодно и пару к нему.

Примеры готовых пар

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

Назовем их:

1. Garamond и Verdana. Garamond – заголовок, жирный с засечками, Verdana – удобный для чтения «беззасечный» шрифт.
2. Proxima Nova и Palatino. Обратно сочетание выше названной пары.
3. PT Sans и PT Serif. «Родственники», представители одного семейства не могут не сочетаться.

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

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.

Readymag.com

Сайт для создания журналов в Интернете также может быть использован для подбора шрифтов, но уже с конкретной целью. На сайте имеется необходимый инструментарий для работы с web-журналами.

Google fonts

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

Лучшие шрифтовые пары

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

Пошаговое руководство по сочетанию шрифтов и подбору шрифтовых пар

Если вы загуглите, как сочетать шрифты, то получите много ужасных результатов. На первой странице вы найдете сочетания, к которым ни один опытный дизайнер не прикоснется даже 3-метровой палкой. Google Fonts весело рекомендует сочетать буквально все с Open Sans и Roboto 🙄

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

1. Определите свой бренд

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

Причина в том, что у разных сайтов и приложений разные бренды.

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

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

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

Я опубликовал на YouTube видео, посвященное прилагательным, описывающим бренд – как их найти и как они влияют на дизайн.

В частности, в этом видео я рассказываю о 5 наиболее распространенных брендах, для которых начинающим UI-дизайнерам следует научиться проектировать:

1. Понятный/Простой (Clean/simple)– современный, минималистичный
2. Стильный/Модный (Classy)– роскошный, эрудированный, классический
3. Дружелюбный (Friendly)– повседневный, неформальный
4. Необычный/Причудливый (Quirky)– design-forward, креативный
5. Технический/Технологический (Techie)– футуристичный, гиковский

(Посмотрите видео, чтобы увидеть несколько примеров каждого из них)

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

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

2. Шрифты, которые ненавязчиво передают ваш бренд

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

1. Выбор шрифта, не соответствующего вашему бренду.
2. Выбор шрифта, чрезмерно подходящего вашему бренду (например, необычный шрифт).

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

Вот пример. Допустим, вы работаете над небольшим сайтом / приложением по истории Египта. Вам нужен профессиональный, понятный и информативный бренд, посвященный древней, грандиозной и немного загадочной теме. (Вы уловили идею? Это прилагательные нашего бренда)

Вот 3 попытки:

Если вы просматривали список шрифтов на своем компьютере, вероятно, вы знаете, что существует печально известный шрифт Papyrus, который в некотором смысле кажется идеальным, чтобы наконец использовать его на сайте, посвященном Египту. (Куда уместнее, чем на сайте школы по тхэквондо, сенсей которой занимался графическим дизайном 15 минут… или в фильме Avatar).

Увы, необычность такого шрифта редко обеспечивает хороший дизайн. Избегайте его – по крайней мере, пока не станете достаточно хорошим дизайнером, чтобы не читать эту статью 😉

Точно так же третий шрифт – Chakra Petch – хоть и хорош, но совершенно не подходит для бренда, который мы пытаемся представить. Угловатая техническая атмосфера лучше всего подойдет для игры «Outer Space: The 3 Kingdoms», понимаете?

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

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

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

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

(Чтобы внести ясность, мы не ищем шрифт, который был бы грандиозным и загадочным – мы ищем шрифт, который бы изящно передавал величие и таинственность. Мы должны взять наш бренд и немного изменить его)

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

Менее чем за 10 минут я просмотрел более 100 шрифтов, но выбрал всего 4 в качестве претендентов. Я случайно выбрал два из них во время просмотра моего каталога шрифтов, один из «Таблицы хороших шрифтов» (для слушателей моих курсов «Learn UI Design»), а последний Trajan знал ранее (хотя у меня его нет, и пришлось искать похожие шрифты в Google). Станет ли один из них моим окончательным выбором? Без понятия! Но так начинается мозговой штурм.

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

Например, один из 5 самых распространенных брендов – «необычный». Какие шрифты вы используете на необычном сайте? Давайте взглянем на веб-сайт Института Санте-Фе. Это отличный пример необычного / креативного сайта (хотя как технический институт он также будет иметь определенные «технические» элементы в своем бренде). Откройте его в новой вкладке – мы будем ссылаться на него на протяжении всей статьи.

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

Кроме того, это не требует больших знаний дизайна. Любой может увидеть, что буква «е» странным образом смещена, или верхний концевой элемент «f» причудливо отрезан. Что касается буквы «W», обратите внимание – это довольно распространенная деталь, которую нужно включать (обычно в шрифты с засечками), она, безусловно, немного выделяется, если смотреть на нее в основном тексте.

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

Отлично. Давайте двигаться дальше.

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

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

Для начинающих дизайнеров самый простой способ проверить подходит ли шрифт для основного текста – прочитать его описание! Например, в описании Scala Sans на сайте MyFonts.com сказано, что он подходит для «книжного текста» и «мелкого текста», а это является синонимами хорошего шрифта для основного текста 😎

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

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

Вместо этого вам нужен простой шрифт с засечками или без засечек с большой высотой x и открытыми внутри буквенными просветами (counters).

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

«Открытые внутри буквенные просветы» (или «большая апертура») означают, что промежутки в буквах типа «а», «с» и «е» относительно широкие. Буква «c» в шрифте Helvetica не так уж отличается от «o» – в то время, как буквы «c» и «o» в шрифте Proxima Nova различить гораздо легче.

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

В примере с Древним Египтом я отобрал несколько шрифтов с засечками и быстро выбрал очень разборчивый шрифт без засечек, который мне нравится (Scala Sans). Поскольку эти шрифты с засечками в значительной степени также будут отличными шрифтами для основного текста, мне надо принять решение – какой шрифт использовать в качестве основного шрифта: (а) Scala Sans или (б) один из шрифтов с засечками.

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

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

4. Добавьте дополнительный шрифт, чтобы выделить еще один аспект бренда

Довольно распространенная ошибка, которую я наблюдаю у студентов, изучающих мой курс «Learn UI Design», заключается в том, что они используют очень похожие шрифты.

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

(Между прочим, в 95% случаев это означает, что вы будете сочетать шрифт с засечками и шрифт без засечек)

На веб-сайте института Санте-Фе шрифт для заголовка Chap довольно своеобразный и необычный. Но это технический институт – в идеале какая-то часть их бренда тоже должна быть технической.

В формате «диаграммы брендов», которую я показываю на уроке «Brand & Goals» курса «Learn UI Design», веб-сайт Института Санта-Фе будет находиться здесь:

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

Совет ☝️: большинство шрифтов, которые кажутся техническими / научными / футуристическими, имеют квадратную форму. Но шрифт основного текста должен быть простым и разборчивым, что, как мы видели на примере Chakra Petch, иногда противоречит угловатости и геометрическим формам.

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

И знаете, что? Институт Санта-Фе подумал о том же! (И многие другие дизайнеры тоже – спросите их. Уверяю вас, эта типографика не такая уж дикая и субъективная, как кажется 🙂)

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

В нашем примере с Древним Египтом я ищу что-то, что кажется немного более старым и загадочным (но помните: лишь немного) по сравнению со Scala Sans. Это обязательно будет шрифт с засечками.

Я сузил свой выбор до Skolar и еще одного шрифта с засечками под названием Minion.

Как я выбрал Minion? 🤔 Что ж, я заметил, что Crimson Text – так называемый шрифт с засечками «старого стиля» – один из первых стилей дизайна, основанный на каллиграфических формах и довольно разборчивый (не говоря уже о том, что идеально подходит для исторической тематики). Я решил просмотреть несколько других шрифтов с засечками в старом стиле, которые мне запомнились, но, если вы не знаете такие шрифты, то всегда можете загуглить: «old style serif site:typewolf.com»,  и всего через два клика узнаете о шрифте Minion.

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

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

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

Честно говоря, засечки в Skolar кажутся слишком большими и толстыми. Мне нравится, что в Minion они более тонкие и изящные.

(Это вполне разумно. Skolar – это современный шрифт с засечками, а многие современные шрифты с засечками имеют более крупные засечки, которые обеспечивают лучшую читабельность при очень маленьком размере!)

Итак, теперь у нас есть пара шрифтов – Scala Sans и Minion. Что нам с этим делать?

5. Определите правила использования

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

Можно подумать, что, когда у вас всего два шрифта это довольно просто, не так ли?

1. Заголовки: Scala Sans
2. Текст: Minion

Не так быстро! Даже на довольно простом текстовом сайте есть много других мест, где нужно выбрать шрифт:

• Указание авторства в подзаголовке
• Подзаголовки
• Меню навигации
• Контактные формы (метки, поля ввода текста, кнопки)
• Футеры

Наивное решение – просто (а) использовать шрифты заголовков для всех заголовков и подзаголовков и (б) использовать шрифт для основного текста – для всего остального. Угадайте, какая это прекрасная идея…

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

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

Мы начали определять еще несколько правил использования наших шрифтов:

• Меню: Minion
• Указание авторства: светло-серый Minion курсивом
• Метки: светло-серый Minion курсивом
• Категории и теги: smaller uppercase Scala Sans полужирным

Но даже они могут быть изменены. Например, светло-серая метка, выделенная курсивом, будет выглядеть странно рядом с вводимым текстом. Поэтому следует ли использовать разные стили для обеих меток, или есть веское основание для двух стилей меток (один для категорий и один для элементов управления формой)?

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

Например, на сайте Learn UI Design я регулярно использую 3 разных шрифта – Avenir Next, Rajdhani и Freight Text. Но в некотором смысле я определил «правила» для каждого из них:

• Avenir Next: используется как основной текст. При необходимости можно выделить курсивом или полужирным шрифтом.
• Rajdhani: используется для подзаголовка и как акцентный шрифт. Используются только прописные буквы и полужирный шрифт.
• Freight Text: используется для частей страницы, которые представляют говорящего, например, вопросы в FAQ, отзывы учеников и раздел «Обо мне». Используется только в тяжелых весах.

Таким образом, несмотря на то, что технически имеется 2 шрифта без засечек, каждый шрифт используется по-разному, чтобы дизайн никогда не казался непоследовательным, беспорядочным или перегруженным – или нет? 😉 Вам ре

37 замечательных примеров сочетаний шрифтов в 2019 году

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

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

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

Итак, какие шрифты хорошо выглядят и отлично сочетаются? Читайте дальше что бы узнать!

Лучшие комбинации шрифтов

Goods

Suisse Works и Suisse International

Suisse Works – обеспечивает понятность информации, простоту и структуру. Это шрифт с засечками, созданный Party of Swiss Typefaces. Он входит в суперсемейство шрифтов Suisse. Своим стилем он похож на старый добрый Times New Roman.

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

Есть ряд незначительных различий, которые наиболее заметны в концевых элементах букв (Terminals) и стойках (Counters).

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

Suisse Works
Цена – Приблизительно USD 161.59 или CHF 160

Suisse International Collection
Цена – Приблизительно USD302.99 или CHF300

Kinfolk

Domaine и Feijoa

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

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

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

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

Извилистая натура Feijoa идеально контрастирует со стилем Domaine.

Domaine
Цена – USD300 (Семейство) USD1,000 (Полностью)

Feijoa
Цена – USD150 (Семейство)

Useless

Suisse Work и Andale Mono

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

Andale Mono – моноширинный шрифт без засечек, созданный в 1995 году Стивом Маттесоном. Его цель – предоставить максимальную читабельность.

Он используется в Microsoft Windows в качестве одного из основных шрифтов, но теперь поставляется в комплекте с Lucinda Console.

Оба шрифта вызывают ощущение простоты и хорошо работают с текстом. Несмотря на то, что Andale Mono хорошо читается даже при небольших размерах, Suisse Works очень эффективен при больших размерах текста для ваших заголовков.

Andale Mono
Цена – USD89

Creative Boom

GTF Opposit и GT Walsheim

Сочетание шрифтов GTF Opposit и GT Walsheim хорошо подходит для билбордов, постеров и рекламных кампаний, когда вы хотите произвести впечатление с первого взгляда.

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

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

GT Opposit
Цена – Приблизительно USD385 или EU350

GT Walsheim
Цена – USD1080 (Pro-Семейство) или USD720 (Семейство)

WePresent

Fakt Pro Normal и ITC Clearface

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

С другой стороны, ITC Clearface – это шрифт с засечками с характерными символами, которые отражают дух времени.

Fakt
Цена – Приблизительно USD1,541 или EU1,400 (Суперсемейство)

 ITC Clearface
Цена – USD35 (Отдельные стили)

Dogstudio

GT Sectra Display и Heebo

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

С другой стороны, Heebo хорошо читается на веб-страницах и обладает энергетикой доступности.

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

GT Sectra
Цена – USD1350 (Все семейство)

Heebo
Цена – Бесплатно

Brandland

Sharp Sans Display No.1 и Morion

Комбинация шрифтов Sharp Sans Display No.1 и Morion – это идеальное сочетание авангардизма и игривости.

Геометрический Sharp Sans Display No. 1 – это инновационный шрифт без засечек с системой лигатур. Он также имеет чрезвычайно разборчивый интервал и настоящий курсив, который является восхитительным приемом в его жанре.

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

Тем не менее, он содержит функции open type, такие как «a» в нижнем регистре, которая повышает читаемость текста небольшого размера.

Комбинация этих двух стилистических элементов шрифтов Sharp Sans Display No. 1 и Morion обеспечивает привлекательный дизайн, способный привлечь внимание пользователей.

Sharp Sans Display No.1
Цена – USD350 (Все стили)

Morion
Цена – USD45 (Семейство)

Nettle Wellness

ITC Ronda и Calibre Regular

Пара шрифтов ITC Ronda и Caliber Regular – это классная комбинация геометрических шрифтов. Она придаст вашим дизайнам понятность и современность.

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

Впервые мы увидели геометрические формы Ronda в 1970 году, а геометрический неогротеск Calibre в 1958 году. Ronda представляет современный, чистый внешний вид во всех приложениях.

Формы заглавных букв B, P и R являются его отличительными качествами, в то время как у Caliber очень уникальная буква A. Поначалу вам это может не понравиться, но наверняка, со временем вы поменяете свое мнение.

ITC Ronda
Цена – USD35 (Отдельные стили)

Calibre
Цена – USD350 (Семейство)

Canide

Chap и Moderat

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

В то же время геометрический шрифт Moderat относится к семейству шрифтов без засечек и дополнен набором функций Open type. Его набор довольно приятных стилистических альтернатив и умеренно узких апертур гармонично сочетаются с острыми углами и высокой контрастностью штрихов Chap.

Кроме того, читабельность шрифта Chap будет легко сочетаться с современными геометрическими рублеными шрифтами.

Chap
Цена – Приблизительно USD468 или EU425 (Семейство)

Moderat
Цена – Приблизительно USD418.40 или EU380 (Web)

Labud

URW Classico и Monument Grotesk

URW Classico является ремейком URW ++ под влиянием популярного шрифта Optima без засечек от Германа Цапфа. Благодаря исправлениям оригинала и множеству дополнительных глифов он стал еще более совершенным, как для заголовков, так и для основного текста.

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

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

URW Classico
Цена – Бесплатно

Monument Grotesk
Цена – Приблизительно USD356 или EU324 (Основа)

Sidesupply

GT Pressura Mono и GT America Standard

GT Pressura Mono черпает вдохновение в упаковочных коробках, края и углы которых соответствуют цвету. С другой стороны, GT America устраняет разрыв между европейским гротеском и американской готикой. Оба шрифта доступны через Grilli Type.

Гротескный дизайн GT Pressura Mono использует в качестве стилистического средства визуальный эффект растекающихся под давлением чернил.

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

GT Pressura
Цена – USD630

GT America Standard
Цена – USD945 (Все семейство)

The New Yorker

NY Irvin и Adobe Caslon

Adobe Caslon радует нас с 1722 года. Этот шрифт с засечками использовался в начале 18 века во времена Британской империи.

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

NY Irvin – это шрифт, отлично сочетающийся с Adobe Caslon, который был создан специально для New York Times. Вместе эти шрифты создают уникальную комбинацию, которая заставит вас ощутить эпоху Возрождения.

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

Adobe Caslon
Цена – Бесплатно

NY Irvin
Цена – USD55 (Отдельные стили)

Pattern Brands

Mackinac и Cadiz Regular

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

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

Cadiz
Цена – Приблизительно USD280 или CHF277

Mackinac
Цена – Бесплатно

Blackformat

Poppins и Georgia

Комбинация шрифтов Poppins and Georgia идеально подходит, если вы хотите получить хороший минималистичный дизайн.

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

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

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

Poppins
Цена – Бесплатно

Georgia
Цена – Бесплатно

Rakish

Brandon Text и Austin

Brandon Text и Austin – еще один хороший пример пары шрифтов с засечками и без засечек.

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

Вы можете сразу не обратить на него внимание, как и большинство читателей, поскольку он не обладает характеристиками, присущими его популярной семье Brandon Grotesque. Он имеет большую x-высоту, а также оптимизирован для экранов, небольших и длинных текстов.

Austin, с другой стороны, более новый шрифт, вдохновленный работами Ричарда Остина – дизайнера типографики 18-го века.

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

Brandon Text
Цена – USD40 (Отдельные стили)

Austin
Цена – USD350

Elena Miska

SCTO Grotesk A и Ivar

Если вы хотите придать своим проектам уверенность и приветственный характер, тогда SCTO Grotesk A и Ivar – это сочетание шрифтов для вас.

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

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

Без сомнения, эта комбинация шрифтов может обеспечить ваш дизайн четкой и прочной основой.

SCTO Grotesk A
Цена – Приблизительно USD468 или EU425 (Семейство)

Ivar
Цена – Приблизительно USD219 или EU199 (За все)

Cita

Bluu Next и Roboto

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

Кроме того, вы получите более естественное чтение в сочетании с современной атмосферой.

Bluu Next – это шрифт с засечками. Он точный и четкий, и считается идеальным для бруталистских дизайнов.

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

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

Bluu Next
Цена – Бесплатно

Roboto
Цена – Бесплатно

IJPowell

Bluu Suuperstar и Neue Haas Unica

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

В паре с Neue Haas Unica он доказывает, что для того, чтобы дизайн был потр

19 лучших шрифтов в 19 лучших комбинациях

Обновление : 26 февраля 2019 г .: После девяти лет существования цифрового издания Большая книга комбинаций шрифтов доступна в великолепных полноразмерных печатных изданиях: в мягкой и твердой обложке. Учить больше!

Обновление: 5 апреля 2016 г. : Недавно я составил список из 19 самых популярных шрифтов в соответствии с их использованием графическими дизайнерами со всего Интернета. У меня могло быть 100, но я уменьшил их до менее 50, а затем сократил их до 19 лучших шрифтов .Почему 19? Потому что ровно в 20 лет «длинный хвост» выстрелил, и разница в счетах стала незначительной. Взгляните на эти лучшие шрифты, если хотите, и вернитесь, потому что теперь мы собираемся немного повеселиться с типографикой.

Здесь мы имеем список из 19 лучших шрифтов еще раз, но на этот раз объединенный в пары, чтобы дать нам 19 лучших комбинаций шрифтов .

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

Я просто следовал золотому правилу сочетаний шрифтов , которое заключается в том, чтобы просто комбинировать шрифты с засечками и без засечек для придания «контраста», а не «согласованности».Для получения отличных сочетаний шрифтов, как правило, чем дальше друг от друга расположены стили шрифтов, тем больше у вас будет удачи. Слишком похожие шрифты выглядят плохо. Проведите линию Times Roman над Гарамондом, и вы поймете, о чем я. Я выбрал простую модель: жирный шрифт заголовка и основной шрифт обычного веса. Все сочетания шрифтов получили один и тот же «lorem» текст.

Как я выбирал комбинации?

Я попытался перепутать, но пришлось принимать произвольные решения. Например, я мог бы выбрать Баскервиль, Каслон, Гарамонд или Миньон и т. Д.(все шрифты с засечками) для использования с Futura (шрифт без засечек). Я просто хочу распределить их между собой, сводя использование повторов к минимуму.

Результаты

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

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

Итак, у нас есть следующие элементы:

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

h2 {
семейство шрифтов: 'Alegreya', serif;
font-weight: 700;
высота строки: 46 пикселей;
размер шрифта: 46 пикселей;
маржа: 0 0 43px 0;
}
h3 {
семейство шрифтов: 'Roboto Condensed', без засечек;
font-weight: нормальный;
размер шрифта: 21px;
высота строки: 23 пикселя;
текст-преобразование: прописные;
межбуквенный интервал: 2 пикселя;
маржа: 0 0 23px 0;
}
п {
семейство шрифтов: «Робото», без засечек;
размер шрифта: 15 пикселей;
высота строки: 23 пикселя;
маржа: 0 0 23px 0;
}

 

h2 {
семейство шрифтов: «Танцевальный сценарий», курсив;
font-weight: 700;
высота строки: 46 пикселей;
размер шрифта: 42 пикселей;
маржа: 0 0 23px 0;
}
h3 {
семейство шрифтов: 'EB Garamond', serif;
font-weight: нормальный;
текст-преобразование: прописные;
размер шрифта: 18 пикселей;
высота строки: 23 пикселя;
межбуквенный интервал: 2 пикселя;
маржа: 0 0 23px 0;
}
п {
семейство шрифтов: 'EB Garamond', serif;
размер шрифта: 16 пикселей;
высота строки: 23 пикселя;
маржа: 0 0 23px 0;
}

 

h2 {
семейство шрифтов: 'Amatic SC', курсив;
font-weight: 700;
высота строки: 46 пикселей;
размер шрифта: 46 пикселей;
маржа: 0 0 23px 0;
}
п {
семейство шрифтов: 'Josefin Sans', без засечек;
размер шрифта: 16 пикселей;
font-weight: 700;
высота строки: 23 пикселя;
маржа: 0 0 23px 0;
}

 

h2 {
семейство шрифтов: «Освальд», без засечек;
font-weight: 700;
высота строки: 51 пикселей;
размер шрифта: 46 пикселей;
текст-преобразование: прописные;
маржа: 0 0 23px 0;
}
h3 {
семейство шрифтов: 'Droid Serif', serif;
font-weight: 400;
стиль шрифта: курсив;
размер шрифта: 20 пикселей;
высота строки: 23 пикселя;
маржа: 0 0 23px 0;
}
п {
семейство шрифтов: 'Droid Serif', serif;
размер шрифта: 15 пикселей;
высота строки: 23 пикселя;
маржа: 0 0 23px 0;
}
 

h2 {
семейство шрифтов: 'Playfair Display', serif;
font-weight: 900;
высота строки: 46 пикселей;
размер шрифта: 43 пикселей;
маржа: 0 0 23px 0;
}
п {
семейство шрифтов: «Алиса», засечки;
размер шрифта: 18 пикселей;
font-weight: нормальный;
высота строки: 23 пикселя;
маржа: 0 0 23px 0;
}
 

h2 {
семейство шрифтов: 'Dosis', без засечек;
font-weight: 400;
высота строки: 46 пикселей;
размер шрифта: 40 пикселей;
маржа: 0 0 23px 0;
}
h3 {
семейство шрифтов: 'Dosis', без засечек;
font-weight: 800;
размер шрифта: 18 пикселей;
высота строки: 23 пикселя;
маржа: 0 0 23px 0;
}
п {
семейство шрифтов: «Open Sans», без засечек;
размер шрифта: 14 пикселей;
высота строки: 23 пикселя;
маржа: 0 0 23px 0;
}
 

h2 {
семейство шрифтов: 'Lato', без засечек;
font-weight: 300;
высота строки: 46 пикселей;
размер шрифта: 46 пикселей;
маржа: 0 0 23px 0;
}
h3 {
семейство шрифтов: 'Grand Hotel', курсив;
font-weight: нормальный;
размер шрифта: 31px;
высота строки: 23 пикселя;
маржа: 0 0 23px 0;
}
п {
семейство шрифтов: 'Lato', без засечек;
размер шрифта: 16 пикселей;
высота строки: 23 пикселя;
маржа: 0 0 23px 0;
}
 

h2 {
семейство шрифтов: 'Medula One', курсив;
font-weight: нормальный;
высота строки: 46 пикселей;
размер шрифта: 52 пикселей;
маржа: 0 0 23px 0;
}
п {
семейство шрифтов: 'Abel', без засечек;
размер шрифта: 17 пикселей;
высота строки: 23 пикселя;
маржа: 0 0 23px 0;
}
 

h2 {
семейство шрифтов: 'Fjalla One', без засечек;
font-weight: нормальный;
текст-преобразование: прописные;
высота строки: 46 пикселей;
размер шрифта: 43 пикселей;
маржа: 0 0 23px 0;
}
h3 {
семейство шрифтов: 'Cantarell', без засечек;
font-weight: 700;
размер шрифта: 20 пикселей;
высота строки: 23 пикселя;
текст-преобразование: прописные;
межбуквенный интервал: -1px;
маржа: 0 0 23px 0;
}
п {
семейство шрифтов: 'Cantarell', без засечек;
размер шрифта: 17 пикселей;
высота строки: 23 пикселя;
маржа: 0 0 23px 0;
}
 

h2 {
семейство шрифтов: 'Coustard', serif;
font-weight: 900;
высота строки: 46 пикселей;
размер шрифта: 41px;
маржа: 0 0 23px 0;
}
п {
семейство шрифтов: 'Leckerli One', курсив;
размер шрифта: 16 пикселей;
font-weight: 400;
высота строки: 23 пикселя;
маржа: 0 0 23px 0;
}