Typography and Spacing for AI Websites: A Practical Checklist

Give type a clear set of jobs

Start with a page title, section headings, body copy, and a small supporting style for metadata. Make the difference between these roles obvious through size, weight, and spacing. Do not add a new text style every time a component needs emphasis.

Choose a heading font that suits the product’s tone and a body treatment that remains comfortable across longer passages. A compact sans-serif can support a confident interface; an expressive serif can suit an editorial story. Neither makes a page premium by itself. Review the font’s license before serving it or using it in exported assets.

Use a real website reference to study the relationship between headline size and supporting text. Describe that relationship in your brief instead of treating the font name as a complete design direction.

Design with the copy you actually have

Replace placeholder titles early. A short example headline may fit on one line while your actual offer needs three. Review where the lines break and whether the action still appears at a useful point in the opening.

For longer reading, constrain the text column so the eye does not travel across the entire desktop. Let image galleries or data surfaces use more width when their task benefits from it. A blog article, a reference grid, and a scheduling table do not all need the same text measure.

Avoid clipping useful information just to preserve a card’s dimensions. If you truncate a title, provide an accessible route to the full name. If a label routinely wraps awkwardly, revise its container or wording before shrinking the font.

Use a small spacing scale

Choose a repeatable set of spacing values. For example, a project might start with 4, 8, 12, 16, 24, 32, and 48 CSS pixels. This is a practical starting point, not an accessibility standard or a universal formula.

Use a small gap between a label and the thing it describes. Use a larger gap between separate groups. A heading should usually feel more closely attached to the content below it than to the previous section. Those relationships help a reader understand the page before reading every sentence.

When an AI-generated page feels strangely loose, check repeated margins and container padding. A section’s bottom padding plus the next section’s top padding may be creating more distance than either component suggests in isolation.

Check contrast where text is actually drawn

Small, pale labels can disappear against warm backgrounds or screenshots. Measure the foreground and background combination used by the text. For gradients and image overlays, check the lowest-contrast area behind the label.

WCAG’s minimum text-contrast criterion generally calls for 4.5:1 for ordinary text and 3:1 for large text, with defined exceptions. The large-text category has a specific definition; simply calling something a heading does not qualify it. See the W3C contrast guidance for the details.

Test light and dark themes separately. A color token that works on cream may not work on a dark brown surface. Also inspect focus outlines, placeholder text, and secondary actions rather than checking only the main headline.

Review the narrow layout and zoom

Start with a narrow phone layout, then check tablet and desktop widths. Navigation and controls should remain reachable, text should not overlap, and the page should not require horizontal scrolling for ordinary reading. Complex tables and diagrams need an intentional treatment rather than an accidental overflow.

The W3C reflow guidance explains the accessibility requirement and its exceptions. A few device screenshots are useful checks, but they do not establish full accessibility compliance. Test zoom and keyboard use in the actual implementation.

Ask for a focused revision

A useful revision request names the problem and the relationship to fix:

Keep the existing content and actions. Reduce the headline size on phones, give the body copy a comfortable reading width, and use consistent gaps between headings and their sections. Check long titles, keyboard focus, and both themes.

Compare the revision against real examples and the original task. If you need a way to collect and explain those examples, follow the mood-board-to-brief workflow. Good taste becomes easier to apply when the feedback is specific enough to verify.