How to Compare Waitlist Page Typography and Spacing

Contents

• [Start with the first screen](#start-with-the-first-screen)
• [Compare typography before spacing](#compare-typography-before-spacing)
• [Measure the spacing rhythm](#measure-the-spacing-rhythm)
• [Turn the comparison into a build brief](#turn-the-comparison-into-a-build-brief)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

The fastest way to compare waitlist pages is to review the same five areas in the same order: headline scale, text width, form spacing, section spacing, and visual emphasis. Use the examples below as references, then record what repeats across them instead of copying one page at a time.

Start with the first screen

Compare only the opening view first. For each page, note:

1. How many lines the headline uses.
2. How wide the headline and supporting copy are.
3. How much space separates the copy from the email field.
4. Whether the form looks like the main action or one element among many.
5. How much of the next section is visible below the form.

The AdSimple waitlist reference is a tall, focused example. Geniestudio and Sunflower give you wider compositions to compare against. Do not treat their different aspect ratios as a direct quality ranking. Use them to study how the first screen changes when the layout has more horizontal room.

Choose a compact, centered structure when joining the list is the only important action. Choose a wider layout when the page also needs product context, imagery, or supporting links. The key comparison is how clearly each layout connects the promise to the signup action.

Compare typography before spacing

Typography controls the apparent size of the page. Start with the headline, then check the supporting paragraph and form label or button text.

For each reference, ask:

• Does the headline feel compact and dense, or open and editorial?
• Is the supporting copy narrow enough to scan in one or two short lines?
• Does the form text look quieter than the headline?
• Are the button label and field text easy to distinguish from surrounding copy?
• Does the page rely on one type family, or introduce a display face for emphasis?

The captured Linear typography example lists Inter Variable as its primary sans serif, Berkeley Mono as a supporting monospace face, and Tiempos Headline as an occasional editorial display face. Those observations can help you test hierarchy, but they do not prove that any waitlist reference uses the same fonts. Verify the actual family from the relevant capture before adopting it.

A practical starting hierarchy is one strong display size for the headline, a restrained body size for the explanation, and a readable control size for the form. Adjust line height before adding more font weights. Loose line height can make a short waitlist message feel unnecessarily tall.

Measure the spacing rhythm

Use the form as your anchor. Record the vertical distance from headline to paragraph, paragraph to field, field to button, and form to the next visible section. Look for a repeated rhythm rather than isolated values.

Label each relationship tight, balanced, generous, or disconnected. Tight spacing can create urgency but may feel cramped. Generous spacing can feel calm but may weaken the relationship between the promise and the signup form. If the field and button feel like separate objects, reduce their gap before changing the entire layout.

Check horizontal alignment too. The headline, paragraph, and form should usually share a clear edge or center line. Small alignment changes are often more noticeable than small padding changes.

Turn the comparison into a build brief

Write the result as a short brief:

• Layout: centered or wide.
• Headline: target line count and maximum width.
• Body: target line count and contrast level.
• Form: field and button relationship.
• Rhythm: tight, balanced, or generous.
• Secondary content: visible in the opening view or moved lower.

Compare each opening view at a narrow and wide viewport. A layout that feels balanced in a tall capture may become too sparse on a laptop. A wide composition may force the form too far from the headline on mobile. Record the change, then choose values that preserve the same hierarchy at both sizes.

Use this in your AI agent

> Compare the waitlist page references below by headline typography, supporting-copy width, form spacing, alignment, and section rhythm. Separate observations from recommendations, identify repeated patterns, and produce a concise implementation brief with responsive checks for narrow and wide screens. Do not assume a font or spacing value unless it is visibly supported by the references.

Install Fudge for your AI agent to continue this comparison with your own saved page references.

Use the same comparison points at both widths, but judge relationships rather than expecting identical measurements.

On mobile, check headline line length, supporting-copy readability, and whether the email field and button are large enough without crowding. The form may need to stack vertically. Keep the gap between the promise and form intentional so the action does not look detached.

On desktop, check whether the content column becomes too wide or the empty space overwhelms the message. A centered column often benefits from a maximum width, while a wider reference may use a second visual or supporting block. Compare where the first secondary section begins. If it starts far below the form, the page may feel unfinished on large screens.

Record mobile line count, mobile form arrangement, desktop content width, desktop empty space, and the point where secondary content enters. Then choose spacing values that preserve the same hierarchy at both sizes.

Use this checklist in order:

• Can a visitor understand the offer from the headline alone?
• Does the headline use a controlled line length?
• Is the supporting copy shorter and quieter than the headline?
• Is the email field visually connected to the submit button?
• Is the form close enough to the promise to feel like the natural next step?
• Do the headline, paragraph, and form share a clear alignment edge or center line?
• Is the contrast between primary text, supporting text, and controls easy to follow?
• Does the opening view contain enough context without burying the form?
• Does the page remain balanced at narrow and wide widths?
• Are the largest spacing gaps intentional?

For each item, mark pass, revise, or uncertain. For uncertain items, compare two references side by side and describe the visible difference before choosing a direction. Finish with a brief covering type hierarchy, content width, form layout, spacing rhythm, and responsive behavior.

Related questions

• Documentation Page Design Examples for AI Coding Agents
• How to Compare SaaS Landing Page Typography and Spacing
• Find Checkout Page References by Color and Layout
• Compare Portfolio Homepage Typography and Spacing