Skip to content
Typography Master

Typography FAQ

Clear answers to common typography questions — from fundamentals and font pairing to web CSS, accessibility, and design systems.

Typography Basics

What is typography?
Typography is the art and technique of arranging type to make written language legible, readable, and visually appealing. It encompasses font selection, sizing, spacing, hierarchy, and layout for both print and digital media.
What is the difference between a typeface and a font?
A typeface is the overall design of letterforms, such as Helvetica or Georgia. A font is a specific weight and style within that family, such as Helvetica Bold 12pt. In everyday speech the terms are often used interchangeably, but in design they mean different things.
Why does typography matter in design?
Typography carries most of the information in interfaces, websites, and publications. Good typography improves readability, establishes brand identity, guides attention through hierarchy, and builds trust. Poor typography increases cognitive load and bounce rates.
What typography basics should developers know?
Developers should understand rem and em units, line-height for body text (1.5–1.7), a minimum 16px body size, font loading with font-display, WCAG contrast ratios, and how to implement a type scale with CSS custom properties or design tokens.
What typography skills do UI designers need?
UI designers need font pairing, hierarchy through size and weight, spacing systems, responsive type strategies, accessibility contrast checks, and the ability to document decisions as typography tokens for engineering handoff.
What is the difference between serif and sans-serif fonts?
Serif typefaces have small strokes at the ends of letterforms and are traditional for long-form print reading. Sans-serif typefaces lack those strokes and dominate screen UI because they stay crisp at small sizes on low-resolution displays.
What is the best font size for body text on the web?
Use at least 16px (1rem) for body text on the web. Many editorial sites use 17–18px on desktop for improved readability. Never go below 16px for primary content because it fails accessibility expectations and strains readers.
How many fonts should a website use?
Most websites need only two typefaces — one for headings or UI and one for body copy. Add a third only for monospace code or a distinct display role. Using too many fonts creates visual noise and slows page load.
What are the most common typography mistakes?
Common mistakes include too many fonts, insufficient contrast, body text below 16px, lines that are too wide, inconsistent spacing, ignoring hierarchy, and using display fonts for paragraphs. Audit with a checklist before shipping.
How does typography affect brand identity?
Typography communicates personality before a user reads a word. Serif typefaces feel traditional and trustworthy. Geometric sans-serifs feel modern and tech-forward. Consistent typographic choices across touchpoints build recognizable brand identity.
What typography principles apply to poster design?
Posters demand bold hierarchy, high contrast, generous whitespace, and restraint with typeface count. Scale headlines dramatically, keep supporting text concise, and ensure readability from a distance before refining detail.

Anatomy & Metrics

What is x-height in typography?
X-height is the height of lowercase letters like x, a, and e measured from the baseline to the top of the main body. Typefaces with larger x-heights appear more legible at small sizes because the core letterforms are bigger.
What is a baseline in typography?
The baseline is the invisible line upon which most letters sit. It is the reference for vertical alignment, leading, and baseline grid systems that keep multi-column layouts visually consistent.
What is leading in typography?
Leading is the vertical space between lines of type, traditionally measured from baseline to baseline. In CSS it is controlled by line-height. Body text typically needs 1.5–1.7 line-height for comfortable reading.
What is the difference between kerning and tracking?
Kerning adjusts space between specific letter pairs like AV or To for visual balance. Tracking adjusts spacing uniformly across a range of text. In CSS, letter-spacing controls tracking; kerning is handled by the font's built-in kerning tables.
What is measure in typography?
Measure is the width of a block of text, usually expressed in characters per line. Optimal measure for body copy is 45–75 characters. Too-wide lines tire the eye; too-narrow lines disrupt reading rhythm.
What is a counter in letter anatomy?
A counter is the enclosed or partially enclosed white space inside a letterform, such as the hole in o, e, or a. Counter size and aperture opening affect legibility, especially at small sizes.
What is a ligature in typography?
A ligature combines two or more letters into a single glyph for better spacing or aesthetics, such as fi or fl. Ligatures are enabled through OpenType features and should be used thoughtfully in body text.
What are ascenders and descenders?
Ascenders are the parts of lowercase letters that rise above the x-height, as in b, d, and h. Descenders extend below the baseline, as in g, j, and y. Their length affects line spacing and vertical rhythm.
Should headlines have tighter letter spacing?
Large display headlines often benefit from slightly negative letter spacing, around -0.02em to -0.05em, because big glyphs can feel too loose at default spacing. Test visually at the actual rendered size.
What is the difference between tracking and letter-spacing in CSS?
They refer to the same thing. Tracking is the traditional typography term for uniform letter spacing. Letter-spacing is the CSS property name. Kerning is different — it adjusts individual letter pairs and is handled by the font.

