Em-квадрат в цифровом шрифте: зачем глифу координатная сетка

Em-квадрат в цифровом шрифте — это условная координатная площадка, относительно которой масштабируются контуры букв и часть их метрик. Его размер в единицах шрифта задаёт не физическую высоту буквы на экране, а точность описания её формы. Разберём, что цифровая сетка унаследовала от типографского em, почему контур может выходить за её границы и как проверить масштаб при создании и экспорте шрифта.

В наборной типографике em был связан с кеглем и корпусом металлической литеры. Томас Де Винн в руководстве «The Practice of Typography» описывал em как квадратный корпус данного размера и использовал em-квадрат для измерения набора и ширины шрифтовой полосы. Физическая литерная площадка задавала границу предмета: печатный рельеф располагался на верхней стороне, а остальная часть корпуса обеспечивала его положение в строке.

При переносе букв в цифровую среду смысл изменился. У глифа больше нет металлического тела фиксированной высоты: контур задаётся координатами, а движок масштабирует его под размер текста. Термин em square сохранился как образ воображаемого квадрата и относительной меры. Это не фотографическая копия старого корпуса и не обещание, что каждая буква заполнит квадрат.

В формате OpenType значение unitsPerEm хранится в таблице head. Спецификация Microsoft разрешает значения от 16 до 16384; для шрифтов с контурами TrueType рекомендует степень двойки как вариант, способный ускорить некоторые операции растеризации. Это не рейтинг качества: число показывает, на сколько внутренних частей делится em-квадрат, то есть какова координатная сетка для контрольных точек контура и некоторых привязок.

Например, в шрифте с 1000 единицами на em точка с координатой x=500 находится на половине условной ширины сетки. В шрифте с 2000 единицами координата x=1000 означает ту же долю. Если оба шрифта заданы в одном размере, движок нормирует координаты по unitsPerEm, поэтому само по себе большее число не делает буквы крупнее.

Для понимания масштаба достаточно мысленной формулы: координата глифа делится на unitsPerEm и умножается на размер em в целевых единицах. Если em-шрифт задан размером 16 пикселей, а UPM равен 1000, точка x=500 масштабируется примерно в 8 пикселей от начала координат. При UPM 2000 точка x=1000 даст то же положение. Реальные рендереры дополнительно учитывают метрики, hinting, округление и устройство вывода.

Вертикальная координата y=0 в распространённой практике горизонтального латинского набора совпадает с базовой линией, но это соглашение, а не универсальная граница квадрата. Выше неё размещаются строчные и прописные формы, ниже — выносные элементы. В кириллическом шрифте с «у», «р» и «ф» проектировщик тоже оценивает не только высоту корпуса, но и общую вертикальную композицию строки.

Распространённая ошибка — пытаться втиснуть весь контур в условный квадрат. В руководстве Apple по TrueType прямо отмечено, что цифровые контуры могут выступать за пределы em square; металлический набор такой свободы не давал. Верхние акценты, диакритические знаки, выносные элементы и отдельные детали прописных могут требовать пространства за условной площадкой. Ограничивать нужно корректность данных формата и метрик, а не воображаемую рамку.

Не следует смешивать em-квадрат с ограничивающим прямоугольником глифа. У конкретного символа есть собственные крайние координаты контура; у шрифта — глобальные пределы, а у строки — вертикальные метрики и межстрочный интервал. Если акцент у «Й» обрезан, причина может быть в глобальных границах или метриках приложения, а не в том, что дизайнер нарисовал букву «слишком высоко» относительно em.

Координатная сетка описывает положение точек, но advance width — ширина продвижения курсора после глифа — хранится и рассчитывается отдельно. Поэтому одинаковый UPM не означает одинаковую ширину букв, а удвоение UPM не обязано удваивать интервалы. Глиф «И» может иметь advance 620 единиц при UPM 1000, а в другой сетке — 1240 при UPM 2000: относительная ширина у них одинакова.

