Маленькие детали, которые значительно улучшат читаемость и эстетику вашего веб-сайта
Типографика - это гораздо больше, чем просто выбор шрифта и определение размеров для заголовков и основного текста. Ее можно рассматривать как своего рода науку. И это не только наука, но и искусство.
В этой статье мы не будем углубляться в дебри типографики. Не каждому дано тратить кучу времени и усилий на создание красивой и оригинальной типографики. Но что, если у вас нет такого времени? Что, если вы хотите быстро улучшить типографику на своем веб-сайте всего за несколько минут?
Сегодня я хочу показать вам, как вы можете сделать вашу типографику замечательной с помощью восьми микро-советов менее чем за восемь минут. Поехали!
1.Как уменьшение жирности шрифта на темном фоне может улучшить эстетику и читаемость.
В последнее время в дизайн-индустрии стали популярны темные режимы и вариативные шрифты. Но многие веб-сайты допускают ошибку, когда переходят в темный режим - они оставляют жирность шрифта неизменной. Если заголовок установлен жирным в светлом режиме, он остается таким же и в темном режиме.
Это проблема, потому что светлый текст на темном фоне выглядит более массивным. Он выглядит неаккуратно и даже может влиять на читаемость текста. Моя рекомендация - рассмотрите использование вариативного шрифта и уменьшение жирности шрифта в темном режиме на 50. То есть, если в светлом режиме шрифт жирный (жирность 700), уменьшьте его до 650 в темном режиме. Теперь ваш текст выглядит утонченно и легче воспринимается.
2. Почему уменьшение межстрочного интервала для заголовков радикально улучшает их внешний вид.
Заголовки обычно короткие. Обычно это одна строка текста, иногда две. В некоторых случаях они могут занимать три строки. Но это всё. Для основного текста рекомендуется межстрочный интервал около 140%, предназначенный для полных абзацев. Когда это применяется к заголовкам, выглядит так, как будто строки отдаляются друг от друга. Они кажутся несвязанными. Уменьшьте межстрочный интервал для заголовков до значения между 110 и 120%. Заголовки будут выглядеть более компактно, связно и аккуратно.
3. Как использование функций шрифтов делает ваш текст более оригинальным.
Такие функции становятся всё более популярными, и это также означает, что всё больше шрифтов их поддерживают. Одной из моих любимых является стилистическая альтернатива. Разработчик шрифта предоставляет вам возможность использовать альтернативные символы. Обычно это альтернативные дизайны букв "a", "g" и "t".
Не используйте шрифт так, как он есть, из коробки. Проверьте, есть ли открытые настройки, которые вы можете использовать, чтобы сделать его более оригинальным. Ниже приведен пример использования шрифта Satoshi из коробки слева и с включенными стилистическими альтернативами справа.
4. Не бойтесь использовать прописные буквы, но при этом добавьте межсимвольный интервал.
Все уже знают, что слова, написанные прописными буквами, трудно читать. Поэтому, кажется, что все перестали их использовать вообще. Однако использовать прописные буквы в небольших объемах вполне допустимо. Это помогает разделить разные части контента или пользовательский интерфейс. Это стильный способ выделить что-то без использования полужирного или курсива.
Я использую прописные буквы, чтобы показать категорию статьи ниже. Заметьте разницу между левым примером без межсимвольного интервала и правым примером с межсимвольным интервалом в 5%. Введение межсимвольного интервала для прописных букв помогает улучшить читаемость и придает вашим дизайнам более аккуратный вид. Я рекомендую добавлять межсимвольный интервал до 5%. Всегда, ВСЕГДА добавляйте межсимвольный интервал для прописных букв.
5. Используйте lowercase цифры, чтобы сделать ваш текст более читаемым и лишенным отвлекающих элементов.
Самые опытные дизайнеры отказываются использовать шрифт для основного текста, если какой-то символ выделяется слишком сильно. Приведу вам пример - однажды я решил не использовать шрифт из-за того, что строчная буква "g" имела необычное, странное опущение (нижнюю часть буквы). Она слишком выделялась, и вы просто не можете не заметить этого - это отвлекает. Вы хотите, чтобы ваши читатели были полностью увлечены контентом.
То же самое относится и к цифрам в вашем тексте. Когда они используются в виде прямых цифр (обычно это стандартный стиль в шрифтах), они слишком выделяются. По мере того как читатели двигаются по тексту, им неизбежно приходится обращать внимание на эти цифры, как они до них дойдут. Это отвлекает и делает чтение сложнее.
Неяркие цифры - это альтернатива, они хорошо сочетаются с строчным текстом и не выделяются. Очень мало веб-сайтов и приложений уделяют внимание этой типографической детали. Поэтому, если вы это сделаете, ваш сайт будет типографически аккуратным и выделяться своей незаметной тонкостью. Тонкостью, которую заметят только фанатики шрифтов, но ваши читатели будут неосознанно ценить.
6. Используйте заглавные буквы, так чтобы ваши сокращения вписывались в текст.
Это то же самое, что и предыдущий совет, но для букв. Или, точнее, для аббревиатур. Давайте попробуем что-то сделать, я напишу "CIA" здесь, чтобы доказать мой аргумент. Я абсолютно уверен, что вы заметили "CIA" когда-то, когда начали читать этот параграф (может быть, вы этого не заметили, но ваши глаза определенно на него нацелились хотя бы на долю секунды).
Это слишком рано и если этот параграф был бы полон подобных аббревиатур, он был бы полон отвлечений. Ваши глаза не могут не замечать их и быть привлеченными к ним. Текст, который вы читаете, становится труднее читать. Если ваш шрифт поддерживает lowercase заглавные буквы, используйте, чтобы устранить отвлечения в вашем тексте и сделать его более читаемым.
Я использую Meta Serif Pro ниже и не использую lowercase заглавные буквы в левом примере и использую заглавные lowercase буквы в правом примере.
Бонусный совет: не используйте “поддельные заглавные буквы!” Если шрифт не поддерживает заглавные буквы, но вы включаете их принудительно, будут использоваться поддельные заглавные буквы. Поддельные заглавные буквы - это просто заглавные буквы измененного размера, которые выглядят слишком светлыми по сравнению с остальным текстом. Это даже хуже, чем просто использование обычных прописных букв.
7. Используйте лигатуры для улучшения эстетики и читаемости вашего текста
Лигатуры в типографике предотвращают некрасивые столкновения между некоторыми буквами, такими как "fi", "fl", "ffi". Это скорее на стороне эстетики, чем на стороне читаемости, но в некоторых шрифтах такие столкновения могут быть настолько очевидными, что даже обычные люди (не фанаты шрифтов) их заметят. И, как вы уже поняли, читатели не должны замечать типографические детали. Если они это делают, дизайнер провалил задачу. Все, что им нужно видеть, это контент. В некоторых случаях лигатуры могут добавить немного характера и оригинальности вашей типографии.
8. Выровняйте значки по высоте строки надписи.
При использовании значков, меток или иконок в вашем тексте, важно обеспечить правильное выравнивание их относительно межстрочного интервала. Это означает, что вы должны располагать значки таким образом, чтобы они не создавали неровностей или неудовлетворительных визуальных эффектов между строками текста. Значки должны быть выровнены вертикально по центру строки или иным образом учтены в типографике, чтобы обеспечить читаемость и эстетику текста.
Например, если у вас есть текстовая метка с иконкой слева от нее, убедитесь, что расстояние между значком и текстом равномерное и соответствует межстрочному интервалу. Это поможет сохранить четкий и аккуратный вид вашего контента.
Источник: https://uxdesign.cc/8-micro-tips-for-remarkably-better-typography-986c8c4f6d85
Переходите на наш Telegram канал, скоро там будет много интересного!
https://t.me/ux_ui_conversation
