Typography Tips That Make AI Pages Look Designed

TLDR: The quickest tell of an AI-built page is the typography, and it is the cheapest thing to fix. Give the model a real type system: a clear size scale, a deliberate font pairing with a job for each face, line-height that lets the text breathe, and a capped line length around 60 to 75 characters. Below are the specific moves, the numbers that matter, and copy-paste prompts that hand the AI a type system instead of hoping it invents one. When the page reads the way you want, publish it as a live link so people see the real type, not a screenshot.

You can usually spot an AI-generated page in about a second, and most of the time it is the typography giving it away. Not the layout, not the colors, the type. One flat sans-serif doing every job, headings barely larger than body text, lines of text running the full width of a wide screen, and line-height set so tight the paragraphs feel cramped. None of it is broken. All of it is default.

Typography is the layer a reader feels before they read a single word. Good type reads as care and competence. Careless type reads as fast and generic, even to people who could never tell you why. That is exactly why fixing the type does more for the perceived quality of an AI page than a new hero image or another gradient ever will. And you do not need to be a designer to fix it. You need the vocabulary to direct one, and a model that will write the CSS for you.

Why does AI typography come out so generic?

When your prompt says nothing about type, the model picks the choices least likely to look wrong. That means system-ui or a single Google sans-serif, applied everywhere. It means a size scale so compressed that an h2 is only a hair bigger than a paragraph. It means line-height around 1.4 for everything, headings and body alike, and body text that stretches edge to edge because no one told it to stop.

Every one of those is a safe default, and safe defaults average out to forgettable. The model is not making a mistake. It is guessing at the middle of everything it has seen, because you did not give it a point of view. Design direction is what turns the average into a decision, and typography is the highest-leverage place to start. If you have read how to make AI pages look less generic, think of this as the deep dive on the single lever that matters most.

The four typography moves that matter most

You do not need thirty rules. You need four, in roughly this order of impact.

Move 1: set a real type scale

A type scale is the set of sizes your text uses, and the ratio between them. The generic AI look comes from a flat scale, where a heading is 20px and body is 16px and nothing feels like a hierarchy. A designed page uses a clear ratio, so each step up is a noticeable jump.

Pick a ratio and multiply. A 1.25 ratio (the “major third”) is a safe, versatile choice. Starting from a 16px body, that gives you roughly 16, 20, 25, 31, 39, 49px as you climb. The jumps are obvious, so a reader’s eye instantly knows what is a heading, what is a subhead, and what is body. Here is the difference a scale makes:

The words are identical in both. Only the sizing changed, and the second one already looks like someone decided.

Prompt line to use: “Use a modular type scale with a 1.25 ratio from a 16px base. Make headings clearly larger than body text, with an obvious jump at each level.”

Move 2: pair two fonts, and give each a job

The fastest upgrade from default is a deliberate font pairing. Not five fonts, two. One face for headings that carries some personality, and one highly readable face for body text. The contrast between them is what makes a page feel art-directed instead of automatic.

You do not have to guess at pairings. A few combinations are reliable on the web, load fast, and rarely clash. Name real fonts in your prompt, because if you only say “use a nice font pairing,” the model tends to fall back to system-ui for both and you are back to default.

Any single row is a complete answer. If you want the safest possible choice, one well-set family across weights (the Inter row) still beats the default, because the intent shows.

Prompt line to use: “Use Fraunces for headings and Inter for body text, loaded from Google Fonts. Give headings weight 600 to 700 and body weight 400. Do not use system-ui as the primary font.”

Move 3: cap the line length

This one is invisible until you know it, and then you see it everywhere. Body text that runs the full width of a wide screen is genuinely hard to read, because the eye loses its place jumping back to the start of each long line. The fix is a maximum line length, called the measure, of roughly 60 to 75 characters. That is usually a max-width of about 65 characters or 34rem on the text container.

Headings can run wider, and single-column marketing sections can too, but body copy should almost always sit in a capped column. It is one line of CSS and it changes how readable the whole page feels.

Prompt line to use: “Constrain body paragraphs to a maximum line length of about 66 characters (roughly 34rem) so text stays easy to read on wide screens. Center the text column within the section.”

Move 4: give the type room to breathe

The last move is spacing, and it splits in two. Line-height (the space between lines) and letter-spacing (the space between letters).

For line-height, body text wants room, around 1.5 to 1.65. Headings want the opposite, tighter, around 1.1 to 1.25, so a two-line headline reads as one unit instead of two loose rows. The generic AI page uses one line-height for everything, usually somewhere in the middle, which serves neither. Split them.

Letter-spacing is a smaller lever, but a good one. Large display headings often look better with slightly negative tracking, and short all-caps labels (like eyebrow text above a heading) look far better with positive tracking of about 1 to 2px. That single touch on your labels is a quiet signal that someone was paying attention.

Prompt line to use: “Set body line-height to 1.6 and heading line-height to 1.15. Add 1.5px letter-spacing to any all-caps labels, and slightly tighten tracking on large display headings.”

A copy-paste prompt that hands the AI a full type system