Font Pairing

What makes a good font pairing?
Strong font pairings contrast in classification or weight while sharing similar proportions and x-height. Assign clear roles — one typeface for headings, one for body — and limit the project to two families unless a monospace or display face is needed.
What are the best Google Fonts pairings?
Proven free pairings include Inter + Source Serif 4 for product UI, Playfair Display + Inter for editorial headlines, and Merriweather + Open Sans for long-form reading. Always preview with your actual content before shipping.
Should I use serif for body and sans-serif for headings?
Either direction works. Serif body with sans-serif headings is classic for editorial sites. Sans-serif body with serif headings creates elegant contrast for marketing pages. Consistency and contrast matter more than which role gets which classification.
Can I pair different weights of the same typeface?
Yes. Using one typeface family with varied weights and sizes is a reliable strategy, especially for UI and documentation. Ensure enough contrast between heading and body weights — typically Regular for body and Semibold or Bold for headings.
What font pairing mistakes should I avoid?
Avoid pairing two similar sans-serifs with no clear contrast, using more than three typefaces, mixing too many weights, or choosing display fonts for body text. Also avoid pairing typefaces with mismatched x-heights at the same nominal size.
Why does cap height matter when pairing fonts?
Typefaces with mismatched cap heights look uneven when set at the same font size. Adjust sizes so cap heights align visually, or choose pairs with naturally similar proportions for cleaner hierarchy.

Web & CSS

What is a type scale?
A type scale is a set of font sizes derived from a base size multiplied by a consistent ratio. It creates visual harmony between headings, body text, and captions without arbitrary pixel values.
What is the best type scale ratio for web design?
Major Third (1.25) works well for UI and dashboards. Perfect Fourth (1.333) suits editorial content. Golden Ratio (1.618) creates dramatic display hierarchies for marketing pages. Choose based on content density and brand tone.
What is rem in CSS typography?
Rem is a CSS unit relative to the root element font size. If html { font-size: 16px }, then 1rem equals 16px and 1.5rem equals 24px. Rem is preferred for font sizes because it scales consistently and respects user browser settings.
When should I use rem vs em for font sizes?
Use rem for global typography scales and component font sizes so they stay predictable. Use em for spacing relative to the current element's font size, such as padding on a button that should scale with its text.
What is fluid typography?
Fluid typography uses CSS clamp(), calc(), or viewport units so font sizes grow and shrink continuously between defined minimum and maximum values instead of jumping at breakpoints.
How does clamp() work for font sizes?
clamp(min, preferred, max) sets a minimum size, a fluid preferred value often using vw, and a maximum cap. The browser picks the middle value within that range, enabling smooth responsive scaling without dozens of media queries.
When should I use fluid typography vs breakpoints?
Use fluid sizing for headlines and hero text that should feel responsive without maintaining many media queries. Keep body text at a fixed minimum of 16px for accessibility. Combine both approaches for complete responsive systems.
What are variable fonts?
Variable fonts store a range of design variations — weight, width, slant, optical size — in a single file. You control axes via CSS, reducing HTTP requests and enabling smooth weight transitions for animation and responsive design.
What font-display value should I use?
Use font-display: swap for body text so content appears immediately with a fallback, then swaps when the web font loads. Use optional for non-critical decorative fonts. Always provide metric-matched fallback stacks to reduce layout shift.
How do I enable OpenType features in CSS?
Use font-feature-settings or font-variant properties. Common features include ligatures (liga), kerning (kern), small caps (smcp), and tabular figures (tnum). Check your font's documentation for supported feature tags.
What is a system font stack?
A system font stack uses native OS fonts like -apple-system and Segoe UI for fast loading and familiar appearance. It is ideal for performance-critical UI, though custom fonts are preferred for brand differentiation.
How should headline sizes respond across devices?
Use fluid typography with clamp() for hero headlines so they scale between mobile and desktop maximums. Keep a clear step down between h1, h2, and h3 using your type scale. Test that the smallest headline size remains legible on mobile.
How do I convert px to rem?
Divide the pixel value by the root font size. With a 16px root, 24px equals 1.5rem and 32px equals 2rem. Set html { font-size: 100% } or 16px and use rem for all typography sizes to respect user preferences.
What is optical sizing in fonts?
Optical sizing adjusts letterform proportions for different text sizes so type remains legible at both text and display sizes. Variable fonts with an opsz axis can shift these adjustments automatically via CSS.

