from-an-image.md

Reading a screenshot

The method for a screenshot, where the answer is a reconstruction rather than a reading. Which property lands in which bucket:

You do not know the capture's scale. A screenshot may be at 1×, 2×, or browser zoom, so a measured 30px could be 15pt of type or 30. Never report a px size or spacing from an image alone.

One exception. Where the image contains text you can identify as body copy, assume 16px and express everything as a multiple of it. Say you did, since the assumption may be wrong.

Colors, which are the reliable part

Sample the actual pixels rather than describing what you see. Then hand the values to better-colors:

• Convert each to OKLCH, so lightness is comparable across hues.
• Sort by lightness to see whether the samples form a ramp and whether steps sit denser at the light end.
• Check hue constancy across the ramp. A drifting hue means someone picked the ramp by eye.
• Measure contrast on every foreground and background pair you can isolate. It is exact and the most valuable single number an image gives you.
• Watch for a tinted neutral. A gray carrying a few percent of the accent hue is a deliberate choice worth naming.

Type, by category not by name

You cannot identify a typeface from a screenshot with confidence, so never claim one. You can read its category and features, which is what transfers:

• Category: geometric sans, grotesque, humanist, transitional serif, slab. Say which and why.
• Tells worth naming: single or double-storey a and g, terminal angle, aperture, x-height against cap height. Also whether the digits are lining or old-style and whether the figures look tabular.
• Scale: count the distinct sizes. Express them as multiples of the body size and derive the ratio.
• Weight contrast: how many weights and how far apart. Two weights three steps apart reads deliberate, four weights one step apart accidental.
• Measure: count characters on a full line of body copy and compare against better-typography's 60 to 75 range.

Where the actual face matters, name the category and suggest identifying it from the live page.

Spacing, as a rhythm

Measure in the image, then divide everything by the smallest repeated gap. That quotient set is the rhythm, and it survives not knowing the scale.

Then check the ratio better-layout owns, the gap between groups against the gap within one. At or above 2, space is carrying the grouping. Below that, something else is, usually a border or a background shape.

Say what the image hid

Close by naming what a screenshot could not show, since that is where the reader would otherwise assume you looked:

• Hover, focus, active, disabled, loading, empty and error states.
• Whether anything animates and how.
• Behavior at any other width.
• Whether it is keyboard reachable and whether focus is visible.
• The other appearance, light or dark.

Where any of these matter to the reader's question, say that a live URL would answer it and this image cannot.