8 хитростей, которые сделают вашу типографику более эстетичной и читаемой

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

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

Светлый текст на темном фоне выглядит тяжелее. Это не только не слишком красиво, но и может негативно повлиять на читабельность текста. Используйте вариативный шрифт и измените его начертание в темном режиме. Уменьшите его на 50. Так, если в светлом режиме начертание равно 700, в темном оно будет 650. Теперь текст выглядит более аккуратно и эстетично, а значит, его легче читать.

Как правило, заголовки короткие. Обычно это одна строка текста, иногда две. В крайних случаях они разбиваются на три строки. Рекомендуемая высота строки для основного текста — около 140%. Когда мы устанавливаем аналогичное значение для заголовков, создается впечатление, что строки отталкиваются друг от друга. Они будто не связаны между собой . Уменьшите высоту строки заголовков до 110–120%. Так они будут выглядеть более компактными, целостными и эстетичными.

Функции OpenType становятся все более популярными. Это здорово, ведь их поддерживают все больше и больше шрифтов. Один из моих фаворитов — стилистические альтернативные глифы. Дизайнер, разработавший шрифт, предоставляет вам возможность использовать альтернативные символы. Чаще всего это дополнительные версии букв "a", "g" и "t".Не торопитесь. Проверьте, есть ли у вашего шрифта функции OpenType, с помощью которых вы можете придать ему более оригинальный вид.

Всем известно, что текст, набранный прописными буквами, труднее читать. Кажется, по этой причине некоторые просто отказались от их использования. Однако прописные буквы в умеренных количествах — как раз то, что нужно. Они помогают разграничить фрагменты контента и части интерфейса. Это отличный способ выделить слово или фразу, не обращаясь к жирному или курсивному начертанию. Я использую прописные буквы для обозначения категории статьи под заголовком. Интервал может помочь улучшить читаемость, если прописные буквы визуально слипаются, а также придать дизайну более изысканный вид. На мой взгляд, оптимальное значение letter spacing — до 5%.

Опытные дизайнеры не станут использовать шрифт для основного текста, если тот или иной символ слишком сильно выделяется из общей массы. Приведу пример: однажды я отверг шрифт только потому, что у строчной буквы "g" был необычный, странный хвостик. Она слишком сильно отличалась от остальных глифов и отвлекала внимание. А вы этого не хотите. Вы хотите, чтобы читатели были полностью поглощены контентом. То же самое относится и к цифрам в вашем тексте. Если они равновысокие или заголовочные (lining figures) — обычно это стиль по умолчанию, — они выделяются слишком сильно. Такие цифры притягивают взгляд читателя, даже если он не добрался до той строки, на которой они расположены. Пользователи отвлекаются, и читать становится труднее. Альтернатива — строчные цифры (old-style figures). Они хорошо сочетаются со строчным текстом и не бросаются в глаза. Очень немногие создатели сайтов и приложений заботятся об этой типографической детали. Если вы пополните их ряды, ваш сайт будет отличаться качеством оформления. Эту мелочь заметят только знатоки шрифтов, но неосознанно оценят ваши читатели.

Точнее, для аббревиатур. Чтобы показать, что я имею в виду, я напишу здесь ЦРУ. Я на 100% уверен, что вы заметили эту аббревиатуру, как только начали читать этот абзац (а может, и не заметили, но ваш взгляд точно на долю секунды скользнул к ней).Это слишком рано, и если бы в абзаце их было много, он был бы полон отвлекающих факторов. Ваши глаза просто не могут не замечать их. Поэтому читать текст становится труднее. Если ваш шрифт поддерживает small caps, используйте маленькие прописные буквы, чтобы сделать текст более удобным для чтения. Бонусный совет: не пытайтесь имитировать маленькие прописные буквы! Если шрифт не поддерживает small caps, но вы включили их принудительно, они будут фальшивыми. Фальшивые маленькие прописные буквы — это просто измененные прописные буквы, которые выглядят слишком тонкими по сравнению с остальным текстом. Это даже хуже, чем обычные прописные буквы.

Лигатуры делают сочетания определенных букв более привлекательными. Типичные примеры: "fi" "fl" "ffi". Это больше связано с эстетикой, чем с читаемостью, но в некоторых шрифтах отдельные пары букв могут быть настолько негармоничными, что даже обычные люди (неспециалисты) их заметят. А как вы уже поняли, читатели не должны замечать подобные детали. Если они обращают на них внимание, значит, дизайнер не справился со своей задачей. Всё, что они должны видеть, — это контент. В некоторых случаях лигатуры могут даже придать типографике определенный характер и сделать ее более оригинальной.

Эту ошибку я вижу постоянно. Многие дизайнеры пытаются выровнять нижнюю часть иконки по базовой линии подписи. Ведь именно так всё выравнивается в типографике? Базовая линия — это сетка, на которую надо ориентироваться? Не совсем так. Когда дело доходит до выравнивания иконок по тексту, лучше всего сделать иконку той же высоты, что и строка ее подписи. Если все сделано правильно, вертикальный центр значка будет идеально совпадать с серединой прописной буквы "X".

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

Если статья для вас была хоть немного полезна, вы можете поддержать автора подпиской на тг