Loading…
Loading…
Typography is the art and technique of arranging type to make written language legible, readable, and visually appealing. Dating back to Gutenberg's movable type in 1440, typography has evolved through centuries of refinement. In digital interfaces, where 95% of content is text, typography isn't just a design element—it IS the design. Fundamentals include understanding typeface classification (serif, sans-serif, monospace, display), anatomy (x-height, ascenders, descenders, counters), and the relationship between size, weight, spacing, and reading experience.
stellae.design
Typography is the primary vehicle for content on the web—over 90% of information online is communicated through text, making typographic decisions among the most impactful a designer or developer can make. Good typography improves readability, establishes visual hierarchy, conveys brand personality, and directly affects user engagement and comprehension. Poor typographic choices increase cognitive load, reduce time-on-page, and can render even excellent content inaccessible.
A publishing platform sets body text at 18px/1.5 line height with a maximum content width of 680px, resulting in approximately 65 characters per line. Paragraphs are separated by space equivalent to one line height, and subheadings use a distinct weight and size to create clear entry points. Reader engagement metrics show significantly longer average session durations compared to the previous layout with 13px text spanning the full viewport.
A product team defines a modular type scale based on a 1.25 ratio, generating sizes from 12px to 48px with corresponding line heights and weights for each use case. Every component in the system references these named tokens—body, caption, heading-1 through heading-4—ensuring typographic consistency. New features automatically inherit correct typography without designers specifying pixel values for every text element.
A dashboard uses seven different font sizes that do not follow a consistent scale, with some labels set at 11px, others at 13px, and headings ranging from 16px to 22px without clear rationale. Line heights vary arbitrarily between components, causing uneven vertical rhythm that makes the interface feel disjointed. Users report difficulty scanning the dashboard because the visual hierarchy is ambiguous and the text feels uncomfortable to read.
• Teams frequently set body text too small for screen reading, particularly on mobile devices where 16px should be considered a practical minimum. Another common error is using too many typefaces—more than two or three families in a single interface creates visual noise and undermines unity. Neglecting to test typography with real content leads to layouts that break when confronted with long words, translated strings, or dynamic data that differs from placeholder text.
Was this article helpful?