Skip to content
Sign in

BlogDesign Engineering

How to improve typography in AI-generated websites

By Attuna · · 4 min read

Typography in AI-generated websites usually fails in the same few ways: a common default typeface, too many near-identical sizes, weak contrast between heading and body, body text set too wide or too tight, and headlines that break badly. You can fix most of it with five decisions made up front: a typeface choice with a reason, a short type scale, rules for line length and line height, a weight system, and how headings wrap. Then make the agent use only those.

What generated typography usually gets wrong

  • Default typefaces. Anthropic’s guidance on frontend design notes that models gravitate to overused fonts unless told otherwise.
  • Too many sizes. Each component picks a size that looks right locally, and the page ends up with nine.
  • Hierarchy by size only. Everything important gets bigger, so nothing stands out.
  • Long lines. Body text spans the container on wide screens.
  • Unbalanced headlines. A single word stranded on the last line of a hero heading.

1. Choose typefaces for a reason

Pick type for the product’s character, not because it’s familiar. A product UI often needs one highly legible family with a good range of weights and tabular figures; an editorial or marketing page can carry a more distinctive display face. Write the reason down, so the agent knows what to preserve:

Prompt
Typography direction: one sans family for the product UI (needs
tabular figures and 400/500/600 weights). Headings on marketing pages
use [display face] for an editorial feel; never use it in the app.
Don't introduce any other typeface.

Anthropic’s frontend design article found that naming fonts to avoid improves results straight away. Naming the fonts to use is even more direct.

2. Set a short type scale

A scale is a small, closed set of sizes with consistent steps. Five to seven sizes cover most products. Define each with its line height, and make them the only sizes available. With Tailwind v4, that means redefining the --text-* namespace; the tested setup is in design tokens for AI coding agents.

Type scale
caption   12 / 16    metadata, labels
body-sm   14 / 20    product UI body
body      16 / 24    reading text
title     20 / 28    section titles
heading   28 / 34    page titles
display   clamp(36px, 5vw, 56px) / 1.05   marketing headlines

3. Control line length and line height

Long lines are tiring to read. Butterick’s Practical Typography recommends an average line length of 45 to 90 characters, including spaces. In CSS, the ch unit makes this easy to express:

CSS
.prose {
  max-width: 68ch;
  line-height: 1.6;
}

h1, h2 {
  line-height: 1.1;
}

Larger text needs tighter line height; long-form body text needs more. Generated CSS often applies one line height everywhere.

4. Build hierarchy with weight and colour first

Before adding a size, try weight and colour. A heading at the body size in a heavier weight, with secondary text in a muted colour, often reads better than three sizes. Limit weights to two or three, and give each a job. Check contrast for muted text: WCAG 2.2’s contrast minimum is 4.5:1 for normal text and 3:1 for large text.

5. Fix how headings and paragraphs wrap

CSS now handles two common problems. text-wrap: balance evens out line lengths in short blocks such as headings, and text-wrap: pretty avoids a single word on the last line of a paragraph. Both are described on MDN’s text-wrap page.

CSS
h1, h2, h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

6. Tune tracking at the extremes

Large display text usually looks better slightly tightened; small uppercase labels usually need a little extra spacing. Body text should be left as the type designer set it. Generated code tends to do the opposite: nothing at large sizes, and tracking applied to body text.

7. Load fonts properly

Font loading affects both quality and performance. In Next.js, next/font self-hosts fonts with your other static assets, so the browser doesn’t request them from a third party. Elsewhere, set font-display deliberately and load only the weights you use. Five weights “just in case” cost every visitor.

A typography pass prompt

Prompt
Typography pass on [page]. Don't change layout or colours.
1. List every distinct text style (size, weight, line height,
   tracking, colour) and where it's used.
2. Map each to our scale; merge anything that isn't on it.
3. Body text: max-width around 68ch, line-height 1.6.
4. Headings: text-wrap: balance; paragraphs: text-wrap: pretty.
5. Check muted text contrast is at least 4.5:1.
Report the style count before and after, with screenshots.

For the rest of a refinement pass (hierarchy, spacing, states), see how to improve AI-generated UI without rebuilding everything, and for a full page built with these rules, how to build a SaaS landing page with Claude Code.

Keep the decisions

Typography is one of the clearest places where taste shows, and one of the easiest to lose between sessions. Save the references that show the type you’re after, with a note on what to take from each, and write the scale and rules down where every agent reads them. In Attuna, which is in private beta, references can be tagged for typography specifically and attached to a project with its rules, so an agent working on a typography pass can retrieve exactly those.

Sources