What makes font size: more to do for 1em font?

Question

I am updating a site with a lot of sections with a CSS property font-size:larger.

I would like to replace this so that I use EM instead, because it is more clear what size will be.

If 1em is used for the font font-size:larger, how much EM is the new font? Something like 1.2em?

Answer 1

As stated in the W3C CSS2 Fonts document:

<relative-size>
A <relative-size> keyword is interpreted relative to the table of font sizes
and the font size of the parent element. Possible values are: [ larger | smaller ].
For example, if the parent element has a font size of 'medium', a value of 'larger'
will make the font size of the current element be 'large'. If the parent element's
size is not close to a table entry, the UA is free to interpolate between table
entries or round off to the closest one. The UA may have to extrapolate table values
if the numerical value goes beyond the keywords.

And below that, he says:

Note 2. In CSS1, the suggested scaling factor between adjacent indexes was 1.5, which
user experience proved to be too large. In CSS2, the suggested scaling factor for a
computer screen between adjacent indexes was 1.2, which still created issues for the
small sizes. Implementation experience has demonstrated that a fixed ratio between
adjacent absolute-size keywords is problematic, and this specification does not
recommend such a fixed ratio.

Hope this answers your question.

Answer 2

SitePoint Reference . 1.2em, , .

W3C , em % , , .

Answer 3

font-size:largerwill cause the font size of the selected item to be larger than the size of one of its parent container. The standard CSS font size is medium. Actual value pxor emclient / browser dependent. Usually this is 1em and the general conversion is 1em = 16px.