Ошибки в типографике

Ошибки в типографике, image #1

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

Однако огромное количество современных продуктов допускает ряд типографических ошибок. Об этих ошибках мы и поговорим.

1 Использование в одном макете большого количества шрифтов

Ошибки в типографике, image #2

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

Оптимально в одном проекте использовать 1-2 шрифта.

2 Использование экзотических шрифтов

Ошибки в типографике, image #3

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

Оптимальнее всего использовать шрифты проверенные временем, так как они по сей день смотрятся актуально. Примеры: Roboto, Bodoni, Open Sans, Montserrat и подобные.

3 Основной текст большими буквами

Ошибки в типографике, image #4

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

4 Текст поверх фото или видео

Ошибки в типографике, image #5

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

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

Ошибки в типографике, image #6

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

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

Ошибки в типографике, image #7

Выравнивание по правому краю осложняет чтение текста. Выравнивание по центру допустимо при небольшом количестве строк 2-4.

7 Длинные и короткие строки

Ошибки в типографике, image #8

Короткие строки делают текст рваным, а длинный очень не удобно читать.

8 Увеличение кёрнинга

Ошибки в типографике, image #9

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

9 Использование жирности, наклонности и подчеркивания во всём блоке текста

Ошибки в типографике, image #10

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

10 Отступы между блоками текста такие же или меньше межстрочных отступов

Ошибки в типографике, image #11

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

11 Слишком мелкий и крупный интерлиньяж

Ошибки в типографике, image #12

Слишком мелкий или крупный интерлиньяж (расстояние между строками) делает текст неудобным. Отличный лайфхак делать интерлиньяж в 1,3-1,5 раза больше размера шрифта.

12 Слишком мелкий шрифт

Ошибки в типографике, image #13

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

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

На примере шрифта Roboto рекомендую использовать 14-18 размер шрифта для основного текста на декстопе.

13 Абзацы без отступов

Ошибки в типографике, image #14

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

14 Выравнивание по ширине

Ошибки в типографике, image #15

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

15 Слабый контраст

Ошибки в типографике, image #16

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

16 Плохой подбор шрифта

Ошибки в типографике, image #17

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

17 Украшения

Ошибки в типографике, image #18

«Совершенство достигается не тогда, когда нечего добавить, а тогда, когда нечего убрать»

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

18 Висячие предлоги

Ошибки в типографике, image #19

Это некритичная ошибка, но, если вы привыкните её исправлять, то это будет говорить о вашем профессионализме.

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

В этом помогут специальные плагины и сайты. Как пример сайт-типограф Артемия Лебедева.

Источник

2201 views·100 shares