Раскадровка распределила функции и длительность; теперь текст получает тело и голос. На занятии вы построите систему типографических ролей, выберете гарнитуру по реальному материалу, настроите длину строки, кегль, интерлиньяж и абзацный ритм, а затем испытаете один фрагмент в нескольких режимах прямо в браузере и на двух размерах экрана. Итогом станет типографический образец и спецификация ролей — маленький работающий организм, из которого можно выращивать страницу.
Рабочий вопрос
Как текст получает тело и голос?
На экране текст существует как материальное событие: светится, занимает ширину, переносится, сгущается, исчезает за краем viewport, конкурирует с изображением, меняется вместе с устройством. Выбор гарнитуры входит в эту систему, но один шрифт её не спасает. Даже прекрасная буква утонет в строке длиной с железнодорожный состав; скромная гарнитура способна говорить точно, если роли, интервалы и масштаб собраны по смыслу.Сегодня вы оставите четыре следа:⚫️ типографическую карту ролей;
⚫️ пробы реального фрагмента в нескольких режимах;
⚫️ выбранный вариант для большого и малого экрана;
⚫️ короткую спецификацию, по которой систему сможет воспроизвести другой человек.
Типографика выполняет две работы
Первая работа — обеспечить доступ к содержанию: различимый текст, устойчивый ритм строки, понятная иерархия, предсказуемые ссылки и подписи. Вторая — поставить голос: задать дистанцию, температуру, скорость, исторический или технологический привкус. Эти слои невозможно полностью развести, однако полезно проверять их отдельно.
Проверка основания
До разговора о характере шрифта откройте реальный абзац и спросите:⚫️ различается ли текст при обычной яркости и на неидеальном экране;
⚫️ помещается ли строка в поле зрения без постоянного поиска её начала;
⚫️ узнаются ли заголовок, основной текст, подпись, ссылка и источник;
⚫️ выдерживает ли набор кириллицу, цифры, кавычки, тире, курсив и длинные слова;
⚫️ сохраняется ли порядок при увеличении масштаба браузера;
⚫️ остаётся ли смысл без декоративных эффектов.Если основание рассыпается, выразительная деталь только делает аварию заметнее.
Типографические роли
Роль описывает функцию текста в публикации. Один и тот же шрифт может обслуживать несколько ролей через размер, насыщенность, ширину, регистр, интервал и положение; разные гарнитуры тоже могут образовать одну систему, если их отношения устойчивы.
Минимальный набор ролей для лонгрида:
Соберите карту только из ролей, которые действительно есть в вашей раскадровке. Выдуманная роль затем требует контента и начинает выращивать декоративную бюрократию.
Иерархия как различимое отношение
Иерархия возникает из разницы параметров. Большой скачок кегля — один способ; можно работать насыщенностью, шириной колонки, положением, контрастом, интервалом до и после, стилем начертания. Чем больше параметров меняются одновременно, тем громче переход и тем быстрее система расходует собственную выразительность.
Практическое правило: сначала добейтесь различимости одним параметром, затем добавляйте второй, если он несёт отдельную работу. Заголовок может отличаться размером; подписи хватит масштаба и положения. Одновременные капитель, цвет, рамка, фон и курсив обычно сообщают, что автор не доверяет уже принятому решению.
Выбор гарнитуры начинается с материала
Список любимых шрифтов полезен как личная память, но проект задаёт более неудобные требования. Возьмите реальный фрагмент: длинный русский абзац, название, цитату с кавычками, цифры, подпись, ссылку, фамилию с диакритикой, если она встречается. Наберите его кандидатами и смотрите, что происходит в рабочем размере.
Технический допуск
Проверьте:⚫️ нужные начертания и кириллицу;
⚫️ кавычки «ёлочки», „лапки“, тире, многоточие, знак номера, валюту и математические знаки проекта;
⚫️ различимость цифр и знаков в метаданных;
⚫️ курсив и полужирное как настоящие начертания, если они нужны;
⚫️ качество рендеринга в нескольких браузерах и на телефоне;
⚫️ лицензию на веб-использование;
⚫️ формат и вес файлов.Cargo позволяет загружать или подключать собственные шрифты; в документации платформы WOFF и WOFF2 названы достаточно широко поддерживаемыми форматами для современных браузеров (Cargo: Adding Fonts). Возможность загрузить файл ещё не даёт права размещать его публично — проверьте лицензию гарнитуры и условия конкретного сервиса.
Характер без гадания по засечкам
Опишите шрифт через наблюдаемые признаки: пропорции, контраст штрихов, ширину, апертуры, форму окончаний, ритм строчных, рисунок курсива, характер цифр. Слово «современный» пригодно для разговора примерно так же, как слово «красивый»: сообщает настроение говорящего и скрывает предмет.
Анатомический стол: что именно вы видите
