Контентная природа Интернета требует хорошего понимания типографики, чтобы вы могли создавать надежные пользовательские интерфейсы и гарантировать, что ваши пользователи останутся вовлеченными, что улучшит их общий пользовательский опыт.
Чтобы помочь улучшить ваши навыки веб-типографики, я поделюсь некоторыми проверенными советами, которые позволят вам более уверенно работать с типографикой в вашем следующем проекте и проекте после него.
Используйте шкалу шрифтов, чтобы создать гармоничный набор размеров шрифта.
Как следует из названия, шкала типов работает на основе коэффициента масштабирования ( 1,25 ). Идея состоит в том, что вы начинаете с базового размера шрифта ( 18 пикселей ) и умножаете (или делите) его на коэффициент масштабирования, чтобы получить размеры шрифта либо более высокой (например, H₁, H₂ и т. д.), либо более низкой иерархии (например, Caption , кнопка и т. д.)
Шкала шрифта поможет вам создавать гармоничные тексты, потому что их размеры увеличиваются и уменьшаются в соответствии с установленной вами фиксированной шкалой .
Очень рекомендую заглянуть — type-scale.com
Выберите подходящую длину строки для основного текста и улучшите читабельность.
Работа с основным текстом и поиск подходящей длины строки — это баланс.
От 45 до 75 символов считается удовлетворительной длиной строки для страницы с одним столбцом, а строка из 66 символов (которая включает как буквы, так и пробелы) считается оптимальной.
Конечно, размер шрифта и высота строки также играют роль при принятии решения о читабельности , но держите длину строки в пределах от 45 до 75 символов, и читабельность текста повысится.
Уменьшите расстояние между буквами в заголовках, чтобы обеспечить лучший оптический баланс.
Уменьшение межбуквенного интервала в длинном основном тексте? Это точно «Нет».
Но для заголовков это уже будет хорошим решением.Ваши заголовки, скорее всего, будут намного больше и тяжелее, чем их компаньоны по основному тексту, поэтому расстояние между буквами иногда может казаться оптически больше, что не всегда то, что вам нужно, когда вы ищете идеальную эстетику.
Небольшое уменьшение межбуквенного интервала может сделать ваши заголовки более оптически сбалансированными, удобочитаемыми и в целом более приятными.
Используйте тест x-height или Il1, чтобы определить удобочитаемость выбранного шрифта
По сути, x-height — это высота строчной буквы «x» относительно прописной буквы (т. е. T) того же шрифта.
Если у вашего шрифта большая высота по оси x , это, как правило, значительно улучшает читабельность , особенно при использовании в длинном основном тексте.
Еще один способ определить удобочитаемость шрифта и сузить круг вопросов, если у вас есть несколько шрифтов, между которыми вы не можете выбрать, — это выполнить тест Il1 ( за этот совет спасибо замечательной Джессике Хиш ).
Здесь вы сравниваете три символа из определенного шрифта; Заглавная буква i (I), строчная буква L (l) и цифра один (1).
То, насколько разные формы букв выглядят друг относительно друга, может помочь определить удобочитаемость, особенно при работе с шрифтами без засечек .
Всегда стремитесь к лучшей читаемости с помощью x-height , Il1 или обоих при выборе шрифта для основного текста.
Установите высоту строки на основе x-height гарнитуры
Гарнитуры с разной высотой по оси x требуют разных измерений интерлиньяжа, чтобы добиться правильного разделения строк текста.
Даже если у вас может быть 2 гарнитуры с одинаковым размером шрифта (например, 18 пикселей), их высота по оси x может значительно различаться, что играет большую роль в выборе правильной высоты строки для реализации.
Например, Merriweather — это шрифт с большой высотой по оси x, поэтому для него требуется большая высота строки . Напротив, что-то вроде Mr Eaves Sans с его небольшой x-height требует меньшей высоты строки для достижения оптимальной удобочитаемости и разборчивости.
Надеюсь, эта статья показала вам, что следование нескольким простым и вечным правилам может изменить ваш дизайн при работе с типографикой в Интернете.Оригинал статьи тут.
Ко мне можно записаться на консультацию или менторство в тг: найдём точки роста и способы выдерживать конкуренцию в современных реалиях — устраиваться на работу, получить заказы, повышать чеки, чувствовать себя увереннее.Ещё можно подписаться на мой канал, чтобы оставаться на связи, не пропускать полезности и участвовать в бесплатных дизайн-ревью.
А здесь, на DSGNERS, можно почитать другие мои статьи и переводы:
Как разроботать CJM (пошаговое руководство)
Ужасный UX: 20 распространенных ошибок в пользовательском опыте
Частые ошибки при вёрстке текста: как исправить
Жизнь (почти) без правок: пошаговый план
Адовые клиенты! — как распознать
Правило банана в UX/UI дизайне
7 психологических приемов UX от настоящих психологов
7 способов улучшить свои навыки дизайнера пользовательских интерфейсов
Всем классных дизайнов! ❤️
