typography slop

A tiny uppercase category label sits above a heading that already says it. The rule: a heading names its section; a label above it must add information the heading does not carry, or it is noise. The cost is real even when it is small: the reader parses two texts to receive one idea, and every section of the page grows a redundant preamble, so nothing stands out anymore.

Metadata and captions set below 12px. The rule: 12px is the floor for any text a reader must actually read, because mono and condensed faces fall apart below it and low-vision readers lose it entirely. The slop is a metadata line at 10px "to make it quiet". Quiet comes from color, not from size: the same line at 12px in zinc-500 recedes just as far and stays legible.

Title, lede and body all set at one size and one color, so the eye has no entry point. The rule: a text block needs at least two visible steps (size or color) between its title and its body, because a reader decides whether to read by scanning the title first. Flat hierarchy costs the scan: every block reads at the same priority, which is the same as having no priority.

A rounded gradient square with an icon, stacked above a heading, repeated per card. The rule: an icon that decorates its own tile before a heading is filler; it adds a shape the reader must parse but no information the heading lacks. It is the fingerprint of generated card grids: every card gets a tile, so every card looks the same, so none is readable as a choice. The cost is vertical space and sameness.

Headlines set in an italic serif "for elegance". The rule: italic display type is harder to read at exactly the sizes display type exists for, and an italic headline plus an upright body is a second family smuggled in through posturing. The cost: the page's loudest text is its least legible, and the pairing reads as a template, not a decision.

A small pill ("new", "v2", "beta") stacked above a hero headline. The rule: a status badge is a property of the thing the headline names, so it belongs on the headline's own line, where the reader meets it in context. Stacked above, it becomes an eyebrow (see the first pattern) and costs a line of the hero's height on every screen.

The hero headline set at 60-80px, wrapping to three lines and pushing every real sentence below the fold. The rule: a headline is sized by how much it must say, not by how much space it can take; at reading widths that means display sizes in the 24-40px range, not the 64px+ of a poster. The cost is measurable: everything the visitor actually needs starts one to two viewports lower.

Display text with letter-spacing tightened past about -0.02em, so letters touch. The rule: tight tracking only pays off on very large, very short all-caps runs, and even there it borrows legibility; on anything set at reading sizes it makes neighboring letters collide. The cost is misreading: "onboarding" reads as "onboa rding" at scan speed.

The whole page set in the same default sans every unconfigured project ships, because choosing a face felt like a decision for later. The rule: the family is part of the page's voice; a deliberate, consistently applied face (even a quiet one) reads as authored, and the default nobody chose reads as template. The cost is not ugliness, it is sameness: the page is indistinguishable from ten thousand others.

Paragraphs (not labels) set in uppercase. The rule: lowercase word shapes are what fast reading uses; uppercase removes the ascenders and descenders that make words recognizable at a glance, so every sentence must be read letter by letter. A short all-caps run works as a label; a sentence of it is a wall. The cost is reading speed, immediately and for every reader.

Body text with letter-spacing stretched apart, usually to look "airy" or "editorial". The rule: wide tracking belongs to tiny uppercase labels, where it keeps small caps from merging; applied to sentence-case prose it breaks the word shapes readers use and drags the eye across gaps between letters that carry no meaning. The cost is slower reading and a page that tries too hard.

Multi-line prose set under about 1.4 line-height, so lines of body text nearly touch. The rule: the eye needs air between lines to find the start of the next one; display sizes can survive 1.1-1.2 because their lines are short, but body text at 14px needs 1.5-1.7. The cost is rereading: on a dense paragraph the eye drops to the same line or skips one.

Body text justified to both margins on a web page. The rule: justification is a print tool that works when a typesetter can adjust every space and hyphenate every word; a browser stretches whatever gaps it has, so lines develop rivers of white that pull the eye down the page instead of across it. The cost is visible on almost any justified paragraph: ragged word spacing that reads as damage.