7 инструментов для идеального сочетания шрифтов на вашем сайте

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

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

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

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



Google Fonts

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

Из списка доступных шрифтов, наведите курсов на шрифт. В нижнем левом углу предпросмотра шрифта, кликните See Specimen.

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

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



Typ.io

Это база данных, которой занимаются действительно эксперты в своем деле позволит вам просмотреть модные комбинации шрифтов, которые прямо сейчас используются на вебсайтах, а также позволит CSS дизайнерам подглянуть в код и править его. Потратьте немного времени на то, чтобы посмотреть архивы Typ.io и каталогизированные списки. И когда вы найдете сайт, который вам приглянется, просто нажмите «Get under the hood».

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

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



Web Font Blender

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

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



Fonts In Use

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

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


Canva Font Combinations

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


Font combinator

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

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



Font Pair

Хайден Миллз, студент дизайнер из Университета Индианы, разработал этот инструмент, чтобы помочь дизайнерам быстро и безболезненно найти проверенные комбинации шрифтов через Google Fonts.

Организованный по шрифтовым категориям, каждая комбинация упомянутая на Font Pair курирована Миллзом лично или предложена через форму Google доступную на сайте. Хотите попробовать на собственном тексте? Вы можете кликнуть прямо на любой из примером и отредактировать текст в любом месте на сайте.

Чего ожидать и что делать по SEO на остаток 2017 года

Советы, хитрости и секреты создания великолепного лендинга

Мобильное SEO в 2017 году. Всё что нужно знать и к чему готовиться.

Как пользователи реагируют на бренды в социальных сетях. Последние исследования

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