From a compliance perspective, WCAG and other standards are silent on this issue. What they do indicate is that fonts must be able to be resized or manipulated to meet the users unique needs. That leaves us with a bit of a problem, because a 1 pixel x 1 pixel (px) font would pass WCAG. Seriously. It’s that bad.
I think we would all agree that there should at least be a standard for what that minimum font size should be. I think that most fonts break down below a certain pixel threshold.
For instance, for only capital letters, you could get down to a 5px height and width and each letter would be distinguishable. Using only capital letters is extremely bad for usability. It looks like the words are yelling at you. Even worse, the words all have the same height. Ascenders and descenders create word “shapes” and are very important for the distinction and understandability of the words. So an all capital font of 5px height and width is not a reasonable base font.
So now we need to include lower case letters. In order to form lower case letters, you need a minimum of 5px height. This now means that our capital letters need to be taller. than 5px to distinguish them from the lower case letters. Let’s just assume that 2px is enough to tell the difference. Now we are at a minimum height of 7px for the capital letters.
This doesn’t take into account the need to make the font “bold”. At this point the lower case letters need to be much larger in order to accommodate boldness.
I would recommend that at a minimum fonts should be 10px high. For usability, 12-14px is the minimum. This gives the font enough height to accommodate for letter formation and shape recognition. If you are going to use bold in your text, these font sizes will usually accommodate it for sans-serif fonts.
Of course, this all is dependent on a lot of other factors:
- What is the readability of your font family at smaller sizes?
- Some fonts become unrecognizable at smaller sizes.
- At smaller sizes, Serif or Decorative fonts are not recommended.
- Sans-Serif fonts work best at smaller sizes
- What does it look like with anti-aliasing?
- Anti-aliasing is sometimes referred to as font smoothing. It basically adjusts the contrast of the letters to make them look less jagged. At smaller font sizes this can make large portions of the letters non-visible.
- What is the linespacing and density of the text around it?
- What is the contrast of the text against its background?
- If the contrast gets too low (even if it passes standards), people with blurry or low vision may not even be able to distinguish the text.