Типографический образец получает пространство и меняющееся тело. На занятии вы вырастите сетку из строки и материала, настроите вертикальный ритм и отношения текста с изображением, проверите необходимость второй гарнитуры, а затем соберёте две композиции одного фрагмента и превратите выбранную версию в мобильную — с перестановкой, сменой масштаба и сохранением смыслового порядка. В эту же систему войдёт базовая доступность: контраст, увеличение, reflow, текстовые альтернативы изображениям. Итогом станет рабочая треть публикации, где форма уже умеет отвечать на ширину экрана.
Рабочий вопрос
Как страница дышит и меняет тело?
Сетка часто входит в курс под видом прозрачной разметки, которая заранее знает правильное место каждого объекта. На живой странице всё менее благопристойно: длинное слово ломает колонку, изображение требует другого масштаба, подпись цепляется за край, телефон складывает горизонтальную сцену в последовательность. Сетка работает, когда удерживает отношения и допускает преобразование; жестяная клетка просто сохраняет вчерашнюю композицию ценой сегодняшнего содержания.Сегодня вы оставите четыре следа:⚫️ сетку, выросшую из типографического образца;
⚫️ две композиции одного реального фрагмента;
⚫️ мобильное преобразование выбранной версии;
⚫️ рабочую сборку 30–40% публикации с одной содержательной дверью наружу.
Сетка начинается со строки
Возьмите основной текст из образца 1.4. Его кегль, длина строки и интерлиньяж уже задают минимальную пространственную меру. Добавьте реальное изображение с его пропорцией, подпись, заголовок, источник и ссылку. Теперь сетка отвечает на конкретные тела; абстрактный desktop шириной 1440 пикселей перестаёт диктовать меру.
Порядок сборки
- Зафиксируйте удобную ширину основного текста.
2. Определите минимальные поля на малом экране и желаемую дистанцию на большом.
3. Найдите ширину изображения, при которой оно выполняет свою работу: показывает деталь, среду или сравнение.
4. Свяжите подпись с изображением и отделите от следующего блока.
5. Добавьте колонку либо свободную область только тогда, когда материалу требуется отдельная дистанция.
6. Проверьте крайние случаи: длинный заголовок, вертикальная фотография, короткая подпись, широкая таблица.Универсальный макет из двенадцати колонок сам по себе ничего не решает; он предоставляет деления. Cargo строит наборы Columns на 12 единицах, позволяет менять их ширину и gutter, а в мобильном режиме по умолчанию складывает колонки вертикально (Cargo: Columns). Это удобная механика, пока вы помните, что порядок складывания участвует в смысле.
Типы сетки как способы отношения
Колонная сетка удерживает чтение и сопоставление; модульная помогает повторяемым карточкам, архивам и каталогам; свободная композиция допускает локальные оси, наложения и резкие смены масштаба. Один проект способен использовать несколько режимов, если переход между ними мотивирован раскадровкой.
Спросите о каждой зоне:⚫️ ей требуется последовательность или сравнение;
⚫️ объект должен подчиниться общему ритму или нарушить его;
⚫️ подпись принадлежит изображению, группе либо всему разделу;
⚫️ повтор создаёт узнавание или монотонность;
⚫️ свободное положение сообщает смысл или маскирует отсутствие связи.Переход к новой сетке имеет цену: читателю нужно заново понять правила. Меняйте режим там, где меняется логика материала.
Вертикальный ритм
Вертикальный ритм организует расстояния во времени скролла. Он связывает строки, абзацы, заголовки, изображения, подписи и пустые участки. Механический модуль в 8 пикселей может помочь разработке, но не обязан становиться метрономом всех смысловых пауз.
Базовые отношения
Соберите шкалу интервалов из небольшого набора значений, связанных с интерлиньяжем основного текста. Например, если строка имеет высоту 1.55rem, интервалы могут расти от половины строки к одной, двум и нескольким строкам. Числа служат системой согласования; оптическая правка остаётся допустимой, когда вы можете назвать причину.: root {
--space-1: .75rem;
--space-2: 1.5rem;
--space-3: 3rem;
--space-4: 6rem;
}Проверьте пары:
Пустота выполняет работу
Пустое место может дать переработать сложный фрагмент, отделить чужой голос, увеличить масштаб одиночной улики, обозначить утрату или вернуть ориентацию. Его функция проверяется удалением: если при сокращении пустоты ничего не изменилось, перед нами случайный остаток макета; если разрушилось отношение, пауза была частью композиции.
Не превращайте воздух в привилегию большого монитора. На телефоне тот же интервал может занять несколько viewport и потерять меру. Сохраняйте функцию паузы, меняя её физический размер.
Текст и изображение
Изображение входит в страницу с собственным масштабом, деталями, происхождением и временем рассматривания. Отношение с текстом может быть доказательным, контрапунктным, поясняющим, последовательным, архивным или атмосферным. Слово «иллюстрация» часто скрывает различия этих функций.
Для каждого изображения закончите фразу:
