Obviously the main sufferers are users with poor eyesight (in this context anyone over 50), but it also affects users of hi-resolution screens.

Fixed Font Sizes

january 2003

I have mentioned these before, but they are becoming such a plague on the web that I'll devote a whole paper to them. What are fixed font sizes? They are fonts defined through CSS parameters such as points or pixels and have one very problematic feature / bug: they do not obey user instructions to go larger or smaller.

This enables viewers who are uncomfortable to pick a size more suitable for them. Many designers / developers prefer to fix the font size so their designs look the same no matter where they are viewed. There are some situations in which this is necessary. However it can make the site useless for users who are unable to read that particular font size, and is in most cases badly misused.

Obviously the main sufferers are users with poor eyesight (in this context anyone over 50), but it also affects users of hi-resolution screens. My Laptop is equipped with a 1400 x 1050 15'' LCD which is fantastic, but those tiny little fixed fonts are nearly unreadable, even to my youthful eyes. And then there are the 1600 x 1200 models...

This is not exclusively a web problem. Higher resolution should mean more detail not less size - this is only a 135 dpi screen, yet I have never had a problem reading a 1200 dpi print; Part of the problem is that the Operating System doesn't actually know how big your monitor is, only how many dots it must display.

In any case, one cannot assume that all users can read small fonts. I say small despite the fact that the fonts could be fixed to a large size, but - surprise - when fixed, fonts are nearly always tiny.

So why are many websites made like this? Well on one hand we have developers that don't care about anything except that the font be defined using Cascading Style Sheets . This is good in principle and CSS does offer several options that enable resizability: em and percent for example.

The problem is that percentages and em's (which are basically the same thing in CSS) cascade very differently from one browser to the other - this is especially tricky with nested tables and can create huge implementation and display problems - getting these to work on all flavours of Explorer and Netscape requires a lot of experience, testing and patience. An alternative is to use several stylesheets and browser sniffing, but either way implementing resizable fonts is a hassle.

Then we have the designers, many of whom actually prefer their fonts not to budge. The interest of the developer coincide with that of the designer, both have good eyesight and before you know it the website has a fixed font size. This is almost guaranteed to happen unless there is a user advocate involved in the project.

So as a user what can you do when you come across such a site? Leaving is the usual solution, partly because most websites worth reading allow font resizability. An alternative is to use Opera, that enables you to zoom the entire page no matter how the font is defined.


Further reading


Let Users Control Font Size
Jakob Nielsen says the same thing, only better. This is the place to go if you're still not convinced of the evils of fixing the font size.

top of page

The following example is a demonstration of CSS features, it follows that it only works with CSS turned on. You appear to be browsing without CSS, so don't be surprised if the example doesn't do much.
example
This is a fixed size font.  

This is a flexible font.
Try altering the size in your browser. In Internet Explorer this is found under view -> text size.