Font sizes: EMs vs Pixels… in 2011, which one should be used? [closed]

Answer 1

One important drawback to use font size in pixels is that it becomes hard to change all web site text font size proportionally after you have finished development.

If you set the absolute font-size in one place - preferably the body element font size - and use Ems in any other size property, you can change the whole site text sizes by just changing the body element font size.

I assume that most users don't know how to scale just texts using their browser zoom capabilities and still web designers want to set a default proportion between texts, other page components and the general layout.

Answer 2

While every modern browser is able to zoom with text sized using px, they can't all scale text sized using px, it still depends on the browser.

Try 'scaling' text in IE8 using zoom, absolutely fine. Scale using the official text size modifier (page -> text size -> largest), and it doesn't work.

1. IE8 - Zoom, no scale
2. Firefox 4, beta 12 - Zoom, no scale
3. Google Chrome 10 beta - Zoom, no scale

Several official bodies that I work with use the official text size modifier as part of their user/group settings management. When accounts are set up for users, they're often pre-configured using this setting. I don't know if they have to set it there ... but for me, EMs are still preferable because PX doesn't scale everywhere.

Finally, a few words from the W3C.

Units: avoid absolute length units for screen display

• Do not specify the font-size in pt, or other absolute length units for screen stylesheets. They render inconsistently across platforms and can't be resized by the User Agent (e.g browser). Keep the usage of such units for styling on media with fixed and known physical properties (e.g print).
• Use relative length units such as percent or (better) em

ref: http://www.w3.org/QA/Tips/font-size

Answer 3

All modern browsers have full-page zoom, so pixels is better because then you can match the text size with page graphics (which are pixel-based).

Answer 4

I am doing it this way:

• take a reset.css (eric meyers is good http://meyerweb.com/)
• define default styles (like h1..h6, a, etc)
• afterwards using EM if needed

Good experience with cross browser support (also on mobile devices) since I have began web development.

try it :)