Default user-agent font sizes
Even the most basic styling can reveal differences in user agent styles
Recently, whilst experimenting with text-scaling, I noticed an IE curiosity I’d never come across before. To demonstrate, it begins with some very simple markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Font sizing</title> </head> <body> <h1>Main heading</h1> <h2>Secondary heading</h2> <p>Standard paragraph with a bit of sample text.</p> </body> </html>
This is about as simple as HTML can get, and the results are as expected:
Default styling on a simple document, viewed in Firefox 3.6
The same simple styling in Internet Explorer 7.0
Apart from some minor spacing differences, those two renderings are just about identical. However, let’s say we want to double the entire document’s text size:
body { font-size: 200%; }
Again, pretty straightforward stuff: the body, and all contained elements that will inherit that style, should scale by a factor of two:
The basic document with a 200% font size set on the body, viewed in Firefox …
… and in IE.
Hang on — what happened in IE? Rather than doubling all font sizes, only the main paragraph text has changed, and is now bigger than the secondary heading and the same size as the main heading: definitely not what was intended.
It’s pretty obvious what’s going on here: IE’s user agent styling must set headings in absolute font sizes! This will rarely cause any problems, because site designs almost always explicitly define their own font sizes, but it’s certainly one to watch out for, particularly if you’re doing any work with text scaling using CSS.
