Лучшие сочетания шрифтов, которые будут работать для вашего бизнеса

Где взять бесплатные шрифты

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

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

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

Webfonts — русскоязычный ресурс с большой библиотекой бесплатных качественных шрифтов для работы в Adobe Photoshop или текста на сайте.

Dafont — одна из наиболее богатых коллекций бесплатных шрифтов. Вы наверняка найдете подходящий вариант среди20 тыс. наименований, представленных на сайте.

1001 Free Fonts — широкий выбор бесплатных шрифтов и аналогов официальных.

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

Font Space — сайт с рукописными и акцидентными шрифтами.

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

Font Base — приложение, которое позволяет брать шрифты в аренду, систематизировать шрифты по папкам и проектам, разрабатывать свои начертания. Подписка стоит3 доллара в месяц.

Бесплатные шрифты — группа во «ВКонтакте» с бесплатными шрифтами.

Типографика — основа, с которой стоит начинать в дизайне

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

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

Курс «Веб-дизайн с 0 до PRO»

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

• Живая обратная связь с преподавателями
• Неограниченный доступ к материалам курса
• Стажировка в компаниях-партнёрах
• Дипломный проект от реального заказчика
• Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Почему шрифты важны в графическом дизайне

Шрифт — это способ выразить посыл, который вы закладываете в свой проект. Конечно, если бы мы везде использовали старый добрый Arial, жизнь была бы проще. Но стала бы она интереснее? Скорее всего, нет

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

Вот основные ошибки, которые допускают в использовании шрифтов:

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

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

Обычно этого достаточно.

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

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

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

Конфликт

То чего нужно всегда избегать.

Проще всего это проиллюстрировать на примере:

Almendra и Stoke

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

Шпоры очень схожи, но имеют разную кривизну, особенно проявляющийся на букве «T»:

Так же у них различный наклон осей направленный при этом в одну сторону:

Готическое письмо придает направление буквам, в то время как Римское письмо вертикально:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

Согласие

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

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

Пример: семейство 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

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

Сколько шрифтов мне использовать?

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

Но убедитесь, что в группе все же остается немного харизмы; восемь человек, которым нечего сказать, только и могут, что ждать, пока кто-то заговорит…

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

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

Посыл сайта

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

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

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

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

Например, для семейной пиццерии, можно выбрать слова «профессиональный», «традиционный» и «семейный», значит, чтобы донести это через дизайн сайта лучше использовать:

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

Или еще один пример: IT-стартап для инновационного приложения. Тогда посыл должен содержать слова «молодой», «амбициозный», «современный». Шрифт в таком случае будет уместен без засечек с жирными заголовками.

15 безопасных веб-шрифтов

1. Arial

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

2. Times New Roman

Times New Roman используется для шрифтов с засечками, как Arial для шрифтов без засечек.

Он один из самых популярных на устройствах с Windows и представляет собой новую вариацию старого шрифта Times.

4. Courier New

Courier New, похожий на Times New Roman, является разновидностью еще одной старой классики. Он также считается моноширинным шрифтом (в отличие от шрифта с засечками и без засечек, который мы только что видели).

5. Courier

Courier — это старый моноширинный резервный серверный шрифт, доступный почти для всех устройств и операционных систем.

6. Verdana

Вердана — настоящий веб-шрифт, потому что: 1) простые линии без засечек и 2) у него очень большой размер. Буквы почти вытянутые, что позволяет легко читать онлайн.

7. Georgia

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

8.Palatino

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

9. Гарамонд

Garamond — еще один шрифт старой школы, восходящий к стилям, используемым в Париже 16 века. Эта новая и улучшенная версия была представлена ​​и включена в состав большинства устройств Windows (и с тех пор была принята другими).

10. Bookman

Книжник (или Bookman Old Style) — еще один идеальный вариант заголовка, который сохраняет читаемость (или читаемость) даже при использовании небольшого размера.

11. Tahoma

Тахома относится к шрифту без засечек. Он широко использовался как альтернатива Arial и был шрифтом по умолчанию в некоторых более ранних версиях Windows, таких как Windows 2000, Windows XP и Windows Server 2003.

12. Trebuchet

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

13. Arial Black

Ариал Блэк — это более крупная, смелая и плохая версия вашего базового Arial. Как ни странно, он также имеет пропорции с Helvetica

Почему это важно? Чтобы они могли изначально использовать его для замены Helvetica и печати, не платя за лицензию

14. Impact

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

15. Comic Sans MS

Comic Sans MS — забавная и причудливая альтернатива другим вариантам без засечек.

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

Сайты, сервисы и блоги по типографике

У кого учиться:

• Сайт Ярослава Трегубова с интересными дизайнерскими работами.
• «Книга про буквы от А до Я» Юрия Гордона.
• Блог Игоря Штанга о типографике, тексте и дизайне.
• Блог и сайт Сергея Рассказова.
• Работы шрифтового и графического дизайнера Ильи Рудермана.
• Сайт дизайнера и эксперта по типографике Александра Васина.
• Инстаграм программиста-дизайнера Зака Либермана.
• Сайт Fontsinuse с примерами комбинаций шрифтов на плакатах и афишах.
• Журнал «Шрифт».

Сервисы и расширения:

• Расширение What font для определения шрифта.
• Поиск аналогов шрифта на Paratype.
• 900 шрифтов от Google Fonts.
• Основы строения и комбинирования шрифтов на Readymag.

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

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

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

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

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

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

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

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

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

Нет сходства

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

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

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

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

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

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

Базовые правила

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

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

Не используйте «рыбу» — Lorem Ipsum или другую панграмму, выполняющую роль текстового заполнителя. Если поставите сначала Lorem Ipsum, а потом кириллицу, макет будет выглядеть иначе.

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

Маленькое правило, которое может спасти

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

Правила сочетания шрифтов для изображений

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

1. Шрифтовая пара — с засечками и без засечек

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

2. Шрифтовая пара — разные виды одного семейства

Ещё один распространённый метод сочетания шрифтов, однако всегда актуальный. В этом случае для заголовка подбирается более жирный подвид шрифта, а для описания лёгкий. Например, DejaVu Sans Bold и DejaVu Sans Extra Light. Такое простое сочетание шрифтов не позволит ошибиться новичкам в подборе пары.

3. Шрифтовая пара — декоративный и нейтральный

Эта наименее скромная шрифтовая пара несомненно привлечёт максимум внимания. Для заголовка подбирается броский необычный шрифт. А для описания предельно нейтральный. Например, Bungee и Libra Sans. Не бойтесь добавлять дополнительные элементы и тестировать работы.

Важность правильного сочетания шрифтов

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

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

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

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

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

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

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

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

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

Выводы

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

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