Типографика русского текста и кода

Сетка задаёт место для статьи, но характер чтения определяется набором текста. Два шрифта одинакового номинального размера могут заметно различаться по высоте строчных букв, ширине слова и плотности абзаца. Поэтому настройка типографики — это согласование нескольких ролей, а не выбор одного красивого названия семейства.

Продолжим reading-lab после третьего урока. Вы зададите отдельные параметры для русского объяснения, заголовков и кода, сохранив общее семейство интерфейса. Подключать новые файлы шрифтов сейчас не требуется: работающий исходный пример использует системные семейства. Их загрузку и смену метрик рассмотрим в углублённой части.

Проверяем набор на содержательном абзаце

Для учебного сайта важны обычные русские предложения с цифрами, английскими терминами и именами файлов. Одно рекламное слово не показывает, как семейство ведёт себя на длинной странице. Возьмите вводный абзац из стенда и предложение про /my/LINQ/linq_xml/level7/7_1.php. В них есть кириллица, латиница, знаки пунктуации и техническая последовательность.

Вообразите три изменения: увеличение основного кегля, расширение колонки и уменьшение межстрочного расстояния. Каждое влияет на плотность, но по-разному. Крупный текст при прежней ширине создаёт больше коротких строк. Широкая колонка удлиняет путь возврата к следующей строке. Малый интерлиньяж сближает строки независимо от их числа. Чтобы обсуждать результат, меняйте эти параметры по очереди.

Не выравнивайте объяснение по ширине автоматически. На узкой колонке русские слова разной длины могут создавать заметные промежутки. Для нашего стенда оставим ровный левый край и естественный правый. Это проектный выбор для экранного урока; он не означает, что выравнивание по ширине запрещено в любом издании.

Код выполняет другую роль: читатель различает кавычки, скобки, отступы и похожие символы. Моноширинное семейство помогает увидеть структуру строк, но не заменяет достаточно крупный размер. Если уменьшить листинг только ради исчезновения прокрутки, синтаксис станет хуже различим. Длинная строка должна получать подходящее поведение, а не наказание в виде мелкого набора.

Отдельный пробный абзац можно построить из предложений разной длины: короткого пояснения, длинного технического условия и строки с именем файла. На таком наборе видны крайние ситуации, которые незаметны в аккуратно подобранном образце. Не вставляйте для проверки бессмысленный набор букв: он не воспроизводит распределение слов и знаков настоящего урока. После настройки возвращайтесь к исходному учебному материалу, потому что конечное решение должно работать для него.

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

Размеры и наследование

Добавьте следующий полный файл lesson-04.css после дополнения третьего урока:

.reading-lab { font-family: Arial, sans-serif; font-size: 1rem; line-height: 1.65; }
.reading-lab .lab-prose { font-size: 1.0625rem; line-height: 1.7; }
.reading-lab .lab-prose h2 { font-size: 1.5rem; line-height: 1.3; }
.reading-lab .lab-prose h3 { font-size: 1.125rem; line-height: 1.4; }
.reading-lab .lab-code pre { font-size: .9375rem; line-height: 1.6; }
.reading-lab .lab-code code { font-family: ui-monospace, Consolas, "Liberation Mono", monospace; }
.reading-lab .lab-prose :not(pre) > code { font-size: .95em; }

Ожидается немного более свободный обычный абзац и более компактный листинг, который по-прежнему можно читать. Основной текст использует rem: размер связан с корневым размером документа, а не с цепочкой вложенных элементов. Значение .95em у встроенного кода, напротив, относится к ближайшему размеру текста, поэтому короткое имя файла остаётся частью предложения.

line-height задан без единицы. При наследовании такое значение сохраняет множитель и применяется к собственному размеру дочернего текста. Это помогает избежать неожиданной тесноты, если размер заголовка отличается от абзаца. Механизм описан в MDN о line-height. Наши конкретные числа являются исходными настройками макета, а не универсальной формулой удобства.

Не задаём высоту абзацу или контейнеру заголовка. Число строк меняется при другом масштабе, ширине окна и семействах. Если вокруг текста заранее вырезано жёсткое пространство, он может выйти за рамку или столкнуться со следующим блоком. Типографика учебного сайта должна оставлять содержимому возможность занимать необходимую высоту.

Кириллица и резервное семейство

В действующей оболочке ProfessorWeb есть локальный Open Sans, но в независимом стенде он пока не подключён. Это позволяет не зависеть от несуществующего файла и изучить само разделение ролей. Позднее вы сможете добавить собственный лицензированный ресурс. До этого не нужно писать в отчёте, что макет уже показывает определённую версию веб-шрифта.

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

Уверенное заглавное начертание не означает, что вся статья должна быть жирной. Насыщенность отделяет смысловые роли: главный заголовок, внутренний ориентир, короткое выделение в предложении. Если каждая строка получает font-weight: 700, исчезает различие между основным объяснением и акцентом. Длинный текст становится плотным даже при хорошем межстрочном расстоянии.

Также не стоит делать английские термины постоянно курсивными только из-за их языка. Название свойства CSS, переменная и название продукта имеют разное назначение. Встроенный код обозначает техническую запись, а обычный текст остаётся объяснением. Такие правила должны помогать редактору выбирать оформление, а не требовать ручной стилизации каждого иностранного слова.

Название и длинные технические последовательности

Название в нашем стенде уже крупнее других элементов. Для изменения его размера в зависимости от доступного окна можно использовать ограниченную функцию clamp. Допишите в тот же файл:

.reading-lab .lab-heading h1 { font-size: clamp(1.875rem, 1.35rem + 1.8vw, 2.75rem); }
.reading-lab .lab-prose p, .reading-lab .lab-prose li { overflow-wrap: anywhere; }

clamp ограничивает предпочитаемое значение минимумом и максимумом; сочетание относительного размера и ширины окна не позволяет названию бесконечно расти. Функция описана в MDN. Даже с такими ограничениями нужно смотреть длинное название при увеличенном тексте: формула не гарантирует подходящий результат для любого содержимого.

overflow-wrap: anywhere позволяет разрывать длинную последовательность, когда иначе она не помещается. Оно полезно для URL внутри объяснения, но не добавлено к pre: строки листинга сохраняют заданное устройство. Различие поведения приведено в MDN. Не используйте один режим для всех видов текста ради общего исчезновения переполнения.

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