Это различие важно при сравнении файлов и переносе контуров между редакторами. Координату контура можно пересчитать пропорционально, но надо отдельно убедиться, что переносятся advance width, боковые поля, базовая линия, высоты прописных и строчных, а также верхние и нижние пределы. Иначе буква будет выглядеть правильно отдельно, но поменяет ширину слова, строку или вертикальное выравнивание.

Увеличение UPM позволяет точнее кодировать малые различия контуров и метрик. Apple приводит 2048 единиц на em как значение, использовавшееся в системных шрифтах Apple, и объясняет, что более мелкий шаг сетки допускает тоньше описанные формы. Но более высокое разрешение не добавляет автоматически гармонии, оптической компенсации или ровного интервала: это характеристики дизайна, а не числа в заголовке файла.

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

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

После построения контура задайте ширину продвижения и боковые поля. Посмотрите на «еж», «жук», «ужин» и короткую строку, чтобы заметить тесноту вокруг диагоналей. Затем проверьте крайнюю точку верхнего и нижнего элементов: она может выходить за em-квадрат, но должна оставаться внутри приемлемых границ шрифта и не обрезаться в приложении. Экспортируйте файл и сравните его в Fontgenerator и хотя бы в одном независимом просмотрщике.

Если редактор показывает UPM, сначала воспринимайте его как знаменатель координат, а не как оценку качества. Контуры, advance width и расстояния между знаками хранятся числами в одной системе; при переводе в em их доли становятся сопоставимыми. Например, 500 единиц при UPM 1000 и 1024 при UPM 2048 — почти одинаковое положение: 0,5 em. Значения высоты строчной буквы тоже надо сравнивать как отношение к UPM, а не в сыром виде.

При открытии чужого файла не нужно менять UPM только потому, что число кажется непривычным. Сначала убедитесь, что редактор правильно читает формат и сохраняет пропорции после экспорта. Если всё же меняете сетку, сопоставьте до и после: контуры, ширины, боковые поля, якоря диакритики и вертикальные метрики. Затем соберите контрольную строку со строчными, прописными, знаками с акцентами и буквами с выносами. Расхождение в координатах допустимо; визуальное изменение формы, шага или положения относительно базовой линии требует проверки.

Когда проект начинается с изображения шаблона, сначала нормируйте рисунок по опорным размерам: baseline, x-height и cap height. После этого можно масштабировать его в координатную сетку. Такой порядок помогает не спутать разрешение фотографии с точностью шрифта: камера может дать тысячи пикселей, но итоговый контур всё равно определяется выбранной сеткой, контрольными точками и ручной корректировкой.

Они связаны общей относительной мерой, но обозначают разные уровни. Em-квадрат в шрифте задаёт внутреннюю систему координат; единица em в CSS зависит от вычисленного размера шрифта элемента. Браузер масштабирует контуры и метрики шрифта в контекст размера текста.

У них могут отличаться высоты строчных, прописных, акценты и вертикальные метрики. Одинаковый CSS-кегль задаёт масштаб em, а не одинаковую высоту видимого рисунка. Сравнивайте x-height, cap height, выносные элементы и пробную строку.

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

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

Не автоматически. Более плотная сетка позволяет задавать меньший шаг координат, но экранная чёткость зависит от размера, растеризации, hinting и устройства. Плохие контуры и неверные пропорции не исправляются увеличением числа единиц.

Em-квадрат нормирует пространство координат, а ширина продвижения задаёт, насколько переместится курсор после глифа. Ширины букв могут быть меньше, больше или равны размеру em и различаются от знака к знаку.

Цифровой em-квадрат сохраняет типографскую идею относительного масштаба, но превращает её в настраиваемую координатную сетку. Когда вы отделяете UPM от размеров видимой буквы, ширины набора и границ контура, становится проще переносить рисунок, читать метрики и проверять экспорт. Создайте собственный шрифт в Fontgenerator и проверьте его не только по буквам, но и в словах и строках.