Typography > Note smallest recommended font size
Purpose
Some instances of type are showing up that are smaller than the 12px allowed by the current type scales (UI type scale). 12px is a good minimum size and should be used in limited capacity for short meta-like copy and actions. There is no minimum mentioned in Pajamas (although it's implied by the type scale styles), and it'd be helpful to document.
There is subjectivity when it comes to font size and preference, but that's all the more reason to set a baseline and guidance. For example, browsers handle antialiasing differently and rendering "quality" will vary. GitLab makes use of system fonts, and some, like Helvetica, have tighter spacing and less character definition so that text is harder to read at small sizes. One user will not have the same eyesight as the next, so setting a minimum can also help remove subjectivity and preference for what should be the minimum size.
If content is worth displaying, then it should be worth displaying legibly.
Considerations
- On mobile, if the font size of an input is not at least 16px, then input will be scaled up (at least in Safari).
- Typeface, font weight, color, line-height, measure, and style can all impact legibility.
- While WCAG doesn't prescribe a minimum font size, it does address contrast for type
- Pixels are referenced as the unit in this issue, but in code relative units should be used so that a user can scale the type in browser (using pixels prevents this). If a browser's default size is 16px (1rem), then 12px = 0.75rem.
- Screen resolution will impact legibility.
Helvetica, Firefox | Helvetica, Firefox, standard resolution | San Francisco, Firefox |
---|---|---|
![]() |
![]() |
![]() |
Resources & reference
- Explore different type sizes and fonts in CodePen.
- https://stephaniewalter.design/blog/what-minimum-font-size-for-a-high-density-data-web-app-do-you-suggest/
- https://css-tricks.com/accessible-font-sizing-explained/