Содержание статьи
Веб безопасные шрифты
О выборе красивого шрифта говорить можно долго, однако есть один немаловажный факт, о котором многие забывают. Если вы работаете в продукте и качественная скорость загрузки вашего сайта для вас важна, то выбирать шрифт нужно из вот этого списка веб безопасных шрифтов. Что это значит ? Это значит, что каждый представленный в этом списке шрифт есть как на MAC, так и на Windows уже внутри системы. То есть при загрузке сайта не придется идти на Google Fonts например, чтобы взять оттуда шрифт и применить его на вашем сайте, а сразу прогрузит его взяв из своего встроенного списка шрифтов. Это избавит вас от “мигания” — стартовой замены шрифта на несколько секунд на какой-то из встроенных, пока система сходит в API Google Fonts за нестандартным шрифтом, который вы выбрали для своего проекта.
Подробнее об этом можно прочитать здесь.
1IL test
Если вы все же пошли путем выбора нестандартного шрифта, то хорошим лайфхаком проверки его на удобочитаемость будет провести со своим шрифтом 1Il тест. Это значит сравнить в каждом шрифте цифру “1”, заглавную букву “i” и строчную букву “l”. Они не должны выглядеть одинаково. Это не дает шрифту, который прошел этот тест безоговорочного преимущества, однако немного возвышает его над шрифтами провалившими этот тест, с точки зрения удобочитаемости.
Контрастность WCAG
При работе с расстановкой визуальных акцентов мы должны быть на 100% уверены, что они будут считываться пользователями быстро и без проблем. В этом нам поможет международный стандарт WCAG (Web Content Accessibility Guidelines) — руководство по обеспечению доступности веб-контента — это большой и сложный документ, но нам этот стандарт понадобится, чтобы добиться правильного контраста нашего шрифта. Если не вдаваться в подробности, то вот калькулятор https://webaim.org/resources/contrastchecker/, в котором вам необходимо лишь ввести цвет фона и цвет текста на нем и получить вердикт о том, насколько правильно у вас обстоят дела с контрастом.
Вот такой результат, например, получаем мы по нашей Secondary СТА кнопке (см скрин). Не проходим только по одному показателю (ААА), но это допустимо.
Загрузка...
