Стилизация текста: font-family, font-size, font-weight, line-height и др.

Шрифты в CSS: Как сделать текст красивым и читаемым 🎨

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

font-family: Выбираем «голос» текста

Шрифт — это первое, что замечает пользователь. Важно не только подобрать красивый вариант, но и обеспечить кросс-браузерную поддержку.

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

Как это работает:

• Браузер пытается применить первый шрифт (Helvetica Neue).
• Если его нет, переходит к следующему (Arial).
• Если и его нет, использует общее семейство (sans-serif).

💡 Профессиональный совет: Всегда указывайте запасные варианты и общее семейство (serif/sans-serif/monospace). Это страховка для пользователей.

font-size: Контролируем размер текста

Размер шрифта — мощный инструмент. Слишком маленький — нечитаемо, слишком большой — как крик.

h1 {
  font-size: 2.5rem; /* Лучше чем px! */
}

p {
  font-size: 1rem; /* Базовый размер */
}

Популярные единицы:

• rem — относительно размера корневого элемента (html)
• em — относительно размера родителя
• vw — относительно ширины окна (например, 3vw)

⚠️ Осторожно с px! Жёсткие пиксели мешают пользователям настроить размер текста под свои нужды.

font-weight: Насыщенность — от лёгкого до жирного

От тонких намёков до уверенных заявлений — управляйте вниманием через насыщенность.

.title {
  font-weight: 700; /* Жирный */
}

.subtitle {
  font-weight: 400; /* Обычный */
}

Шкала весов:

• 100 — Thin
• 300 — Light
• 400 — Normal (regular)
• 700 — Bold
• 900 — Black

🔥 Важно: Не все шрифты поддерживают все веса. Проверяйте в Google Fonts или на сайте поставщика.

line-height: Воздух для текста

Строки, прижатые друг к другу — мучение для глаз. Дайте тексту дышать!

article {
  line-height: 1.6; /* Без единиц — умножается на текущий размер шрифта */
}

pre {
  line-height: 1.2; /* Для кода можно меньше */
}

Золотые правила:

• Основной текст: 1.4–1.6
• Заголовки: 1.2–1.3
• Длинные строки: увеличивайте для удобочитаемости

Комбинируем свойства: Красивые заголовки

Давайте соберём всё вместе для эффектного результата.

.heading {
  font-family: "Georgia", serif; /* Элегантный шрифт */
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em; /* Добавляем лёгкий кернинг */
  color: #333;
}

Продвинутые приёмы: @font-face

Хотите уникальный шрифт? Загружайте свои файлы!

@font-face {
  font-family: "My Custom Font";
  src: url("fonts/custom.woff2") format("woff2"),
       url("fonts/custom.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Не блокирует загрузку страницы */
}

Оптимизация:

• Используйте woff2 — современный сжатый формат
• font-display: swap — текст покажется сразу с запасным шрифтом
• Подключайте только необходимые начертания

Контраст и доступность ♿

Красота — это важно, но читабельность — критична.

.error {
  color: #d33;
  font-weight: bold;
}

.warning {
  color: #950;
}

Проверяйте:

• Минимальный контраст 4.5:1 для обычного текста
• 3:1 для крупного текста (от 18px или 14px bold)
• Инструменты: WebAIM Contrast Checker, Chrome DevTools

Практический пример: Идеальная статья

Соберём всё в гармоничную композицию:

.article {
  font-family: "Segoe UI", Roboto, sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 65ch; /* Оптимальная длина строки */
}

.article h2 {
  font-size: 1.8rem;
  margin-top: 2em;
  line-height: 1.2;
}

.article code {
  font-family: "Courier New", monospace;
  font-size: 0.9em;
}

🌟 Запомните: Хорошая типографика незаметна — она просто делает чтение приятным.

Итоговая шпаргалка

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