Правильное применение глобального шрифта для HTML-документа

Быстрый ответ

Для того чтобы задать одинаковый шрифт для всего HTML-документа, используйте свойство CSS font-family на уровне элемента html:

html {
  font-family: 'Roboto', sans-serif;
}

Так, шрифт 'Roboto' будет установлен как основной для всего документа, что приведёт к единообразию текста.

Для полной унификации текстовых стилей, можно сочетать font-family с font-size и color, используя !important для того чтобы переопределить другие стили:

* {
  font-family: 'Roboto', sans-serif !important;
  font-size: 16px !important;
  color: #333 !important;
}

Размер шрифта по умолчанию и масштабируемость

Для удобства и масштабируемости рекомендуется задать базовый размер шрифта на уровне body, используя при этом относительные единицы измерения, такие как rem или em:

body {
  font-size: 1rem; /* Базовый размер шрифта */
}

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

Резервные шрифты для единообразия отображения

Важно включать в список шрифтов резервные варианты при задании свойства font-family. Это гарантирует сохранение однородности визуального стиля в случае отсутствия основного шрифта:

html {
  font-family: 'Open Sans', 'Arial', sans-serif;
}

Здесь 'Open Sans' является предпочтительным шрифтом, а 'Arial' и обобщённый sans-serif выступают в качестве резервных вариантов.

Визуализация

Примером может служить HTML-документ представленный как незапятнанный холст, а выбранный шрифт — как краска:

Холст: [🖼️] Ваш HTML-документ
Краска: [🎨] Глобальный шрифт "Helvetica"

Если применить шрифт ко всему холсту, это аналогично окрашиванию его в одном тоне:

html { font-family: 'Helvetica', sans-serif; }

Так происходит объединение элементов в единый стиль:

До: [🖼️🅰️🅱️🆎]  // Разные шрифты, как разноцветные краски
После: [🖼️✨✨✨]     // Один шрифт, как единый цвет на холсте

Это создаёт гармоничное визуальное впечатление.

Переопределение стандартных стилей

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

h1 {
  font-family: 'Georgia', serif !important;
  font-size: 2rem !important;
  /* Ведь размер действительно имеет значение */
}

Адаптация размера шрифта для разных экранов

Чтобы поддерживать удобство чтения текста на устройствах разного размера, используйте медиа-запросы с учётом адаптивной типографики:

@media (max-width: 768px) {
  html {
    font-size: 14px; /* Уменьшение размера шрифта для небольших экранов */
  }
}

@media (min-width: 769px) {
  html {
    font-size: 16px; /* Увеличение размера шрифта для больших экранов */
  }
}

Сокращённое свойство шрифта

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

body {
  font: 400 1rem/1.5 'Roboto', sans-serif;
  /* Сэкономльте своё время — это важно */
}

Так, для весь текста в body будет определён шрифт 'Roboto' размером 1rem и межстрочным интервалом 1.5.

Полезные материалы

1. CSS: Каскадные таблицы стилей | MDN — Подробное руководство по использованию CSS в веб-разработке.
2. Веб-типографика: Дизайн таблиц для чтения, а не просто для просмотра – A List Apart — Как создавать легко читаемые веб-таблицы с помощью типографики.
3. Обзор шрифтов – Google Fonts — Исследуйте разнообразие шрифтов для улучшения дизайна сайта.
4. CSS Font Stack: Веб-безопасные шрифтовые семейства с примерами кода HTML и CSS. — Отличный ресурс для подбора веб-шрифтов.
5. Полное руководство по элементу <table> | CSS-Tricks — Подробное руководство по стилизации таблиц с помощью CSS.
6. Правило CSS @font-face — Как использовать правило @font-face для встраивания пользовательских шрифтов в веб-страницы.
7. Размер шрифта с rem – Snook.ca — Применение единиц rem для надёжной установки размеров шрифта на различных устройствах.