Выбор шрифтов для сайта. Почему это важно?

  1. Главная
  2. Блог
  3. Дизайн
  4. Выбор шрифтов для сайта. Почему это важно?

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

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

Почему так происходит? Ведь информация – полезная, а текстовый контент – уникальный, интересный и качественный. Ответов может быть несколько:

  • применение нестандартных специфических шрифтов, которые могут способствовать некорректному отображению текстового контента;
  • несоответствие внешнего вида текста его содержанию (например, когда призыв к действию или рекламное объявление представлены невзрачной строкой, на которую можно вовсе не обратить внимание);
  • сложность прочтения текста из-за неправильного подбора размера и цвета шрифта, межстрочных интервалов, резкого и сложного для восприятия контраста с фоном, подачи контента в виде «каши» без абзацев, выделенных подзаголовков, правильного выравнивания и прочих элементов форматирования.

В качестве примера не совсем удобного для восприятия контента можно привести вот этот сайт:

плохой пример шрифтов на сайте

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

Что такое веб-типографика и для чего она нужна

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

  1. Макротипографика – ориентирована на создание оптимальной структуры и дизайна текстового контента, его цветовой гаммы и гармоничного сочетания с фоном и информацией другого типа на сайте. 
  2. Микротипографика подразумевает подачу грамматически правильного текста, с правильной расстановкой пробелов, знаков препинания, скобок, тире, кавычек, интервалов между строками и прочих мелких деталей. Каждая из таких особенностей может казаться незначительной, но в общей совокупности опечатки, пунктуационные и орфографические ошибки отвлекают читателя от содержания, снижают авторитет веб-ресурса и доверие посетителя. 

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

Наиболее оптимальными параметрами считаются следующие:

  • высота букв 12 – 16 px, мелкий текст может быть представлен высотой не менее 10 px, однако он сложен для прочтения;
  • блок с текстом должен занимать до 50% по ширине, причем текстовый контент лучше воспринимается, когда он подан справа от графического, но выравнен по левому краю; текст, выравненный по правому краю или по центру, сложен для прочтения; выравнивание по ширине может растягивать предложения и пробелы между словами;
  • межстрочный интервал должен быть не более 1,5 размера шрифта;
  • яркость фона и текстовой информации должна составлять 70 – 90%.

Следует отметить, что стиль шрифта и способ его подачи влияет на восприятие сообщения в целом. Посетитель анализирует информацию на подсознательном уровне путем ассоциаций. К примеру, шрифты с закругленными или рублеными формами (Arial, Verdana, Comic Sans MS) более приятны для прочтения и считаются менее агрессивными, чем шрифты с засечками (Times New Roman).

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

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

  • черного текста с желтым фоном;
  • синего текста с белым фоном;
  • белого текста с синим фоном;
  • зеленого текста с белым фоном;
  • красного текста с белым фоном.

Черный шрифт и белый фон – это сложное для глаз представление текстового контента. Удобным вариантом станет темно-серый цвет шрифта на белом или светло-сером фоне.

Еще одним приемом, с помощью которого можно сделать акцент на той или иной информации, можно назвать выделение жирным, курсивом или подчеркиванием, написание отдельных фраз в ВЕРХНЕМ РЕГИСТРЕ, а также создание выделенных цитат, постскриптума или обрамлений.

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

подзаголовки шрифтов

Стандартные шрифты

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

Среди наиболее популярных стандартных шрифтов можно выделить следующие:

  1. Arial, 
  2. Verdana, 
  3. Times, 
  4. Times New Roman, 
  5. Georgia, 
  6. Trebuchet MS, 
  7. Comic Sans MS, 
  8. Courier New, 

Семейства шрифтов, и как их подключить к сайту

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

  1. Использование устаревшего элемента font для задания конкретного шрифта отдельным фрагментам на странице. 
  2. Подключение к сайту внешних стилей, например, интересной коллекции нестандартных специфических Google Шрифтов. Это удобный способ красивого представления информации, который, однако, имеет ряд недостатков: 

    • при проблемах в Google возникают также проблемы с отображением шрифтов на веб-ресурсе; 
    • проблемы интернет соединения могут способствовать запаздыванию подгрузки Google Шрифта (сначала информация загрузится в одном из стандартных стилей, поддерживаемых браузером конечного пользователя, а через время шрифт текстового контента изменится, что не очень хорошо воспринимается визуально). 
  3. Задание семейства шрифтов (font family), схожих по своему внешнему виду и свойствам в коде каскадных таблиц стилей (CSS). Этот вариант дает возможность указать общий вид для заголовков, подзаголовков и основного текста сразу на всех страницах сайта, что позволяет исключить недочеты отображения. 

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

  • Times и Serif (с засечками);
  • Fantasy (с декоративным представлением букв);
  • Sans-Serif (без засечек);
  • Monospace (с одинаковой шириной букв).

Семейства шрифтов могут быть ориентированы на разные операционные системы, поэтому для корректного отображения информации в коде таблиц стилей CSS нужно указывать не только стандарты для Windows, но также и для Unix/Linux и Mac OS.

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

Понравилось? Репост!
Вадим Чернышев
В общем, исходя из блога, с шрифтом текста лучше не мудрить!!! Казалось бы, шрифт – простой момент, на который и внимание то особо не обращаешь при работе с сайтом! А зря! Спасибо за полезную информацию!
Danya30
Согласен, что стоит использовать стандартные шрифты. С этим лучше не экспериментировать. А статья как всегда полезная.
Henry
Можно использовать не стандартные, но в таком случае нужно их правильно загрузить. И на всякий случай в font-family следующим после нестандартного указать стандартный наиболее похожий на не стандартный))) Тогда проблем быть не должно)
Пан Палыч
Я только начал верстать, шрифты- пока тяжело даются. Со статьи вынес полезную для себя информацию!
Степан
Полезная информация,особенно для начинающих верстальщиков.Если знать как правильно обращаться со шрифтами,то можно добиться отличного внешнего вида и читаемости.Но,и делов натворить можно немало.
Марина
Это достаточно важный момент, к которому стоит подходить внимательно и ответственно. Иногда попадаются сайты, в которых вставлены “необычные” шрифты, которые выглядят просто ужасно. И только из-за них покидаю его.
Эдуард
Действительно важный вопрос. Попадаются непонятные сайты одностраничники, которые попытались поэкспериментировать со шрифтами. Это просто ужас! Но если знать, как грамотно преподнести, то можно добиться положительных результатов