Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Использование стандартных и нестандартных шрифтов на сайте

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

Использование стандартных и нестандартных шрифтов на сайте
Содержание статьи

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

text-at-web-pageЛюбой текст может быть написан каким-то определенным шрифтом. Вопрос в том, как выбрать шрифт для сайта и сделать этот выбор осознанно, чтобы все пользователи видели ваш сайт именно так, как это было задумано. Дело в том, что все браузеры отображают текст на сайтах лишь теми шрифтами, которые установлены вместе с операционной системой. Например, в Windows шрифты находятся в папке C:/Windows/Fonts/. Если в таблице стилей (CSS) не указать предпочитаемый шрифт, который будет использоваться на сайте, то в Windows будет по умолчанию выбран шрифт Times New Roman. Это шрифт довольно редко используется в вебе и довольно часто заменяется на Arial, который выглядит куда приятней и лучше читается. Дело даже не в том, что эти два шрифта являются представителями разных шрифтовых групп — один с засечками, а другой — без. Просто сам по себе Times New Roman, на наш взгляд, довольно топорный и не эстетичный. Это подтверждают многие дизайнеры, которые избегают его использование в своих макетах.

Стандартные (безопасные) шрифты

condom-fontХороший дизайнер должен представлять то, что существует такое понятие, как стандартные шрифты. Их еще называют безопасными. Безопасность шрифтов заключается в том, что в разных операционных системах этот шрифт будет в наличии, а значит задача сверстать сайт кроссплатформенно будет решена. Некоторые дизайнеры используют пять, шесть, семь и более различных шрифтов на одном сайте, причем больше половины из них не является стандартными. Такие дизайнеры совершают большую ошибку, считая, что чем больше шрифтовое разнообразие, тем лучше от этого будет дизайн в целом. Ведь они не понимают самого важного — если шрифт скачан, например, на сайте PH4, а затем установлен на их компьютер, благодаря чему доступен в Фотошопе, то это вовсе не означает, что он установлен и у других пользователей, которые вообще понятия не имеют как устанавливать новые шрифты на компьютер, потому что у них просто нет в этом необходимости.

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

Список стандартных и самых безопасных шрифтов

core-9-standard-web-fontsВ каждой операционной системе есть свой уникальный стандартный набор шрифтов, поэтому универсальности добиться довольно проблематично. К сожалению, как и с браузерами, сколько людей, столько и вкусов и мнений, поэтому кто-то до сих пор предпочитает пользоваться старыми версиями Internet Explorer, а кто-то сидит на Убунте. Конечно же, подавляющее большинство пользователей все-таки предпочитают операционную систему Windows (их еще называют писюками, от сокращения PC — personal computer), но в последнее время развелось довольно много мажоров, идущих в ногу со временем, которые предпочитают Макинтоши с установленной Mac OS X.

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

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

Как видите, шрифтов не так уж и много — всего 9, но могло быть и хуже, поэтому остается радоваться и этому. Используя любой из этих шрифтов, вы гарантированно покроете 99.9% частных случаев и ваш сайт будет смотреться одинаково на всех компьютерах. Теоретическое исключение могут составить только самые клинические случаи, на которых мы даже не будем задерживать свое внимание. Да, как это не удивительно, к слову, некоторые пользователи до сих пор пользуются IE6, что видно по статистике посещений сайта в разделе «Технологии» — «Браузеры» (речь идет, конечно, о Яндекс.Метрике), а значит и существование пользователей, удаливших шрифт Arial тоже допускается.

arial-font-exampleСамым популярным безопасным шрифтом, несомненно, является Arial. Не сказать что он является самым идеальным из всех безопасных, но просто если выбирать из того, что есть на данный момент и придерживаться универсальности, то Arial является самым лучшим вариантом. Существует похожий на него шрифт, но немного более симпатичный (на наш взгляд), который называется Open Sans. Очень симпатичный шрифт, который хорошо подходит для написания основного контента страницы (не заголовков). Главным препятствием использования данного шрифта является то, что его нужно импортировать (об этом чуть позже).

Родовое семейство шрифтов

Спецификация предусматривает 5 основных родовых групп шрифтов:

  1. serif — шрифты с засечками (например, тот же Times New Roman);
  2. sans-serif — шрифты без засечек (например, самый популярный в вебе — Arial);
  3. cursive — курсивные (наклонные) шрифты;
  4. fantasy — декоративные шрифты (могут быть рукописные, рисованные, с картинками, с полосками, с языками пламени и так далее);
  5. monospace — моноширинный шрифт (в этом шрифте все буквы одинаковы по ширине, например ширина букв Л и М будет одинакова).

serif-sans-serif-cursive-fantasy-monospaceКаждое семейство шрифтов имеет свое предназначение. Например, с помощью декоративных шрифтов выделяются заголовки, курсивные шрифты могут обозначать цитаты, а моноширинные используются для отображения кода, например HTML-кода и других целей.

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

Кириллические шрифты в кодировке Unicode

В русскоязычном интернете, помимо универсальности шрифта, существует еще одна проблема — кодировка. Не все шрифты поддерживают кириллицу, что уже само по себе сильно ограничивает возможности вебмастера. Избежать путаницы с кодировкой символов можно раз и навсегда перестав пользоваться кодировкой Windows-1251 и, как можно скорее, перейти на UTF-8. Этот вопрос мы подробно обсуждали в статье под названием «Основные способы установки правильной кодировки страниц сайта», которая также рекомендуется к прочтению.

