Главное о шрифтах

Больше о типографике и шрифтах

Шрифт проектируются для определенной цели. У каждого — разные характер и настроение

Поэтому к подбору шрифтов и верстке текста на странице важно подходить осознанно.

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

«Живая Типографика», Александра Королькова;

«Книга про буквы от А до Я», Юрий Гордон;

«Типографика: шрифт, верстка, дизайн», Джеймс Феличи.

Углубиться в типографику, верстку и узнать об использовании шрифтов можно на курсе «Веб-дизайн с нуля» от Skillbox.

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

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

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

Контрастность при помощи насыщенности шрифта

Безошибочный способ построить иерархию, изменить размер шрифтов в зависимости от роли

Но не менее важно помочь читателю четко разделив веса шрифтов

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

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

Правила подбора шрифтовых пар

Со времен первой печатной книги создано много шрифтов. Как прекрасных так и ужасных. Поэтому не все годятся для страниц вашего проекта. Давайте разберемся почему?

Правило 1: «Мы с Татьяной ходим парой»

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

Однако шрифтовая абракадабра на странице не дизайнерский моветон, а сложности для того, кто смотрит страницу

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

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

Правило 2: «Гармония в контрасте»

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

Правило 3: «Размер, начертание, цвет – разве товарищей нет?».

Исходя из правила 2, как шрифтовую пару можно использовать один и тот же шрифт! Контраст создадут размер кегля (или написание в режиме «ЗАГЛАВНАЯ/прописная»), начертания (нормал, болд (жирный) и италик (курсив)), наклон (вместо курсива) и цветовые решения (цвет символов) и дизайнерские решения-аксессуары (вроде теней и прочего). Данное правило, подтверждает всякий текстовой редактор, организующий текст на странице.

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

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

Правило 4. «Каркас – всему голова»

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

«Плодородно» поле каркаса на «скрещивание» шрифтов одного семейства. Шрифты семейств serif и sans serif — обладатели широкого выбора толщин и начертаний, ширины символов и межсимвольного расстояния. Это дает до 40 вариантов написания даже у одной шрифтовой пары.

Правило 5. «Подобное к подобному».

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

Правила 6. «Фи!!! Какая гадость!».

Ряд шрифтов в дизайнерской среде считается моветоном, признаком отсутствия вкуса. Назовем несколько из них: lobster, Papyrus, Curlz, Comic sans и подобные. Не сказать, что кто-то где-то просто решил, что они плохие, и все. Эти шрифты из-за своей «разлапистой» графики и вправду с трудом сочетаются с другими. К тому же они «настроенческие» (см. правило 7).

Правило 7. «Когда очень хочется, то можно

Но осторожно!»

(Только для опытных дизайнеров и любителей экспериментировать!)

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

Вариант 1 (Совершенно нет сходства)

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

Вариант 2 (Настроение)

Наберите одно слова разными шрифтами. Даже стандартные начертания одного шрифта создают настроения

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

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

Как выбрать шрифт для проекта

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

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

• Какой имидж у вашей компании?
• Какие качества ценят клиенты?
• Какие качества вашей компании вы хотите подчеркнуть: надежность, креативность, стабильность?
• Опишите свой бренд в трех словах. Какие бы это были слова?
• Кто ваш идеальный клиент?

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

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

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

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

Используйте простые и стандартные шрифты. Не слушайте тех, кто говорит, что стандартные шрифты это скучно. С их помощью можно создавать сильные знаки. Пример простой типографики: логотип студии DILETTANT. Денис Башев набрал его с помощью Arial.

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

У многих зарубежных компаний в основе логотипа лежит шрифт Helvetica, например, — старый логотип Microsoft, Lush, Nestle и Toyota.

Не ориентируйтесь на конкурентов. По статистике Tasty Placement, 63% мировых брендов используют гротески, из них треть — Helvetica. Это не значит, что вы должны писать все тексты на сайте и упаковке тем же шрифтом. Контраст не должен быть кардинальным. Достаточно взять шрифт с более яркими выносными элементами или другим типом засечек, выбрать более открытый гротеск, заменить шрифт на антикву или брусковый.

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

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

Издание Meduza использует отдельные шрифты для разных рубрик: для новостей — антиква, для историй — гротеск.

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

На картинке пять разных шрифтов — это утомляет. О цветовых решениях даже не говорим.

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

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

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

Сочетаем 2: контраст

Контраст между двумя шрифтами часто является выигрышной комбинацией, но в каком случае шрифты будут контрастировать? Вот лишь несколько вещей, на которые стоит обратить внимание:

