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!
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? :)
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” :)
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?
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?
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.
I don’t think there is a better solution right now. Until IE supports resizing text set in pixels.
Yes, well, damn IE :)