Топ 20 шрифтов на 2020 год

Выбирайте готовые темы с удачными комбинациями шрифтов

Иногда нет времени пересматривать сотни видов шрифтов из коллекции Google Fonts, чтобы презентация соответствовала всем основным канонам визуальной иерархии. Тогда TemplateMonster поможет подобрать идеальное решение (а, может, и не одно) под ваш проект. Это презентация о маркетинге, бизнесе, финансах, медицине, музыке или спорте? В коллекции TemplateMonster есть шаблоны на эти и другие темы. Их разрабатывали профессиональные дизайнеры, поэтому можно не беспокоится о наличии правила контраста или визуальной иерархии, ведь все это уже учтено. Осталось только подобрать те самые шаблоны PowerPoint под свои потребности.

Наш ТОП-4 тем для презентаций:

Raleway

Raleway — это элегантный шрифт без засечек, предназначенный для заголовков и других текстов с большим кеглем. Первоначально его разработал Мэтт Макинерни только в тонком весе, а в 2012 году Пабло Импаллари и Родриго Фуэнзалида расширили его в семейство из девяти начертаний.

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

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

Примеры: weddingdronenewyork.com, bellevoye.fr/en, gdovindesigns.com/owed

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

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

Вбить в 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»

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

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

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

GORGEOUS

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

LUXIA

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

SIMPLIFICA

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

COCO

Дизайнер Хендрик Роландес создал Coco с мыслью о профессионале моды. Тонкие вытянутые буквы со специальной прозрачностью по краям создают прекрасные заголовки и короткие текстовые фрагменты. Коко прекрасно работает!

STEINER

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

COCOMAT

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

CLEARLIGHT

Clearlight — это шрифт, который органично сочетает элегантность с индустриализмом. Дизайнеры из Nima Visual разработали Clearlight для использования в качестве заголовков, субтитров и коротких абзацев. Это отлично подойдет для модной робототехнической компании или высококлассного бренда технологических услуг.

DINER

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

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

CASUAL

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

PRESTAGE

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

AUDREY

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

Учимся комбинировать шрифты как профессиональные дизайнеры: 5 советов

#1 Создавайте визуальную иерархию

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

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

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

#2 Создайте контраст

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

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

#3 Объединяем шрифты с засечками и без них

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

#4 Не нужно использовать одинаковые или очень похожие шрифты

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

#5 Одна презентация — максимум 3 шрифта

Эта рекомендация также касается оформления сайтов, шаблонов для постов в соцсети

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

Шрифты

Google Fonts

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

Сервис с бесплатными шрифтами Google Fonts.

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

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

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

Fontstorage

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

Во-первых, на сайте широкий выбор кириллических начертаний — сейчас доступны492 шрифта на русском языке. Во-вторых, во вкладке Font Playground вы можете сверстать часть текста, настроить цвета, фон и проверить, как будет выглядеть ваш текст на сайте. В-третьих, у сервиса есть плагин для браузеров Chrome, Firefox, Яндекс.Браузер и Opera. С его помощью вы можете определить шрифт и кегль гарнитуры на сайте, не открывая код.

Так выглядит инструмент Font Playground: на настройку стилей ушло три минуты.

Free Faces

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

Верстка и сетка самого сайта оставляют приятное впечатление.

Wordmark.it

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

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

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

Typeface

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

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

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

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

Fontbase

Инструмент, аналогичный Typeface, только для Windows, macOS и Linux. Позволяет систематизировать шрифты по папкам, проектам, начертаниям.

Есть интеграция с Google Fonts и Typekit, возможность подбирать шрифтовые пары и разрабатывать айдентику для компаний, интернет-изданий и наружной рекламы. Для комфортной работы вы можете настроить цветовую гамму и фон в приложении. Лицензионная версия стоит3 доллара в месяц, или29 долларов в год.

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

О лицензии шрифтов Google Fonts

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

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

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

С лицензиями разобрались — переходим к подборке. 

Как создать шрифт самостоятельно

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

Хотите персонализировать био в Instagram? Получите уникальную графику, чтобы выделить свой профиль. Введите текст — и сервис будет генерировать бесконечное количество вариантов.

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

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

Посыл сайта

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

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

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

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

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

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

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

Playfair Display

Playfair Display — один из самых известных шрифтов с засечками. Автор — Клаус Эггерс Соренсен. Идеология этого шрифта основана на изящных каллиграфических формах 18 века. Разработан в 2011 году, но до сих пор не теряет популярности. Контрастный и умеренно широкий, он идеально подходит для любых заголовков.

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

