Шрифты

CSS-свойства семейства font-* управляют гарнитурой, размером, насыщенностью, стилем и другими характеристиками шрифта. Правильный выбор шрифтовых свойств — основа типографики в вебе.

Зачем нужно

Шрифт задаёт «голос» интерфейса. Правильно подобранный font-family с корректными font-size и font-weight определяет читаемость, настроение и профессионализм сайта. Variable fonts и font-display обеспечивают производительность загрузки.

Где используется

  • Типографика всех веб-страниц
  • Дизайн-системы (шкалы размеров и весов)
  • Адаптивная типографика (clamp, viewport units)
  • Оптимизация производительности загрузки шрифтов

Предпосылки

font-family

Задаёт гарнитуру шрифта. Указывается стек (fallback-цепочка):

body {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

code {
  font-family: "Fira Code", "JetBrains Mono", "Consolas", monospace;
}

Общие семейства (generic families)

Ключевое слово Описание Пример
serif С засечками Times New Roman, Georgia
sans-serif Без засечек Arial, Helvetica
monospace Моноширинный Courier New, Consolas
cursive Рукописный Comic Sans MS, Brush Script
fantasy Декоративный Impact, Papyrus
system-ui Системный шрифт ОС San Francisco, Segoe UI
ui-serif Системный с засечками —
ui-sans-serif Системный без засечек —
ui-monospace Системный моноширинный —

Web-safe fonts (доступны почти везде)

/* Sans-serif */
font-family: Arial, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Tahoma, Geneva, sans-serif;

/* Serif */
font-family: "Times New Roman", Times, serif;
font-family: Georgia, "Times New Roman", serif;

/* Monospace */
font-family: "Courier New", Courier, monospace;
font-family: Consolas, "Courier New", monospace;

Современный системный стек

body {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    Arial,
    sans-serif;
}

font-size

/* Абсолютные единицы */
h1 { font-size: 32px; }

/* Относительные единицы */
p  { font-size: 1rem; }   /* Относительно корневого размера */
em { font-size: 0.875em; } /* Относительно родительского */

/* Ключевые слова */
small { font-size: small; }
/* xx-small, x-small, small, medium, large, x-large, xx-large */

/* Процент */
h2 { font-size: 150%; } /* 150% от родительского */

/* Адаптивный размер */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

Шкала размеров (Type Scale)

:root {
  --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 */
}

font-weight

.light    { font-weight: 300; }
.normal   { font-weight: 400; } /* normal */
.medium   { font-weight: 500; }
.semibold { font-weight: 600; }
.bold     { font-weight: 700; } /* bold */
.black    { font-weight: 900; }

/* Ключевые слова */
.keyword  { font-weight: normal; } /* 400 */
.keyword  { font-weight: bold; }   /* 700 */
.relative { font-weight: lighter; } /* На 1 шаг легче родителя */
.relative { font-weight: bolder; }  /* На 1 шаг тяжелее родителя */

Если шрифт не содержит нужный вес, браузер выберет ближайший доступный. Для точного контроля используйте variable fonts.

font-style

.italic  { font-style: italic; }  /* Курсив (настоящий) */
.oblique { font-style: oblique; } /* Наклонный (искусственный) */
.normal  { font-style: normal; }  /* Прямое начертание */

/* Oblique с указанием угла */
.slant { font-style: oblique 14deg; }

font — сокращённое свойство

/* font: [style] [weight] size[/line-height] family */
p {
  font: italic 600 1rem/1.6 "Inter", sans-serif;
}

/* Минимальная запись */
p {
  font: 16px/1.5 Arial, sans-serif;
}

/* Системные шрифты */
button {
  font: caption; /* Системный шрифт для кнопок */
}

Внимание: shorthand font сбрасывает все не указанные font-свойства на значения по умолчанию. Если задать только font: 16px sans-serif, то font-weight сбросится в normal.

Variable Fonts (Вариативные шрифты)

Variable fonts содержат все начертания в одном файле и позволяют плавно менять параметры:

@font-face {
  font-family: "Inter Variable";
  src: url("Inter-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

body {
  font-family: "Inter Variable", sans-serif;
}

/* Плавные веса */
h1 { font-weight: 750; } /* Любое значение от 100 до 900 */
h2 { font-weight: 650; }

/* Оси вариации */
.fancy {
  font-variation-settings:
    "wght" 600,    /* Weight */
    "wdth" 75,     /* Width */
    "slnt" -12,    /* Slant */
    "ital" 1;      /* Italic */
}

/* Анимация веса */
.animated-weight {
  transition: font-weight 0.3s ease;
}
.animated-weight:hover {
  font-weight: 800;
}

Стандартные оси вариации

Ось Тег CSS-свойство Описание
Weight wght font-weight Насыщенность
Width wdth font-stretch Ширина символов
Slant slnt font-style: oblique Xdeg Наклон
Italic ital font-style Курсив
Optical Size opsz font-optical-sizing Оптический размер

font-display

Управляет поведением при загрузке шрифта:

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
  font-display: swap; /* Рекомендуется для текстовых шрифтов */
}
Значение Блок Подмена Описание
auto Зависит от браузера — По умолчанию
block 3 с Бесконечно Ждёт шрифт, невидимый текст
swap ~0 мс Бесконечно Сразу показывает fallback, потом заменяет
fallback ~100 мс ~3 с Короткий блок, ограниченная подмена
optional ~100 мс 0 Если не загрузился быстро — останется fallback

Рекомендация: swap для основного текста, optional для декоративных шрифтов.

Дополнительные свойства

font-variant

/* Капитель (Small Caps) */
.small-caps {
  font-variant: small-caps;
}

/* OpenType features */
.fancy-nums {
  font-variant-numeric: tabular-nums; /* Цифры одинаковой ширины */
}
.lining {
  font-variant-numeric: lining-nums; /* Цифры на базовой линии */
}
.fractions {
  font-variant-numeric: diagonal-fractions; /* 1/2 → дробь */
}

/* Лигатуры */
.ligatures {
  font-variant-ligatures: common-ligatures;
}

font-stretch

.condensed { font-stretch: condensed; }     /* 75% */
.expanded  { font-stretch: expanded; }      /* 125% */
.custom    { font-stretch: 87.5%; }         /* Точное значение */

font-optical-sizing

/* Автоматическая подстройка под размер (variable fonts) */
body {
  font-optical-sizing: auto;
}

Частые ошибки

  1. Забыт generic family в конце стека — если шрифт не загрузится, браузер выберет что попало:

    /* ПЛОХО */
font-family: "My Custom Font";

/* ХОРОШО */
font-family: "My Custom Font", sans-serif;

  2. Shorthand font сбрасывает font-weight — не указанные свойства станут default:

    .bold { font-weight: bold; }
.bold { font: 16px Arial; } /* font-weight сбросился в normal! */

  3. Использование font-weight: bold вместо числового значения — теряется контроль при variable fonts

  4. em для font-size в глубокой вложенности — размеры растут экспоненциально:

    li { font-size: 1.1em; }
/* li > li > li = 1.1 × 1.1 × 1.1 = 1.33em */

  5. Указание несуществующего веса шрифта — браузер подберёт ближайший, результат непредсказуем

Практика

  • Создать стек из 3+ шрифтов с generic family
  • Реализовать шкалу размеров через CSS-переменные
  • Протестировать font-display: swap vs optional через DevTools Network throttling
  • Создать text с font-variant-numeric: tabular-nums для таблицы цен
  • Подключить variable font и использовать нестандартные веса (350, 550)
  • Анимировать font-weight при hover через transition

Связанные темы

Ресурсы