• Стиль: Взгляните на любой сайт, где можно выбрать шрифты, и вы увидите, что они отсортированы как Blackletter, Monospace, Script, Slab Serif и т.д. Шрифты разных стилей почти всегда будут сочетаться.
• Размер: большой шрифт, маленький шрифт. Все.
• Вес: Меняя вес шрифта легко подчеркнуть визуальную иерархию. Иерархию на основе контраста.
• Форма: взгляните на пропорции гарнитур. Относительная длина спусковых, изогнутость плеча, направление движения
• Цвет: особо не будем это рассматривать, но с помощью цвета легко убедиться, насколько хорошо работают два шрифта.

Самое простое – использовать контраст шрифта без засечек и шрифта с засечками.

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

Georgia и Arial

Где можно такое увидеть? Например у шаблона skeleton. В таком легком окружении Georgia и Arial прекрасно сочетаются.

Чуть изящнее..

PT Serif и PT Sans

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

Lora Bold и Istok Web

Давайте предположим, что мы не имеем дела со страницами, целиком состоящими из текста. Возможно, у нас есть только два заголовка и больше ничего (например, страница «Находится в разработке»). Здесь можно чуть больше проявить фантазию, т.к. нам не нужно вымерять размеры текстов. Как насчет ударного h1 вместе с подкрепляющим h2?

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

Bebas Neue и Alex Brush

Вот пример схожей комбинации, которая отлично работает:

Отличная работа  Gerren Lamson и Simon Walker

А для тех из из вас кому это интересно, вот гарнитуры этих шрифтов:

• Подзаголовок: Scriptorama Tradeshow JF
• Основной текст: Actor (Google Web Fonts)
• Заголовок: кастомная гарнитура от Simon Walker

И еще раз, цвет также позволяет неплохо подчеркнуть иерархию..

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

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

and Gudea

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

Alpha Slab One and Mako

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

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

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

Некоторые шрифты настолько прекрасны, что вы почти не можете промахнуться, выбрав их. Например, Buttermilk; роскошный, сочетающийся и декоративный. Он будет прекрасно смотреться с любым другим шрифтом (до тех пор, пока вы не попытайтесь украсть его искру!) Здесь мы его совместили с Georgia:

Buttermilk and Georgia

А здесь с Aller, таким же простеньким шрифтом без засечек:

Buttermilk and Aller

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

Buttermilk and Eccentric

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

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

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

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

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

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

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

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

Система 3. Два шрифта / тяжёлый & лёгкий

Такая система использует два шрифта без засечек с дополнительной X-высотой и межбуквенными интервалами. Заголовок имеет большой вес, содержание — лёгкий.Пример из жизни: для визуализации данных Reuter в материале «The Rohingya Crisis: Life in the camps» используется комбинация тяжелых и легких шрифтов. Дизайнер использовал фирменную гарнитуру Reuter «Knowledge» для заголовка. Прочая информация использует Source Sans Pro, доступный в библиотеке Google Fonts

Обратите внимание, как «Negative for E. Coli» выделено серым цветом, чтобы привлечь внимание к первым трём показателям

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

Используемые шрифты: PT Sans Bold — сильный округлый шрифт с большой X-высотой. PT Sans и PT Serif были разработаны для русского алфавита как всеобъемлющий шрифт для поощрения печати и чтения на национальной языке. В дополнение к кириллице, PT Sans поддерживает латиницу, греческий, арабский и другие формы. Семейство также включает стиль PT Sans Caption, который был разработан специально для мелкого шрифта и хорошо подходит для длинных заметок или разделов источников.

Содержимое в примере использует шрифт Noto Sans: это чистый шрифт со слегка сжатым межбуквенным интервалом, что компенсируется чёткой круглой апертурой и большой X-высотой. Табличные числа включают в себя прочное число «1» с широкой ножкой, придающую структуре чисел чёткий вид. Noto Sans является частью большого семейства шрифтов Noto. В группе более 100 различных шрифтов с целью обеспечения «визуальной гармонии» на нескольких языках. Это делает Noto Sans особенно хорошим вариантом для многоязычных визуализаций.

Классификация шрифтов

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

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

Антиква — шрифт с засечками, поэтому часто в названии есть слово serif («засечка»). Популярная антиква: Times New Roman.

Шрифт Times New Roman

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

Гротеск — классификация шрифта без засечек. В названии его часто встречается слово sans («без»). Популярные представители гротеска: Arial, Helvetica, Verdana.

Шрифт Arial

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

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

Комбинируйте шрифт с засечками и шрифт без засечек, чтобы создать контраст. Чем больше стили шрифтов не похожи друг на друга, тем больше у вас шансов создать удачную пару. Шрифты, которые слишком одинаково выглядят,  плохо смотрятся вместе. (Попробуйте совместить 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 и более шрифтов на одной странице, так как это может серьезно увеличивать время загрузки страниц сайта

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

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

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

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

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