При создании сайта выбор шрифта не занимает последнее место в градации важных задач. Правильно выбранный шрифт сайта способен удержать посетителя на сайте, предоставить ему комфортный доступ к чтению и удобное восприятие текста. В этой статье ответим на вопрос – какой шрифт для сайта лучше.
Какой шрифт для сайта может быть
Чтобы что-то выбрать, нужно понимать из чего выбирать.
Все существующие шрифты имеют три классифицирующих признака и три определяющих их аспекта. К признакам относим:
- Семейство шрифтов;
- Засечки;
- Файл шрифта.
К аспектам шрифта относим:
- Размер;
- Вес (толщина);
- Стиль.
Семейство шрифтов
Семейство шрифтов или гарнитура — это дизайн тех букв, цифр, символов из которых данных шрифт состоит. Шрифт одного семейства имеет схожий отличительный дизайн.
К семействам шрифтов относятся (их тысячи):
- Arial,
- Helvetica,
- Verdana,
- Trebuchet,
- И т.д.
В CSS семейство шрифтов определяет свойство font-family.
Засечки
Если на конце каждой буквы шрифта есть “полочка”, “опора”, “штрих”, то такие шрифты называют с засечкой. Если линии шрифта ровные, то это шрифт без засечек.
Примеры обычных шрифтов без засечек (sans-serif):
- Verdana,
- Trebuchet
Примеры обычных шрифтов засечками (serif):
- Palatino,
- Bookman.
Есть шрифты, которые не входят в “засечную” классификацию. Это:
- Шрифты фиксированной ширины: monospace;
- Шрифты похожие на почерк: cursive;
- Декоративные шрифты: fantasy.
Файл шрифта
Любой шрифт — это набор данных, которые можно собрать в файл со специальным форматом. Основных форматов для веб-шрифтов сейчас несколько:
- WOFF2 (Web Open Font Format): более лёгкий наследник WOFF (1-я версия);
- TTF и OTF: шрифты Microsoft;
- SVG: шрифт как изображение (OpenType-SVG);
- EOT (Embedded Open Type): для старых версий IE.
Какой шрифт для сайта лучше?
Шрифт для сайта нельзя рассматривать, как обособленный элемент дизайна. Да он должен быть удобным для чтения, не утомлять глаза пользователя, не отталкивать при первом взгляде. Но при этом он должен сочетаться с основным дизайном сайта, быть разным для контента, меню, заголовков и подзаголовков. В основном тексте он может менять вес (толщина), стиль (наклон), цвет в пределах одного семейства. Вариантов работы со шрифтами масса, но есть общие правила выбора:
- Ваш шрифт должен поддерживать кириллицу;
- Оказывать минимальное воздействие на время загрузки страницы.
Чтобы исключить влияние шрифта на отрисовку страницы, вам нужно:
- Отказаться от подключения шрифтов со сторонних сервисов, типа Google Fonts;
- Залить файл шрифтов на сервер сайта;
- Использовать продвинутый формат WOFF2;
- Для форматов SVG использовать gzip-сжатие;
- Не забывайте про форматы шрифтов для кросс-браузерной поддержки (
.ttf
,.woff
,.woff2
и т.д).
Заключение
Итак, какой шрифт для сайта выбрать:
- С поддержкой кириллицы;
- В лёгком формате;
- Без засечки;
- С адаптивным размером (через
@media
).