Minimum font size

Thursday 19th February

Two browser features are available for those who find small text difficult to read: text zooming, and setting a minimum font size.

Disclaimer

This article uses font sizes specified in pixels, purely for demonstrative purposes. Don’t try this at home.

Text zooming

Text zooming allows a reader to scale all text within the context of a page. Whilst it’s suffered somewhat with the rise in ‘page zoom’ implementations — in which the entire layout scales — it’s still an invaluable accessibility tool.

One problem with text zooming, however, is that different sites will require different levels of scale to achieve the desired level of readability. The setting is also not preserved across sessions, so must be applied at least every session and, at worst, each time a user switches site.

Minimum font sizing

An alternative is the ‘minimum font size’ option. This ensures that all fonts are displayed at a minimum size, presumably one with which the user is comfortable.

There isn’t actually a unit given for what the minimum font size is, and the lack of explanation in Firefox’s online help gives some indication as to how insignificant the developers consider this option:

You can also set the minimum web page font size. This is useful to prevent sites from use [sic] overly small fonts that are barely readable.

Now, here’s a sample page with some fairly wide-ranging pixel-based font-sizes: 12px for the main body text, 24 for the level 2 heading, 36 for the h1:

Whilst it’s a perfectly usable page for many, some of our audience might have a little difficulty with that small body font. So, they reach for the minimum font size option, set it to 16, and relax:

So far, all is good — any audience can pretty much read our content and size it to their content. However, what happens when all our text is sized on the small side?

The minimum font size problem

Take the following as an example:

Those sizes are 16, 14, and 12 respectively. Although it’s not a recommended design practice, many sites do use small fonts, and this general problem could — in theory — apply at any text size, if more than one level of font size is below (or equal to) the user’s chosen minimum. For example, here’s our page with a minimum font size of 16:

Notice how it’s no longer possible to (visually) differentiate the heading levels and, apart from the font weight, they’re also indistinguishable from the main body text. It should be apparent that the method for applying a minimum font size is:

  1. Find all text in a smaller font than the minimum
  2. Set that text to the minimum font size

A scalable minimum font size

What if, instead of text zooming and the above methodology, we had a single minimum font size setting along with the following application of it:

  1. Find the smallest text
  2. If it’s below the minimum, scale all fonts up until it’s equal

Suddenly, pages are readable and scalable:

Note that this is just an arithmetic scaling: 4px added to all fonts to ensure the smallest is ‘bumped up’ to 16. Firefox’s text zooming acts geometrically, but at this level, there’s very little difference.

At greater text sizes, the difference is more pronounced, and the geometric scale probably makes most sense:

Original sample page with arithmetic minimum font size scaling (16px) …

… and with geometric scaling at the same minimum font size.

Summary

Whilst the examples shown here demonstrate nothing radical, I hope they do show that there is still scope for examining the most basic browser functions, and considering where accessibility improvements can be made.

Updates

Wednesday 4th March 2009

I’ve logged a bug to see if the Mozilla developers are interested in implementing a scaling minimum font size.

Thursday 9th April 2009

I’ve put together a very basic proof-of-concept in javascript, demonstrating how minimum font-size scaling might work in practice.

References


Tweet

Comments

Tue 12 Apr 2011 17:57

Website Design Las Vegas

Website Design Las Vegas said:

wonderful information. Thank you for sharing the information.

Leave a comment