5 Простых шрифтов и текстовых приемов для модернизации вашего сайта

Лучшая читабельность делает рейтинги лучше.

 

Шрифты и размеры текста игнорируются на многих веб-сайтах. Настройки по умолчанию на платформах CMS, таких как WordPress и Wix — 14 пикселей (px) и одинарный интервал между ними. Некоторые премиум-темы имеют собственные шрифты, хотя они почти всегда слишком малы. Но изменив размер текста на вашем сайте, интервал между страницами и семейство шрифтов, вы можете увеличить время пребывания пользователя на сайте, просмотров страниц и читабельность — все это приводит к более низким показателям отказов и более высоким рейтингам в поисковых системах.

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

 

  1. Размер текста

Несмотря на отсутствие волшебного размера шрифта, Google может девальвировать ваш сайт, если вы используете шрифт размером менее 12px. Все больше и больше, Google ценит удобство использования и пользовательский опыт, и если Вам нужно масштабировать сайт, чтобы прочитать его, это все, что угодно, но только не удобно для пользователя.

Размер шрифта 12px приемлем и является общепринятым по умолчанию для электронной почты и программного обеспечения для документов, таких как Word. Веб-страницы, однако, выигрывают от больших размеров шрифта, таких как 18px или даже 20px.

 

Прежде чем вы или ваш разработчик начнете возиться с размерами шрифтов на вашем сайте, важно убедиться, что они хорошо выглядят. Нет более простого способа проверить изменения размера шрифта на вашем сайте, чем просто нажать ctrl и + на компьютере с Windows или командой и + на Mac, чтобы увеличить масштаб. Чтобы уменьшить масштаб, нажмите ctrl и — или команду и -.

 

Вы увидите, что контент вашего сайта может выглядеть хорошо, а возможно и лучше — на 110% или даже на 125%. Если да, попросите разработчика изменить размер шрифта на 125 процентов от оригинала. Если оригинал 14px, то 125% будет 17.5px, например, который может быть округлен в меньшую сторону или вверх с небольшими изменениями.

 

Пример размера текста:

Следующее изображение иллюстрирует использование функции масштабирования браузера на странице Википедии о Google.

 

  1. Размеры текста для мобильных устройств

Поскольку мобильные устройства предлагают гораздо меньше места на экране, размер шрифта должен быть мобильным. Для обычного контента в абзацной форме, моя рекомендация 18px — 20px для сайта будет работать на любом устройстве, от настольного компьютера до мобильного телефона. Но для заголовков на сайте True Blue мы иногда делаем большие заголовки — в некоторых случаях от 40px до 50px, а то и больше. Если вы это сделаете, то вам придется уменьшить масштаб для мобильных устройств, иначе пострадает ваша читабельность. То же самое относится и к маленьким шрифтам. Возможно, на форме вашего сайта над полем стоит маленькая наклейка размером 12px. На мобильном устройстве он может быть слишком маленьким для чтения, особенно для пожилых людей.

  1. Семейство текстов/шрифтов

Читабельность является обязательным требованием, но это не означает, что вы ограничены в использовании семейства шрифтов, таких как Arial, Helvetica или Times New Roman. Хотя, возможно, это не самая лучшая идея использовать ваш личный любимый шрифт на вашем сайте, как Comic Sans (yikes!), есть тонны отлично выглядящих шрифтов с облачным обслуживанием, легкодоступных и бесплатных.

 

Такие шрифты, как «Робото» или «Открытый Сан» стали очень популярными. Использование другого шрифта, например, одного из них, помогает вашему сайту и вашему бренду немного выделяться на фоне конкурентов. А при правильном использовании нестандартный шрифт может улучшить общую эстетику и читабельность вашего сайта. Вот интересный факт: Roboto был создан компанией Google, чтобы стать основным шрифтом для Android-устройств. Несмотря на то, что на первом релизе он получил много критики, с тех пор этот шрифт используется на более чем 40 миллионах сайтов.

 

  1. Цвет текста и контрастность

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

 

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

Этот красный текст на синем фоне не очень читабельный, не так ли? Очень важно найти золотую середину. На белом фоне безопасным вариантом цвета шрифта является темный оттенок серого, например, #30303a. Этот хэкскод является специфическим цветом шрифта, который мы используем на нашем сайте, True Blue Life Insurance.

 

  1. Расстояние между текстами

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

 

Наряду с расстояниями между элементами, высотой строк, не менее важным является свойство CSS, определяющее количество белого пространства между каждой строкой текста в абзаце.

 

Пример высоты строки:

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

 

 

Бонусный совет:

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