Complete the lesson quiz and earn 250 XP.
Over 90% of the information consumed on the web is written text. In the words of typographic pioneer Emil Ruder, "Typography has one of the plainest and most unambiguous duties to perform: to communicate knowledge by means of the written word."
In modern digital products, typography fulfills two simultaneous roles:
Mastery of typography requires an intimate understanding of letterform anatomy:
Characterized by decorative finishing strokes or 'feet' at the ends of character stems.
Lacking decorative finishing strokes; clean, geometric, or humanist terminals.
Beyond primary body fonts, three specialized categories serve dedicated UI functions:
Every character occupies the exact same horizontal width (e.g., JetBrains Mono, Roboto Mono).
Exuberant, stylized, or high-personality typefaces designed exclusively for large display sizes (32px and above).
Mimicking fluid handwriting or calligraphy. In digital products, scripts should be restricted to brief decorative accents or certificates, as long-form script text violates accessibility standards.
Historically, print punchcutters carved different letter shapes for 6pt footnotes versus 72pt headlines. In early digital design, static vector fonts lost this nuance.
Variable typography enables a single font file to store an entire design continuum along dynamic variation axes:
wght): Fine-tuning weight from 100 to 900 continuously.wdth): Condensing or expanding characters to fit tight mobile headers.opsz): Automatically thickening thin serifs and widening counters when rendered at small body sizes, while sharpening letterforms at display sizes.Variable fonts dramatically reduce HTTP payload weights while elevating digital typography to Swiss-grade precision.
To establish cohesive visual hierarchy, professional design systems rely on a typographic scale—a predetermined sequence of font sizes generated by multiplying a base size (typically 16px) by a fixed mathematical ratio:
A mathematical scale eliminates arbitrary sizing decisions across engineering teams.