Каждый сайт в сети Интернет – это информационный портал, отвечающий на запросы пользователей. Контент веб-ресурса представляется графическими, медиа и текстовыми данными, которые должны быть гармонично организованными и составлять единое целое.
Немаловажное значение в визуальной подаче сайта и его восприятии пользователем играет шрифт, в котором написаны статьи или рекламная информация. Многие пренебрегают этим фактом. В результате цель создания веб-ресурса не достигается, посетители надолго не задерживаются на страничках, не возвращаются, а сам сайт теряет позиции в рейтинге и тонет в общей массе конкурентов.
Почему так происходит? Ведь информация – полезная, а текстовый контент – уникальный, интересный и качественный. Ответов может быть несколько:
- применение нестандартных специфических шрифтов, которые могут способствовать некорректному отображению текстового контента;
- несоответствие внешнего вида текста его содержанию (например, когда призыв к действию или рекламное объявление представлены невзрачной строкой, на которую можно вовсе не обратить внимание);
- сложность прочтения текста из-за неправильного подбора размера и цвета шрифта, межстрочных интервалов, резкого и сложного для восприятия контраста с фоном, подачи контента в виде «каши» без абзацев, выделенных подзаголовков, правильного выравнивания и прочих элементов форматирования.
В качестве примера не совсем удобного для восприятия контента можно привести вот этот сайт:
Существует также множество других особенностей, и каждая из них может быть решена при соблюдении определенных правил, в том числе макро- и микротипографики.
Что такое веб-типографика и для чего она нужна
Веб-типографика представляет собой определенную технологию, помогающую обеспечить лучшее представление текстовой информации на сайте. Различают два направления:
- Макротипографика – ориентирована на создание оптимальной структуры и дизайна текстового контента, его цветовой гаммы и гармоничного сочетания с фоном и информацией другого типа на сайте.
- Микротипографика подразумевает подачу грамматически правильного текста, с правильной расстановкой пробелов, знаков препинания, скобок, тире, кавычек, интервалов между строками и прочих мелких деталей. Каждая из таких особенностей может казаться незначительной, но в общей совокупности опечатки, пунктуационные и орфографические ошибки отвлекают читателя от содержания, снижают авторитет веб-ресурса и доверие посетителя.
Отдельное внимание в оформлении текстового контента следует уделить выбору размера и начертания шрифта, представлению текстового блока на странице.
Наиболее оптимальными параметрами считаются следующие:
- высота букв 12 – 16 px, мелкий текст может быть представлен высотой не менее 10 px, однако он сложен для прочтения;
- блок с текстом должен занимать до 50% по ширине, причем текстовый контент лучше воспринимается, когда он подан справа от графического, но выравнен по левому краю; текст, выравненный по правому краю или по центру, сложен для прочтения; выравнивание по ширине может растягивать предложения и пробелы между словами;
- межстрочный интервал должен быть не более 1,5 размера шрифта;
- яркость фона и текстовой информации должна составлять 70 – 90%.
Следует отметить, что стиль шрифта и способ его подачи влияет на восприятие сообщения в целом. Посетитель анализирует информацию на подсознательном уровне путем ассоциаций. К примеру, шрифты с закругленными или рублеными формами (Arial, Verdana, Comic Sans MS) более приятны для прочтения и считаются менее агрессивными, чем шрифты с засечками (Times New Roman).
Текст, написанный мелким шрифтом, зачастую воспринимается читателем как важная информация, которая столь значительна, что ее нет смысла как-либо оформлять. Этим нельзя злоупотреблять, однако в некоторых случаях можно использовать.
Контраст шрифта и фона сайта также имеет немаловажное значение. Наиболее удобными вариантами можно назвать сочетания:
- черного текста с желтым фоном;
- синего текста с белым фоном;
- белого текста с синим фоном;
- зеленого текста с белым фоном;
- красного текста с белым фоном.
Черный шрифт и белый фон – это сложное для глаз представление текстового контента. Удобным вариантом станет темно-серый цвет шрифта на белом или светло-сером фоне.
Еще одним приемом, с помощью которого можно сделать акцент на той или иной информации, можно назвать выделение жирным, курсивом или подчеркиванием, написание отдельных фраз в ВЕРХНЕМ РЕГИСТРЕ, а также создание выделенных цитат, постскриптума или обрамлений.
Большинство посетителей сайта не читают текстовую информацию, а лишь бегло просматривают подзаголовки и отдельные фрагменты. Одним из удачных способов выделения цитат или главных мест в тексте можно назвать использование стиля написания, отличного от основного, как это сделано на сайте:
Стандартные шрифты
Разные браузеры и операционные системы воспринимают по-своему отдельные разновидности шрифтов. В то же время, существует несколько стилей, которые отображаются корректно и практически одинаково при любых условиях. Именно их следует использовать для представления текстового контента.
Среди наиболее популярных стандартных шрифтов можно выделить следующие:
- Arial,
- Verdana,
- Times,
- Times New Roman,
- Georgia,
- Trebuchet MS,
- Comic Sans MS,
- Courier New,
Семейства шрифтов, и как их подключить к сайту
При создании сайта для корректного отображения информации браузером конечного пользователя, задается семейство шрифтов. Сделать это можно несколькими способами:
- Использование устаревшего элемента font для задания конкретного шрифта отдельным фрагментам на странице.
- Подключение к сайту внешних стилей, например, интересной коллекции нестандартных специфических Google Шрифтов. Это удобный способ красивого представления информации, который, однако, имеет ряд недостатков:
- при проблемах в Google возникают также проблемы с отображением шрифтов на веб-ресурсе;
- проблемы интернет соединения могут способствовать запаздыванию подгрузки Google Шрифта (сначала информация загрузится в одном из стандартных стилей, поддерживаемых браузером конечного пользователя, а через время шрифт текстового контента изменится, что не очень хорошо воспринимается визуально).
- Задание семейства шрифтов (font family), схожих по своему внешнему виду и свойствам в коде каскадных таблиц стилей (CSS). Этот вариант дает возможность указать общий вид для заголовков, подзаголовков и основного текста сразу на всех страницах сайта, что позволяет исключить недочеты отображения.
В каждое семейство входит набор связанных шрифтов, а также их размеры, стили написания и прочие особенности. Наиболее популярными из них можно назвать:
- Times и Serif (с засечками);
- Fantasy (с декоративным представлением букв);
- Sans-Serif (без засечек);
- Monospace (с одинаковой шириной букв).
Семейства шрифтов могут быть ориентированы на разные операционные системы, поэтому для корректного отображения информации в коде таблиц стилей CSS нужно указывать не только стандарты для Windows, но также и для Unix/Linux и Mac OS.
Процесс задания, или подключения шрифта для сайта предполагает наличие множества нюансов и особенностей, учет которых поможет сделать визуальное представление текстового контента веб-ресурса универсальным и корректным. Это кропотливый и тонкий труд для профессионалов в этом деле. Именно поэтому удобнее и выгоднее доверить такую работу опытным специалистам.