Текст и шрифты

CSS-свойства для текста управляют шрифтом, размером, межстрочным интервалом, выравниванием и оформлением. font-family — какой шрифт, font-size — размер, font-weight — толщина, line-height — межстрочный интервал, text-align — выравнивание, text-decoration — подчёркивание/зачёркивание.

Основные свойства текста:

font-family — шрифт: font-family: 'Segoe UI', Arial, sans-serif; Цепочка запасных шрифтов: если первый не найден — пробует следующий.

font-size — размер: font-size: 16px; — абсолютный font-size: 1.2em; — относительный (от родителя) font-size: 1.2rem; — относительный (от корня)

font-weight — толщина: font-weight: normal; (400) font-weight: bold; (700) font-weight: 300-900; — числовые значения

line-height — межстрочный интервал: line-height: 1.5; — 150% от размера шрифта line-height: 1.5em; — аналогично Рекомендация: 1.5-1.8 для основного текста

Свойства текста: text-align: left | center | right | justify; text-decoration: none | underline | line-through; text-transform: uppercase | lowercase | capitalize; letter-spacing: 0.05em; — межбуквенный интервал word-spacing: 0.1em; — межсловный интервал

Важно: em vs rem vs px:

• px: абсолютный размер (16px = 16px всегда)
• em: относительный от РОДИТЕЛЬСКОГО элемента
• rem: относительный от КОРНЕВОГО элемента (html)

em и rem НЕ одинаковы!

Текстовые свойства — как настройки текстового редактора. font-family — типографский шрифт. font-size — размер кегля. font-weight — жирность. line-height — межстрочный. text-align — выравнивание по левому/правому краю.

**Самый простой:**

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

h1 {
  font-size: 2em;
  font-weight: bold;
  text-align: center;
}

Базовые текстовые свойства для.body и заголовка.

**Простой:**

/* Системные шрифты — быстрая загрузка */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

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

/* Типографская система */
h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
h2 { font-size: 1.75rem; font-weight: 600; line-height: 1.3; }
p  { font-size: 1rem; font-weight: 400; line-height: 1.7; }

Системные шрифты, Google Fonts и типографская иерархия.

**Реальный пример:**

/* Типографика проекта */
:root {
  --font-body: 'Inter', system-ui, sans-serif;
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-mono: 'Fira Code', monospace;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: hsl(220, 15%, 20%);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }

/* Код */
pre, code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Ссылки */
a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
a:hover {
  border-bottom-color: currentColor;
}

Полная типографическая система с переменными, clamp() и hover-эффектами.

**Неправильно:** Использовать px для font-size

**Почему:** px — абсолютный. Пользователь не может изменить размер (accessibility). rem/em — относительные.

**Правильно:** Используйте rem (от корня) для font-size. Это улучшает доступность и масштабируемость.

**Неправильно:** Путать em и rem

**Почему:** em — от родителя (вкладывается!). rem — от html (корня). Вложенные em растут экспоненциально.

**Правильно:** rem — безопасный (от корня). em — осторожно (от родителя).

**Неправильно:** Забывать про system-ui

**Почему:** Системные шрифты загружаются мгновенно. Google Fonts — дополнительный запрос.

**Правильно:** Начните с system-ui, добавьте Google Fonts как улучшение.

• font-family: шрифт + запасные варианты
• font-size: rem предпочтительнее px
• line-height: 1.5-1.8 для основного текста
• em ≠ rem: em от родителя, rem от html
• system-ui — быстрый, кэшируемый шрифт

Назад: Вы знаете цвета (C4) — стилизация текста добавляет дизайну читабельность.

Вперёд: В следующем уроке (C6) вы изучите единицы измерения: px, em, rem, %, vh, vw и когда какую использовать.