Найти в Дзене
Анна Астиум

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

Как дизайнеру, долгое время выбор шрифтов казался мне волшебством. Я могла часами рассматривать главный раздел сайта или рекламный баннер, корректируя меню шрифтов. «Выглядит ли это круто? Не слишком ли это скучно?». Иногда получалось, иногда тыкала пальцем в небо. Но вот секрет, который я узнала: сочетание шрифтов — это не темное искусство. Это всего на всего простая система. Когда вы разрабатываете баннер, который промелькивает за долю секунды, или веб-сайт, который нужно быстро прочитать, вы не можете просто выбирать шрифты, которые вам «нравятся». Вы должны выбирать шрифты, которые работают вместе, которые будут легко читаться. Самая большая ошибка новичков — это выбор двух слишком похожих шрифтов. Они выбирают Arial и Helvetica. Результат? Скучный, невнятный беспорядок. Ваш мозг ищет различия. Если различий недостаточно, это выглядит как ошибка. Решение: Если ваши шрифты слишком похожи, сделайте их очень разными. Я использую три основные стратегии для создания контраста, не создав
Оглавление

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

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

Но вот секрет, который я узнала: сочетание шрифтов — это не темное искусство. Это всего на всего простая система.

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

Вот моя практическая схема, которая поможет вам всегда добиваться успеха.

Золотое правило: контраст — король

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

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

Решение: Если ваши шрифты слишком похожи, сделайте их очень разными.

https://ru.pinterest.com/pin/98727416830913832/
https://ru.pinterest.com/pin/98727416830913832/

3 простых метода сочетания

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

1. Сочетание «Безопасная любовь» (Serif + Sans Serif)

Это классическая пара. Она работает в 90% случаев.

У одного есть ноги, у другого нет.

  • Используйте шрифт с засечками (например, Times New Roman или Garamond) для заголовка. Он выглядит классическим и внушающим доверие.
  • Используйте шрифт без засечек (например, Helvetica или Open Sans) для основного текста. Он выглядит чистым и современным.

Почему это работает: Формы настолько разные, что естественным образом разделяют информацию.

https://ru.pinterest.com/pin/328199891614565416/
https://ru.pinterest.com/pin/328199891614565416/

2. Сочетание шрифтов «семейства» (один и тот же шрифт, разная толщина)

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

  • Выберите одно семейство шрифтов с большим количеством вариантов (например, Roboto, Montserrat или Proxima Nova).
  • Используйте жирный вариант для заголовка.
  • Используйте светлый или обычный вариант для мелкого текста.

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

картинка взята из интернета
картинка взята из интернета

3. Сочетание шрифтов «настроения» (соответствие атмосфере)

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

  • Для роскоши: используйте тонкий, элегантный шрифт с засечками (Didot) с чистым шрифтом без засечек.
  • Для веселья: используйте жирный, округлый шрифт без засечек (например, Quicksand) с простым рукописным шрифтом для акцента.
  • Для привлечения внимания (продаж): используйте плотный, сжатый шрифт без засечек (например, Oswald). Он вмещает больше текста на небольшом пространстве и кричит: «ОБРАТИТЕ ВНИМАНИЕ!»

«Рентгеновская» проверка: смотрите на формы.

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

Когда вы это делаете, вы видите не буквы, а формы.

  • Заголовок должен быть крупным, массивным прямоугольником.
  • Основной текст должен быть спокойной, ровной серой полосой.

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

3 правила для рекламных баннеров (где времени мало)

На веб-сайте у людей есть время на чтение. На рекламном баннере у вас есть 3 секунды.

  • Единый голос: шрифт заголовка должен быть жирным и заметным. Подтекст должен быть простым. Не используйте вычурный шрифт для мелкого шрифта.
  • Избегайте рукописных шрифтов: красивый, похожий на почерк курсивный шрифт может выглядеть привлекательно, но на маленьком мобильном баннере он будет выглядеть как закорючка. Никто не сможет его прочитать. Оставьте его для больших, изысканных приглашений.
  • Иерархия: Самое важное слово (предложение) должно быть написано самым крупным и жирным шрифтом. Кнопка «нажмите здесь» может быть меньше. Направляйте взгляд с помощью размера.

Эта статья может быть полезной:

Примеры:

Конечный контрольный список

Перед экспортом дизайна задайте себе три вопроса:

  1. Прочитать ли это? (Если приходится щуриться, значит, это слишком вычурно).
  2. Есть ли контраст? (Достаточно ли разные шрифты?).
  3. Соответствует ли это настроению? (Похоже ли это на магазин игрушек или юридическую фирму?).

Типографика — это не про «творческого гения».

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

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

Больше интересных и полезных статей можно посмотреть на моем канале https://t.me/astium_design или личном сайте https://astium-design.ru/blog в разделе Блог.

Мой сайт - https://astium-design.ru

А также, есть группа в ВК, там я выкладываю всё самое актуальное https://vk.com/astium

Подписывайтесь, будет интересно)