UX design guide
UX color and typography: how to make design decisions that work
Color and typography are the foundation of visual design. Learn the principles behind good color choices, type scales, contrast ratios, and how to apply them in your UX work.
Why color and typography matter in UX
Before users read a single word, they react to color and type. Color communicates brand, urgency, and hierarchy. Typography affects readability, credibility, and comprehension.
Both are invisible when done right — and glaring when done wrong.
Color fundamentals
Five terms every designer needs before picking a single color.
Building a product color palette
Every product palette has three categories.
Primary
Your brand color. Used on CTAs, links, interactive elements.
Neutral (grayscale)
For text, backgrounds, borders. Most of your palette.
Semantic
Green = success, Red = error, Yellow = warning, Blue = info. Never use these for decoration.
The shade scale rule
Use 8–10 tints/shades per color (50, 100, 200, 300, 400, 500, 600, 700, 800, 900). Never add random colors — extend your existing palette.
Contrast and accessibility
Color choices that fail contrast requirements exclude real users.
Typography fundamentals
Typeface category shapes the emotional register of your product.
Type scale
Use a modular scale — not random sizes. Common ratios: 1.25 (minor third) or 1.5 (perfect fifth).
Example scale at 1.25 ratio with 16px base. Label each size by semantic role — not raw numbers.
Readability rules
Type size is the starting point. These four rules determine whether your text is actually readable.
Next step
Build UX design skills
Color and typography are two tools. UX design combines dozens more. See what it takes to build a career as a UX/UI designer.
Explore UX/UI designer path