What is typography
Typography is the art and technique of arranging type to make written language legible, readable, and visually appealing. The word comes from the Greek typos ("form") and graphein ("to write").
It encompasses every decision about how text looks and behaves: selecting a typeface, choosing sizes, adjusting spacing, setting alignment, and organizing content into visual hierarchy.
Over 90% of online information is text — which makes typographic choices the single largest factor shaping how people experience nearly any designed surface.
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.
Before digital typesetting, typography was a specialized occupation. Digitization opened up typography to new generations of visual designers. Today anyone with a computer and desktop publishing software can use typographic skills.
Anatomy of type
Every letter is an engineered structure with a precise vocabulary. Understanding type anatomy transforms font selection from guesswork into informed design decisions.
Hover any term to learn its definition and significance.
Type classification
Every typeface carries the visual DNA of its era and tools. Classification gives you a framework for understanding why a typeface looks the way it does — and when to use it.
Old Style Serif
Five centuries of type
Typography's story is inseparable from the history of communication, commerce, religion, and culture. Every major typographic innovation emerged in response to a real-world need.
Mechanics & metrics
Every digital glyph lives in an abstract coordinate space called the em square. Typically 1,000 or 2,048 units per em — the drawing grid for all letterforms.
WOFF2Best for web. Brotli compression: ~60–70% smaller. 97%+ browser support.WOFFWeb format. gzip compression: ~40–50% smaller. Legacy fallback.OTFOpenType. Advanced features (ligatures, small caps). Desktop use.TTFTrueType. Universal but uncompressed. Desktop / mobile apps.Hierarchy & scale
A type scale generates sizes through a consistent mathematical ratio from a base size. This creates harmonious, proportional relationships across all text levels in a design system.
The modular scale is the foundation of any professional type system — it replaces ad hoc sizing with mathematical coherence.
Screen vs print
Print operates at 300+ DPI. Traditional screens ran at 72–96 PPI. Retina displays exceed 220 PPI. This resolution difference fundamentally changes how type is designed for each medium.
Typeface pairing
Every successful pairing negotiates contrast and harmony. Too much similarity and faces blur; too much difference and design fractures.
The five strategies: classification contrast, historical period, same designer, shared x-height, clear role separation.
Variable fonts
A variable font collapses an entire type family — and everything in between — into a single file. You don't just get Regular and Bold. You get every value from 100 to 900 and everything in between.
Specified as OpenType Font Variations (1.8), jointly announced by Apple, Google, Microsoft, and Adobe in September 2016.
font-stretch: 100%
font-style: oblique 0deg
Type in use
Readability is distinct from legibility. Legibility is a property of the typeface — can you distinguish characters? Readability depends on setting — can you comfortably read extended text?
Professional typesetting involves dozens of micro-decisions that collectively determine whether text is a pleasure or a struggle to read.
text-align: left;
text-indent: 0;
Emotion & psychology
Research confirms people consistently assign personality traits to typefaces. In a striking 2008 experiment, the same satirical text in Times New Roman was perceived as funnier and angrier than in Arial. The typeface alone altered emotional reception — before a word was cognitively processed.
Landmark typefaces
Every typeface in this gallery shaped the visual culture of its era and continues to influence design decisions today. Hover to preview.
The type industry
A type foundry designs, produces, and distributes typefaces. The term dates to when foundries literally cast metal type from hot lead alloys. Today, a foundry is typically a studio creating digital font files.
Web & UI typography
Typography for the web demands performance, accessibility, and responsiveness on top of aesthetic excellence. Every CSS property has implications for readability and rendering.
.body-text {
font-size: 16px;
line-height: 1.70;
letter-spacing: 0.000em;
font-weight: 400;
color: #1A1A1A;
background: #FFFFFF;
}Glossary
Every term a designer needs to know. Click any card to flip it.