UI/UX Design Cheat Sheet
This cheat sheet organizes industry standards for web design, relying on the 8-Point Grid System (the global standard for UI) and Accessible Typography guidelines.
1. The Core Typography Scale
Web typography is built on a 16px base (1rem). Avoid using random numbers; stick to a mathematical scale (like "Major Third" or "Perfect Fourth") to ensure harmony.
Desktop (Large Screens)
H1 (Page Title): 48px – 64px (Bold / Extrabold)
H2 (Section Header): 32px – 40px (Bold)
H3 (Sub-section): 24px – 28px (Semi-Bold)
Body Copy: 16px – 18px (Regular)
Small / Caption: 14px (never go below 12px)
Line Height (Leading):
Headings: 1.1 – 1.3 (Tighter spacing for large text)
Body: 1.5 – 1.6 (Looser spacing for readability)
Mobile (Small Screens)
H1: 32px – 40px
H2: 24px – 28px
H3: 20px – 22px
Body Copy: 16px (Do not drop below 16px to prevent iOS zooming)
Line Height: 1.4 – 1.5
2. The 8-Point Spacing System
Professional designers use multiples of 8px for almost all spacing (margins, padding, and gaps). This removes guesswork and makes layouts look "clean."
| Token Size | Value (px) | Use Case |
| XS | 4px | Tight grouping (e.g., icon next to text). |
| S | 8px | Component gaps (e.g., space between button and text). |
| M | 16px | Standard padding inside cards/buttons. |
| L | 24px | Space between unrelated small elements. |
| XL | 32px | Section breaks within a content block. |
| 2XL | 48px | Separation between major groups of content. |
| 3XL | 64px | Section Padding (Top/Bottom of a standard section). |
| 4XL | 96px+ | Hero/Feature Padding (Top/Bottom of major sections). |
3. Layout & Section Spacing Cheat Sheet
Use these standard values to space out your page structures.
Section Padding (Vertical Spacing)
Hero Section: 96px – 128px (Top/Bottom)
Standard Content Section: 64px – 96px (Top/Bottom)
Small Section (e.g., Call to Action bar): 48px (Top/Bottom)
Footer: 48px – 64px (Top/Bottom)
Component Spacing (Horizontal/Vertical gaps)
Cards in a Grid: 24px or 32px gap.
Form Input Fields: 16px or 24px vertical gap.
Buttons: 12px or 16px horizontal gap between two buttons.
Navigation Links: 24px – 32px horizontal space between links.
4. Readability Rules (The "Golden" numbers)
Max Line Length: Keep body text between 50 – 75 characters wide (approx. 600px – 700px max-width). Text wider than this is hard to read.
Hierarchy Rule: H1 should be at least 2x the size of Body text.
Contrast: Ensure text color has a contrast ratio of at least 4.5:1 against the background (Check with a tool like WebAIM).
Quick Reference Table (Rem Units)
Since modern development uses rem (where 1rem = 16px), here is the conversion table to keep handy.
| Pixels | REM | Usage |
| 12px | 0.75rem | Helper text / Copyright |
| 14px | 0.875rem | Meta data / Captions |
| 16px | 1rem | Standard Body Text |
| 18px | 1.125rem | Large Body / Intro text |
| 20px | 1.25rem | H4 / Sub-sub-headings |
| 24px | 1.5rem | H3 / Card Titles |
| 30/32px | 1.875rem | H2 / Section Titles |
| 36/40px | 2.25rem | H1 (Mobile) |
| 48px | 3rem | H1 (Desktop) |
| 64px | 4rem | Hero Titles |
5. Tools & Systems to Bookmark
Material Design Type Scale: Google's official system for type sizing.
Type Scale (typescale.com): A visual calculator to generate these sizes automatically.
Tailwind CSS Spacing: The most popular utility class system that uses the 4pt/8pt grid by default.
Recommendation: If you are building a new site, start by setting your Body to 16px and your Section Padding to 64px. These two numbers alone will fix 80% of layout "clutter" issues.