The biggest font size requirement is that the user is able to adjust their font size and the application inherits their preference. In Web, this means we use a relational font, such as em, rem, percentages, vm, and vh. Pixels are passable, but we don’t want to use points.
Containers need to grow
Containers must be designed so they can grow vertically as the font increases and the background extends. For instance having white text on a dark background fails when the white text grows beyond the dark background. For this, we need to use min-height instead of height and a color in addition to background image.
The BBC has a great standard for online content. It is the basis for Intuit’s internal accessibility standards. They recommend a minimum of 11px.
At default browser level all text must have a minimum calculated size of 11px and all core content must have a minimum calculated size of 13px.
Minimum text size – BBC Future Media Standards & Guidelines
Mobile Requirements
For iOS, we should be supporting Dynamic Type, which means that instead of saying this is a block of text that is 15pt. We say this is a paragraph, heading, subheading, etc. And then add styles to those types. iOS will handle the font scaling and layout as a user requests larger font sizes.
The iOS Human Interface Guidelines sets a minimum size of 11pt.
Text should never be smaller than 11 points, even when the user chooses the extra-small text size. For comparison, the body style uses a font size of 17 points at the large size, which is the default text-size setting.
Color and Typography – iOS Human Interface Guidelines
Android lists 12sp as their smallest recommended font size
English and English-like scripts
Latin, Greek, and Cyrillic.
The basic set of styles are based on a typographic scale of 12, 14, 16, 20, and 34.
Typography – Google Material Design Style Guide
Leave a Reply