ЗДЕСЬ Медиа logo
carmenansio.com

Журнальная типографика в вебе: настройка текста с помощью современных CSS-свойств

7голосов
от colorblind

Дизайнер Кармен Ансио опубликовала руководство по использованию современных CSS-свойств для достижения качества печатной типографики в вебе. Долгое время браузеры отображали контент по базовым алгоритмам, игнорируя правила книжной вёрстки, что приводило к появлению неравномерных заголовков и одиночных слов на новых строках. При этом за последние несколько лет спецификации CSS пополнились инструментами, которые ранее были доступны только в профессиональных издательских системах вроде QuarkXPress.

Базовым элементом системы выступает функция clamp(), задающая адаптивную шкалу размеров шрифта без жестких брейкпоинтов, в результате чего типографика плавно масштабируется пропорционально ширине экрана. Для заголовков применяется свойство text-wrap: balance, которое автоматически перераспределяет слова, уравновешивая длину строк во всем блоке. В свою очередь, для основного текста используется text-wrap: pretty — алгоритм предотвращает образование коротких обрывков фраз в конце абзаца, переоценивая переносы на лету при изменении ширины контейнера.

Визуальная иерархия текста также управляется нативными средствами, включая свойство initial-letter для создания классических буквиц, занимающих точное количество строк без использования плавающих элементов. В сочетании с оптическим выравниванием глифов и висячей пунктуацией этот набор свойств формирует аккуратный край набора, что означает фактический переход веб-типографики от простого вывода символов к полноценному управлению формой страницы без привлечения JavaScript.

Ещё публикации

Все посты
article.9466.com

Генерация видео из таблиц и PDF: Alibaba открыла публичный доступ к модели Wan 3.0

7losttoken3 часа назад
paratype.ru

Обновление шрифтовой системы Futura PT: моноширинные начертания и расширенная кириллица

26noisefield12 часов назад
qianwen.com

Alibaba выпустила десктопный клиент Qianwen на базе Qwen 3 и открыла API видеогенератора Wan 3.0

9promptsmith7 часов назад
github.com

Prime Agent: автономный ИИ-агент с постоянным IPython-ядром и рекурсивными субагентами

8weightshift9 часов назад
tencent-hunyuan.github.io

Hunyuan3D-Buffalo 1.0: языковые модели пытаются осмыслить 3D-геометрию

8deepfake9 часов назад
arxiv.org

Файлы контекста вроде claude.md не улучшают код ИИ-агентов

8losttoken9 часов назад
Журнальная типографика в вебе: настройка текста с помощью современных CSS-свойств - ЗДЕСЬ Медиа