HTML: How common is it that different browsers render 1em at a different actual px size?

views:

answers:

HTML: How common is it that different browsers render 1em at a different actual px size?

As you know, you can specify dimensions with CSS in px or em. As far as I understand it, em means "line height of the current element's fonts". My approach currently is to always use px (also for margin which seems to be a controversial practice).

Question: Can I rely on the ratio of px and em to be the same across browsers? If not, then my manually specified margins between paragraphs will likely look odd because they so not match 1em anymore.

I believe that it is better to use em for margins but I have quite a base of existing code that always uses px margins.

Yes. 16px = 1em. Depends on the layout, but it's often a good idea to use em where possible. This allows the layout to scale with the browser window and different screen resolutions.

Michael Mior 2010-09-16 17:37:32

Are you sure? I don't think so.

SLaks 2010-09-16 17:38:31

@Michael 16px is an accepted approximation of 1em only based on a typical desktop being set at 12pt font - there is no direct relation.

Rudu 2010-09-16 17:41:22

So the desktop font size affects the browser font size? Incredible.

usr 2010-09-16 17:42:56

@usr Depends on what you mean by font-size. 12pt is supposed to be the same size everywhere (paper,screen etc). So on a higher resolution monitor more pixels are used to render the same size. An em based on this 12pt baseline consequentially also has to have more pixels in it. In the old days we guestimated a monitor at 72dpi (likely where the 16px comes from) , but with so many different pixel pitches found in monitors now we can no longer rely on that.

Rudu 2010-09-16 17:49:58

@Rudi that's how it was supposed to be, and that's how it would be if the operating systems adjusted their DPI based on the size of the connected monitor screen. But both Mac and Windows just hardcoded the dpi values (to different values, to make things even more interesting), so you have no way of predicting the actual physical size of your fonts. Still, every system may have different dpi setting (detected from monitor or hardcoded), different default font size (12pt is not a standard, just default setting of some browsers), and different font shapes. Moral: use different units where needed.

Radomir Dopieralski 2010-09-16 18:27:42

What Rudi said. In a 16 pt typeface, 1 em == 16 pt, not 16 px.

Blrfl 2010-09-16 18:29:36

I was a little suspicious of my own answer to be honest. I've just never noticed a difference in practice, so I was feeling fairly confident. Thanks for calling me on it :) However, designs often do need to be make some assumptions about the user's environment. (My favourite reference is http://dowebsitesneedtolookexactlythesameineverybrowser.com/)

Michael Mior 2010-09-16 20:15:01

+2 A:

No, you cannot.

The size of em in pixels is related to the font type & size you're using, the resolution of your screen (depending on OS, browser), and possible further OS and browser settings - eg "Show fonts +10%" may alter the em value.

Rudu 2010-09-16 17:38:16

There's no guaranteed relationship between `pt` and `em` either. `em` (and its friends `ex`, `ch`, etc) depend on the font in use and can be radically different even among fonts on the same machine.

Zack 2010-09-16 17:40:57

@Zack I didn't say there was ;) The `EM` relation is only to the `PT` size of the *default desktop font* (only) not all fonts.

Rudu 2010-09-16 17:42:24

`em` changes depending on the font -- so clearly it cannot have any constant relation to the `pt` size of a single font. Moreover, different operating systems (and user preferences) will have different default fonts with different `em` to `pt` ratios. There is simply no relation.

Radomir Dopieralski 2010-09-16 18:21:07

@Radomir I think the fact I'm discussing font sizes in points is throwing you all off. `em` changes depending on all three of the font type, font size, screen resolution. There is no constant relation, it is just initially calculated from those three values for your system.

Rudu 2010-09-16 18:23:29

I guess em can mean nearly everything according to "The Standard" but I am interested what will happen in practice. Probably like rolling a dice.

usr 2010-09-16 19:29:24

@Rudi Not true at all! Verbatim quote from http://www.w3.org/TR/CSS2/syndata.html#length-units : "The 'em' unit is equal to the computed value of the 'font-size' property **of the element on which it is used**. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element." (Emphasis mine.)

Zack 2010-09-16 19:58:01

+6 A:

No. ems are relative to the user's chosen font size, px aren't. The default font sizes of desktop browsers are about the same in pixels, but mobile devices in particular will vary even before user adjustment.

You should use em for a margin in text content that should be sized similarly to the surrounding fonts, and px for a margin that has to line up with images used by the page layout.

bobince 2010-09-16 18:16:58

ansaurus

tags:

views:

answers:

HTML: How common is it that different browsers render 1em at a different actual px size?

related questions