A ratio compares two or more quantities by showing their relative sizes. Write it as a:b, a/b, a decimal, or a percentage. In interface work, ratios turn a visual relationship—such as width to height or one column to another—into a rule that can scale consistently. section 1.4.3 section 1.2.3
Keep video thumbnails proportional
An aspect ratio compares width with height. A 16:9 thumbnail has 16 units of width for every 9 units of height, so preserving that relationship prevents distortion even as the thumbnail changes size. section 1.4.3
.video-thumbnail {
aspect-ratio: 16 / 9;
}
Use CSS aspect-ratio to state the width-to-height relationship directly instead of calculating a fixed height. section 1.4.3
Ratios support several repeatable UI decisions:
- Divide Grid columns in a 3:2:1 relationship with fractional units. section 1.4.3
- Build a modular type scale by repeatedly multiplying or dividing a base font size by one scaling factor. section 8.3.1
- Choose smaller type-scale ratios for subtler hierarchy and larger ratios for more dramatic size changes. section 8.3.2
- Express responsive behavior as relationships between an element, its parent, and changing screen width. section 6.1.2
For a modular scale, start with base size B and scaling factor F. The size at step n is Sₙ = B × Fⁿ: positive steps grow above the base, while negative steps shrink below it. With B = 20px and F = 1.5, the next steps are 24px, 36px, and 67.5px. section 8.3.1
Make a type scale adjustable
Store a base size and ratio in CSS custom properties. Multiply successive larger steps and divide for smaller ones. Changing either variable updates the related font sizes; a golden-ratio value of about 1.618 produces especially dramatic contrast between steps. section 8.3.3 section 8.5
Map slider position to a value
A slider converts a pointer offset into a progress ratio: offsetX divided by track width yields a value from 0 to 1. Multiply that progress by the target range, add its minimum, and round if needed. This maps the same track to brightness, saturation, or contrast values. section 13.2.1
Ratios also describe interaction scaling. For pinch zoom, divide the current distance between two touches by their starting distance to get a scale factor, then clamp that factor to keep the result within useful bounds. section 13.1.2
