15 критических ошибок в типографике, которых следует избегать

“Перо сильнее меча” — готов поспорить, что вы уже где-то слышали эту пословицу.

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

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

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

Надпись: “Правила можно нарушать”

1. Отказ от классических шрифтов

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

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

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

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

  • С засечками: Caslon, Bodoni и Fournier.
  • Без засечек: Avenir, Future, Gill Sans among Sans-Serifs.

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

2. Оригинальность в ущерб разборчивости

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

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

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

3. Слишком много прописных букв

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

Хотя вам кажется, что прописные буквы акцентируют внимание пользователей на определенной идее, люди могут воспринимать это как проявление агрессии, текст будто “кричит” на них. Следует внимательнее выбирать способы обозначения важного контента.

4. “Висячие” строки

Когда дело касается основного текста на сайте, “висячие” строки — “вдовы” (widows) или “сироты” (orphans) — одна из тех ошибок, которые легко упустить из виду. Иногда эти термины используются как синонимы, однако их нужно различать: “вдовы” — отдельные короткие строки, которые появляются в верхней части страницы текста, “сироты” — в нижней.

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

5. Слишком много шрифтов

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

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

6. Двойной пробел после точки

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

7. Бессистемное выравнивание

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

8. Недостаточный контраст

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

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

Надпись: “Человек, который не делает ошибок, вряд ли сделает хоть что-нибудь”

9. Отсутствие визуальной иерархии

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

Если ваша аудитория сталкивается с этой проблемой, пришло время ее решить. Попробуйте создать эффект “ABC”, где А — самый крупный, заметный заголовок (можно использовать жирный шрифт или исключительно прописные буквы, чтобы усилить впечатление), В — подзаголовок меньше размером (полужирный шрифт или курсив для контраста) и С — достаточно маленький основной текст.

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

Визуальная иерархия помогает пользователям быстро ориентироваться в контенте, поэтому о ней не стоит забывать!

10. Неправильный кернинг

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

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

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

11. Непродуманное сочетание шрифтов

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

12. Низкая читабельность

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

13. Чрезмерное добавление эффектов

Все мы любили функцию WordArt в Microsoft Word, но в настоящее время подобные спецэффекты могут лишь навредить вашему дизайну. Речь о 3D, тиснении, тенях, градиентах, различных деформациях и других похожих решениях. Нельзя сказать, что они полностью под запретом, но такой текст обычно выглядит излишне навороченным.

14. Рваные края

Хотя в нашей повседневной жизни всегда есть место беспорядку, в типографике это неприемлемо. Текст не должен выглядеть неряшливо и неаккуратно. Если параграф состоит из 5-6 строк, края зачастую получаются неровными, из-за чего он может выглядеть неопрятным.

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

15. Публикация без корректуры

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

Резюме

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

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

Источник:
instantshift.com
arrow