Quick CSS Tip: Sizing Text
I’m surprised how many designers still struggle with sizing text on web sites. Using pixels is not a good solution because IE cannot resize text set in pixels. Users should be able to resize text, so here’s a simple solution:
- Set
body { font-size: 62.5%; } - Set something like
p { font-size: 1.2em; }, where 1em is 10px, 1.1em is 11px and so on.
Read more about it on Clagnut: How to size text using ems.
I’ve been having some difficulties with the text on my site, this will be really helpful, thanks!
beth on November 21, 2005
I’m a px junkie. I use px for every measurement. When opportunities for ems arrive, I just can’t get myself to use ‘em. Is there a rehab or 8 step program for people like me? :)
Jason Beaird on November 22, 2005
Changing from px to em is really a piece of cake and you’ll do it in just a few minutes, Jason. IE users will then be able to decrease/increase text as well as those using a proper browser :). I’m guessing a lot of your readers use IE, so defining ems for text isn’t insignificant.
Perhaps I’ll write in the near future about using ems, going liquid and stuff like that. I just might call it “An 8 Step Program for Pixel Addicts” :)
Bojan on November 22, 2005
Hi Bojan, very nice blog. :)
There’s a tiny problem with setting body text in percentage - users who have their text size increased by default to bigger values will get smaller text then they expect (eg. if they prefer medium size of 16px, it’ll render as a 10px text).
One technique I use is - set your body text in px (eg 12px) and then you have to define child elements such as content or columns DIV in textual values (eg x-small, small, medium,..)
See http://www.w3schools.com/css/css_font.asp for reference.
Tell me what do you think about it?
Mile Jerkovic on August 22, 2006
Thnx Mile :)
There are problems with every single method, AFAIK. I use ems because it is quite consistent, while the method you use perhaps isn’t. I haven’t tested it myself, but have read a lot on this subject and decided to go with ems because it seemed the best choice.
Have you got any articles explaining the method you use, in detail?
Bojan on August 22, 2006
I have only this material for reference (besides W3C.org):
http://css-discuss.incutio.com/?page=FontSize
http://www.alistapart.com/articles/relafont
A bit older articles, but they cover most of what can be done to improve text size display in all browsers. I agree that relative sizes (em, %) are better, but I’m also looking for a better solution without being forced to swich styles with JS.
Mile Jerkovic on August 22, 2006
I don’t think there is a better solution right now. Until IE supports resizing text set in pixels.
Bojan on August 22, 2006
Yes, well, damn IE :)
Mile Jerkovic on August 22, 2006