Visual & UI Architecture
Ratios in Graphic, Web, & UI Design
Visual hierarchy, typographic harmony, and responsive digital media layouts depend on mathematical ratios.
1. Responsive Display Aspect Ratios
In modern web and video design, maintaining the correct width-to-height ratio prevents distortion (stretching or letterboxing):
🖥️ 16 : 9 (Widescreen Video)
Standard for 1920×1080 (1080p), 2560×1440 (1440p), and 3840×2160 (4K UHD). Decimal multiplier = 1.778.
📱 9 : 16 (Vertical Mobile)
Standard for TikTok, Instagram Stories, and YouTube Shorts (1080×1920). Decimal multiplier = 0.5625.
2. Modular Typography Scales
Designers calculate font sizes using a fixed geometric multiplier ratio rather than arbitrary numbers:
Major Third Scale (Ratio 1 : 1.25)
- Body Text (Base): 16 px
- H4 (16 × 1.25): 20 px
- H3 (20 × 1.25): 25 px
- H2 (25 × 1.25): 31.25 px
- H1 (31.25 × 1.25): ~39 px