Oh what a shock I got!

The Fonts CSS file is billed as offering cross-browser typographical normalization and control. A nice ideal but I’m not sure I agree with the method adopted.

You see, the first rule in the Fonts CSS file is as follows (I’ve added some carriage returns and indented to make it a little easier to read):

body
{
  font:13px arial,helvetica,clean,sans-serif;
  *font-size:small;
  *font:x-small;
}

This is nasty, in my opinion, for one major reason; it’s using hacks to get around IE’s problem with resizing fonts declared using pixels.

I’m not going to get up on my soap box about this (neither do I wish to pontificate – you never know when you might be wrong), but I’m pretty certain most of us are aware that hacks are a bad method to adopt when trying to solve cross-browser issues. If you’re interested in reading a little more, there’s some informative posts at Vitamin, Digital Web and Muffin Research.

It’s a real shame, in this particular instance, because the Yahoo UI is so good for so many other things.

Another Method

Unfortunately, I’m not sure there is one perfect method for solving this particular problem. In most cases, I personally make a major assumption to solve the issue – that the user has never changed the size of the default fonts in their browser. This is not a great solution but I certainly think it’s better than using hacks.

If this is the case, most browser defaults (at least that I’m aware of) are 16px, which means the following rule sets all font sizes to 10px:

body
{
  font: 62.5%/1.0 "Trebuchet MS", tahoma, verdana, sans-serif;
}

This then means that you can size everything else using percentages and still easily understand what their pixel equivalents would be:

100% = 10px
140% = 14px
160% = 16px
200% = 20px

This allows you to improve your typography easily – a good example would be Mark Boulton’s excellent tutorial on weight and size.

It’s also worth resizing fonts for form elements. This is something the Yahoo Fonts CSS does too. To acheive this, you should use something like this:

select,
input,
textarea
{
  font-size: 99%;
}

I’m using 99% in that rule simply because Safari doesn’t seem to like 100% for some reason.

So using Yahoo’s Fonts CSS is bad?

Not really, it’s just that I prefer the above method. You should definately make up your own mind about it.

In summary, it’s just the Fonts CSS part of the Yahoo UI that I disagree with – the rest of the interface is awesome and I’m a particular fan of their javascript event handling functions. They’ve brought all kinds of new features to the table with the newest release and, if you’re a web developer, you should definately download it and take a look.

However, when it comes to font-size normalisation (English spelling please), don’t just trust their method because it’s not perfect.

But then, neither is mine…

Well, now it’s a little easier with the help of “Punct!,” a client-side script I have created for two reasons; as an experiment in JSON and to save time when cutting and pasting code from Word documents into web sites.

Punct basically takes any content pasted or typed into it and converts characters such as em-dashes, quotes and horizontal ellipses into their relevant best HTML entities. You can also specify whether to include paragraph tags which helps anyone pasting content into WordPress (like this very article).To have a go, click the link below:

Punct, a web-based content aid…

Incidentally, this is only version 1.3 — it’s not perfect, it’s not my final word on the matter (it’s the beginning of something far bigger), it jams the content preview into the page using innerHTML (a nasty method) and it’s only available with Javascript turned on since I wanted to utilise client-side processing power. I’m only really launching it here since several of my fellow developers at Rentokil seem quite keen on using it. Watch this space for further developments!

ClearType or no ClearType?

Windows XP allows you to select a better form of on-screen font rendering called ClearType within it’s display properties. This basically makes on-screen fonts a lot prettier. However, this feature is only available in Windows XP and is therefore limited to a select audience. For this reason, should we, as designers, have it turned on? Surely this could result in illegible fonts on our work for some systems that we’re just not aware of!

Personally, I keep ClearType turned off – but only because I spent many years working on a horribly archaic Windows 2000 system and couldn’t get used to ClearType when I upgraded. However this means that, whilst I’m working, my fonts are rendered in a more common format – allowing me to better design for a wider audience.

So, what’s general consensus on this?