This is a continuation of the series on web site font sizes. After speaking with a variety of web users of all ages, the number one complaint was that sites were not readable– the text was far too small.

Here is a cross section of all sorts of information related web sites whose text is the most important part of their mission.

Historical Maritime Society

This is a fairly standard web font size online, and as you can see it is very difficult to read. Trying to make out even this short paragraph requires some squinting and careful observation, and there are entire long articles on web sites that visitors are expected to read at that size. The web designer probably assumed the audience knew all about the Command/Control + shortcut, or had set their browser preferences to display huge type, but the only people that know about that are either tech savvy users or fellow designers. The average visitor will have no idea how to “fix” their browser. It is much better for a designer to “fix” their web site font size.

National Cancer Institute

As you can see, the size a medium small look. It could be a bit bigger but isn’t too drastically tiny. The main problem here is the leading (spacing between lines). See how they are jammed right on top of each other? You can barely see a gap between the two lines making it tricky to read. Sometimes web sites get the right size, but not the right spacing.

Star Wars

This shows how the font colour can affect how you read web text. The cancer site had a medium grey, but the Star Wars site chose black. Even though they both have very tight spacing between the lines, it is easier to read the Star Wars text. Too much black writing for page after page can be overwhelming, however, so a nice compromise between black and light grey can usually be found around #333333 which is a slightly muted black / very dark grey.

Butterfly Garden

Here is another site similar to the Star Wars example– as you can see the text is a good reading size. With long articles, if the font is too large it can cause issues with too much scrolling. Yet this is also a size that can be easily skimmed through or read. It is set at 12px which is about the minimum when it comes to readable font sizes.

Oregon Historical Society

Another question is the serif vs sans-serif font debate. Here we have a 12px, dark grey font, but it is serif. For some reason, in tactile printed pieces a serif is easier to read but on a screen sans-serif fonts are easier to read. This is not a hard and fast rule, however, and there are proponents of using serif fonts online. In this case I believe it is fairly obvious that the font is too small to be read easily. The text should be bumped up at least a few points to perhaps a 14px font.

Into the Wardrobe

Here we see a fairly typical web font size and the reason for all the complaints. Can you honestly read that? I think I’d need to get a magnifying glass out myself. It should be almost triple that size to be legible.

Irish Tourism

Remember what I said earlier about having plenty of space between lines? Here is an example of taking that to the extreme and running into trouble. There is too much leading in this paragraph– the text no longer has the feel of a cohesive block. It is also way too small.

What we learned about font sizes:
- Start with at least 12px (1.2em) and possibly go up from there
- Comfortable spacing between lines (not too much not too little)
- Stay with dark greys or black (#33, #00)