Комбинации шрифтов — ключевой аспект веб-дизайна. Они помогают выразить концепцию проекта, организовать информацию, установить нужную атмосферу и выделить важные моменты. Кроме того, правильный выбор шрифтов может повысить удобство использования сайта и оказать влияние на уровень конверсии. Наиболее важно — найти подходящие шрифты, которые гармонично complement друг друга. Как это осуществить, вы узнаете из данной статьи.
Основы типографики
Сначала ознакомимся с основными терминами, которые будут полезны для понимания темы:
- Кегль — размер символов.
- Начертание — насыщенность шрифта. Выделяют тонкое начертание, нормальное, полужирное, жирное и другие виды.
Образцы различных стилей шрифта
- Засечки — короткие штрихи на концах букв.
Пример шрифта с засечками
Обратите внимание на букву С. Если её форма ближе к полукругу, это свидетельствует о большой апертуре; в случае, когда она почти закрыта, апертура считается маленькой.
Знаки с различной апертурой
Это не просто термины, а основные характеристики, которые стоит учитывать при составлении шрифтовых пар.
В мире насчитывается несколько десятков тысяч шрифтов, которые можно классифицировать на разные типы, каждый из которых имеет свои характерные черты и области применения. Рассмотрим 4 главные категории.
Серифные (serif). Эти шрифты также называются антиква. Их легко идентифицировать благодаря небольшим засечкам на концах букв.
Так как даже мелкий текст, написанный шрифтом с засечками, легко воспринимается, такие шрифты часто встречаются в газетах и журналах. Их также можно использовать для оформления материалов в блогах и онлайн-изданиях.
Антиква смотрится формально и сдержанно, поэтому она довольно универсальна. Ее используют на сайтах государственных учреждений, медицинских клиник, юридических компаний и банков. Также серифные шрифты уместны в проектах об истории и искусстве.
К серифам относятся:
Без засечек (sans-serif). Эти шрифты также известны как гротески. Они довольно универсальны, поскольку смотрятся минималистично и современно. Однако считаются менее читабельными, чем антиква. По этой причине их используют в основном для заголовков.
На сайте проекта KOTI Sleepover заголовки написаны гротеском
К шрифтам без засечек относятся:
Рукописные (handwritten). Это шрифты, которые имитируют текст, написанный от руки.
Согласно исследованию , они помогают сделать продукт или бренд более «человечным» и увеличить продажи гедонистических товаров и услуг. Например, еды, одежды и товаров для дома.
Для основного текста такие шрифты тоже не годятся, так как читабельность — не их сильная сторона. Зато они позволяют стильно оформить заголовки или цитаты.
Пример использования рукописного шрифта на лендинге Yummy Ice
К шрифтам, имитирующим рукописный текст, относятся:
Моноширинные (monospace). Это шрифты, в которых каждая буква занимает одинаковое количество места в строке. Они легко читаются и хорошо смотрятся в небольших текстовых блоках.
Традиционно моноширинные шрифты применяют в программировании для написания кода. Из-за ассоциации с IT-сферой их часто используют для оформления сайтов digital-проектов.
Пример моноширинного шрифта на сайте Evolve Wealth
К моноширинным шрифтам относятся:
Что такое шрифтовые пары
Как правило, для оформления сайтов подбирают шрифтовые пары — несколько разных шрифтов, которые визуально сочетаются между собой.
Чаще всего их два. Первый применяют к заголовкам. Он должен привлекать внимание, поэтому может быть броским и необычным. Второй используют для текстовых блоков. Его задача — помочь донести информацию, так что он должен быть читабельным и более привычным глазу.
Шрифтовые пары выполняют на сайте сразу несколько важных функций:
Таким образом, шрифтовые пары помогают улучшить дизайн и юзабилити сайта. Но как сочетать между собой шрифты, чтобы они справились с этой задачей?
Критерии подбора шрифтовых пар
Опытные дизайнеры знают, что найти хороший шрифт бывает непросто, а подобрать идеальную шрифтовую пару — еще сложнее. Чтобы облегчить этот процесс, можно воспользоваться одним из основных правил комбинирования.
Принцип контрастов
Между собой хорошо сочетаются шрифты, которые чем-то отличаются друг от друга. Например, жесткие прямые линии гротеска хорошо уравновешивают плавные буквы антиквы.
Пример сочетания антиквы и гротеска на сайте Adjuvant Capital
Можно поставить в пару шрифты с разной высотой или шириной букв. Такое сочетание поможет сделать текст более экспрессивным и эмоциональным.
Пример сочетания шрифтов разной ширины на сайте Van Holtz Co
Правило подобия
Похожие шрифты тоже отлично гармонируют между собой. Для дизайна сайта можно ограничиться всего одним шрифтом и поэкспериментировать с его параметрами. Для заголовков использовать жирное начертание, а для основного текста — обычное.
Пример использования одного шрифта с разными начертаниями — шаблон « Итальянская пицца » в конструкторе Craftum
Можно сочетать два разных шрифта с угловатыми буквами или, наоборот, с плавными линиями. Беспроигрышный вариант — комбинации шрифтов из одной группы. Например, два серифа или два гротеска.
Такие сочетания смотрятся спокойно и сдержанно, а также делают текст визуально более связным.
Пример комбинирования двух гротескных шрифтов на платформе Rijksmuseum
Чтобы шрифтовая пара смотрелась на сайте уместно, решите для себя, какие эмоции она должна вызывать у читателя. Как мы уже упоминали, шрифты могут создавать определенное настроение и вызывать разные ассоциации:
Получается, что для интернет-магазина детских товаров можно использовать шрифтовые пары с плавными, округлыми буквами. А текст для сайта страховой компании или нотариальной конторы можно написать серифом.
Еще один важный нюанс при выборе шрифтовой пары для сайта — это бюджет проекта. Если на создание сайта выделено достаточно средств, можно разработать для бренда уникальный шрифт или купить лицензию на уже существующий. Если бюджет ограничен, можно подобрать что-то в бесплатной библиотеке шрифтов, например, AllFont.ru или MyFonts (сервис не работает в России без VPN).
Важную роль в подборе шрифтовых пар играет насмотренность. Прокачать это качество поможет статья « Тренируем насмотренность: полезные ресурсы для дизайнеров ».
Особенности подбора шрифтовых пар в кириллице
Видишь стильный текст на английском языке, находишь и скачиваешь этот шрифт, пишешь им текст на русском… И понимаешь, что он смотрится иначе. Иногда вместо букв и вовсе отображаются непонятные символы.
Дело в том, что многие популярные шрифты создавались под латиницу и не поддерживают русский язык. Чтобы не столкнуться с этой проблемой, ищите шрифты на сервисах в разделах « Cyrillic» .
Еще один важный нюанс, который нужно учитывать: слова в русском языке длиннее, чем в английском, итальянском, французском и других романо-германских языках. Из-за этого внешний вид шрифта, которым написан текст на кириллице и латинице, может отличаться. Чтобы убедиться, что шрифт смотрится хорошо, обязательно протестируйте его на русской фразе. Желательно на той, которую планируете использовать на сайте.
Помимо этого, в кириллице могут быть не отрисованы буквенные сочетания — глифы. Из-за этого слова в некоторых местах могут смотреться разорванно. Чтобы избежать такого эффекта, проверяйте шрифты с помощью панграмм — это специальные предложения, состоящие из всех букв алфавита.
Наиболее знаменитая панграмма: «Съешь ещё этих мягких французских булок, да выпей же чаю». Дополнительные примеры можно обнаружить в статье «Панграммы» от Артемия Лебедева.
Где можно скачать удачные шрифтовые пары? Кириллица широко представлена в библиотеках Google Fonts и ParaType . Также красивый кириллический шрифт можно найти в тематических телеграм-каналах. Например, « Бесплатные шрифты ».
Конструктор Craftum содержит встроенную коллекцию шрифтов, для которых можно настроить размер, жирность, межстрочное расстояние и другие параметры. Помимо этого сервис предоставляет 170 стильных шаблонов сайтов, 200 готовых блоков и удобный инструмент для дизайнеров — дизайн-блок, с помощью которого можно создавать уникальные проекты. Другими словами, здесь есть все, что нужно для разработки качественного сайта.
Блок для редактирования текста в конструкторе Craftum
Лучшие шрифтовые пары
Делимся подборкой шрифтовых пар, которые подойдут для сайтов разной тематики. Берите на заметку и используйте в своих проектах.
Bebas Neue и Open Sans
Bebas Neue легко узнать по узким и высоким буквам. Его можно использовать для заголовков, а также с целью выделить информацию о скидках и акциях, времени или месте проведения мероприятия.
Open Sans гармонирует с Bebas Neue за счет букв, слегка вытянутых по высоте. Он легко читается благодаря простым линиям и часто используется для основного текста.
Оба шрифта лаконичны, нейтральны и легко вписываются в разный контекст. Например, их можно использовать для лендингов образовательных курсов или магазинов одежды, которые придерживаются концепции минимализма.
Стоит отметить, что Bebas Neue часто выбирают для дизайна проектов о кино. Например, логотип компании Netflix набран именно этим шрифтом.
Шрифт Bebas Neue используется для оформления логотипа компании Netflix.
Yeseva One и Noto Sans
Название шрифта Yeseva One происходит от фразы «да, Ева». Он смотрится мягко и женственно за счет плавных изгибов и засечек. Подходит для заголовков на сайтах студий красоты, SPA-салонов, магазинов женской одежды и косметики. Шрифт Noto Sans его отлично уравновешивает за счет более прямых линий и отсутствия засечек.
Montserrat и Georgia
Montserrat — популярный геометрический шрифт без засечек, а Georgia — серифный шрифт, который выглядит довольно формально.
Эта комбинация смотрится минималистично и существует вне времени. Выбирая ее, вы можете быть уверены, что текст на веб-странице будет смотреться стильно как сейчас, так и спустя десяток лет. Такая шрифтовая пара подойдет для корпоративных сайтов и интернет-магазинов, которые должны существовать долго и не терять своей актуальности.
Bangers и Contrail One
Шрифт Bangers выполнен в стиле комикса и задает мультяшную тематику. Его можно использовать для броского заголовка.
Contrail One — более нейтральный шрифт, которым можно написать основной текст. За счет небольшого наклона букв и закругленных углов он хорошо сочетается с Bangers.
Эта оригинальная шрифтовая пара подойдет для интернет-магазина комиксов, лендингов тематических мероприятий, сайтов с детской одеждой и игрушками или досуговых центров для подростков.
Типографики NY Irvin и Adobe Caslon
NY Irvin разрабатывался специально для газеты New York Times. Он отражает дух эпохи Возрождения. Шрифт Adobe Caslon, в свою очередь, был создан еще в 1722 году и активно использовался в Британской империи. С тех пор он несколько раз видоизменялся, но сохранил дух того времени и впитал в себя сдержанность, характерную для англичан.
Такая шрифтовая пара отлично подойдет для оформления исторических проектов и сайтов музеев.
Ошибки при выборе шрифтовых пар
Рассмотрим частые ошибки при выборе шрифтовых пар и обсудим, как их избежать.
Ошибка №1. Слишком много шрифтов
Мы понимаем, что шрифтов много, и большинство из них — красивые и интересные. Иногда сложно остановиться всего на парочке вариантов, хочется использовать все и сразу. Но так делать не стоит.
Чем больше шрифтов, тем сложнее добиться гармонии между ними. Они могут «спорить» между собой и противоречить друг другу. Это создает визуальный шум, в результате чего рассеивается внимание пользователей, а дизайн смотрится перегруженным.
Во всем нужно знать меру. Поэтому оптимальное количество шрифтов — 2 или 3. Но если вам хочется поэкспериментировать и у вас достаточно опыта, чтобы не переборщить, — не будем вас останавливать!
Ошибка №2. Выбор шрифтовой пары не соответствует бренду
Шрифт должен отражать тематику проекта и соответствовать содержанию контента на сайте. Например, взгляните на шрифт Papyrus.
Этот шрифт отлично подойдёт для веб-сайта музея или целевой страницы туристического агентства, занимающегося организацией поездок в Каир, так как он перекликается с древнеегипетской графикой. Это идеальный выбор для данной темы. Однако для интернет-магазина бытовой техники такой стиль вряд ли будет уместен, поскольку он не создает ассоциаций с чайниками, стиральными машинами и прочими домашними устройствами.
Ошибка №3. Шрифты слишком нейтральные
Помните, что одна из задач шрифтовых пар — структурировать информацию. Если вы решите использовать два похожих шрифта одинакового размера и с одинаковым начертанием, велика вероятность, что они просто сольются.
Как избежать такой ситуации? Для заголовков используйте более жирное начертание или больший размер букв, чем у основного текста.
Ошибка №4. Шрифты слишком экспрессивные
Будьте осторожны, ставя в пару два выразительных шрифта. Такое сочетание может оказаться сложным для восприятия и отпугнуть пользователей.
Старайтесь находить баланс. Выберите один необычный шрифт и уравновесьте его более нейтральным.
Не сказать, что образ A$AP Rocky на Met Gala 2023 был нейтральным, но в какой-то мере «успокаивал» лук Рианны. Источник: Spletnik
Ошибка №5. Шрифты слишком креативные
Некоторые шрифты смотрятся оригинально, однако плохо читаются и могут вызвать у пользователей недопонимание. Их можно использовать в качестве декоративного элемента. Но для текста, который содержит важную информацию, лучше подбирать более нейтральные варианты.
Сладость или возмездие? Источник: Pikabu
Онлайн-сервисы для подбора шрифтовых пар
Иногда на поиски «той самой» шрифтовой пары уходят часы, а то и дни. Чтобы быстро найти удачную комбинацию, можно воспользоваться онлайн-сервисами.
Fontjoy . Это бесплатный генератор шрифтовых пар с довольно простым и понятным интерфейсом. С помощью специального бегунка вы можете указать, насколько шрифты должны быть похожими или разными.
Интерфейс программы Fontjoy
Mixfont . Сервис не только подбирает гармоничные комбинации шрифтов, но и демонстрирует, как они будут выглядеть в разных блоках сайта. Например, в меню, на главном экране и в карточках товаров.
Сервис Mixfont показывает, как шрифтовая пара будет смотреться на сайте
Fontpair . Программа использует шрифты только из бесплатной библиотеки Google Fonts. Готовые комбинации здесь встроены в макеты веб-страниц — вы можете оценить, как они будут смотреться на сайтах с разной тематикой, в разных блоках и в разной цветовой гамме.
Примеры сайтов с разными шрифтовыми парами из каталога сервиса Fontpair
Классная фишка Fontpair — карточки с описаниями и полезными подсказками. В них указаны советы, с какой целью лучше использовать тот или иной шрифт.
Эта карточка сообщает, что шрифт Poppins отлично подходит для стартапов
Typespiration — это еще один инструмент, основанный на Google Fonts. Этот сервис способствует выбору шрифтовых сочетаний и соответствующих цветовых палитр.
Если вы уже решили, что хотите писать заголовки каким-то определенным шрифтом, то можете указать его в панели настроек. Сервис подберет для него гармоничную пару.
Интерфейс сервиса Typesiration
Fonts In Use . Все шрифты в этом сервисе разбиты по категориям. Например, искусство, дети, спорт, технологии, музыка и многие другие. Можно настроить поиск по формату использования шрифта: для сайта, рекламного баннера, афиши и так далее.
Сервис можно использовать для вдохновения и развития насмотренности. На нем вы найдете не только удачные сочетания шрифтов, но и примеры, как они применялись в разных проектах.
Интерфейс программы Fonts In Use
Adobe Fonts . Программа не поддерживает функцию онлайн-генерации, но предлагает готовые наборы шрифтовых пар. Здесь вы найдете подборки шрифтов, которые подходят для разных тематик.
Сервис удобен для тех, кто работает в программах Photoshop или Illustrator. Он позволяет интегрировать любой из 20 000 шрифтов во все приложения семейства Adobe за один клик.
Наборы шрифтов в Adobe Fonts
Typotheque . Генератор подбирает пары на основе выбранных вами характеристик. Вы можете задать язык текста, цель шрифта, пропорции, настроение и другие параметры. Также можно указать стиль, например, сериф, гротеск или моноширинный.
Интерфейс платформы Typotheque. Для выбора шрифта можно задать, какие эмоции он должен вызывать.
Топ-10 комбинаций шрифтов 2021
Знание того, как правильно сочетать нужные шрифты, требует навыков и практики. Поэтому мы создали список из 10 комбинаций шрифтов, которые идеально сочетаются друг с другом:
1. Exo и Web Serveroff
Комбинация этих шрифтов, состоящая из Exo для текста заголовка и Web Serveroff для субтитров и основного текста, идеально подходит для любого контента, связанного с наукой.
В качестве отображаемого шрифта, который также можно использовать меньшего размера, Exo имеет футуристический вид, а Web Serveroff — это крутой узкий шрифт без засечек.
2. Oswald и Lato
Oswald — это сильный и жирный шрифт без засечек, который хорошо работает в различных дизайнерских проектах, включая резюме. Он не только передает уверенность, профессионализм и стабильность, но также хорошо сочетается с множеством других шрифтов для основного текста.
Второй шрифт без засечек, Lato, был использован для более мелкого текста из-за его читаемости и более округлого и дружелюбного внешнего вида, чтобы уравновесить Освальда.
3. Monteserrat и Lato
Винтажный шрифт Montserrat, напоминающий городскую типографику первой половины 1900-х годов, используется в сочетании со шрифтом без засечек Lato. Монсеррат очень удобно-читаемый и при меньшем размере, он также используется в качестве подзаголовка.
Как геометрический шрифт, состоящий из простых форм, Montserrat хорошо сочетается с таким универсальным шрифтом, как Lato, который сочетает в себе серьезность и теплоту своей индивидуальности. Оба они чистые и гладкие, что всегда хорошо сочетается с любым дизайнерским проектом.
4. Rokkitt Helvetica
Освальд использован жирным шрифтом и курсивом. Освальд, как очень чистый и разборчивый шрифт, особенно хорошо работает в заголовках ; слегка наклоненный вправо, он также добавляет ощущение движения и динамизма этому изделию.
Для ясности и разборчивости вневременной и очень популярный шрифт Helvetica используется как для субтитров, так и для основного текста.
6. Helvetica Fjord
Trebuchet — это популярный шрифт, который применяется во многих проектах благодаря своим открытым формам, округлым элементам и высокой оси x, что делает его легко читаемым.
Здесь он гармонично сочетается с Fjord, который идеально подходит для больших блоков текста небольшого размера.
9. Trocchi ST Marie
В этом примере хороший контраст достигается за счет использования Archistico и St.Marie. В то время как Archistico — это игривый дисплейный шрифт, который выглядит так, как будто он был нарисован от руки, St. Marie более узкий и формальный.
Выбирая изображения для своего проекта, убедитесь, что вы выбрали те, которые дают вам достаточно места, чтобы вы могли легко наложить текст.
Шрифтовые пары на все случаи жизни: большая подборка для ваших документов
Вместо вывода делимся тремя универсальными правилами типографики, которые будут полезны и недизайнерам:
Посмотреть портфолио «Логомашины» можно на сайте, а почитать полезный контент от наших дизайнеров — во ВКонтакте.
