15 Модуль 3 Знакомство с CSS 15 мин урок 15 из 25

Шрифты и типографика

Стек фолбэков, подключение Google Fonts с кириллицей, размеры и насыщенность, межстрочный интервал и длина строки.

Что ты научишься делать

  • Подключишь шрифт с кириллицей так, чтобы текст не мигал при загрузке
  • Настроишь размер, интервал и длину строки, при которых текст приятно читать
  • Соберёшь типографику статьи «как в журнале»

#Стек шрифтов: план Б обязателен

font-family принимает не один шрифт, а список. Браузер идёт слева направо и берёт первый, который у него есть.

Последним в списке всегда стоит родовое имя — sans-serif, serif или monospace. Это гарантия: хоть что-то подходящее найдётся всегда.

CSSПравильный стек
body {  font-family: "Manrope", "Segoe UI", system-ui, sans-serif;}code, pre {  font-family: "JetBrains Mono", ui-monospace, monospace;}

#Подключаем шрифт с кириллицей

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

На Google Fonts есть фильтр по языку — выбирай Cyrillic и проверяй в предпросмотре русской строкой.

HTMLВ head, до своего файла стилей
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&display=swap"><link rel="stylesheet" href="style.css">
  • preconnect заранее устанавливает соединение с сервером шрифтов. Экономит примерно сто миллисекунд.
  • wght@400;600;700 — какие начертания нужны. Каждое лишнее — это лишние килобайты.
  • display=swap — самое важное. Пока шрифт грузится, текст показывается запасным. Без этого параметра часть браузеров прячет текст на несколько секунд.

#Насыщенность и начертание

СвойствоЗначенияЗаметка
font-weight100–900, normal (400), bold (700)Работают только те значения, которые ты подключил
font-stylenormal, italicНастоящий курсив надо подключать отдельно
font-size1rem, 18px, clamp()Основной текст — 16–18px
text-transformuppercase, lowercase, capitalizeМеняет вид, но не сам текст
letter-spacing0.02em, -0.02emЗадавай в em: тогда масштабируется вместе со шрифтом

Шкала размеров

Показывает готовую шкалу заголовков и текста в одном масштабе.

РольРазмер
h12.5rem
h21.9rem
h31.4rem
Текст1.0625rem
Мелкое0.875rem

#Три вещи, от которых зависит читаемость

Это важнее выбора шрифта. Хорошо настроенный системный шрифт читается лучше, чем плохо настроенный дорогой.

  1. Размер: 16–18 пикселей

    Меньше 16px читать тяжело, особенно на телефоне. Мода на 13px прошла вместе с нулевыми.

  2. Межстрочный интервал: 1.5–1.7

    line-height: 1.6 без единиц — число, а не размер. Так интервал считается от размера шрифта самого элемента и правильно наследуется. Заголовкам наоборот нужно теснее: 1.1–1.25.

  3. Длина строки: 45–75 символов

    Слишком длинная строка — глаз теряет начало следующей. Слишком короткая — постоянные скачки. Проще всего задать max-width: 68ch: единица ch как раз про количество символов.

Подвигай значения и почувствуй разницу
В песочницу

#Заголовок, который сам подстраивается

Функция clamp() задаёт размер в виде «не меньше — желаемое — не больше». Между границами значение плавно меняется вместе с шириной окна.

CSSЗаголовок без медиазапросов
h1 {  /* минимум 2rem, максимум 3.5rem, между ними растёт с шириной окна */  font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);}

#Мелочи, которые заметны

CSSХорошие привычки
/* Длинные слова и ссылки не вылезают за край */p {  overflow-wrap: break-word;}/* Заголовок не оставляет одно слово на последней строке */h1, h2, h3 {  text-wrap: balance;}/* Абзацы не заканчиваются одиноким словом */p {  text-wrap: pretty;}

Где спотыкаются почти все

Подключён шрифт без кириллицы

Почему Латиница выглядит как задумано, а русский текст тихо подменяется системным шрифтом. Разница заметна только если знать, куда смотреть.

Как надо На Google Fonts включи фильтр Cyrillic и проверь предпросмотр русской фразой.

line-height задан в пикселях

Почему line-height: 24px не наследуется пропорционально: у крупного заголовка строки слипнутся.

Как надо Пиши числом без единиц: line-height: 1.6.

Текст на всю ширину экрана

Почему На широком мониторе строка выходит на 150 символов. Глаз теряет начало следующей строки, читать почти невозможно.

Как надо Ограничь колонку: max-width: 68ch.

Подключены все начертания «на всякий случай»

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

Как надо Подключай только те веса, которые реально используешь. Обычно это два-три.

Стек шрифтов font stack
Список шрифтов в font-family. Браузер берёт первый доступный.
Родовое семейство generic family
Запасное имя в конце стека: sans-serif, serif, monospace.
font-display: swap font-display
Показывать текст запасным шрифтом, пока грузится основной.
Межстрочный интервал line-height
Расстояние между базовыми линиями строк. Задаётся числом без единиц.
Длина строки measure
Количество символов в строке. Комфортно 45–75.
clamp() clamp
Функция «минимум — желаемое — максимум» для плавно меняющихся размеров.

Проверь себя

  1. Зачем в конце font-family пишут sans-serif?

    Браузер идёт по списку слева направо. Родовое имя в конце — гарантия, что хоть какой-то подходящий шрифт найдётся.

  2. Что делает <code>display=swap</code> при подключении шрифта?

    Без него часть браузеров прячет текст на время загрузки — человек несколько секунд смотрит на пустое место.

  3. Как правильно задать межстрочный интервал?

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

  4. Какая длина строки считается комфортной?

    Задать проще всего через <code>max-width: 68ch</code> — единица <code>ch</code> как раз про ширину символа.

  5. Что означает <code>clamp(2rem, 1.2rem + 3vw, 3.5rem)</code>?

    Первое значение — минимум, последнее — максимум, среднее — желаемое. Между границами оно меняется плавно.

Задание

Типографика статьи

Настрой текст статьи так, чтобы его было приятно читать:

  • ограничь ширину колонки — не больше 70 символов (ch);
  • основной текст — не меньше 1rem;
  • межстрочный интервал у абзацев — от 1.5, числом без единиц;
  • заголовку задай свой межстрочный интервал не больше 1.3;
  • в font-family обязательно должно быть родовое имя в конце.
Открыть в песочнице
    Подсказка 1

    Ширина колонки: .article { max-width: 68ch; }

    Подсказка 2

    Стек: font-family: Georgia, "Times New Roman", serif; — родовое имя обязательно последним.

    Подсказка 3

    Интервалы: .article p { line-height: 1.7; } и h1 { line-height: 1.15; }

    Показать решение
    HTMLindex.html
    <article class="article">  <h1>Почему кофе горчит</h1>  <p class="lead">Горечь — не признак плохого зерна. Чаще это признак того, что воду передержали.</p>  <p>Вода вытягивает из молотого кофе разные вещества с разной скоростью. Сначала идут кислоты, потом сахара, и только под конец — горькие соединения.</p>  <p>Если пролив длится дольше нужного, последние успевают выйти в чашку в избытке.</p></article>
    CSSstyle.css
    .article {  max-width: 68ch;  font-family: Georgia, "Times New Roman", serif;  color: #2b2b33;}.article p {  font-size: 1.0625rem;  line-height: 1.7;  margin: 0 0 1rem;}h1 {  font-size: clamp(2rem, 1.2rem + 3vw, 3rem);  line-height: 1.15;  letter-spacing: -0.02em;}.lead {  font-size: 1.15rem;  color: #55596b;}

    Проверь себя