A system font is a typeface already installed on the user’s operating system. Fonts such as Arial, Helvetica, and Georgia were historically dependable because browsers could render them without downloading additional files. section 12.2
System fonts commonly act as fallbacks while web fonts download. Because the two fonts may occupy different amounts of space, replacing the fallback can shift the layout and make text jump around. section 12.5
Use system fonts with these trade-offs in mind:
- Prefer them when immediate rendering matters: fonts already on the user’s system do not require web-font downloads. section 12.5 section 12.5.1
- Expect visual differences when they replace a web font, because the change can alter text dimensions and page layout. section 12.5
- Avoid using ch and ex units for large page regions when fonts may change, since their dimensions vary between typefaces and can increase layout shift. section 12.5.1
- Choose a system-font stack when broad operating-system coverage is more important than loading a custom typeface; Modern Font Stacks provides such lists. section 12.5.1
Figure 12.14 FOUT—Flash of Unstyled Text
Use the FOUT illustration to see how a system-font fallback can appear before the web font finishes loading. section 12.5
