Странные, но четко определенные размеры шрифтов при использовании ems

Question

Я заметил, что веб-сайты, которые используют ems для шрифтов, обычно имеют странные, но четко определенные цифры, например: в популярном сбросе css - normalize.css я обнаружил, что h3 имеет значение 1.17em, h4 - 1.33em и h5 - 1.67em., почему это? Есть ли калькулятор или что-то, что я должен использовать для расчета каждого размера шрифта?

Я настраивал размер шрифта в ems для заголовков, p, подписей и т. Д., Но без калькулятора или чего-то еще, я просто увеличивал или уменьшал его, пока не почувствовал, что он выглядит хорошо. Другими словами, мой веб-сайт имеет размеры шрифта 0,7em,0,9em, 1em, 1,1em и т. Д., Даже 4em (мне нравится большой h1).

Это плохо? Я игнорировал важный факт при использовании ems для размеров шрифта?

Answer 1

Как Вам известно, em Единицы размеров шрифта позволяют размерам текстовых элементов сохранять свои пропорции относительно других текстовых элементов.

Существует метод для масштабируемого текста, в котором размер шрифта "baseline" устанавливается для элемента HTML или BODY. Я обычно устанавливаю этот "базовый" размер шрифта на 10 пикселей, потому что это хорошее круглое число и делает ems по всему сайту проще подсчитать. Скажем, название - 15px в моем дизайне. Я бы установил этот заголовок на 1,5em (1,5 x 10px = 15px). Вы можете заметить, казалось бы, странные значения из-за таких расчетов.

"Дробные" значения также могут выглядеть необычно. Например, "1.33em" по существу "1 ⅓ em", а "1.67em" по существу "1 ⅔ em". Они достигают размеров шрифта, которые на одну треть и две трети больше, чем базовая линия, соответственно.

Если вы разрабатываете на лету (без дизайна), вы, вероятно, в порядке, просто настраиваясь, пока все не будет выглядеть правильно. Это всегда хорошая идея, чтобы проверить вещи, изменив масштаб вашего браузера и / или размер шрифта по умолчанию, чтобы увидеть, как реагируют ваши страницы.

Answer 2

Showdev хорошо рассказывает, что делают ems, однако отвечает на ваш вопрос о том, почему вы видите, что все так устроено.

Эта статья хорошо объясняет, как добиться согласованного размера текста во всех браузерах. Суть в том, что 14px в IE7 отличается от 14px в Firefox. Эмс дает более последовательный результат. http://alistapart.com/article/howtosizetextincss

Кроме того, просто чтобы дать расширенное объяснение. Ems относятся к размеру шрифта родительского элемента. Так что если у меня есть:

body {
  font-size: 14px;
}
p {
  font-size: 1em;  /* 14px */
}
h2 {
  font-size: 1.5em; /* 21px */
}
#myDiv {
  font-size: 16px;
}
#myDiv h1 {
  font-size: 2em; /* 32px */
}