Typography fundamentals: kerning, tracking, leading, optical sizing, and typographic hierarchy
Typography fundamentals encompass the core principles and adjustments-kerning (pairwise spacing), tracking (uniform spacing), leading (line spacing), optical sizing (visual scaling adjustments), and typographic hierarchy (structured visual weight)-that control the arrangement and appearance of type to ensure readability, legibility, and effective communication.
Mastery of these fundamentals directly enhances user experience, brand perception, and information architecture in digital and print products. Poor typography increases cognitive load, reduces engagement, and can erode trust, while refined typographic systems boost usability, conversion rates, and professional credibility.
1Careers
1Categories
8.2 Avg Demand
15%
Avg AI Risk
How to Learn Typography fundamentals: kerning, tracking, leading, optical sizing, and typographic hierarchy
Focus on: 1) Terminology isolation-define and physically measure each variable (e.g., use a ruler in design software to adjust leading). 2) Single-variable practice-adjust only kerning on a headline, then only tracking on a paragraph, observing the impact. 3) Replicate professional examples-recreate typographic treatments from high-quality sources (e.g., The New York Times homepage, Apple product pages) in Figma or Sketch.
Move to integrated practice: Design a multi-page document (e.g., a product brochure) applying all variables systematically. Common mistakes to avoid: over-tracking body text (reduces readability), inconsistent hierarchy levels, ignoring optical spacing in favor of mathematical metrics. Practice using baseline grids and style sheets for consistency.
Master typographic systems at scale: Develop and document a comprehensive typographic scale and component library for a design system. Focus on strategic alignment-how typographic choices reflect brand voice and optimize content for specific contexts (e.g., responsive web, accessible print). Mentor others by conducting typographic audits and establishing style guides and quality control checklists.
Practice Projects
Beginner
Project
Kerning & Leading Correction Exercise
Scenario
You are given a poorly typeset headline and a block of body text from a client's draft website, suffering from cramped letters and uneven line spacing.
How to Execute
1. Import the text into design software (Figma, Adobe Illustrator). 2. For the headline, disable auto-kerning and manually adjust the spacing between each problematic letter pair (e.g., 'AV', 'To') to achieve visual evenness. 3. For the body text, set a fixed leading value (e.g., 1.5x the font size) and adjust until lines are comfortably spaced without excessive gaps. 4. Export before/after screenshots and annotate the specific changes made.
Intermediate
Case Study/Exercise
E-commerce Product Page Typographic Audit
Scenario
A fashion e-commerce site has inconsistent typography across product titles, descriptions, prices, and call-to-action buttons, leading to a cluttered and untrustworthy appearance.
How to Execute
1. Conduct an audit: screenshot a product page and mark all typographic elements. 2. Define a clear hierarchy (e.g., H1: Product Title, H2: Price, H3: Description, Body: Details). 3. Establish and apply a consistent typographic scale (e.g., modular scale based on a 16px base). 4. Adjust tracking and kerning for all headlines and buttons to ensure they are visually tight and impactful. 5. Present a revised design with a style guide documenting the new rules.
Advanced
Project
Cross-Platform Typographic System Design
Scenario
A startup requires a unified typographic system for their brand that must perform across a responsive website (mobile/desktop), a mobile app (iOS/Android), and printed marketing materials (brochures, packaging).
How to Execute
1. Define core typographic principles and brand attributes. 2. Select a versatile type family (e.g., a variable font). 3. Develop platform-specific scales and rules: for digital, define fluid type scales and container queries; for print, define point sizes and baseline grids. 4. Build a reusable component library in code (e.g., using CSS custom properties and a design token system like Style Dictionary). 5. Document usage guidelines, accessibility contrast ratios, and optical sizing adjustments for each platform. 6. Test the system with real content and hand off to development.
Tools & Frameworks
Software & Platforms
Figma (Auto Layout, Variable Fonts)Adobe Illustrator (Character Panel, Paragraph Panel, OpenType features)Webflow or a CSS-in-JS library (e.g., styled-components) for web implementation
Figma and Illustrator are industry-standard for visual typographic adjustment and system creation. Webflow/CSS tools are used to implement responsive typographic scales with CSS `clamp()`, `rem` units, and container queries for fluid scaling.
The Typographic Scale ensures harmonious, proportional sizing. A Baseline Grid enforces vertical rhythm and alignment in multi-line text. The Four-Level Hierarchy Model provides a structured framework for assigning visual weight to different content types for scannability.
Interview Questions
Answer Strategy
Define each term precisely with a technical comparison (pairwise vs. uniform). Situational example must be concrete. Sample: 'Kerning adjusts the space between specific letter pairs to optically balance them, such as tightening the 'AV' in a large display headline. Tracking uniformly adjusts spacing across a range of text, which I would use to slightly open up the spacing in a long paragraph of small, light-weight text to improve readability, without touching individual pairs.'
Answer Strategy
Tests systematic thinking and UX awareness. The strategy should outline a step-by-step process, not just an opinion. Sample: 'I would first categorize all data by importance: primary (e.g., key metric), secondary (e.g., chart labels), tertiary (e.g., axis numbers), and body (e.g., notes). I then map these to a four-level hierarchy using weight, size, and color contrast. Critical metrics get the largest size and heaviest weight; secondary elements get medium weight and size; everything else is kept subdued. I would use a consistent baseline grid to align elements and ensure the overall density remains scannable.'
Careers That Require Typography fundamentals: kerning, tracking, leading, optical sizing, and typographic hierarchy