Как подобрать шрифты для своего проекта?
Привет! Ранее уже писала коротенькую статью про классификацию и виды шрифтов. В этот раз расскажу о том, как все эти сухие знания применить на практике.
В первую очередь, стоит сказать о том, что дизайн — это не про красоту. Точнее НЕ ТОЛЬКО про красоту. Это про удобство и комфорт. С помощью дизайна мы помогаем людям выполнить свою работу, осуществить свою мечту или просто экономим людям время при решении повседневных дел, таких как оформление доставки, покупка товаров или онлайн-курсов. Грамотный дизайн — это искусство, которое имеет четкие задачи.
Шрифты и типографика — это то самое искусство, которое поместили в строгие рамки литерной площадки. Нужно коротко, быстро и понятно донести пользователям свою мысль и характер проекта. Поэтому при выборе шрифта нужно руководствоваться не красотой, а смыслами, которые вложены в данную гарнитуру.
Контекст
1) История применения шрифта, время его создания, к какой группе он относится — все эти теоретические знания очень важны. К примеру, наш мозг прочно закрепил ассоциативные цепочки:
Антиква — это про старину, классику. утонченность, моду и красоту.
Гротески — что-то, связанное с IT, банковской сферой, гейм-дизайном.
Акцидентные шрифты — про что-то уникальное и необычное.
2) Цель проекта:
печатное или электронное издание;
если печать, то какой носитель? (поверхность — немелованная бумага, мелованная, тиснение, фактура ткани; способ печати — офсетная печать, цифровая, высокая, рельефная, эстамп, шелкография, конгревное или блинтовое тиснение);
нужно много или мало вариантов насыщенности? начертаний? пропорций? ;
достаточно ли в гарнитуре символов?;
какой масштаб графики? (листовка, кружка, баннер, постер, веб-сайт, приложение и т. д.).
3) Форма и анатомия шрифта:
Чем больше буквы отличаются друг от друга, тем проще воспринимать текст (крупное очко и заметные внутри- и межбуквенные просветы);
форма строчных букв - легко ли читать большой объем текста?
4) ТЗ/бриф заказчика:
компания молодая?
как давно на рынке?
для чего нужен проект?
какие задачи должен закрыть дизайн?
исследование целевой аудитории (возраст, пол, увлечения, что их цепляет, а что отталкивает, насколько хорошо они знакомы с продуктом/услугой и какие у них ожидания?).
Визуальная гармония
если шрифтов несколько, они должны сочетаться между собой в пропорциях, очком и высотой прописных букв.
Для набора большого текста рекомендуется использовать антикву с небольшим интерлиньяжем, так как за счет нижних и верхних выносных элементов строчных букв взгляд легко скользит по строчкам и различает текст. Гротески читать значительно сложнее, так как взгляду буквально не за что зацепиться.
Удобочитаемость и различимость также должны учитываться. Удобочитаемость - это восприятие всего текста целиком. А различимость - конкретных букв. Для баланса этих показателей рекомендуют использовать 45-60 знаков в строке, а при уменьшении кегля увеличивать интерлиньяж (и, соответственно, наоборот).
Шрифты должны быть заметно разными. Один - для заголовков, а второй - для основного текста. Если шрифты будут похожи - глаз будет уставать.
Но не стоит использовать более 2 шрифтов. Максимум 3. Так как это создает лишний шум и мешает воспринимать контент.
Как подобрать удачные сочетания?
1) Используй сайты-помощники
- Fontjoy подбирает шрифты с максимальной совместимостью. Можно настраивать поиск вручную или автоматически;
- Mixfont моментально подбирает комбинации и подставляет свой вариант дизайна главного экрана;
- Fontpair от Google. Использует только бесплатные шрифты и генерирует свой пример дизайна для выбранной пары;
- Fonts In Use - отличный ресурс для тренировки насмотренности. В основном представлены работы из сферы графического дизайна, но для веб-дизайнеров можно подсмотреть массу интересных визуальных решений.
2) Прокачивай насмотренность и разбирай чужие дизайны по полочкам.
Нашел классный дизайн? Приучи себя раз в неделю садиться и разбирать чужие работы поэтапно: какой тут шрифт? какой кегль? а начертание? какая цветовая схема? отступы? расположение элементов? сетка? графические приемы? маркетинговые приемы? Что привлекает, а что, наоборот, отталкивает? - Всё это даст ощутимый скачок в развитии.
В следующей статье рассмотрим этап подбора цветовой композиции для сайта, как это сделать быстро и просто.
Увидимся!*
***Все вышеуказанные примеры работ принадлежат правообладателям и защищены авторским правом.