Шрифты на веб-сайте не только играют информационную роль, но и являются дизайнерским элементом. Качественно подобранные характеристики шрифта позволяют привлекать внимание пользователя к тексту.
В этой статье мы разберем, что такое безопасные шрифты, как встроить шрифт в HTML, как задать стили для шрифтов при помощи CSS, а также опишем краткие рекомендации по выбору и стилизации текста.
Отличие шрифта от гарнитуры
Понятие «гарнитуры» очень часто отождествляется с понятием «шрифта», однако это не одно и то же.
Под гарнитурой подразумевается типографский набор символов одного характера, который формируется, благодаря комбинации стилевых особенностей: наличие или отсутствие засечек, начертание, интервалы между буквами и другие.
Шрифт — это группа символов в рамках гарнитуры, имеющая определенное начертание.
Например, Times New Roman, Verdana, и Tahoma являются гарнитурами, которые имеют в своем составе шрифты, соответственно, Times New Roman Italic, Verdana Regular и Tahoma Bold
Добавление искомого шрифта на сайт производится с помощью CSS-свойства font-family, в значении которого указывается название нужной гарнитуры:
/* Установим шрифт для всей HTML-страницы */
body {
font-family: Roboto, Helvetica, sans-serif;
} Однако, подключив шрифт таким способом, не всегда можно увидеть ожидаемый результат. Причины этого обсудим далее.
Безопасные шрифты
Существует набор символов, установленный по умолчанию на любом устройстве, с которого может просматриваться веб-сайт. Этот набор называется «безопасными шрифтами». Поэтому, подключив любой такой шрифт, мы можем быть уверены, что он отобразится в любой системе. Но как установить шрифт, не входящий в список безопасных?
Встраивание шрифтов
Чтобы добавить любой шрифт на сайт, необходимо загрузить файлы нужного формата с этим шрифтом на сервер и подключить файл, указав путь к этому файлу с помощью CSS-правила @font-face. Название гарнитуры прописывается в свойстве font-family, а в свойстве src — пути к файлам с конкретным форматом с указанием самого формата.
Браузер загрузит шрифт в кэш, и этот шрифт будет доступен для стилизации элементов CSS-свойством font-family:
@font-face {
font-family: "Open Sans";
src: url("/fonts/opensans.woff2") format("woff2"), url("/fonts/opensans.woff") format("woff");
}
body {
font-family: "Open Sans", "Tahoma", sans-serif;
} Далее перейдем к разбору способов стилизации шрифта.
Цвет шрифта
Цвет шрифта устанавливается CSS-свойством color, которое принимает значения в формате ключевых слов, шестнадцатеричных значений и цветовых моделей RGB(RGBA) и HSL(HSLA).
Ключевые слова — это словесное название цветов (red). Если необходимо задать полную прозрачность текста, можно использовать ключевое слово transparent.
RGB в функциональном виде записывается как функция rgb с переданными ей в качестве параметров трех значений — либо числовых от 0 до 255 (rgb(255,0,0)), либо процентов от 0 до 100% (rgb(100%,0,0)). Модель RGBA позволяет управлять непрозрачностью, которая представлена в виде число от 0 (полностью прозрачный) до 1 (полностью непрозрачный) с шагом 0.1. Значение непрозрачности добавляется четвертым параметром в функцию rgba (rgba(255,0,0,0.8)).
Цветовая модель HSL использует функцию hsl с тремя параметрами, которые означают «оттенок, насыщенность, яркость». Значение оттенка записывается в градусах, значение насыщенности и яркости представлены в процентах (hsl(180, 70%, 50%)). Аналогично RGB, HSL имеет аналог, меняющий непрозрачность (hsl(180, 70%, 50%, 0.5)).
Шестнадцатеричное значение представляет собой запись трех или шести шестнадцатеричных символов с «решеткой» перед ними (#FF0000). В таком формате может быть представлены цветовые модели RGB и HSL, но не RGBA и HSLA.
Приведем пример, как поменять цвет шрифта на красный:
.text {
color: red;
} Форматирование шрифта
Шрифты HTML имеют ряд свойств, которые можно изменять с помощью CSS, создавая особый внешний вид текста. Рассмотрим основные из них.
| Свойство | Значение | Предназначение |
|---|---|---|
font-family | Имя гарнитуры,serif(с засечками),sans-serif(без засечек),cursive(курсивный),monospace(моноширинный),fantasy(декоративный) | Добавляет семейство шрифтов для текста. CSS позволяет устанавливать сразу несколько вариантов шрифтов, что бывает полезным, когда браузер по каким-то причинам не может загрузить основной шрифт. В таком случае названия шрифтов записываются через запятую по приоритету: первый шрифт слева — основной, остальные — резервные. Если основной шрифт недоступен, то производится попытка подключить следующий справа и так далее. |
font-size | px,pt,em,%,ключевые слова | Задает размер текста. |
font-weight | normal,bold,bolder,lighter,числа от 100 до 900 с шагом 100 | Устанавливает толщину шрифта. Шрифты имеют гарнитуры с различной толщиной начертания. Эта толщина соответствует числам насыщенности. Самая легкая жирность берет начало с числа 100, и, постепенно «утолщаясь», завершается наиболее насыщенной. |
font-style | normal(обычный),italic(курсив),oblique(наклонный шрифт в семействе) | Дает возможность сделать шрифт курсивным или задать ему наклонное начертание. |
font-stretch | normal(обычный),condensed(сжатый),ultra-condensed,extra-condensed,semi-condensed,expanded(расширенный),ultra-expanded,extra-expanded,semi-expanded | Позволяет задать ширину символов. Работает не со всеми шрифтами. |
font-variant | normal,small-caps(капитель) | Если есть необходимость сделать текст в CSS капителью (строчные буквы в виде маленьких заглавных), используется это свойство. |
font-kerning | auto(определяется браузером),normal(кернинг задается),none(кернинг отключен) | Задает интервал между символами (кернинг), если шрифт его поддерживает. |
font | Свойства в следующем порядке:font-style,font-variant,font-weight,font-size/line-height,font-family | Обобщенный способ стилизации шрифта. Это свойство принимает значения вышеописанных свойств в строго определенном порядке. Свойства font-size и line-height разделяются слэшем. Обязательными свойствами в значении font являются font-size и font-family. Остальные можно опускать.Пример: body {font: italic small-caps bold 16px/24px Roboto, sans-serif;} |
text-align | left,right,center,justify | Известное в типографике выравнивание текста с левого и правого края, по центру и ширине в CSS можно задать с помощью text-align. |
line-height | normal,px,pt,em,rem,%,множитель | Задает высоту строки (или межстрочный интервал) — расстояние между строками текста. |
text-decoration | underline(подчеркивание), line-through(зачеркивание), overline(линия над текстом), none(линии нет) | С помощью text-decoration текст можно подчеркнуть, зачеркнуть, добавить над ним линию или убрать линию вообще.Например, чтобы избавиться от устанавливаемых браузером по умолчанию линий под ссылками, нужно прописать следующий код: a {text-decoration: none;} |
text-transform | uppercase(заглавные),lowercase(прописные),capitalize(первый символ — заглавный),none | Управляет изменением регистра символов: устанавливает все символы заглавными, прописными, а также позволяет делать первый символ каждого слова заглавным. |
text-indent | px,pt,em,rem,% | Позволяет задать отступ только первой строки текста — создать «красную строку». Допускаются отрицательные значения. В этом случае первая строка сдвигается за пределы блока, в котором находится текст. |
text-shadow | Группа значений в виде: «число, число, число, значение свойства color» | Тень для текста задается четырьмя параметрами этого свойства. Значение первого параметра определяет сдвиг тени по горизонтали, второго — вертикальный сдвиг, третий параметр отвечает за радиус размытия, а последним устанавливается цвет. Первые три параметра — числа с единицами измерения, значение цвета имеет аналогичный формат со значением свойства color. Пример: p.text {text-shadow: 2px 4px 3px black;} |
box-shadow | Группа значений в виде: «опциональное ключевое слово inset, число, число, число, число, значение свойства color» | В отличие от text-shadow, которое устанавливает тень именно для текста, свойство box-shadow добавляет тень для всего элемента. Список параметров такой же, как и у text-shadow, но box-shadow имеет четвертый параметр, который используется для растяжения тени. Также есть возможность изменить направление тени внутрь, добавив первым параметром ключевое слово inset. Этот параметр является опциональным.Пример: p.text {box-shadow: inset -2px -4px 3px 2px black;} |
word-spacing | px,pt,em,rem,% | Устанавливает расстояние между словами. |
letter-spacing | px,pt,em,rem,% | Подобным с word-spacing образом свойство letter-spacing регулирует расстояние между символами текста. |
direction | ltr, rtl | Некоторый текст, например, арабского алфавита, пишется справа налево. Чтобы поменять направление для таких текстов, используется свойство direction. |
white-space | normal,nowrap,pre,pre-line,pre-wrap | По умолчанию браузер игнорирует любые переносы и лишние пробелы в тексте, отображая их как один пробел. Для управления размером пробелов и переносами используется это свойство. Пояснение — в следующей таблице. |
Отобразим в нижеследующей таблице сравнительную характеристику значений свойства white-space по следующим критериям: учитываются ли переносы текста в коде, сохраняется ли количество пробелов в тексте или сокращается до одного, переносится ли автоматически текст, если ему не хватает места.
| Значение | Переносы в коде | Количество пробелов | Автоматический перенос текста |
|---|---|---|---|
normal | Игнорируются | Сокращается до одного | Переносится |
nowrap | Игнорируются | Сокращается до одного | Не переносится |
pre | Учитываются | Сохраняются | Не переносится |
pre-line | Учитываются | Сокращается до одного | Переносится |
pre-wrap | Учитываются | Сохраняются | Не переносится |
Правила выбора шрифта
Текст — основной инструмент донесения информации до пользователя. Немаловажно знать не только технические способы работы с характеристиками шрифта, но и некоторые правила, которые позволяют качественно сочетать эти характеристика для того, чтобы пользователю было максимально комфортно воспринимать информацию на сайте.
Существуют некоторые популярные практики, помогающие улучшить визуальное восприятие текста:
- Необходимо управлять вниманием пользователя. Читать полотно однородно стилизованного текста будет довольно скучно для него. Поэтому всегда нужно обращать внимание на то, насколько визуально отличаются друг от друга его составные части. Текст должен иметь ярко выраженные заголовки, подзаголовки и само содержание.
- Разрешения устройств, с которых просматривается сайт, может быть разным, включая мелкие. Исходя из этого стоит отдать предпочтение более крупному шрифту, так как это позволит легко воспринимать текст на различных устройствах.
- Следует уделять внимание контрасту заголовков и контента. Например, если заголовок будет иметь больший размер шрифта, чем у содержимого, но идентичную или даже меньшую насыщенность, то это будет слабо контрастировать и выглядеть непривлекательно. А большой и жирный заголовок отлично будет смотреться в сочетании с тонким и более мелким шрифтом контента.
- Однако не следует переусердствовать с контрастом и делать его слишком большим, так как это может нарушить визуальный баланс и испортить дизайн.
- Цвет фона не должен сливаться с текстом — здесь также должен быть четкий контраст. Символы текста должны быть максимально разборчивыми для пользователя.
- Каждый шрифт заключает в себе настроение. Один шрифт может ассоциироваться с брутальностью и мужественностью, второй — легкий и веселый. Различные настроения не следует смешивать друг с другом.
Мы рассмотрели основные возможности CSS-стилизации шрифтов, которые позволяют создавать дизайн текста на любой вкус. Но стоит помнить об описанных выше рекомендациях по выбору правильного шрифта.
Поделитесь в комментариях, какие трудности у вас возникают при работе с веб-шрифтами.