A Complete Guide to Website Color and Typography: Design Fundamentals for the Web

Color and typography shape how visitors perceive and use your website. Poor contrast hurts readability and accessibility. Inconsistent fonts feel unprofessional. A thoughtful color palette and typographic system create clarity, hierarchy, and brand identity. This guide covers the fundamentals: color theory for the web, contrast and accessibility, typography choices, and how to build a cohesive visual system.

Color on the Web

Color Models

Web colors use hex (#RRGGBB), RGB, or HSL. Hex is common in CSS. HSL is useful for creating variations—adjust lightness for hover states or shades. Use a consistent format across your stylesheet.

Palette Structure

A typical palette includes: primary (brand color), secondary (accent), neutrals (backgrounds, text), and semantic colors (success, error, warning). Limit the palette—3–5 main colors plus neutrals. Too many colors feel chaotic.

Brand Alignment

Colors should support your brand. Professional services often use blues or neutrals. Creative brands may use bolder palettes. Consider industry norms and audience expectations. Consistency across the site reinforces identity.

Contrast and Accessibility

WCAG Requirements

Text needs sufficient contrast against its background. WCAG AA requires 4.5:1 for normal text, 3:1 for large text. AAA is stricter: 7:1 and 4.5:1. Use tools like WebAIM Contrast Checker to verify. Gray text on light gray fails—darken text or lighten background.

Beyond Text

Buttons, icons, and interactive elements need contrast too. Focus states must be visible. Don't rely on color alone to convey meaning—some users are color blind. Use icons, labels, or patterns as well.

Typography Basics

Font Categories

Serif fonts (e.g. Georgia, Merriweather) suit long-form content. Sans-serif (e.g. Inter, DM Sans) are common for UI and body text. Display fonts are for headlines only. Choose readable fonts—novelty fonts often sacrifice legibility.

Font Pairing

Pair a headline font with a body font. Contrast helps: a bold display font with a clean sans-serif, or a serif with a neutral sans. Avoid pairing similar fonts—they compete. Two fonts are usually enough; three max.

Web Fonts

Google Fonts, Adobe Fonts, and self-hosted options. Consider performance—each font adds weight. Subset fonts when possible. Use font-display: swap to avoid invisible text while loading.

Type Scale

Establish a type scale for consistency. Common ratios: 1.25 (Major Third), 1.333 (Perfect Fourth), 1.5 (Perfect Fifth). Define sizes for h1–h6, body, small, and caption. Use the same scale across the site. Relative units (rem, em) scale with user preferences.

Line Length and Spacing

Optimal line length for body text is 45–75 characters. Too long strains the eye; too short feels choppy. Line height: 1.5–1.75 for body text. Adequate spacing between paragraphs and sections improves readability.

Dark Mode

If you support dark mode, adjust colors—not just invert. Backgrounds should be dark but not pure black. Text should be light but not pure white. Reduce saturation for some colors. Test contrast in both modes.

Common Pitfalls

• Low contrast—Light gray on white is hard to read. Meet WCAG minimums.
• Too many fonts—More than 2–3 fonts feels disjointed.
• Inconsistent scale—Random font sizes lack hierarchy. Use a defined scale.
• Ignoring system fonts—system-ui and similar give native, fast-rendering fallbacks.

Getting Started

Start with a small palette: primary, secondary, and neutrals. Check contrast for all text. Choose one or two fonts and define a type scale. Apply consistently. Use CSS variables for colors and sizes—they make updates easier. Test on real devices and with different user settings. Color and typography are foundational—get them right and the rest of the design falls into place.