Font Sizes and Browser Quirks

This website has been online for almost 6 months now, And Ben has just pointed out a font sizing quirk that has made the text here unreadable on IE for Windows if the Text Size (in the View menu) is set to Smaller or Smallest.

And he was right – I’d never checked it before.

Turns out, using this is a no-no:
body {
font: 0.8em/1.6em Verdana, sans-serif;

Owen Briggs has written a fairly in-depth study (and taken a gazillion screen shots) highlighting the different methods of text sizing and their various behaviours across different browsers.

It appears a more reliable way to achieve the goal is:
body {
font: 100% Verdana, sans-serif;

#wrapper {
font-size: 0.8em;
line-height: 1.6em;

And before anyone gets on their soapbox and says I shouldn’t specify a font size anyway, go and read Owen’s post. I particluarly like:

“One sizing wisdom is that a document’s main text should be left alone so it can display at whatever the browser default is. This sounds good, but since most browsers default to a text size that I have to back up to the kitchen to read, I decided the zen approach to design wasn’t for me. Besides, if I was really zen I wouldn’t write a stylesheet.” (Italics mine)


5 thoughts on “Font Sizes and Browser Quirks

  1. Thanks for paying attention to my whining. 🙂

    Internet Explorer 5.x and 6.x do not recognise the <abbr> tag (I hope those entities parse correctly) but it does recognise the <acronym> tag. Since most shortened terms tend to be a set of initials (an acronym) rather than a contracted word (an abbreviation) it is both more semantically correct and much more accessible to use the latter tag.

    Internet Explorer users still make up the majority of web traffic (over 60% according to W3Schools Browser Statistics) and so making sites which use features accessible to them is a high priority, the way I see it. I’ve experienced the frustrations to IE rendering errors and so I sympathise with those who would like to see it wiped off the face of the planet, but the fact is it is here, it is prevalent, and so websites must try to support it in order to give all their functionality to as many visitors as possible.

    Any chance of there being a “Preview Comment” feature so people can see how badly they have buggered up their comment before they send it to your database? Some extra lines in this textarea would be handy too…ten to twenty lines is normally quite comfortable.

  2. Sorry to double-post but I just tested your front page for validity and the code samples in this article don’t validate. The problem is where you have used a <p> element inside a <code>. <p> is a block-level element while <code> is an inline element, so this is an improper use of structural tags since you cannot place blocks inside inline elements. It is the same reason why <h1-6> elements have to be on the outside of <a> elements and so on.

    To do multi-line code samples, there are some elements which have existed since HTML 2.0 for this purpose. Most notable is probably the <pre> element, which is still in wide use today and displays the newlines and indents in the markup, rather than squashing the whitespace like most other block-level structural elements would.

    The new link class is neat and the sidebar categories are easily readable now.

    Your images are using a background colour of RGB(“001,104,103”) and so if you used that in your body CSS entry, it should match up. If you want to use hexadecimal just throw the numbers through the Windows Calculator. I make it #016867 but that could well be wrong.

    Yeah, really need a preview or edit feature…

  3. Ben, I appreciate (and agree with) your comments about IE and its popularity globally, but only about 14% of visitors to this site use any version of IE, so it’s not that big of a deal for me. If I was building a commercial site, it would of course be a different story. I think that 60% is quite conservative actualy – most of the commercial sites I have built would have more like 90-95% of visitors using IE.

    As it is, I have used <acronym> for my reference to IE (as that’s what it is), so I’m not sure why you’re commenting on that anyway…

    As far as incorrecly nested elements and the lack of a post preview, that’s just WordPress 1.2. There is a new version out but I haven’t really looked at it. Is it worth the upgrade? I’ll have to check out what’s changed…

  4. 14% is significant, imho. You make use intelligent use of CSS to allow the page to gracefully degrade on browsers without CSS support. I imagine that less than 14% of traffic would be viewing your site with no CSS, or with CSS turned off, so catering to one minority but not to others is a bit inconsistant.

    The reason I commented about the acronym vs. abbreviation markup was that the <abbr> tag is used in a couple of places on this site. All the RSS feed links, for example, as well as the sidebar XHTML validation link. How come you have an XHTML validation link there but no CSS one when you have both at the bottom? Also, how come the “Name” field of this comment form does not use the same styling as the “E-mail” and “URI” fields?

    The tireless removal of niggles is a desperatly tedious chore (as you will remember from your programming days) but it is what seperates a great design from a great website. The faultless implementation of good ideas is too much to ask of most products but with websites, once it is fixed it does not unscrew itself or wear out, making it acheivable. But difficult. 🙂

  5. Ahhh – I see what you’re referring to. Those bits in the right column are again all part of the standard WordPress template (as it existed in 1.2, which this one is). Same with the XHTML and CSS links in the footer. I invested about 45 minutes in total transforming the standard WordPress install into what you see here (including the design in Fireworks) and I didn’t really touch anything I didn’t need to in order to lay it out how I wanted.

    If I can pinch a few hours I’d like to give it a complete overhaul – but at the moment I’ve got so much work on I’m not sure when that will happen…

    Not sure what happened with the comment form styling – I’ll have to check that out…

Comments are closed.