Font Pairing by Vibe

11: Brutalist, Editorial, Fintech, Fitness, Food & cafe, Kids brand, Luxury, Minimal, Retro, Tech startup, Wedding. Pick one at the top of the tool; the page link updates (for example ?v=brutalist-vibe) so you can bookmark or share that exact view.

A run of text is roughly characters x font-size x average advance wide, so the size that fills a container is container width divided by (character count x advance). A 20-character headline in a 1200px container at 0.6em advance lands at 100px. It then recomputes the size once tracking is applied, because tracking adds a gap between every pair of glyphs.

Aim for 45 to 75 characters per line, with about 66 as the classic target for a single column of continuous text — the guideline set out in Bringhurst's The Elements of Typographic Style. Below 45 the eye changes lines too often; above 75 it struggles to find the start of the next line. At 16 px body text that is roughly 360 px to 600 px of column width, because running lowercase text averages about half an em per character.

Any UI face with true tabular figures and a distinguishable zero — Inter, IBM Plex Sans, Roboto and Source Sans 3 all qualify. The decisive feature is not the shape of the letters but whether the digits share an advance width and whether 0 can be told apart from O.

Condensed grotesques carry the most impact per pixel: Oswald, Bebas Neue, Barlow Condensed, Teko and Anton. Pair them with a normal-width sans such as Roboto, Inter, Barlow or Open Sans so schedules and pricing stay readable.

Around 10 to 11 pt for body text read at arm's length in normal restaurant lighting, rising toward 11 to 12 pt in a very dim room. Below about 9 pt guests start holding the menu at an angle to catch the light.

It depends on distance more than age band. Using the 1/150 ratio for early readers, a tablet held at 400 mm needs an x-height of about 2.7 mm — roughly 20 px in a font with a 0.49 x-height ratio. A poster read from three metres needs around 150 px.

Negative, and more so as the size grows. A practical rule is to remove about 0.0005em for every pixel above 16 px, so a 64 px headline sits near -0.024em and a 96 px one near -0.03em, which is a sensible floor.

Seventies graphics leaned on rounded geometric display faces and heavy slabs; the eighties moved to inline neon scripts, squared technical sans and bitmap arcade faces. On Google Fonts the closest open equivalents are Righteous, Alfa Slab One and Pacifico for the seventies, and Monoton, Orbitron and Press Start 2P for the eighties.

16px is the common floor for UI body text because it is the browser default root size and stays readable without zoom on a phone. Below about 14px, long-form reading becomes tiring; labels and captions can sit at 12–13px if they are short and high contrast.