Подбор шрифта и оформления текста на сайта

егодня пост по оформлению текста для максимального удобство его прочтения (читабельности).

#1 Начертание шрифтов

Используйте шрифты без засечек (еще их называют Sans Serif или рубленные). Классическими примерами являются Arial, Verdana, Tahoma и другие. На экранах мониторов, имеющих гораздо меньшее разрешение, чем печатные материалы, засечки на краях букв мешают чтению. Классический шрифт с засечками, который ухудшает читабельность – Times New Roman.

Mexboy ru

#2 Размеры шрифтов

В подавляющем большинстве случаев удобнее всего читаются кегли 10-12. Шрифты более крупного или Mexboy ruболее мелкого размера замедляют чтение и потому повышают утомляемость пользователей. Исключение могут составлять сайты для пожилых людей. Они обладают слабым зрением, поэтому для ресурсов с подобной аудиторией стоит увеличить размер до шрифта до 12-14, а также убедиться, что строки разделяет достаточный интервал.

#3 Разнообразие шрифтов

Не рекомендуется использовать большое разнообразие начертаний, цветов и размеров шрифтов. Это раздражает пользователей. Взгляните, например, на шрифты на сайте Сергея Мавроди:

Mexboy ru

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

#4 Выравнивание текста

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

За примерами далеко ходить не надо, взгляните на тексты газетных интернет-изданий:

Проверка читабельность текста

Уж они то знают толк в читабельности. У всех контент выравнен только по левому краю!

Проверка читабельность текста

#5 Не используйте верхний регистр

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

#6 Длина строк

Колонки текста, имеющие ширину более 50-70 символов читать трудно. Не зря газетчики не делают строки длинными и печатают тексты в несколько колонок.

Mexboy ru

Также стоит предусмотреть возможность верстки, препятствующей произвольному удлинению строк текста на широких мониторах.

#7 Контрастность текста

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

Mexboy ru

#8 Тексты ссылок

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

#9 Подчеркивания в тексте

Не используйте подчеркивание в обычном тексте. Как уже говорилось выше оно «забронировано» за гиперссылками. Подчеркнутый текст будет вводить в заблуждение пользователей, они захотят кликнуть по нему. Для выделения текста лучше использовать другие методы (выделение жирным, курсивом).

#10 Фоновый цвет и графика

Не используйте в качестве фона для текста высококонтрастные изображения. Они затрудняют чтение и отвлекают внимание.

Как то компании Мир Шапок сделан настолько же нестандартно с точки зрения дизайна, насколько он неудобен для пользователя:

Mexboy ru

Правда это не мешает ему находиться на первых позициях в поиске по профильным запросам.

Автора автора