Each move above works on its own, but the real win is giving the AI the whole system at once, up front, and telling it to apply the system everywhere. Paste this into Claude or ChatGPT, adjust the fonts and mood to taste, and you will get output that looks set rather than generated. It pairs well with the patterns in AI prompts that produce a page worth sharing.

Build this as a single self-contained HTML file with all CSS inlined and no
external dependencies except Google Fonts.

Apply this exact type system throughout and do not deviate from it:

- Fonts: Fraunces for all headings, Inter for all body text and UI. Load both
  from Google Fonts. Never fall back to system-ui as the primary font.
- Type scale: modular scale, 1.25 ratio, 16px base. Sizes: 16 / 20 / 25 / 31 /
  39 / 49px. Body is 16px. Use the larger sizes for headings so hierarchy is
  obvious at a glance.
- Weights: headings 600 to 700, body 400, with 600 for emphasis. No thin weights.
- Line length: cap body paragraphs at about 66 characters (max-width around
  34rem) and center the text column.
- Line-height: 1.6 for body, 1.15 for headings.
- Letter-spacing: 1.5px on any all-caps eyebrow labels, slightly negative on
  display headings above 32px.
- Spacing: generous vertical rhythm, at least 1.5x the body line-height between
  sections. Do not crowd elements.

Reuse this system on every element. Do not introduce new fonts, sizes, or
line-heights outside the scale.

If a draft still looks off, do not start over. Tell the model exactly what to change in type terms: “increase the jump between the h1 and h2,” “the body measure is too wide, cap it near 66 characters,” “add more line-height to the paragraphs.” Directing revisions in the right vocabulary is most of the skill, and iterating on an AI page is far faster than regenerating from scratch.

Common typography mistakes to tell the AI to avoid

A short list of the things that quietly cheapen a page. You can paste these as “do not do” rules.

• Too many fonts. Two is a system. Four is a ransom note. Cap it at two families.
• Not enough contrast between sizes. If your headings are barely bigger than body text, the page has no rhythm. Widen the scale.
• Full-width body text. Always cap the measure. This is the single most common miss.
• Gray-on-gray body text. Light gray text on white looks “designy” but fails readability. Keep body text dark enough to read comfortably, and check the mobile view where contrast matters even more.
• All-caps for long text. All-caps is fine for a short label. A full paragraph in caps is slow to read. Reserve it for eyebrows and small labels.
• Fake bold and fake italic. Ask the model to load the real weights and styles from the font, not synthesize them, so the type stays crisp.

Publish the page so people see the real type

Here is the part that undoes all of this work if you get it wrong: how you share the finished page. Screenshot it and every choice you just made gets flattened into a static image, often re-compressed and blurry, with the web fonts baked in at one size. Send the raw HTML file and half the time the fonts fail to load on the other person’s machine and they see a fallback that looks nothing like what you built. Your careful type system deserves to arrive intact.

The clean answer is to publish the page as a live link. That is what VisiblePage does. You paste your self-contained HTML, or drop a ZIP of a multi-file project, and you get a live URL immediately, with no build step, toolchain, or domain setup. The real page loads for the recipient exactly as you designed it, fonts and all, served fast from the edge so the type renders crisply on any screen. Every button, hover, and animation keeps working, because they are getting the actual page and not a picture of it. You can keep the page public, make it private, or password-protect it for a client, and because the link is canonical, when you tweak the type and republish, everyone who has the link sees the update, no “final_v2.zip” required.

Try it now: Publish your AI-generated HTML with VisiblePage and get a live link in seconds.

Frequently asked questions

Why does typography make AI pages look generic? Because a vague prompt leaves the model to pick its safest defaults: one system sans-serif at one or two sizes, tight measure, and heavy line-height. Those choices are readable but characterless. Type is the layer readers feel first, even when they cannot name it, so fixing the scale, the pairing, and the spacing does more for perceived quality than almost any other single change.

What is the fastest typography fix for an AI-generated page? Set a real type scale and cap the line length. Ask for a clear jump between heading and body sizes, roughly a 1.25 to 1.333 ratio, and constrain body text to about 60 to 75 characters per line. Those two moves alone pull a page from wall-of-text to something that reads like it was set by a person.

Do I need to know design to direct the AI on type? No. You need the vocabulary, not the craft. You do not write the CSS. You describe the outcome: a bigger jump between headings and body, a serif for headings and a sans for body, more line-height, a narrower measure. The model turns those words into code, and you judge the result.

Which fonts should I ask an AI to use? Ask for a pairing with a job for each face: one for headings with some personality, one highly readable face for body. Reliable web pairings include Fraunces or Playfair with Inter, Space Grotesk with IBM Plex Sans, or a single well-set family like Inter or Source Serif used across weights. Name real fonts so the model does not default to system-ui everywhere.

How do I keep the typography consistent across the whole page? Give the AI a small type system up front and tell it to reuse it everywhere: two font families, a fixed scale of four or five sizes, one body line-height, one heading line-height, and a max line length. A defined system is what separates a designed page from a stack of nicely styled sections.