Шрифтовая пара: Что такое шрифтовые пары и как их подбирать / Skillbox Media — Независимое театральное объединение "Зрительские симпатии"

Содержание

принципы создания идеальных шрифтовых пар

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

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

Более того, на примере создания TT Norms® Pro Serif вы сможете узнать, как шрифтовые пары создаются в рамках одного семейства и где их лучше применять.

Что такое шрифтовая пара?

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

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

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

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

Для чего нужны шрифтовые пары

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

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

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

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

Принципы сочетания шрифтов

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

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

Гротеск TT Norms® Pro и антиква TT Norms® Pro Serif

TT Norms® Pro — главный бестселлер студии TypeType. Гарнитура стала голосом брендов Cartoon Network, Sartorius, Intercom, CSN и многих других.

Отчасти популярность связана с тем, что TT Norms® Pro — геометрический гротеск с нейтральным характером. Это универсальный шрифт, современный и стильный, его характер легко адаптировать под разные сферы.

Семейство гарнитуры расширялось несколько раз, дополняясь моноширинной версией TT Norms® Pro Mono, новыми начертаниями и языками. За счёт универсальности подобрать шрифтовую пару к TT Norms® Pro несложно, но студия TypeType решила разработать идеальную пару и создать антикву, которая будет гармонично дополнять гротеск.

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

Мы начали с исследования, в котором изучили крупные шрифтовые семейства других студий и авторов, в которых одновременно присутствовали антиква и гротеск. В тестовом варианте мы проверяли, насколько похожим на TT Norms® Pro хотим видеть новую антикву.

Финальная версия TT Norms® Pro Serif — это баланс между схожестью характеров и визуальной разницей форм.

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

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

В TT Norms® Pro Serif появились свои характерные черты.

Шрифт стал жестче. Поменялись влития арок, форма полуовалов.

Круги знаков остались круглыми, но появилась динамика в овале. В TT Norms® Pro овал симметричен по вертикали, а в TT Norms® Pro Serif в круглых знаках появляется наклон.

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

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

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

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

Одинаковая закрытость апертур и похожая конструкция многих знаков, таких как t, k, r, q, помогает шрифтам сочетаться.

Знаковый состав шрифтов практически идентичен, в TT Norms® Pro Serif присутствуют расширенная кириллица и латиница, разнообразие валют и знаков пунктуации.

Привычные OpenType фичи добавлены в новую антикву, чтобы шрифт был функциональным.

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

Приятный бонус TT Norms® Pro Serif — италики, которые совершенно не похожи на наклонные начертания гротеска. Мы создали настоящие италики, форма знаков которых отрисовывалась с нуля. Мы отталкивались от форм антивенных знаков без опоры на гротеск.

Наклонные начертания TT Norms® Pro Serif идеально подходят для выделения текста, набранного TT Norms® Pro. Италики действительно привлекают внимание читателя, при этом выглядят гармонично, ведь в их формах всё ещё можно узнать характер оригинального TT Norms® Pro.

Шрифтовая пара гротеска TT Norms® Pro и антиквы TT Norms® Pro Serif — это дуэт, в котором один шрифт дополняет другой. И если с характером современного, универсального и нейтрального гротеска многие хорошо знакомы, с более консервативной и строгой текстовой антиквой ещё предстоит познакомиться. То, как именно сочетать эти шрифты, вы можете выбрать сами.

Где применять шрифтовые пары

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

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

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

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

Нейтральный гротеск и консервативная текстовая антиква. Шрифты: TT Norms® Pro Serif и TT Norms® Pro.

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

2. Изящная дисплейная антиква и гуманистический гротеск. Шрифты: TT Livret Display + TT Fellows.

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

3. Акцидентный шрифт и текстовая антиква. Шрифты: TT Ricordi Marmo + TT Livret Text.

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

Заключение

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

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

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

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

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

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

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

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

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

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

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

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

https://youtu.be/JOQJO\_V7sew

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

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

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

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

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

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 сказано, что он подходит для «книжного текста» и «мелкого текста», а это является синонимами хорошего шрифта для основного текста ?

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

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

Это 3 отличных шрифта … которые не подходят для основного текста!

Вместо этого вам нужен простой шрифт с засечками или без засечек с большой высотой 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. Определите правила использования

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

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

Заголовки: Scala Sans
Текст: 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 шрифта без засечек, каждый шрифт используется по-разному, чтобы дизайн никогда не казался непоследовательным, беспорядочным или перегруженным – или нет? ? Вам решать!

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

6. При необходимости повторите шаги 4 и 5

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

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

Вот и все… вроде как.

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

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

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

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

