Guides

The reference tables tell you what a number is. These take a position on which one to pick — and show the arithmetic behind it.

9 guides

Decisions, not lookups

Every other page here gives you a number. These take a position on which number to choose — with the arithmetic shown, so you can disagree on the reasoning rather than on the facts.

Grid column count 12 Twelve, unless you can name the reason it should not be. Here is what each count actually buys you. Design canvas width 1440 px One canvas for the file, three widths for the review. The canvas matters less than what you check afterwards. Breakpoint strategy 4 steps Four is usually enough. The hard part is not how many — it is refusing to name them after devices. Retina assets @1x + @2x Export @2x. Ship @1x and @2x. Reach for @3x only when the asset is small and the edges are hard. Safe areas env( ) Two lines of CSS and one meta tag. The failures all come from skipping the meta tag or hard-coding the number. px, rem or em rem One rule per property, not one rule for everything. The interesting cases are the exceptions. Aspect ratios in CSS aspect-ratio Choosing the ratio is the easy part. Deciding what gets cropped is the design decision. Print specs 300 PPI One formula, three habits to unlearn. Most of the confusion comes from a unit that means two different things. Device mode limits 100svh The width is trustworthy. The height, the fonts, the scrollbar and the touch behaviour are not.

Start with the reference

If you came for a specific measurement rather than an opinion, the data lives here:

Device screen sizes CSS breakpoints Aspect ratios Unit converter Print sizes Grid system

Questions

How are these guides different from the reference tables?

The reference pages answer "what is the number". These answer "which number should I pick, and why". Every figure in them is still computed from the same data — the difference is that a guide takes a position, and a table cannot.

Are the numbers in the guides kept up to date?

They are generated from the same device, framework and ratio data as the rest of the site at build time. When a device row or a framework version is corrected, the prose that quotes it changes with it. The editorial judgements are reviewed separately — each guide carries its own review date.

Guides are written and reviewed by hand; the figures inside them are computed from this site's source data at build time. See methodology.