Constant font sizes in CSS

Posted by

We’ve all been there, spending an age crafting your design, lovingly working with text in Photoshop (or Illustrator if you have it) to show the client your wonderful mock-ups.

They love it and give you the green light to go ahead and build the site. Diving into the code you quickly knock the rough layout into shape and proceed to hone and refine until you are happy. It is probably sometime early in the morning when you are at last happy with your creation.

It doesn’t matter if you are freelance or work for someone it will still be sometime after midnight when this stage is reached…

The next morning you fix those obvious glaring errors that you missed the night before in your euphoric (or exhausted) state and email the client saying take a look. The client comes back at some point in the next couple of days to say that its great, they love it, but.

Cue the list of bugs, design issues, new ideas(!) and general re-jigging that goes on. After more sweat and tears you are happy – it is complete. The client is happy(-ish) and the job is done. Hooray.

One week later…

The client contacts you to say that X (his client/nerdy nephew/wife/husband/etc.) was looking at the site, they loved it but…

The fonts are illegible/far too big and is there anything you can do to fix it? The problem of course is that every browser is different and they render text differently.

There are ways to make text look the same in every browser but it takes a little bit of work and CSS know how. Using percentages and em’s are the way to go – and there is still a debate about how to make it work properly but once you have done it you too will see the light. Setting your default font size for the body is essential to set a base level and then working from there. However that won’t solve all your issues and I could go on for quite some time talking about the issues but rather than listen to me I thought I’d point you in the direction of some interesting articles on the problem.

An interesting article on it has been written by load average zero, it is specifically targeted towards newer browsers but still worth a read. The table of font sizes in different browsers is definitely worth a check out.

Clagnut (Lovely name!) has an good article on sizing text with em’s. Perhaps of more interest are the comments on the article. Lots of interesting points are raised in there by some clever people.

And last but by no means least is a really useful tool for getting the correct text sizes converted from pixels to em’s. The Em Calculator may well become a mainstay in your web design toolkit!

Good luck one and all, and may all your text be constant. :)