How to use and manage relative font values as easy as we use px

Question

what are cons to use relative values em and % for fonts, What is rounding problem? and how to avoid/solve rounding problem. Is there any calculator?

How to use relative values as easy as we use px

Answer 1

I don't believe there are (m)any cons. Using px limits your ability to scale text in IE6 but otherwise using % or em should allow you to scale nicely.

The only con I can think of is that if you want your text to be exactly 12pt, or 13px then using % or em isn't what you want. However If you are trying to create a fixed width design where everything is measured out to the pixel I would advise against it. The Web is a free-flowing canvas... each user has a different sized window, personal font/zoom size choice and Operating System differences. Your content should look good on any screen by adapting to the real-estate you are provided with.

Answer 2

There are not a lot of cons using em or %. Sometimes i had trouble to make fonts look exactly the same size in IE and the normal browsers. But most of the time i have to do a IE CSS anyway so its not really a problem.

When you define fonts in PX, the fonts are not antialiased on some computers running windows. If you use EM or % they are and you have a very precise control of the font size. (1.249em for example).

Unlike @scunliffe i would always use EM as font-size. Even when you have fixed design withs. Sometimes its not possible to do a pixelperfect design with PX fonts, because fonts rendered by Photoshop looks different then in the browser.

I have made a test tool to show the differences: http://bluesys.ch/csstest/

and here you can find a tool to convert your PX values in to EM: http://pxtoem.com/

Answer 3

Here's a nice little trick for you.

In the your CSS, set the font-size on the BODY of the document to 62.5%.

Now, whenever you want to set a font-size, you use EM values. 1.1em would be equivelant to 11px and 1.2em to 12px and so on.

That's how I work anyhow.

Good luck. Michael.

Answer 4

em vs px is like a holy war. Everyone has their own ideas on what's best. Using px is perfectly fine, the only real problem is that text will not resize in IE6.

One other issue is how much you will change your mind about the general font size. If you do everything in absolute values (px, pt), then decide the font size across the site is too small, then you might have to change a lot of values to make everything bigger. Conversely, if you do everything in relative values (em, %) then you want to change the size of one thing only, it will affect all its child elements.

In the end, the best choice is to simply be consistent.

Answer 5

I may be preaching to the choir here, but I find the Firefox "Web Developer" addon is a real help when I'm dealing with font sizing.

https://addons.mozilla.org/en-US/firefox/addon/60/

Use 'Information' > 'Display element information' to view the exact pixel size for your (relatively sized) element. Tweaking the CSS (to within 1 decimal point) until the amount returned is a round number minimises the chances of your text being different sizes in different browsers / operating systems.

Oh, and from my current project:

Standard (appearing as 12px) font set on site wrapper is 75% (body is 100%) , then use:

• 14px: 116.7%
• 16px: 133.3%
• 18px: 150%
• 18px: 166.7%

There are loads of reasons to not use fixed text sizes (accessibility being the big one), and once you've spent a while getting your CSS sorted you'll never look back.