Our task was to find a way to size text that allows designers to retain accurate control of typography, without sacrificing the user’s ability to adjust his or her reading environment.

Richard Rutter, the author who had previously introduced the 62.5% rule for sizing text using ems, has written an aritcle that outlines a best practice for consisitent text sizing that satisfies designers and user’s and works across browsers and platforms.

Richard obviously put a lot of time and effort into this article taking some 161 screenshots for the task, which was "to size text that allows designers to retain accurate control of typography, without sacrificing the user’s ability to adjust his or her reading environment."

Using ems to size the text and line height and a precentage for the body Richard has shown that this technique is a best practice for sizing text using CSS that satisfies both designers and readers.

The final CSS is below but please read the full article for a complete rundown of this technique.

1. body {
2. font-size:100%;
3. line-height:1.125em;
4. }
5. .bodytext p {
6. font-size:0.875em;
7. }
8. .sidenote {
9. font-size:0.75em;
10. }
11. <\!--[if !IE]>-->
12. body {
13. font-size:16px;
14. }
15. <\!--<[endif]-->

21st Nov 2007 : 16:20:41

Tags: CSS, Browsers, Typography

No comments have been added yet for this article. We've all got an opinion so feel free to share yours below =)