Как выбрать и подключить шрифты для сайта?

Опубликовано: 01.09.2018

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

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

Типографика: как подобрать шрифтовую пару для сайта

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

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

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

Как выбрать шрифт для сайта?

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

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

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

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

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

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

высота букв 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.

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