I'm updating a website that has a lot of sections with the CSS property font-size:larger.
I'd like to replace this so that it is using EMs instead, because it is more explicit what the size will be.
My question is, if font-size:larger is applied to a 1em font, how many EMs is the new font? Something like 1.2em?
According to the SitePoint Reference, your guess is exactly right. Most browsers will increase the font size by a factor of 1.2em, but there is no standard that they do so.
The W3C recommendation is that you use em or % for sizing, because sizing of elements on the page will be in relation to each other, and not rely on an arbitrary convention that may not be used in some less-common browsers.
font-size:larger will cause the font-size of the selected element to be larger then the one from its parent container. The standard font-size of CSS is medium. The actual px or em value depends on the client/browser. Normally it's 1em and a common conversion is 1em = 16px.
As mentioned in 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 this, 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.
I hope this answers your question.