Cross Brower Base Font Size, The Simple Way

17th Apr 2007 - Posted to Web Development, CSS

Every time I start a new project I'm always trying to do things better than I did on the last project, it's the way for all developers.

One thing that has always bugged me is trying to get the base text size the same across all browsers, but now I've totally dropped the idea of supporting IE 5.5 ever again I thought it might be easier now.

After a bit of searching I didn't really come up with any "Eureka!" posts where someone said "This is the way to do it", but eventually I came across a short post which says that using one of the following 60, 69%, 76%, 83%, or 89% as the font-size on the body should work out pretty well cross-browser.

The lack of a comment thread and the slightly strange site I found this on led me to investigate it further. So I made a test file with the following:

Display code as plain text
HTML:
  1. <div style="padding: 10px 0; background-color: #999;">
  2. </div>
  3.  
  4. <div id="testCol">
  5.     <div>Text in a DIV</div>
  6.     <p>Text in a P</p>
  7.     <h1>H1</h1>
  8.     <h2>H2</h2>
  9.     <h3>H3</h3>
  10.     <h4>H4</h4>
  11.     <h5>H5</h5>
  12.     <h6>H6</h6>
  13.     <table>
  14.         <thead>
  15.             <tr><th>TH</th><th>TH</th></tr>
  16.         </thead>
  17.         <tbody>
  18.             <tr><th>TH</th><td>TD</td></tr>
  19.         </tbody>
  20.     </table>
  21. </div>
  22. <div id="sizeCol">
  23.     <p id="p2">2em</p>
  24.     <p id="p2_5">2.5em</p>
  25.     <p id="p3">3em</p>
  26.     <p id="p3_5">3.5em</p>
  27.     <p id="p4">4em</p>
  28.     <p id="p4_5">4.5em</p>
  29.     <p id="p5">5em</p>
  30.     <p id="p5_5">5.5em</p>
  31.     <p id="p6">6em</p>
  32.     <p id="p6_5">6.5em</p>
  33.     <p id="p7">7em</p>
  34.     <p id="p7_5">7.5em</p>
  35. </div>

With the following styles applied:

Display code as plain text
CSS:
  1. /* normalise browser stuff */
  2. HTML * {
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6.  
  7. /* normalise font size */
  8. body {
  9.     font-family: "Trebuchet MS";
  10.     font-size: 83%;
  11.     line-height: 1.35em; /* it seems line-height is bigger on windows by default */
  12. }
  13.  
  14. p { font-size: 1em; }
  15.  
  16. h1 { font-size: 2em; }
  17.  
  18. h2 { font-size: 1.8em; }
  19.  
  20. h3 { font-size: 1.6em; }
  21.  
  22. h4 { font-size: 1.4em; }
  23.  
  24. h5 { font-size: 1.2em; }
  25.  
  26. h6 { font-size: 1em; }
  27.  
  28. #testCol,
  29. #sizeCol {
  30.     float: left;
  31.     margin-left: 20px;
  32.     display: inline; /* fix IE double float margin */
  33. }
  34.  
  35. #testCol { width: 100px; padding-left: 20px; border-left: 1px solid #000; }
  36.  
  37. #sizeCol { width: 700px; }
  38.  
  39. #sizeCol p { float: left; width: 350px; }
  40.  
  41. #p2 { font-size: 2em; }
  42. #p3 { font-size: 3em; }
  43. #p4 { font-size: 4em; }
  44. #p5 { font-size: 5em; }
  45. #p6 { font-size: 6em; }
  46. #p7 { font-size: 7em; }
  47.  
  48. #p2_5 { font-size: 2.5em; }
  49. #p3_5 { font-size: 3.5em; }
  50. #p4_5 { font-size: 4.5em; }
  51. #p5_5 { font-size: 5.5em; }
  52. #p6_5 { font-size: 6.5em; }
  53. #p7_5 { font-size: 7.5em; }

Then proceeded to do a bit of browser testing, and by god it works pretty much perfectly. I tested in IE 6, IE 7, Firefox 2 (PC & Mac), Opera 9 (PC & Mac), Safari 2 and Camino 1 and the results are very consistent.

Note: The important stuff where all the magic lives is those first 2 lines on the body selector the line-height stuff was my addition - I noticed that it appeared to be quite different on the PC compared to the Mac (in my tests anyway).

So I have to thank Carl Uebelhart for the slightly strange post that opened up this lovely simplistic CSS.

Again, if you're interested I have posted a slide show gallery of the results in all the browsers mentioned for reference.

Comments

There have been 3 comments so far, join the discussion.

1. lewis litanzios - 19th Apr 2007 - 2:30 am

easy dave,

i always find using the text sizing feature of browsers (ctrl ++ / ctrl—) very useful. for instance, every time i ‘typo’ up a page during the initial stages of design i play around with the text sizing and nine times out of ten it shows me i’m unhappy with my original styles and enlightens me to the fact the type i’ve chosen is too big/small. it’s tough to see the big picture with type until it’s all there in front of you i find.

i’m pretty sure browsers ‘step down’ a numerator every time ++ or—is used (i may be wrong on this) and the denominators on all browsers are universal, so if you can match a font size to a numerator you’re on the right lines.

hope this makes sense, i did read an article a while back that talked about styling font using ems vs % vs px and what not, but i can’t locate it atm.

playing with type on web pages is fucking fun though, i wish i had more time to play.

hope you’re well,
lewis

2. Carl Uebelhart - 10th May 2007 - 2:26 am

You’re welcome, and yeah web design posts don’t really belong on a middleware infrastructure site, but… :]

3. Brent - 1st Aug 2007 - 12:36 am

Dave,

Interesting article. I’m so tired of beating my head on the wall to make Internet Exploder display like other modern browsers.

After looking over all the articles I could find, I’m basically using the same method as you outlined. The text looks pretty close (close enough) in all browsers but—guess who?!—Internet Explorer—I have to have the IE text resizer set on “smallest” for IE6 and IE7 to display the text at the same size as other browsers.

Your slide show indicates all browsers, including IE6 and IE7 displaying text the same—so I’m very curious as to what you have the IE text resizer set to when you took those screenshots of yours?

My ideal would be to have the text looking pretty close to the same across browsers with IE set to “medium” instead of “smallest” but I can’t seem to do it.

Looking forward to your reply. Thanks.

Leave a comment

No HTML please, only textile. For code please use [lang]...[/lang] tags (e.g. [html]...[/html] for HTML)