Соответствие размеров шрифтов задаваемых в разных единицах

Пиксели это абсолютная величина. Проценты - относительная.

Если относительная - значит, относительно чего-то. % и em считают относительно родителя, rem относительно корня (html)

Сервис такой называется калькулятор.

У родителя размер 8px, у нужного элемента должно быть 14px, заданных через проценты. Считаем:

14/8 * 100 = 175%

Спасибо огромное!

У меня были настройки по умолчанию, т.е. 16 px. Я посчитал по формуле и получил 87.5 % ! Шрифты совпали идеально.

Скажите, а я правильно делаю что шрифт текста через % задаю ? На большинстве сайтов задают через px, на википедии - em. В интернете пишут %. Что лучше на самом деле ?

1px = 1 пиксель на экране

100% = 100% от размера родительского шрифта (например 100% от 14px = 14px)

1em = 100% от родительского шрифта. (т-е 100% = 1em = 14px)

1rem = 100% от шрифта корня. например если для html{font-size:16px;} то 1rem = 16px

это если вкратце. не вдаваясь в особые детали

все это справедливо для вот такой конструкции

  <div style="font-size:14px;">
      <span> размер шрифта = родительскому элементу </span><br/>
      <span style="font-size:120%"> размер шрифта задается в % и равен 120%</span><br/>
      <span style="font-size:1.4em"> размер шрифта задается в условных единицах и равен 140%</span><br/>
  </div>

апд.

что лучше - спорный вопрос.

я в последнее время использую rem. плюс его в том, что очень легко менять размер шрифта например при открытии на браузерах с различным задающим.

но у него есть минус. Всякие артефакты, вроде 8 ие, его не поддерживают. поэтому делаю так

.classname{

font-size:12px;

font-size:1.2rem; /* для примера 1 rem = 10 px*/

}

вторую строку старые браузеры опускают, а современные наоборот ее и используют, переназначая первую

Если бы было только одно "правильно" - был бы только один вариант задания размера.

Вопрос в том, когда уместно использовать каждый:

- px — если известен точный размер, и он всегда должен быть таким;

- % или em — когда шрифты меняются. Обычно есть одно базовое значение (обычный текст), и все остальные (заголовки, выделения) пересчитываются от него. Применяется, если надо подстраивать шрифт под размер экрана, например. По своей сути они идентичны, лично мне приятнее em;

- rem — редко используется, хотя вообще интересная штука, менее подвержена "внезапным" проблемам, когда % оказались на лишней промежуточной обертке