Есть вопросы или комментарии по поводу сочетания шрифтов? Пишите автору ?

Перевод статьи learnui.design

Как найти идеальную пару шрифтов для вашего дизайна с помощью этих правил

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

Но потом — к тебе приходит печальное осознание того, что тебе нужен не один, а два! Потому что, черт возьми, клиент не будет счастлив, если его шрифт заголовка и их основной шрифт одинаковы. Они должны быть различны, но конгруэнтны; контрастные, но дополняющие друг друга; двухтональный, но оба в сообщении. Настоящая Уловка 22. Если бы только существовало руководство, в котором подробно рассказывалось бы о том, как работает спаривание шрифтов, и каковы шаги для идеального спаривания шрифтов…
Что ж, забавно, спросите вы.

Что такое сочетание шрифтов?

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

Источник изображения

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

Почему сочетание шрифтов так важно?

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

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

Надежные комбинации стилей

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

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

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

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

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

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

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

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

Serif/Sans-Serif — Опять же, обычное явление в Интернете, особенно в блогах WordPress и других автономных сайтах. Эти авторитетные и сразу надежные заголовки привлекают внимание и заставляют нас чувствовать, что нам говорят правду. Но затем, когда мы переходим в безтелое тело, мы обретаем ощущение знакомства. Вы часто будете видеть этот пейринг на сайтах, где есть много последователей определенного автора, например, в популярных блогах и т. п. Это потому, что отдельному писателю необходимо поддерживать дружеские отношения с читателем, когда он излагает свою прозу.

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

Display/Serif — Это, пожалуй, самая распространенная комбинация, которую мы увидим в Интернете, и на то есть веские причины. Экранным шрифтам повезло в том, что они могут пересекать границу с засечками и быть теми и другими. Дисплейные шрифты сильно привлекают внимание, заставляя нас задерживаться дольше, и поэтому они становятся популярным выбором заголовков для кликбейтеров и спиннеров. К этому выбору склонны те люди, которые пытаются привлечь трафик через рекламу, заголовки социальных сетей и перекрестные ссылки. 9Экранный шрифт 0005 может сказать что-то шокирующее, что заставит нас принять к сведению, но тогда шрифт с засечками приобретает авторитетный вид и заставляет нас чувствовать себя уверенно в информации, которую мы читаем.

Сайты Spin и блоги/новостные сайты с политической подоплекой часто используют эту комбинацию для быстрой и убедительной комбинации один-два.

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

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

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

Моноширинный/Serif — Моноширинные шрифты характеризуются немного более широкой полосой и общей неприязнью быть близко к чему-либо. Технически тяжелые сайты, практические советы и любой сайт, стремящийся к ультраминимальному веб-дизайну, часто будут иметь 9 баллов. 0005 моноширинный шрифт . Из-за их сходства с некоторыми шрифтами без засечек их может быть трудно отличить, но часто, если они выглядят так, как будто их вытащили из пишущей машинки, они будут моноширинными. Вы сможете заметить их, потому что расстояние между каждой буквой будет одинаковым, как если бы при каждом нажатии клавиши бумага смещалась на заданное расстояние, чтобы вместить каждую букву, будь то «i» или «w». ‘ — следовательно, моноширинный.

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

Monospace/Sans-Serif — Еще больше углубляясь в сферу технологий, эта комбинация, скорее всего, появится на логотипах блогов технологических компаний, практических советах для всего, что связано с технологиями, или на большинстве технологических стартапов. Это ностальгический намек на истоки их индустрии, возвращенный в современность без тела. В настоящее время начала проявляться тенденция использования восьмибитных шрифтов для заголовков, создающих ощущение «мы знаем, откуда мы пришли, и мы благодарим вас за это, но тем не менее — мы заботимся о ваших глазах, поэтому вот легко читаемый текст». шрифт.’ Подумайте об этой паре, если вы пытаетесь добиться этого чувства или если вы работаете в технологическом секторе, но будьте осторожны, это может выглядеть дешево, если выполнено плохо.

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

Суперсемьи спешат на помощь

К счастью, мы живем в мире, где создание шрифтов стало довольно простым делом, и, кажется, те, кто создает шрифты, настолько увлекаются им, что создают их множество. Суперсемейства — отличный способ сократить ваши проекты до идеального сочетания. Суперсемейства — это семейства шрифтов, которые выходят за пределы шрифта и охватывают его. Это означает, что семейство содержит шрифты из разных гарнитур. Но, поскольку они были разработаны одним и тем же человеком/командой, они [обычно] совпадают по тону. Это означает, что вы можете использовать один из их шрифтов с засечками для своего заголовка и их гротеск для основного текста (или наоборот), и у вас останется действительно хорошее сочетание. Суперсемейства, однако, являются обычным маршрутом для дизайнеров и компаний, которые много работают над дизайном для большого количества клиентов, поэтому убедитесь, что вы не крадете выбор у конкурентов, прежде чем выбрать одно из этих суперсемейств.

