Ошибки дизайнеров при работе с типографикой

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

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

Основная задача типографики — коммуникативная. При помощи текста и его внешнего вида человек получает информацию, взаимодействует с интерфейсом.

Эмоциональная

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

Айдентика

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

Структура и навигация

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

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

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

Много стилей шрифтов

Одна из самых распространенных ошибок — использование большого количества разных стилей.

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

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

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

Еще одна ошибка, связанная с гарнитурами — это использование похожих друг на друга шрифтов. Например, микс из Didot и Bodoni или Garamond и Sabon — не самая лучшая идея.

Примеры удачного использования разных шрифтов для заголовка и основного текста:

Обилие декоративных шрифтов

Часто в погоне за красотой дизайнеры забывают о читабельности текста.

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

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

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

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

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

Адаптивный шрифт

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

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

Капс для основного текста

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

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

Мелкий шрифт

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

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

Выключка по правому краю или по ширине

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

1. Выключка по центру

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

2. Выключка по правому краю

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

Пример выключки по правому краю для поддержания силовой направляющей.

3. Выключка по ширине

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

4. Выключка по левому краю

Самый оптимальный вариант, привычный для нас. Подходит для длинных основных текстов.

Непродуманное выравнивание

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

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

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

Неверное определение интерлиньяжа и кернинга

Интерлиньяж — междустрочный пробел, расстояние между базовыми линиями соседних строк. В компьютерной верстке это понятие обычно называют «межстрочный интервал».

Чем больше межстрочный интервал, тем больше пространство между строками, следовательно, читать их становится удобнее. Но слишком большой интерлиньяж делает текст неудобным для чтения — все расплывается и трудно проследить последовательность строк. Оптимальное значение межстрочного интервала на 30 % больше высоты символов или в 1,5 раза больше размера шрифта.

Кернинг — расстояние между буквами.

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

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

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

Нет логики в отступах

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

Отступы между текстовыми блоками должны быть больше межстрочных отступов (внешние отступы должны быть больше, чем внутренние). Чем меньше расстояние между линиями текста, тем более связанным и единым он нам кажется. Чтобы пользователь не запутался, где заканчивается один и начинается другой блок, отступ между ними должен быть ощутимым. Например, от 120 до 180 px.

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

Слишком длинные или короткие строки

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

Оптимальное количество символов в строке — около 60.

Для мобильных устройств — 30-40 символов.

Нарушенная иерархия

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

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

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

Низкая контрастность

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

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

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