Шрифты в CSS: Полное руководство от основ до тонкостей веб-типографики

Синтаксис font-family: каскад и резервные варианты

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

body {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

В этом примере:

1. Браузер пытается загрузить Roboto
2. Если Roboto недоступен, используется Arial
3. Если и Arial нет — Helvetica
4. В крайнем случае — любой sans-serif шрифт системы

Важное правило: всегда завершайте стек общим семейством (serif, sans-serif, monospace, cursive, fantasy). Это гарантирует, что текст всегда будет отображен в нужной стилистике.

/* Правильно с кавычками для шрифтов с пробелами */
.heading {
    font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif;
}
/* Для моноширинных текстов */
.code-block {
    font-family: 'Fira Code', 'Courier New', monospace;
}

Веб-безопасные шрифты (Web-Safe Fonts)

Веб-безопасные шрифты — это гарнитуры, доступные на большинстве операционных систем. Их использование гарантирует мгновенное отображение без загрузки внешних ресурсов.

Основные стеки веб-безопасных шрифтов:

/* Sans-serif (без засечек) */
.sans-example {
    font-family: Arial, Helvetica, sans-serif;
    /* Альтернатива: */
    font-family: Tahoma, Verdana, sans-serif;
}
/* Serif (с засечками) */
.serif-example {
    font-family: Georgia, 'Times New Roman', Times, serif;
}
/* Monospace (моноширинные) */
.mono-example {
    font-family: 'Courier New', Courier, 'Lucida Console', monospace;
}

Когда использовать:

• Административные панели и внутренние инструменты
• Лендинги с критической важностью скорости
• Текст, который должен отображаться моментально (интерфейсные элементы)
• Резервные варианты при использовании кастомных шрифтов

Правило @font-face: синтаксис и ключевые дескрипторы

Правило @font-face — мост между вашим сервером и браузером. Оно сообщает браузеру, где найти файл шрифта и как его использовать.

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyFont.woff2') format('woff2'),
         url('fonts/MyFont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

Ключевые параметры:

1. font-family — имя, которое вы будете использовать в CSS
2. src — путь к файлу, может быть несколько источников
3. format() — подсказка браузеру о формате файла
4. font-weight и font-style — указание начертания (особенно важно для правильного выбора italic/bold)

Форматы шрифтов: от EOT до WOFF2

Эволюция форматов отражает борьбу за совместимость и эффективность:

@font-face {
    font-family: 'ModernFont';
    /* Идеальный современный стек */
    src: url('font.woff2') format('woff2'), /* Самый современный и сжатый */
         url('font.woff') format('woff'),   /* Хорошая поддержка */
         url('font.ttf') format('truetype'); /* Максимальная совместимость */
}

Сравнение форматов:

• WOFF2 (Web Open Font Format 2) — сжатие на 30% лучше чем WOFF, поддержка всеми современными браузерами
• WOFF — широко поддерживается, хорошее сжатие
• TTF/OTF — универсальные, но тяжелые форматы
• EOT — устаревший, только для IE8-
• SVG — практически не используется

Дополнительные дескрипторы @font-face

Параметры font-display, unicode-range и size-adjust в правиле подключения шрифта позволяют тонко контролировать поведение при загрузке, оптимизировать объём передаваемых данных и корректировать метрики для визуальной стабильности.

Подключение разных начертаний:

/* Regular */
@font-face {
    font-family: 'Inter';
    src: url('Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
/* Italic */
@font-face {
    font-family: 'Inter';
    src: url('Inter-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}
/* Bold */
@font-face {
    font-family: 'Inter';
    src: url('Inter-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
/* Bold Italic */
@font-face {
    font-family: 'Inter';
    src: url('Inter-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
}

font-display: стратегия отображения

@font-face {
    font-family: 'BlogFont';
    src: url('blogfont.woff2') format('woff2');
    font-display: swap; /* Текст сразу отображается системным шрифтом, затем заменяется */
}
@font-face {
    font-family: 'LogoFont';
    src: url('logofont.woff2') format('woff2');
    font-display: block; /* Текст невидим до загрузки (для критически важных шрифтов) */
}

Значения font-display:

• auto — поведение по умолчанию браузера (обычно = block)
• block — короткий период невидимого текста, затем замена
• swap — мгновенный показ резервного шрифта, затем замена
• fallback — очень короткий block, затем swap только если шрифт загрузился быстро
• optional — похоже на fallback, но браузер может вообще не показывать кастомный шрифт

unicode-range: оптимизация для кириллицы

@font-face {
    font-family: 'OptimizedFont';
    src: url('font-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF; /* Только базовая латиница */
}
@font-face {
    font-family: 'OptimizedFont';
    src: url('font-cyrillic.woff2') format('woff2');
    unicode-range: U+0400-04FF; /* Кириллические символы */
}

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

Размер: свойство font-size

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

/* Плохо для адаптивности */
.old-school {
    font-size: 16px; /* Фиксированный размер */
}
/* Хорошо для адаптивности */
.modern {
    font-size: 1rem; /* Относительно корневого размера */
}
/* Отлично для сложных адаптивных систем */
.responsive-heading {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    /* Минимум 1.5rem, идеально 3% от ширины окна, максимум 2.5rem */
}

Сравнение единиц:

• px — абсолютные пиксели, игнорируют настройки браузера
• em — относительно размера родителя (может вызвать каскадный эффект)
• rem — относительно размера корневого элемента (html)
• % — относительно родителя, как em
• vw/vh — относительно ширины/высоты окна
• ch — относительно ширины символа «0»

Лучшая практика — система на rem:

html {
    font-size: 16px; /* Базовый размер для rem */
}
@media (min-width: 768px) {
    html {
        font-size: 18px; /* Увеличиваем базовый размер на планшетах */
    }
}
@media (min-width: 1200px) {
    html {
        font-size: 20px; /* И еще на десктопах */
    }
}
h1 {
    font-size: 2.5rem; /* Всегда пропорционально базовому размеру */
}
p {
    font-size: 1.125rem; /* 18px при базовом 16px */
}

Насыщенность и стиль: font-weight и font-style

font-weight: числовые значения против ключевых слов

/* Старый подход */
.bold-text {
    font-weight: bold; /* Всегда 700, не гибко */
}
/* Современный подход */
.variable-weight {
    font-weight: 650; /* Тонкая настройка с variable fonts */
}
/* Полный диапазон стандартных значений */
.thin        { font-weight: 100; }
.extra-light { font-weight: 200; }
.light       { font-weight: 300; }
.normal      { font-weight: 400; }
.medium      { font-weight: 500; }
.semi-bold   { font-weight: 600; }
.bold        { font-weight: 700; }
.extra-bold  { font-weight: 800; }
.black       { font-weight: 900; }

font-style: разница между italic и oblique

.real-italic {
    font-style: italic; /* Использует специальный курсивный вариант шрифта */
}
.fake-slanted {
    font-style: oblique 14deg; /* Наклоняет обычные глифы на указанный угол */
}
.mixed-example {
    font-style: oblique 10deg italic; /* Браузер выберет italic если доступен */
}

Высота строки: свойство line-height

line-height критически важен для читаемости. Безразмерные значения — лучший выбор.

/* Плохо - наследуется фиксированное значение */
.problem {
    line-height: 24px;
    font-size: 20px; /* Высота строки 24px */
}
.problem small {
    font-size: 14px; /* Высота строки все еще 24px - слишком много! */
}
/* Хорошо - пропорциональное значение */
.solution {
    line-height: 1.5; /* 1.5 × font-size */
    font-size: 20px; /* Высота строки 30px */
}
.solution small {
    font-size: 14px; /* Высота строки 21px - идеально! */
}

Рекомендации по line-height:

• Основной текст: 1.5–1.6
• Заголовки: 1.2–1.3
• Длинный текст (статьи): до 1.8
• Код: 1.4–1.5

Дополнительные свойства для тонкой настройки

.typography-demo {
    /* Капители (маленькие заглавные) */
    font-variant-caps: small-caps;    
    /* Межбуквенный интервал */
    letter-spacing: 0.5px;    
    /* Межсловный интервал */
    word-spacing: 0.1em;    
    /* Выравнивание текста */
    text-align: justify;
    text-justify: inter-word;
}

Свойство font позволяет объединить несколько отдельных свойств в одной строке.

Полный синтаксис свойства font

/* Полный синтаксис в правильном порядке */
.full-example {
    font: italic small-caps 700 1.2rem/1.5 'Segoe UI', Roboto, sans-serif;
    /* font-style font-variant font-weight font-size/line-height font-family */
}

Разбор примера:

• italic → font-style: italic
• small-caps → font-variant: small-caps
• 700 → font-weight: 700
• 1.2rem/1.5 → font-size: 1.2rem; line-height: 1.5
• ‘Segoe UI’, Roboto, sans-serif → font-family

Важные особенности и типичные ошибки

.error {
    font: bold italic; /* НЕ РАБОТАЕТ! */
}
/* Правильно: минимум font-size и font-family */
.correct {
    font: 1rem sans-serif; /* Работает, остальное - значения по умолчанию */
}
/* Частичное использование */
.partial {
    font: 1.2em/1.6 'Open Sans'; /* Только размер, высота строки и семейство */
    
    /* Дополнительные свойства задаются отдельно */
    font-weight: 600;
    letter-spacing: 0.5px; /* Не входит в сокращение! */
}
/* Сброс к системному шрифту */
.system-font {
    font: caption; /* Использует шрифт для подписей ОС */
    /* Другие значения: icon, menu, message-box, small-caption, status-bar */
}

Что НЕ входит в сокращение font:

• letter-spacing
• word-spacing
• text-transform
• text-decoration
• font-variant-ligatures (кроме small-caps)

Современные шрифты содержат дополнительные возможности, которые можно включить через CSS.

Свойство font-variant и его производные

.advanced-typography {
    /* Лигатуры (слияние символов) */
    font-variant-ligatures: common-ligatures discretionary-ligatures;
    /* common: fi, fl; discretionary: st, ct (зависит от шрифта) */    
    /* Числовые стили */
    font-variant-numeric: lining-nums tabular-nums diagonal-fractions;
    /* lining-nums: 123 (высотой как заглавные) */
    /* tabular-nums: моноширинные цифры для таблиц */
    /* diagonal-fractions: ½ вместо 1/2 */    
    /* Позиция надстрочных/подстрочных */
    font-variant-position: super; /* для сносок */
}

Свойство font-feature-settings

Низкоуровневое свойство для доступа к OpenType-фичам:

.direct-control {
    /* Включение конкретных фич по их тегам */
    font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "frac" 1;
}
/* Отключение лигатур для программирования */
.code {
    font-feature-settings: "liga" 0, "calt" 0;
}

Сравнение подходов:

/* Предпочтительный способ (высокоуровневый) */
.preferred {
    font-variant-ligatures: common-ligatures;
    font-variant-numeric: tabular-nums;
}
/* Низкоуровневый способ (если нет высокоуровневой поддержки) */
.fallback {
    font-feature-settings: "liga" 1, "tnum" 1;
}

Variable Fonts — революция в веб-типографике: один файл содержит все начертания и варианты.

Что такое Variable Fonts? Ось вариативности

Переменные шрифты определяются осями вариативности:

@font-face {
    font-family: 'VariableFont';
    src: url('font.woff2') format('woff2 supports variations'),
         url('font.woff2') format('woff2-variations');
    font-weight: 100 900; /* Диапазон вместо фиксированного значения */
    font-stretch: 75% 125%; /* Диапазон ширины */
}

Стандартные оси:

• wght — насыщенность (обычно 100-900)
• wdth — ширина (condensed, normal, expanded)
• slnt — наклон (обычно -10 до 0 градусов)
• ital — курсив (0 или 1)
• opsz — оптический размер (для разных размеров кегля)

Использование через CSS

.variable-demo {
    font-family: 'VariableFont', sans-serif;    
    /* Способ 1: через стандартные свойства */
    font-weight: 356; /* Любое значение в диапазоне! */
    font-stretch: 110%; /* Расширенная версия */    
    /* Способ 2: через font-variation-settings */
    font-variation-settings: 
        "wght" 650, 
        "wdth" 120,
        "slnt" -8;
}
/* Анимация переменных шрифтов! */
.animated-text {
    transition: font-variation-settings 0.3s ease;
}
.animated-text:hover {
    font-variation-settings: "wght" 800, "slnt" -10;
}

Практический пример: responsive typography

:root {
    --weight-min: 300;
    --weight-max: 800;
}
.responsive-heading {
    font-family: 'VariableFont', sans-serif;
    font-weight: clamp(var(--weight-min), 10vw, var(--weight-max));
    /* Насыщенность меняется с шириной окна! */
}

Проблема FOIT/FOUT и переход к FOFT

Стратегия FOFT решает проблему FOIT (невидимый текст при загрузке) и FOUT (резкая смена шрифтов). Вместо ожидания всех начертаний FOFT мгновенно загружает основное начертание шрифта, обеспечивая быструю читаемость, а затем фоново подгружает остальные варианты. Это создает плавный визуальный переход без раздражающих «вспышек», улучшая пользовательский опыт и снижая метрику CLS за счёт правильного использования font-display: swap и раздельного подключения шрифтов.

<!-- Предзагрузка критического шрифта в HTML -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

/* Стратегия FOFT (Flash of Faux Text) */
@font-face {
    font-family: 'MainFont';
    src: url('MainFont-Regular.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'MainFont Fallback';
    src: local('Arial');
    /* size-adjust и descent-override для точного совпадения метрик */
    size-adjust: 105%;
    descent-override: 75%;
}
body {
    font-family: 'MainFont', 'MainFont Fallback', sans-serif;
}

Подмножество шрифтов (subsetting)

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

Оптимизированный @font-face с подмножествами:

@font-face {
    font-family: 'Optimized';
    src: url('font-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA;
}
@font-face {
    font-family: 'Optimized';
    src: url('font-cyrillic.woff2') format('woff2');
    unicode-range: U+0400-04FF;
}

Стратегии загрузки

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

// Оптимизированная загрузка с помощью JavaScript
if ('fonts' in document) {
    document.fonts.load('1rem "CriticalFont"').then(() => {
        document.documentElement.classList.add('fonts-loaded');
    });
}

/* CSS для прогрессивного улучшения */
body {
    font-family: system-ui, -apple-system, sans-serif;
}
.fonts-loaded body {
    font-family: 'CustomFont', system-ui, -apple-system, sans-serif;
}

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

Достаточный контраст

/* WCAG 2.1 Level AA требует минимум 4.5:1 для обычного текста */
.good-contrast {
    color: #333333; /* Темно-серый */
    background-color: #FFFFFF; /* Белый */
    /* Контраст: 12.63:1 - отлично! */
}
.bad-contrast {
    color: #888888; /* Светло-серый */
    background-color: #FFFFFF; /* Белый */
    /* Контраст: 3.54:1 - недостаточно! */
}
/* Для крупного текста (24px и более) достаточно 3:1 */
.large-text {
    font-size: 1.5rem;
    color: #666666;
    background-color: #FFFFFF;
    /* Контраст: 5.74:1 - хорошо даже для обычного текста */
}

Адаптивный размер текста и масштабирование

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

/* Базовая настройка для поддержки масштабирования */
html {
    font-size: 100%; /* 16px по умолчанию, но пользователь может изменить */
}
.container {
    /* Не использовать фиксированные размеры! */
    width: 90%; /* Хорошо */
    max-width: 1200px;
    
    /* width: 1200px; ПЛОХО - ломает масштабирование */
}
/* Поддержка высокого контраста */
@media (prefers-contrast: high) {
    .element {
        border: 2px solid currentColor;
    }
}
/* Поддержка редуцированного движения */
@media (prefers-reduced-motion: reduce) {
    .animated-text {
        transition: none;
    }
}

Учёт потребностей пользователей с дислексией

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

.dyslexia-friendly {
    /* Рекомендации British Dyslexia Association */
    font-family: 'OpenDyslexic', Arial, sans-serif;
    font-size: 1.125rem; /* Минимум 12-14pt */
    line-height: 1.8; /* Увеличенный межстрочный интервал */
    letter-spacing: 0.12em; /* Увеличенный межбуквенный интервал */
    word-spacing: 0.16em; /* Увеличенный межсловный интервал */
    color: #333; /* Темный текст на светлом фоне (не чисто черный/белый) */
    max-width: 70ch; /* Ограничение длины строки */
}

Настройка типографической системы проекта

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

:root {
    /* Цветовая палитра */
    --color-text: #1a1a1a;
    --color-text-light: #666;
    --color-background: #fff;    
    /* Шрифты */
    --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
    --font-secondary: 'Merriweather', Georgia, serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;    
    /* Размеры шрифтов (modular scale) */
    --text-xs: 0.75rem;   /* 12px */
    --text-sm: 0.875rem;  /* 14px */
    --text-base: 1rem;    /* 16px */
    --text-lg: 1.125rem;  /* 18px */
    --text-xl: 1.25rem;   /* 20px */
    --text-2xl: 1.5rem;   /* 24px */
    --text-3xl: 1.875rem; /* 30px */
    --text-4xl: 2.25rem;  /* 36px */    
    /* Высота строки */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
}
/* Типографические классы */
.text-display {
    font-family: var(--font-secondary);
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    font-weight: 700;
}
.text-body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    max-width: 65ch; /* Оптимальная длина строки */
}
.text-code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    font-feature-settings: "calt" 0; /* Отключаем лигатуры для кода */
}

Создание «липкого» заголовка

Создание «липкого» заголовка с помощью CSS-свойства position: sticky позволяет элементу оставаться видимым в области просмотра при прокрутке, улучшая навигацию и удобство работы с длинным контентом.

<article class="article">
    <h1 class="sticky-heading">Заголовок статьи</h1>
    <p>Текст статьи...</p>
</article>

/* Стилизация первой буквы */
.article::first-letter {
    font-size: 3em;
    font-weight: bold;
    float: left;
    line-height: 1;
    margin-right: 0.1em;
    color: #2c3e50;
}
/* Экспериментальное свойство initial-letter */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
    .article::first-letter {
        -webkit-initial-letter: 2;
        initial-letter: 2;
        float: none;
        margin-right: 0.5em;
    }
}
/* Липкий заголовок */
.sticky-heading {
    position: sticky;
    top: 0;
    background: white;
    padding: 1rem 0;
    border-bottom: 2px solid #eee;
    z-index: 10;
}

Адаптивная типографика с clamp()

Использование функции clamp() позволяет задать динамический размер текста, который плавно изменяется в заданном диапазоне в зависимости от ширины окна браузера, создавая идеальную читаемость на любом устройстве без медиа-запросов.

:root {
    --min-width: 320px;
    --max-width: 1200px;
}
.responsive-typography {
    /* Динамический размер шрифта */
    font-size: clamp(
        var(--text-base), 
        1rem + 1vw, 
        var(--text-xl)
    );    
    /* Динамическая высота строки */
    line-height: clamp(1.4, 1.2 + 0.5vw, 1.8);    
    /* Динамические отступы */
    padding: clamp(1rem, 2vw, 2rem);    
    /* Динамическая ширина контейнера */
    width: clamp(90%, 800px, 100% - 2rem);
}

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

Антипаттерны

/* ❌ Слишком много начертаний */
@font-face { font-family: 'Bad'; src: url('Bad-Thin.woff2'); font-weight: 100; }
@font-face { font-family: 'Bad'; src: url('Bad-ExtraLight.woff2'); font-weight: 200; }
@font-face { font-family: 'Bad'; src: url('Bad-Light.woff2'); font-weight: 300; }
@font-face { font-family: 'Bad'; src: url('Bad-Regular.woff2'); font-weight: 400; }
@font-face { font-family: 'Bad'; src: url('Bad-Medium.woff2'); font-weight: 500; }
@font-face { font-family: 'Bad'; src: url('Bad-SemiBold.woff2'); font-weight: 600; }
@font-face { font-family: 'Bad'; src: url('Bad-Bold.woff2'); font-weight: 700; }
@font-face { font-family: 'Bad'; src: url('Bad-ExtraBold.woff2'); font-weight: 800; }
@font-face { font-family: 'Bad'; src: url('Bad-Black.woff2'); font-weight: 900; }
/* Решение: используйте variable font! */

/* ❌ Использование !important для шрифтов */
.error {
    font-family: Arial !important; /* Затрудняет поддержку */
}

/* ❌ Смешивание единиц измерения без системы */
.confusing {
    font-size: 14px;
    line-height: 1.5em;
    margin: 0.5rem;
    padding: 10px;
}

/* ❌ Игнорирование font-display */
@font-face {
    font-family: 'NoDisplay';
    src: url('font.woff2') format('woff2');
    /* Нет font-display! */
}

Чек-лист лучших практик

Идеальная реализация включает использование WOFF2 с предзагрузкой, стратегию swap для отображения, систему на rem и clamp(), проверку контраста и обязательную проверку производительности в Lighthouse.

/* ✅ Оптимизированное подключение шрифтов */
@font-face {
    font-family: 'BestPractice';
    src: url('font.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-display: swap;
    font-style: normal;
}

/* ✅ Современные единицы измерения */
html {
    font-size: 16px;
}

@media (min-width: 768px) {
    html {
        font-size: 18px;
    }
}

/* ✅ Пропорциональная типографика */
body {
    font-family: 'BestPractice', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #1a1a1a;
    background: #fff;
}

/* ✅ Контроль длины строки */
.content {
    max-width: 65ch;
    margin: 0 auto;
}

/* ✅ Достаточный контраст */
.primary-text {
    color: #222;
    background: #fff;
}

/* ✅ Поддержка пользовательских настроек */
@media (prefers-contrast: high) {
    .primary-text {
        color: #000;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

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

1. Эстетика через variable fonts и OpenType-фичи
2. Производительность через предзагрузку, подмножество и оптимизацию
3. Доступность через контраст, масштабирование и дислексик-френдли параметры

Тренды будущего:

• Широкое внедрение variable fonts
• Автоматическая оптимизация через браузерные API
• Персонализация типографики под пользовательские предпочтения
• Интеграция с дизайн-системами через CSS-переменные

Следующие шаги:

1. Проанализируйте текущие шрифты на вашем проекте с помощью Lighthouse
2. Внедрите font-display: swap для существующих шрифтов
3. Поэкспериментируйте с variable fonts для нового контента
4. Проверьте контрастность текста с помощью инструментов разработчика

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

Готовы вывести свой бизнес в онлайн с сильным и современным сайтом? Мы разрабатываем быстрые, стильные и эффективные веб-решения, которые выделят вас среди конкурентов и превратят посетителей в клиентов. Пришло время заказать сайт, который будет расти вместе с вами. Напишите нам — обсудим ваш проект!