Контраст хороший, сходство плохое

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

Эффекты формы и пространства

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

‘Высота X’ и что, черт возьми, это значит

Правило «Высота X» — еще один псевдозакон спаривания шрифтов. Это не сложная вещь, и статистика говорит о том, что если высота «X» в заголовке и основной шрифт одинаковы, то они будут хорошо сочетаться. Конечно, размер шрифта должен быть таким же, как воспринимается компьютером, но в остальном это правило, которое вы можете попробовать. Это работает для многих из них, но для некоторых это не так. Так что, если вы не видите, что они подходят, то доверяйте своему выбору, а не X-Height. Тем не менее, это хорошее место для начала и еще один инструмент, который можно использовать для сужения поля, прежде чем вы начнете оттачивать свои идеальное сопряжение .

Фактор «чувств»

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

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

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

Сочетание шрифтов: как найти правильные комбинации для вашего веб-дизайна

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

Джефф Карделло

Элементы не найдены.

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

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

Советы по комбинированию шрифтов в веб-дизайне

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

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

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

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

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

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

2. Создайте контраст, но не слишком сильный, с помощью пар шрифтов

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

Что произойдет, если мы возьмем шрифт с каллиграфическими завитушками, такой как Great Vibes, и объединим его с засечками, такими как Merriweather? В итоге мы получаем ощущение контраста, которое не очень приятно для глаз.

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

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

3. Ограничьте использование различных шрифтов тремя или менее

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

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

Суперсемейства позволяют использовать один и тот же шрифт несколькими способами. Взгляните на эти подборки из суперсемейства Roboto. Существует огромная разница между тонкостью Thin 100 Italic и сильным заявлением, сделанным Regular 400.

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

4. Сообщите о визуальной иерархии с помощью сочетания шрифтов

The Equitist, веб-сайт здравоохранения, созданный с помощью Webflow, передает свою иерархию с помощью различных стилей шрифтов, размеров и цветов.

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

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

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

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

Поэкспериментируйте с разным начертанием

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

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

Изменение цвета шрифта

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

Бесплатная электронная книга: Веб-дизайн 101

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

Прочитать

Подпишитесь на участие в программе предварительной оценки Webflow

Спасибо! Теперь вы подписаны!

Ой! Что-то пошло не так при подписке.

Прочитать

Гарнитуры, которые следует учитывать при составлении комбинаций шрифтов

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

Шрифты с засечками

Гарнитуры с засечками были разработаны для удобочитаемости в печати и восходят к концу 1700-х годов.

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

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

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

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

Идея сочетания шрифтов: EB Garamond и Montserrat

Здесь мы взяли шрифт с засечками EB Garamond меньшего размера в основном тексте и объединили его с шрифтом Montserrat большего размера в заголовке. Шрифты с засечками лучше подходят для больших фрагментов текста, если они имеют меньший размер шрифта.

Идея сочетания шрифтов: Libre Baskerville и Raleway

Более выраженные засечки и угловатость Libre Baskerville приятно контрастируют с тонкими линиями Raleway.

Шрифты без засечек

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

Идея сочетания шрифтов: Open Sans и Lato

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

Здесь мы используем Open Sans в заголовке вместе с Lato в основной копии, еще один шрифт без засечек.

Экранные шрифты

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

Идея сочетания шрифтов: Bubblegum Sans и Open Sans

Bubblegum Sans имеет радостные стилизованные буквы, которые отлично сочетаются с нейтральностью Open Sans.

Идея сочетания шрифтов: Poiret One и Lato

Poiret One ’ Тонкие штрихи в стиле ар-деко и тонкие линии делают этот шрифт отличным современным шрифтом, если вы ищете немного изысканности. Сочетание этого шрифта с более тонким шрифтом, таким как Lato, создает ощущение контраста, которое по-прежнему хорошо работает вместе.

Моноширинные шрифты

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

Идея сочетания шрифтов: IBM Plex Mono и PT Sans

Разработанный как дань уважения IBM, IBM Plex Mono — это современный шрифт с визуальной идентификацией, идеально подходящий для стартапов и других специалистов в области технологий. Сочетание этого моноширинного шрифта с PT Sans, который имеет более четкую геометрию, создает приятное ощущение контраста и визуальной иерархии.

Идея сочетания шрифтов: Roboto Mono и Roboto

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

Типографика необходима для веб-дизайна

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