Dealing with font sizes is a part of designing that can’t be overlooked. There has always been the holy war between using pixels or ems. When I started I used pixels as it allowed the greatest precision over my sizes.
I then learned through university that some browsers did not allow pixels to be resized. This is a great accessibility problem for those with eye sight problems. Then we come to today where most browsers allow resizing of text regardless of what unit of measurement is used. So where does that leave us today? I still use ems, but that is not to say it is the standard as many graphic designers prefer pixels.
If you are one that gets confused with what exactly an “em” means, and that is what is stopping you; I have a solution that will help you. By default 1em = 16px. This makes it difficult to translate some measurements to pixels. For example, 11px = 0.688em.
To make things much easier on yourself, use the following to make 1em = 10px.
body { font-size: 62.5%; }
Now you can more easily convert 11px to ems
p { font-size: 1.1em; }
All you have to do is shift the decimal one place to the left for you math nerds 
If this is still a little too complex for you; you can always find a cheat sheet that will help you out. This one I have found allows you to convert pixels to em and vice versa. http://pxtoem.com/
If you have not already subscribed to my feed, please do so - Brenelz’s Web Development Tips
Brenelz Web Solutions
6 Comments
Good idea! I’ve been using this Em calculator: http://riddle.pl/emcalc/
But your way seems like a lot less pain.
1em != 16px.
1em = whatever font size is specified by the user’s browser so that if a user has his browser font size set to 12px then 1em =12px where as font-size 100%=12px=1em.
@ydx
someone confirms if he is saying right ?no offense to ydx
@
No offense taken pcraft. Just test it.
Go to http://riddle.pl/emcalc/.
* Choose the Settings option
* Change the Default font size to any value you wish. Let’s say 30.
* Enter value 30 in the body box below the Default font settings and you’ll find that it also equals 1em. This is true for any px value you enter.
Using 16px=1em is inaccurate as a determinate basis for changing px to em. (x)px=1em for any default browser font setting value, (x) .
Same goes for using percents. Font sizes set at 100% will render the brower’s default font size the same as 1em so that (x)px=1em=100% for any value (x).
Hmm. Default (100%) font-size is 20 pixels on my laptop, due to factory OS setting of 120 DPI (Win xp pro).
Also be aware of the different ways in which browsers adjust text size when you make the base size smaller than 100% - http://www.gunlaug.no/contents/wd_1_03_04.html
This is a great trick I’ve been using for awhile. Richard Rutter published this on Clagnut http://clagnut.com/blog/348/ but it’s still neat.
3 Trackbacks
[...] Hace unos minutos que comente sobre este tema en cuanto a la conversión de unidades absolutas en relativas, de nuevo insisto en el tema por que he encontrado el artículo Dealing with CSS Font-Sizes. [...]
[...] good article on how to deal with font-sizing with CSS> Dealing with CSS Font-Sizes [...]
[...] Technique for creating hand-drawn designs. Dealing with CSS font sizes. [...]