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

Привет! Ранее уже писала коротенькую статью про классификацию и виды шрифтов. В этот раз расскажу о том, как все эти сухие знания применить на практике.

В первую очередь, стоит сказать о том, что дизайн — это не про красоту. Точнее НЕ ТОЛЬКО про красоту. Это про удобство и комфорт. С помощью дизайна мы помогаем людям выполнить свою работу, осуществить свою мечту или просто экономим людям время при решении повседневных дел, таких как оформление доставки, покупка товаров или онлайн-курсов. Грамотный дизайн — это искусство, которое имеет четкие задачи.

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

Контекст

1) История применения шрифта, время его создания, к какой группе он относится — все эти теоретические знания очень важны. К примеру, наш мозг прочно закрепил ассоциативные цепочки:

Антиква — это про старину, классику. утонченность, моду и красоту.

Гротески — что-то, связанное с IT, банковской сферой, гейм-дизайном.

Акцидентные шрифты — про что-то уникальное и необычное.

2) Цель проекта:

печатное или электронное издание;

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

нужно много или мало вариантов насыщенности? начертаний? пропорций? ;

достаточно ли в гарнитуре символов?;

какой масштаб графики? (листовка, кружка, баннер, постер, веб-сайт, приложение и т. д.).

3) Форма и анатомия шрифта:

Чем больше буквы отличаются друг от друга, тем проще воспринимать текст (крупное очко и заметные внутри- и межбуквенные просветы);

форма строчных букв - легко ли читать большой объем текста?

4) ТЗ/бриф заказчика:

компания молодая?

как давно на рынке?

для чего нужен проект?

какие задачи должен закрыть дизайн?

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

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

Визуальная гармония

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

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

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

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

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

Но не стоит использовать более 2 шрифтов. Максимум 3. Так как это создает лишний шум и мешает воспринимать контент.

Как подобрать удачные сочетания?

1) Используй сайты-помощники

  • Fontjoy подбирает шрифты с максимальной совместимостью. Можно настраивать поиск вручную или автоматически;
  • Mixfont моментально подбирает комбинации и подставляет свой вариант дизайна главного экрана;
  • Fontpair от Google. Использует только бесплатные шрифты и генерирует свой пример дизайна для выбранной пары;
  • Fonts In Use - отличный ресурс для тренировки насмотренности. В основном представлены работы из сферы графического дизайна, но для веб-дизайнеров можно подсмотреть массу интересных визуальных решений.

2) Прокачивай насмотренность и разбирай чужие дизайны по полочкам.

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

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

Увидимся!*

***Все вышеуказанные примеры работ принадлежат правообладателям и защищены авторским правом.

Начать дискуссию