Readability & Accessibility

What is the ideal line length for web text?
Aim for 45–75 characters per line for body copy. Desktop editorial content often targets 60–75 characters. Mobile body text can be 45–60. Use a line length tester to verify with your actual font and container width.
What line height should I use for body text?
Use line height between 1.5 and 1.7 for body text at 16–18px. Wider line length can tolerate slightly tighter leading. Narrow columns often need more line height. Headlines typically use 1.1–1.3.
What contrast ratio is required for WCAG AA?
Normal text needs a contrast ratio of at least 4.5:1 against its background. Large text — 18px regular or 14px bold and above — needs at least 3:1 for WCAG AA compliance.
What is the difference between WCAG AA and AAA?
AA is the standard legal target for most products — 4.5:1 for normal text. AAA requires 7:1 for normal text and is recommended for critical healthcare or government content where maximum accessibility is required.
What letter spacing should I use for body text?
Body text at 16–18px typically needs 0 to 0.02em letter spacing. Avoid positive tracking on small text because it reduces density and hurts readability. Large headlines often benefit from slightly negative tracking.
Does color contrast affect SEO?
Contrast is not a direct ranking factor, but poor contrast increases bounce rates and fails accessibility audits. Readable text supports user engagement signals and inclusive design, which indirectly benefits search performance.
What is the minimum accessible font size?
WCAG does not mandate a specific minimum font size, but 16px is the practical standard for body text. Users must be able to resize text to 200% without loss of content. Never lock font sizes with px on html without allowing user scaling.
What typography tips apply to editorial and blog content?
Use generous line height (1.6–1.7), comfortable measure (60–75 characters), clear heading hierarchy, adequate paragraph spacing, and high-contrast body text. Consider slightly larger body sizes (17–18px) for long reading sessions.
How does line length affect readability?
Too-wide lines tire the eye returning to the next line. Too-narrow lines break too often and disrupt reading rhythm. Correct measure pairs with appropriate line height for comfortable sustained reading.

Systems & Tokens

What are typography tokens?
Typography tokens are named design variables for font families, sizes, weights, line heights, and letter spacing. They create a single source of truth shared between design tools and code, making updates consistent across products.
What is typographic hierarchy?
Typographic hierarchy uses size, weight, spacing, and color to show readers which content is most important. Clear hierarchy helps users scan pages, understand structure, and find information quickly.
What is vertical rhythm in web design?
Vertical rhythm is a consistent spacing system that aligns text baselines and UI elements across a layout. It typically uses a baseline grid and consistent line-height multiples to create visual harmony between sections.
How do I set up typography in a design system?
Define font families, a modular type scale, line heights, letter spacing, and semantic tokens like text-body and text-heading-lg. Document usage rules, export tokens for code, and test across breakpoints and accessibility requirements.
How do I configure typography with Tailwind CSS?
Extend tailwind.config with fontFamily, fontSize arrays including line-height, and letter-spacing. Map design tokens to CSS variables in @theme or use the Typography Token Exporter to generate Tailwind-compatible output from your scale.
What are widows and orphans in typography?
A widow is an isolated line at the top of a column or page. An orphan is a single line left at the bottom of a paragraph before a break. Both disrupt reading flow and should be avoided through editing, CSS, or layout adjustments.
Should I enable hyphenation on the web?
Hyphenation can improve rag in narrow columns and justified text. Use CSS hyphens: auto with appropriate lang attributes. Avoid hyphenation in UI labels, headings, and short text blocks where broken words look awkward.
Is justified text good for websites?
Justified text is rare on the web because browsers lack sophisticated hyphenation and justification algorithms. Left-aligned text with a good rag is safer for most web content. Reserve justification for print-style editorial layouts with proper hyphenation.
What are typography best practices for UI design?
Use a clear type scale, limit font families to two, ensure 4.5:1 contrast for labels, size body text at 16px minimum, use consistent line heights, and define semantic text styles as tokens. Test with real content, not lorem ipsum.
What should a typography checklist include before launch?
Verify body size is at least 16px, contrast passes WCAG AA, line length is 45–75 characters, hierarchy is clear with no skipped heading levels, font loading is optimized, and spacing is consistent across breakpoints.
Can I implement a baseline grid in CSS?
Yes. Set line-height values as multiples of a base unit, use consistent spacing tokens, and align components to the grid. Tools like the Vertical Rhythm Calculator help compute line heights and heading spacing for baseline alignment.