Compare letterforms, spacing, and detail across screen and print.
Stroke contrast is the thick stem of o divided by its thin top. Aperture is the opening of c as a share of x-height. Larger openings stay distinct from o and e when the letter is blurred, small, or over-inked. Weight is the ink coverage inside the bounding box of n.
Thresholds follow Legge & Bigelow (2011), who found reading speed is maximal across a wide "fluent range" of x-heights from roughly 0.2° to 2° of visual angle. The same 16 px is a different physical size on every device; the x-height ratio then decides how much of it is actually the letter.
One CSS pixel is one device pixel, so a 16 px letter has about 8 pixels of x-height to work with. Hairlines thinner than a pixel are either dropped or smeared to grey by anti-aliasing; diagonals stair-step.
Favour low stroke contrast, large x-height, open apertures, and sturdy joins. Didones and light weights suffer most.
Two or more device pixels per CSS pixel, so the same 16 px letter is the same physical size but drawn with four times the pixels. Thin strokes and serifs render faithfully; the pixel grid stops being a design constraint.
High-contrast and finely detailed faces become viable at text sizes; what limits them now is size and distance, not resolution.
Resolution is no longer the problem; physical size is. Text is small, held close, and often read in glare or motion. Bringing it closer enlarges the visual angle, which is why 16 px on a phone can read like 20 px on a laptop.
Watch line length and tracking rather than resolution; slightly looser spacing helps at small physical sizes.
Ink stays on the surface with little dot gain, so the printed letter matches the design: crisp hairlines, sharp serifs, true blacks. The price is specular glare: under a point light source the page mirrors the lamp and type vanishes.
Best for high-contrast display faces and photography; tiring for long reading in mixed lighting.
Ink spreads slightly into the fibre (dot gain), thickening every stroke and closing small counters and apertures. Whiteness is lower and show-through from the reverse side raises the visual noise floor.
Choose faces with open apertures and moderate contrast, drawn with a little extra "air"; many book faces were designed for exactly this.
Heavy dot gain, grey paper, and strong show-through. Fine details are lost, so newspaper faces enlarge x-height, stiffen joins, and keep apertures wide. Ink traps, notches cut into the design, absorb the spread.
Test on the actual stock: a browser preview cannot show gain, gloss, or the room's light.
Large-format print at 150 to 300 dpi on coated stock, read standing. Resolution is ample; distance sets the size: comfortable reading at 2 m needs an x-height of about 10 mm, headlines several times that.
Favour bold weights, open apertures and generous tracking; foyer and street lighting flatten thin strokes, and hierarchy must work across a room.
Rebuild this page as a Tringle wireframe — organize the structure, don't transcribe it.
Source: https://tringle.uk/inspire/crumpled
Ignore Tringle's own chrome: "← Inspire", "Rebuild this page in Tringle Studio", "Copy prompt",
"New here?", "Show the prompt". The page's own footer ("Part of the Tringle Inspire collection…"
+ the Legge & Bigelow reference) is page content — keep it.
Using the tringle-studio MCP server:
1. create_project named "Type & Distance" — required. Note its revision and activePageId.
2. replace_wireframe ONCE with that revision/activePageId, building everything in one call.
Never run it against a project you didn't just create; it writes directly and would
overwrite whatever's active.
Build the repeated "typeface picker" (a small square swatch, a label, and a dropdown) once as a
part (kind "part", e.g. id "part_typeface"), then place it three times via partRefs (Typeface A
reference, B, C).
Spatial guidance:
- A study page: a black folio strip with the page name "Type & Distance" set small,
uppercase and light on the left and a small white wordmark on the right (a media element,
mediaDescription "Founderie wordmark, white hand-drawn letters with a red dot"), a faint
rule under it, the strip and the hero below forming one continuous dark band; then
a hero block filling the rest of the first screen: one large media element (mediaType
"video", mediaDescription "Looping background video of letterforms, light paper-like
footage, 8 to 15 s") with a two-line lede in its bottom-left corner. The studio below
starts under the fold.
- Two-column body. Left column, narrow (~300 of 1440): one bordered control panel that stays
put while the page scrolls — an eyebrow "Compare", the three typeface pickers, a "Weight"
slider with its value on the right, a row with a quiet "Reset" button and a filled
"Copy report" button, and a small status line.
- Right column, wide: a five-tab bar ("Anatomy & media", "Overlay" current, "Alignment",
"Viewing conditions", "Similar characters") with a hairline under it. Build ONLY the Overlay tab's
content: one bordered stage card with a heading row ("Overlay" + a short muted caption),
a toolbar row on the card's grid (a "Sample" text input and two two-segment toggles
"Nominal size | x-height", "Letter by letter | Natural spacing") with a hairline
under it,
a band holding four stacked lines of the sample text "Illegal Rhythm 1l0O" — one line per
typeface, each labelled with a swatch, its name, a small "Size" slider and a small "Track"
(letter-spacing) slider, rendered in plain ink at full size, followed by a fourth "overlap" line
where all three are superimposed in their tint colours — and a
legend row of three swatch + name entries; then a second card, "Measured proportions", holding a
7-column table (Typeface, x-height, Cap height, Ascender / descender, Stroke contrast,
Aperture of c, Weight, Width of n) with three rows and a muted explanatory paragraph.
- One consistent gutter/margin size throughout, not a bespoke gap each time.
Colour, not media: the three overlaid layers are cyan, magenta and yellow on the source, but
Tringle is grayscale-only — tell the layers apart by their labels and, if you like, a tone
difference, never by hue. The overlaid sample is text, not media.
Constraints:
- kinds: box, text, headline, button, media, input, line, list, annotation, ellipse, slider,
progress, dropdown, icon, table, figure
- every element needs a non-empty label; flat integer x/y/width/height, no nesting
- page <= 2400x5000; use 1440x900, viewportHeight 900, extend height for scroll
- grayscale only — tone is a shade within that, not a color
Check the validation report the call returns (organization/hierarchy/spacing/overlap) and fix
anything it flags before you're done.