design6 min read
Understanding Color Formats: HEX, RGB & HSL
Why screens mix red, green, and blue light, what HEX shorthand really encodes, and when HSL makes your life easier.
Read
design6 min read
Aspect Ratios: Why Proportions Matter in Video, Photo, and Design
An aspect ratio is the proportional relationship between width and height. It determines the shape of every screen, photo, and video frame you see. Getting it wrong means black bars, stretched images, or cropped faces — which is why designers and developers need to understand how ratios work.
What Is an Aspect Ratio?
An aspect ratio is expressed as width : height in their simplest whole numbers. A 1920x1080 screen simplifies to 16:9 because both numbers divide evenly by 120. The ratio tells you the shape without specifying the size — a 16:9 screen could be 5 inches or 65 inches.
The math to simplify: divide both dimensions by their Greatest Common Divisor (GCD). For 1920 and 1080, the GCD is 120, giving 16:9.
Decimal ratio: You can also express ratios as a single decimal number by dividing width by height. 16:9 = 1.778. This form is useful for quick comparisons — higher numbers mean wider, lower numbers mean taller.
Common Aspect Ratios and Where They Come From
16:9 — The Modern Standard
Used by virtually all TVs, monitors, and web video since the mid-2000s. It was chosen as a mathematical compromise between the old TV ratio (4:3) and widescreen cinema (2.35:1). Common resolutions: 1280x720 (HD), 1920x1080 (Full HD), 3840x2160 (4K).
4:3 — The Classic
The original TV and computer monitor ratio. Still used for iPad screens, many document formats, and presentation slides. Common resolutions: 640x480, 1024x768, 2048x1536.
1:1 — The Square
Instagram popularized the square format for social media. It takes up maximum space in mobile feeds because phones are tall and narrow. Common sizes: 1080x1080, 2048x2048.
9:16 — Vertical Video
TikTok, Instagram Reels, YouTube Shorts — vertical video is 16:9 rotated 90 degrees. Common resolution: 1080x1920.
21:9 — Ultrawide
Used by ultrawide monitors and cinematic content. Approximates the 2.35:1 anamorphic widescreen ratio used in Hollywood films. Common resolutions: 2560x1080, 3440x1440.
Proportional Scaling
The key property of aspect ratios: if you know the ratio and one dimension, you can calculate the other. The formula:
- Given width:
height = width x (ratioH / ratioW) - Given height:
width = height x (ratioW / ratioH)
For a 16:9 image scaled to 1280px wide: 1280 x (9/16) = 720px tall.
Why this matters in CSS: The CSS
aspect-ratio property lets browsers maintain proportions automatically. Setting aspect-ratio: 16/9 on a video container means it will always maintain that shape regardless of width — no more black bars or layout shifts.Social Media Aspect Ratio Cheat Sheet
- Instagram Post: 1:1 (1080x1080) or 4:5 (1080x1350)
- Instagram Story / Reels: 9:16 (1080x1920)
- YouTube Thumbnail: 16:9 (1280x720)
- Twitter/X Post: 16:9 (1200x675) or 2:1
- Facebook Cover: ~2.7:1 (820x312)
- LinkedIn Banner: 4:1 (1584x396)
What Happens When Ratios Do Not Match
When content and container have different aspect ratios, three things can happen:
- Letterboxing — black bars on top/bottom (wide content in tall container)
- Pillarboxing — black bars on sides (tall content in wide container)
- Cropping — edges are cut off to fill the container (cover mode)
In CSS, object-fit: contain letterboxes, object-fit: cover crops, and object-fit: fill stretches (usually the wrong choice).
More Articles
design7 min read
CSS Gradients and Design Systems: Building Visual Consistency
CSS gradient types and syntax, repeating gradients, what design systems and tokens are, and how to build a color scale from HSL.
Read
image7 min read
PNG vs JPG vs WebP: When to Use Each Image Format
Lossy vs lossless compression, when transparency matters, and why WebP is replacing both PNG and JPG on the web.
Read