Characterful fonts

Pick a face with a point of view, not Inter, Roboto or Arial.

From frontend-design: avoid Arial and Inter; never converge on Space Grotesk.

Same hero, different face

Type a headline and switch faces. Only the typeface changes.

DefaultsBad
Generic

Issue 14 · Autumn

A field guide to renting, furnishing and living well in under thirty square metres.

CharacterfulGood
Generic

Issue 14 · Autumn

A field guide to renting, furnishing and living well in under thirty square metres.

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --display: "Fraunces", "Iowan Old Style", Palatino, serif;
}
.hero-title {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  letter-spacing: -0.02em;
}

Blind test

Pick the card that already feels like a brand.

Convergence

Pick a tone and press Generate five times.

Safe pick every timeBad

Press Generate

    distinct: 0 / 0
    Matched to toneGood

    Press Generate

      distinct: 0 / 0
      const POOLS = {
  luxury:    ["Bodoni Moda", "DM Serif Display", "Cinzel", "Instrument Serif"],
  brutalist: ["Bricolage Grotesque", "Zilla Slab", "Barlow Condensed"],
  technical: ["IBM Plex Mono", "Syne", "Barlow Condensed"],
};
function pickFace(tone, recent) {
  const pool = POOLS[tone];
  const fresh = pool.filter((f) => !recent.includes(f));
  const from = fresh.length ? fresh : pool.filter((f) => f !== recent[0]);
  return from[Math.floor(Math.random() * from.length)];
}

      Why it matters, pros and cons

      Why it matters

      Type is the largest surface on most screens; the face signals intent first.

      Pros

      • Identity without extra layout or color
      • Sets tone instantly
      • Separates you from template output

      Cons

      • Webfonts cost bytes and can shift layout
      • Display faces fail at small sizes
      • Dense app shells can use system-ui on purpose