Windows Mac OS Unix / Linux Родовое семейство
Arial Black Helvetica CY Nimbus Sans L Sans-serif
Arial Helvetica CY Nimbus Sans L Sans-serif
Comic Sans MS Monaco CY cursive
Courier New Nimbus Mono L Monospace
Georgia Century Schoolbook L Serif
Impact Charcoal CY Sans-serif
Times New Roman Times CY Nimbus Roman No9 L Serif
Trebuchet MS Helvetica CY Sans-serif
Verdana Geneva CY DejaVu Sans Sans-serif

Данная таблица может быть использована для достижения почти стопроцентной кроссплатформенности. Предположим, что вы, как и большинство верстальщиков и дизайнеров, в качестве основного шрифта для контента сайта выбрали Arial. Как мы уже говорили ранее, вероятность того, что этот шрифт имеется в наличии в папке fonts операционной системы, установленной на компьютер посетителя вашего сайта, близка к 100%, но все же вероятность так называемого «сбоя матрицы» какая-то есть. В таком случае мы используем стандартный прием, поддерживаемый CSS — перечисление шрифтов в порядке приоритета:

body {
	font-family: Arial, "Helvetica CY", "Nimbus Sans L", Sans-serif;
}

versatilityОсновываясь на представленной таблице, мы нашли шрифт Arial, а затем добавили все соответствующие ему шрифты из той же строки и перечислили их через запятую, а закончили мы указанием родового семейства (Sans-serif, шрифт без засечек). Если по какой-то непонятной случайности окажется так, что на компьютере пользователя не установлен шрифт Arial (что случается крайне редко), то браузер попытается найти следующий шрифт, указанный после запятой — Helvetica CY, а если не окажется и его, то пойдет дальше по списку и так далее. Если в таблице вы видите прочерк, это означает, что аналогов для данной операционной системы нет и шрифт, скорей всего, установлен с тем же названием, что и в операционной системе Windows (из первого столбца таблицы). Данный прием гарантирует универсальность на всех компьютерах, поэтому нужно хорошо понимать принцип его работы и стараться все время применять на практике.

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

Импорт нестандартных шрифтов

Google-FontsЕсли дизайн сайта все-таки нельзя себе представить без нескольких нестандартных шрифтов, которых нет в списке безопасных, то ничего не остается делать, как попытаться их импортировать. Самый лучший сервис для импорта нестандартных шрифтов — Google Fonts. Пользоваться этим сервисом очень удобно, нет никакой навязчивой рекламы, никто не будет требовать от вас регистрации, подписки на обновления и так далее.

Итак, для того, чтобы импортировать нестандартный шрифт на свой сайт, сделайте следующее:

  • перейдите на сервис Гугл Шрифты, по указанной ранее ссылке;
  • в левом меню, в выпадающем списке с заголовком «Script:» выберите «Cyrillic» (шрифты, поддерживающие кириллицу);
  • google-font-quick-useдалее просто выберите понравившийся вам шрифт и нажмите «Quick-use» (иконка со стрелочкой направо);
  • откроется страница с настройками шрифта, где вы сможете поставить галочки рядом с теми модификациями этого шрифта, которые вам понадобятся. Не выбирайте сразу все, наоборот, постарайтесь выбрать только крайне необходимые (чем меньше, тем быстрее загрузится страница). page-loadСервис Google Fonts даже содержит подсказку, в которой говорится: «Использование нескольких стилей шрифтов может значительно уменьшить скорость загрузки страниц вашего сайта, поэтому выбирайте только те стили шрифта, который действительно необходимы и будут использоваться на странице». А рядом с этой подсказкой приводится инструмент, который замеряет скорость загрузки страницы, в зависимости от того, сколько стилей вы выбрали. Старайтесь, чтобы стрелка держалась в зеленой зоне;
  • в самом низу будут даны рекомендации о том, как импортировать выбранный шрифт с указанными стилями на ваш сайт стандартными методами, с помощью @import или же JavaScript.

Основные способы импорта шрифтов на сайт

Как мы уже упомянули ранее, Google предлагает на выбор 3 возможных варианта импорта приглянувшегося вам шрифта:

  1. Импорт шрифта стандартным способом, при помощи link href;
  2. Импорт шрифта в CSS-файл при помощи @import;
  3. Импорт шрифта при помощи JavaScript.

А теперь приведем несколько примеров, выбрав случайный шрифт, например PT Sans Narrow.

Первый способ на примере будет выглядеть так (добавляем этот тег внутрь контейнера head):


Второй способ (добавляем код в начало CSS файла):

@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin,cyrillic);

Третий способ (добавляем внутрь head, либо создаем отдельный файл с расширением JS):


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

font-family: 'PT Sans Narrow', sans-serif;

Иными словами, чтобы установить шрифт, который вы только что импортировали из Google Fonts, например, для всех заголовков на сайте, нужно выбрать один из 3 предложенных способов импорта, а затем добавить в CSS следующий код:

h1,h2,h3,h4,h5,h6 {
	font-family: 'PT Sans Narrow', sans-serif;
}

Чем больше нестандартных шрифтов, тем медленнее

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

Ссылка, на которую ссылаются все 3 рассмотренных ранее способа импорта имеет следующий вид:

https://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin,cyrillic

И содержит следующий стиль, который уже ссылается на сам файл шрифта в формате Woff2:

@font-face {
	font-family: 'PT Sans Narrow';
	font-style: normal;
	font-weight: 400;
	src: local('PT Sans Narrow'), local('PTSans-Narrow'), url(https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4aCdjWF5QMA3Tf82kxWkPB0.woff2) format('woff2');
}

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


Предыдущая статья:
Секционные элементы в HTML5

Читайте также:
Как зарегистрировать хостинг


Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»