Примеры использования: zack.es, sachatourtoulou.com, councl.com.

Антиквы

Brygada 1918. Бесплатная антиква с кириллицей в шести начертаниях (три прямых и три италика). Презентация на Behance.

Wremena. Бесплатная антиква в трёх начертаниях с кириллицей, сделанная Романом Горницким.

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

Blacker Pro. Антиква с высокой контрастностью и агрессивными засечками. 5 из 69 начертаний можно использовать бесплатно, стоимость остальных — от 29 $, от 284 $ за все.

Lovelace. Антиквенная гарнитура с кириллицей. Всего 30 начертаний, Два начертания дарят бесплатно. Остальные от 29 $, все вместе от 189 $.

Гротески

Neue Machina. Бесплатный вариативный гротеск с кириллицей, выпущенный Pangram Pangram. Презентацию оформил Васьен Катро aka Baugasm

Обратите внимание — ловушки для чернил (inktraps) вошли в моду

PT Root UI. Новый бесплатный шрифт компании Паратайп. Предназначен специально для интерфейсов, содержит 4 начертания.

Inter. Бесплатный гротеск с кириллицей в 8 начертаниях. Сделал дизайнер из команды Figma. Открытые исходники.

Greenwich. Современный гротеск с кириллицей по мотивам английских шрифтов начала 20 века. Цена за каждое отдельное начертание от 35 $. Два начертания доступны бесплатно.

Closer. Семейство гуманистических гротесков с кириллицей от Mint Type. Низкий контраст и очень закрытая апертура. 18 начертаний (9 прямых + италики), 7 наборов стилистических альтернатив. Два начертания раздают бесплатно, остальные от 35 $.

Closer Text. Семейство закрытых гуманистических гротесков для набора. Начертания Text Light и Text Light Italic бесплатные, остальные 16 стоят от 35 $ по отдельности и от 159 $ вместе. 

FE Hero. Ультра-узкий гротеск с кириллицей. Идеально подходит для киноафиш и технических надписей. Можно использовать бесплатно в персональных проектах, коммерческая лицензия обойдётся всего в 299 ₽.

Vocal. Семейство гротесков с кириллицей. В гарнитуре 28 шрифтов толщиной от волосяного до хэви. Все вместе от 260 $, отдельные начертания от 35 $, начертание Light бесплатное.

Noah. 4 начертания этого семейства гротесков Fontfabric можно скачать бесплатно. Остальные 78 стоят от 299 $.

Mozer. Гарнитура Fontfabric с кириллицей. Полуузкий неогротеск, 16 начертаний. Начертание Semi Bold бесплатное. Остальные от 29 $. Вся семья от 169 $.

Kardinal. Гуманистический гротеск в 16 начертаниях (8 прямых + 8 италиков) с кириллицей. Два начертания бесплатные, остальные от 30 $, вся семья от 180 $.

Lil Stuart. Пара бесплатных шрифтов с латиницей: гротеск и скрипт. Повторяется в разделе с рукописными шрифтами.

Merriweather

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

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

Примеры: hopesandfears.com, , scmp.com.

Как узнать название шрифта

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

Ресурс, работающий на платформе My Fonts, сопоставит ваше изображение с более чем 133 тысячами начертаний. А приложение WhatTheFont для Apple или Android позволяет проводить поиск онлайн прямо с камеры телефона.

Платформа Font Squirrel предлагает воспользоваться опцией распознавания: загрузите изображение или укажите его URL — и искусственный интеллект выдаст результаты.

Поиск по каталогу из более чем 600 тысяч работ. Сервис предложит вам около 60 вариантов, похожих на те, что вы ищете, а также ссылки на сайты, где их можно приобрести.

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

Как я выбирал шрифты?

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

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

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

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

Как всегда оставаться в тренде

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

Вот три лайфхака, как всегда оставаться в тренде: 

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

Правила которые помогут вам выбрать нужный шрифт.

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

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

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

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

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

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

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

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

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

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

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

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

Так вы сможете быстрее и проще создавать различные пары.

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

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

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

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

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

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

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

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

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

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

Выбор шрифта для сайта

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

• Google Fonts – предлагает бесплатные шрифты, созданные профессионалами
• Fonts Adobe – шрифты предлагаются в едином пакете подписки Adobe Cloud.

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

На что стоит обратить внимание при выборе шрифта для веб-сайта:

Толщина шрифта

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

Проверка читаемости

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

Сочетание шрифтов

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

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

Размер загружаемого шрифта

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

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

Совместимость браузеров

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

Второстепенный шрифт

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