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.

Tue 9 Dec 2014 19:01

online cialis canadian

online cialis canadian said:

What a stuff of un-ambiguity and preserveness of valuable knowledge regarding

unpredicted feelings.

Fri 12 Dec 2014 11:55

canadian cialis online

canadian cialis online said:

Hi fantastic website! Does running a blog such as this require a great deal of work?

I've absolutely no understanding of programming but I had been hoping to

start my own blog soon. Anyways, should you have any recommendations or techniques

for new blog owners please share. I know this is off topic but I simply wanted to ask.

Thanks a lot!

Sat 13 Dec 2014 01:37

cialis pills

cialis pills said:

When I originally left a comment I seem to have clicked on the -Notify me when new comments are added- checkbox and

from now on every time a comment is added I get four emails with the exact same

comment. There has to be a way you can remove me from that service?

Appreciate it!

Tue 16 Dec 2014 20:44

canadian pharcharmy online

canadian pharcharmy online said:

Greetings I am so thrilled I found your weblog, I really found you by mistake,

while I was browsing on Google for something else, Anyways I am here now

and would just like to say thanks for a incredible post and

a all round entertaining blog (I also love the theme/design),

I don’t have time to browse it all at the minute but I

have saved it and also added in your RSS feeds, so when I have time I will be back to read a great deal more,

Please do keep up the great work.

Leave a comment