Typography and Color | Web UI Mastery

Typography carries meaning. Color carries meaning and emotion. Both should be systematic, not improvised.

Typography Principles

Principle	Guidance
Readability first	Body text should be easy to read before it is stylish
Limited scale	Use a small, repeatable set of sizes and weights
Role-based styling	Style text by purpose, not one-off appearance
Strong contrast	Text should be readable in realistic conditions
Rhythm	Line height and spacing should create an even reading flow

A Practical Type Scale

Role	Desktop Starting Point	Notes
Display	40-56px	Hero headlines only
H1	32-40px	Page-level title
H2	24-28px	Section title
H3	20-24px	Card or subsection title
Body	16-18px	Default reading size
Small	14px	Secondary detail only
Tiny	12px	Use sparingly for metadata

Body Text Rules

Keep body size at 16px minimum for most web UI.
Keep line height around 1.4 to 1.7 depending on font.
Avoid very light font weights for long passages.
Reserve all caps for short labels, never long paragraphs.

Pairing Typography With UI Goals

UI Goal	Typography Choice
Fast scanning	Strong headings, short paragraphs, bullets
Premium feel	Slightly more whitespace, tighter type palette, fewer styles
Dense productivity UI	Slightly smaller text with excellent contrast and spacing discipline
Conversion	Headlines that state value clearly, not poetically

Color System Layers

Your product should define color by semantic role.

Token Group	Purpose
Brand	Identity, primary emphasis
Surface	Page, card, elevated layers
Text	High, medium, low emphasis text
Border	Separation and input outlines
Status	Success, warning, danger, info
Action	Primary, secondary, hover, active, disabled

Semantic Color Rules

Use color to reinforce meaning

Meaning	Typical Use
Green	Success, positive change, completed
Red	Error, destructive actions, negative change
Amber	Warning, caution, pending review
Blue	Info, selected state, primary action in many systems

Never rely on color alone. Pair it with icons, labels, or state text.

High-Converting Use of Color

Keep the primary CTA color relatively exclusive.
Reduce visual noise in surrounding elements so the CTA stands out.
Use warm accents carefully for urgency or offers, but only when the claim is real.
On pricing pages, use color to guide plan comparison, not to shout at every tier.

Common Color Mistakes

Mistake	Why It Fails
Using brand color everywhere	Nothing stands out anymore
Gray placeholder-like body text	Reads as disabled or low importance
Light gray borders on white with weak contrast	Inputs and cards lose definition
Saturated colors in data dashboards	Everything competes and the view feels stressful

A Good Token Mindset

Do this:

define roles like text-primary, surface-subtle, border-strong, action-primary
map visual decisions to reusable tokens
test in dark mode only after the base semantic model is solid

Avoid this:

blue-500 as the product's only “system”
one-off color fixes per page
ad hoc font sizes added to solve local layout issues

Example Token Set

:root {
  --font-size-body: 1rem;
  --font-size-h2: 1.75rem;
  --line-height-body: 1.6;

  --surface-page: #0b1020;
  --surface-card: #121932;
  --text-primary: #f8fafc;
  --text-muted: #b6c2d9;
  --border-subtle: #27314f;
  --action-primary: #5b8cff;
  --action-primary-hover: #7aa0ff;
  --status-danger: #ff6b6b;
  --status-success: #22c55e;
}

This works better than page-specific values because it lets UI roles stay consistent across dashboards, forms, pricing pages, and settings screens.

Readability Review

Ask of every screen:

Can I scan the heading structure quickly?
Is body copy comfortable for sustained reading?
Does the color system explain meaning or just decorate?
Is the primary action visually distinct without being garish?