Способы улучшения типографики сайта.

02.15.2023

UX/UI Дизайн Все о создании сайтов

#Советы #Юзабилити

Приведём самые простые способы улучшения типографики, которые Вы можете использовать на своём сайте:

1. Увеличение контраста цвета.

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

Светло-серый текст выглядит красиво, но функционально он бесполезен. Текст предназначен для чтения и должен соответствовать стандартам WCAG AA. Независимо от того, на каком устройстве он читается- на компьютерах или мобильных устройствах. Чем больше объём выкладываемого текста, тем больше у вас вариантов для выбора контраста цвета.

Текст должен быть тщательно протестирован на контрастность. Это отправная точка начала действий. 16-18-й шрифт текста на белом фоне никогда не должен быть светлее, чем вот этот цвет - #595959.

2. Уменьшение расстояния между заголовками.

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

В отличие от основного текста заголовки бывают короткими и они окружены большим количеством пробелов, особенно сверху и снизу. Дополнительный белый пробел визуально заполняет свободное пространство в форме слова и буквы тогда располагаются с определённым интервалом. Для этого уменьшите расстояние между буквами и словами заголовков на 1-5%, чтобы текст был легко читаемым.

3. Расстояние между словами.

Наш мозг не воспринимает слова по отдельности, когда мы читаем. Ему проще распознавать формы и группы слов.

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

4. Использование системных шрифтов для ввода данных.

Конфиденциальность - это большая проблема для пользователей.  Дизайнеру необходимо убедить пользователей, что их данные находятся в безопасности. Это положительно повлияет на UX (пользовательский опыт) вашего сайта.

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

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

5. Использование абзацев.

Абзацы текста нуждаются в визуальном обозначении. Обычно это передается тремя способами: после заголовка, с вертикальным пробелом перед абзацем или с отступом в первой строке. В каждом абзаце должен использоваться только один из этих параметров.

Из-за особенностей веб-контента и преимуществ заголовков для быстрого прочтения для большинства сайтов лучшим выбором является сочетание следования за заголовком и вертикального интервала.

6. Использование подлинных стилей.

Мы часто сталкиваемся с использованием ненастоящих стилей. Например, курсив подделывают как косую черту с наклоном. Жирный шрифт можно подделать, используя настройки браузера по умолчанию. 

Эти приёмы приносят больше вреда, чем пользы. Таким образом, создаются искаженные формы слов, прерывающие естественный поток текста.

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

7. Использование цитат.

Апострофы, одинарные и двойные кавычки - это специфические символы. 

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

Использование цитат- это один из самых простых способов донести текст до читателя.

8. Использование переносов в тексте.

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

В интернете в тексте недостаточно используется правильная расстановка переносов, но она постепенно совершенствуется.

CSS позволяет установить перенос на none (без дефисов), auto (браузер вставляет автоматически) и manual (в котором вы указываете, где переносы должны появляться).

Как правило, перенос может быть вставлен в любое слово, состоящее из пяти или более символов; перед дефисом должно стоять не менее двух символов и не менее четырёх после переноса.

Типографика является одним из важнейших элементов любого сайта. Как показывает пользовательский опыт она оказывает влияние на бренд. Используя указанные способы, Вы предоставите посетителям удобства в пользовании Вашим сайтом.