TypeLab
Code
Quick Pairings
Scale:
xs10px
sm13px
md16px
lg20px
xl25px
2xl31px
3xl39px
Presets:

The Art of Typography

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.


Understanding Type Hierarchy

Good typography establishes a clear visual hierarchy, guiding readers through content effortlessly. The arrangement of type involves selecting typefaces, point sizes, line lengths, line spacing, and letter spacing.

A well-designed typographic hierarchy helps readers scan content quickly and understand the relative importance of different elements. This is achieved through variations in size, weight, color, and spacing.

Choosing the Right Typeface

The typeface you choose sets the tone for your entire design. Consider readability, mood, and context when making your selection. A typeface should complement your content and enhance the reader's experience.

"Typography is the craft of endowing human language with a durable visual form." — Robert Bringhurst

Key Principles

  • Contrast: Create visual interest through size, weight, and style differences
  • Hierarchy: Guide readers through content with clear levels of importance
  • Consistency: Maintain uniform styling throughout your design
  • White Space: Use negative space to improve readability
Sample Text Sizes

Extra Small (xs): Caption text and fine print

Small (sm): Secondary information and labels

Base (md): Regular body text and paragraphs

Large (lg): Emphasized text and subheadings

Live Metrics
Line Height1.5
Spacing0em
CPL~65
Text17.40:1
Accent5.17:1
Base16px
Scale1.250