Master spacing
About this idea
Learn the principles of spacing in design - the invisible framework that makes layouts readable and visually appealing. Proper spacing (whitespace, margins, padding, line-height) transforms cluttered designs into clean, professional work. Master spacing to improve typography, web design, and visual communication.
How to get started
understanding spacing basics (30 minutes)
- Learn whitespace: Negative space isn't empty - it guides the eye and creates hierarchy
- Study the 8-point grid system: Design using multiples of 8px for consistent spacing (8, 16, 24, 32px)
- Understand spacing types: Margin (outside), padding (inside), line-height (text spacing), letter-spacing
- Watch 'Spacing in Design' by The Futur (youtube.com/@thefutur) - visual examples of good vs bad spacing
practical application (1 hour)
- Analyze good designs: Study websites, apps, posters - notice how spacing creates breathing room
- Practice in design tool: Use Figma (free) or Canva - create simple layouts with consistent spacing
- Apply 8-point grid: Set up guides, align elements to grid, notice how it creates harmony
- Compare before/after: Take a cluttered design, add proper spacing, see the transformation
common spacing rules (30 minutes)
- Text spacing: Line-height 1.5-1.8x font size for readability, paragraph spacing 1.5-2x line-height
- Element spacing: Related items closer (8-16px), unrelated items further (24-32px)
- Edge spacing: Consistent margins around content (16-24px minimum on mobile, 32-48px on desktop)
- Visual hierarchy: More space around important elements draws attention