Эм
Обозначение: emВесь мир
Что такое Эм (em)?
Формальное определение
Эм (em) — относительная единица измерения в типографике, равная текущему размеру шрифта. Если размер шрифта 16 пикселей, то 1 em = 16 пикселей. Если 12 пунктов — 1 em = 12 пунктов. Эм уникален тем, что не имеет фиксированного размера — масштабируется пропорционально тексту.
В CSS эм наследуется от вычисленного font-size элемента (или родителя, для свойства font-size). Значения em каскадируются: если родитель имеет font-size: 1.2em, а потомок тоже 1.2em, размер потомка = 1,2 × 1,2 = 1,44× от прародителя.
Историческое и CSS-определение
Исторически (в металлическом наборе) эм определялся как ширина заглавной M — отсюда название. В CSS эм определяется исключительно размером шрифта, не шириной какого-либо символа. В большинстве шрифтов M уже, чем один эм.
Этимология
Буква M
Термин «эм» (em) происходит от заглавной буквы M. В раннем книгопечатании M была приблизительно квадратной: ширина ≈ высота кегля. Квадрат кегля стал называться «эм» (em quad). Термин «эн» (en = половина эма) — от буквы N, которая ≈ половина ширины M.
От металла к цифре
В металлическом наборе эм имел конкретный физический смысл: квадрат размера кегля в пунктах. Типографы использовали эм-шпации (квадраты кегля) для отступов. В цифровой типографике эм абстрагирован от физики, но сохранил пропорциональное значение.
История
Металлический набор
Эм появился в эпоху наборного шрифта (от Гутенберга, ~1440). Наборщики использовали эм-шпации и эн-шпации для пробелов и отступов. Тире em-dash и en-dash были нарезаны на соответствующую ширину.
Фотонабор
Фотонабор (1960-1970-е) сохранил эм как единицу, равную кеглю, и измерял ширину знаков в долях эма.
CSS и веб
CSS 1.0 (1996) определил em как единицу, относительную к font-size элемента. Позже CSS 3 ввёл rem (root em), всегда ссылающийся на корневой элемент.
Современное применение
В CSS и веб-дизайне
Em — одна из важнейших единиц CSS. Используется для font-size, margin, padding, line-height. Обеспечивает пропорциональные отношения, сохраняющие гармонию при масштабировании.
В адаптивном дизайне
Медиа-запросы в em создают брейкпоинты, зависящие от пользовательских настроек размера текста. Bootstrap и Material Design используют em/rem.
В традиционной типографике
Эм-пробел (шириной в эм) — самый широкий стандартный пробел. Эм-тире (—) ≈ ширина эма. Абзацный отступ — традиционно один эм. Шрифтовые метрики определяются в единицах на эм (TrueType: 2048 UPM, CFF: 1000 UPM).
Применение в быту
Размер текста в браузерах
По умолчанию 1 em = 16 px. При изменении пользователем размера шрифта em-дизайны масштабируются. font-size: 1.125em = 18 px — слегка увеличенный основной текст.
Дизайн email-рассылок
Em используется для размеров и отступов в email — обеспечивает относительную надёжность в разных почтовых клиентах.
Шрифтовые редакторы
Glyphs, FontForge, RoboFont — метрики глифов (ширины, высоты выносных элементов) определяются в единицах на эм.
В науке и промышленности
В компьютерной лингвистике
Анализ плотности текста и форматирования — расстояния в эмах, не зависящих от абсолютного размера.
В HCI
Исследования интерфейсов — размеры касательных зон, минимальные размеры текста — иногда в эмах для разрешение-независимых рекомендаций.
В шрифтовом инженерстве
UPM (units per em) — фундаментальная единица. OpenType и TrueType: каждая контрольная точка, ширина знака, кернинг — в долях эма.
Интересные факты
Несмотря на название, em не определяется шириной M в современной типографике. В большинстве шрифтов M уже одного эма.
Rem (root em) введён в CSS 3 для решения проблемы каскадирования. 1 rem всегда = font-size корневого html-элемента.
В Unicode есть символ эм-пробела: U+2003 (EM SPACE), а также эн-пробел (U+2002), тонкий пробел (U+2009) и волосяной пробел (U+200A).
Стандартный размер шрифта браузера 16 px выбран ранними разработчиками как комфортный для экранного чтения. 1 em = 16 px — одно из самых распространённых соотношений в вебе.
Шрифтовые дизайнеры работают в координатной системе 1000 или 2048 единиц на эм, обеспечивая точность 1/1000 или 1/2048 эма.
В CSS em для font-size ссылается на родительский font-size. Для всех остальных свойств — на собственный font-size элемента. Частый источник путаницы.
В металлическом наборе эм-шпацию называли «кегельная» (по размеру кегля), а эн-шпацию — «полукегельная».