Использование ems для изменения размеров шрифта текста на веб-странице

Когда вы создаете веб-страницу, большинство профессионалов рекомендуют измерять шрифты (и фактически все) с относительной мерой, такой как ems, exs, проценты или пиксели. Это потому, что вы действительно не знаете всех возможных способов просмотра вашего контента. И если вы используете абсолютную меру (дюймы, сантиметры, миллиметры, точки или изображения), это может повлиять на отображение или читаемость страницы на разных устройствах. И W3C рекомендует использовать EMS для размеров.

Но насколько большой их?

Согласно W3C:

«равно вычисленному значению свойства ‘font-size’ элемента, для которого оно используется. Исключением является случай, когда ’em’ встречается в значении самого свойства ‘font-size’, и в этом случае оно ссылается к размеру шрифта родительского элемента. «

Другими словами, ems не имеют абсолютного размера. Они принимают значения своего размера в зависимости от того, где они находятся. Для большинства веб-дизайнеров это означает, что они находятся в веб-браузере, поэтому шрифт высотой 1 метр в точности совпадает с размером шрифта по умолчанию для этого браузера.

Но какой рост по умолчанию? Невозможно быть на 100% уверенным, так как клиенты могут изменить размер шрифта по умолчанию в своих браузерах, но, поскольку большинство людей этого не делают, вы можете предположить, что в большинстве браузеров размер шрифта по умолчанию составляет 16 пикселей. Так что большую часть времени 1em = 16px.

Подумайте в пикселях, используйте EMS для измерения

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

  • Заголовок 1 — 20 пикселей
  • Заголовок 2 — 18 пикселей
  • Заголовок 3 — 16 пикселей
  • Основной текст — 14px
  • Подтекст — 12px
  • Сноски — 10px

Вы можете определить их таким образом, используя пиксели для измерения, но тогда любой, кто использует IE 6 и 7, не сможет хорошо изменить размер вашей страницы. Таким образом, вы должны преобразовать размеры в ems, и это всего лишь вопрос математики:

  • Заголовок 1 — 1,25em (16 х 1,25 = 20)
  • Заголовок 2 — 1,125em (16 × 1,125 = 18)
  • Заголовок 3 — 1em (1em = 16px)
  • Основной текст — 0,875em (16 x 0,875 = 14)
  • Подтекст — 0,75em (16 x 0,75 = 12)
  • Сноски — 0,625em (16 x 0,625 = 10)

Не забывайте наследство!

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

Например, у вас может быть такая таблица стилей:

p {font-size: 0.875em; }
.сноска {font-size: 0.625em; }

Это приведет к появлению шрифтов размером 14px и 10px для основного текста и сносок соответственно. Но если вы поместите сноску в абзац, вы можете получить текст размером 8,75 пикселей, а не 10 пикселей. Попробуйте сами, поместите этот CSS и следующий HTML в документ:

Этот шрифт имеет высоту 14px или 0.875 ems.

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

Ссылка на основную публикацию