# How to Compare Onboarding Flow Typography and Spacing [Open the live Fudge conversation](https://design.withfudge.com/share/compare-onboarding-flow-typography-and-spacing) Last updated: 2026-08-25 The most useful way to compare onboarding flow typography and spacing is to map the complete journey first, then compare the hierarchy, repeated gaps, controls, and content density at every stage. This prevents one attractive screen from hiding a difficult transition elsewhere. ## Start with the flow, not one screen List the visible stages in each example: entry point, setup questions, progress or navigation, main form content, confirmation, and the next recommended action. For each stage, record what stays fixed and what changes. A stable frame can make a long flow feel calm. A changing layout can make each stage feel more distinct. Neither is automatically better. The choice should support the user's task. The Paddle onboarding and Vellum AI references are useful examples to inspect. The supplied captures do not prove the exact typography or spacing used throughout every step, so treat them as references rather than measured specifications. Use a simple review table with one row per stage and these columns: - Main task and primary action - Heading, body, label, option, and feedback roles - Content width and side margins - Repeated vertical gaps - Control height and internal padding - Navigation and progress placement - Mobile changes - Observed, estimated, or unknown Score each stage for findability, effort, rhythm, and confidence. Can the user tell what this step does immediately? Can they see the next action without scanning a crowded page? Does the spacing connect this step to the previous and next one? Do labels, helper text, and feedback appear next to the decision they support? ## Captured pages [![Paddle onboarding](https://pin.fontofweb.com/6754?format=jpg)](https://design.withfudge.com/share/pin-6754) [Paddle onboarding](https://design.withfudge.com/share/pin-6754) [![Vellum AI](https://pin.fontofweb.com/1413?format=jpg)](https://design.withfudge.com/share/pin-1413) [Vellum AI](https://design.withfudge.com/share/pin-1413) ## Fonts captured on linear.app - **Inter Variable** โ€” weight 400 ยท Primary sans serif in the captured Linear typography system. - **Berkeley Mono** โ€” Supporting monospace typeface in the captured system. - **Tiempos Headline** โ€” An occasional editorial display face in the captured system. ## Compare typography across stages Compare the title for the current step, explanatory copy, field labels, option labels, progress information, button labels, and feedback messages. The key question is whether the hierarchy remains stable while the content changes. Keep the title and primary action predictable, then allow supporting text and option treatments to vary within a clear system. If every step uses a different heading size or button style, users must relearn the interface. If every element has the same emphasis, the next action becomes hard to find. Check line length and line height when the amount of explanation changes. A short question may need less vertical space than a screen with helper text and validation. Compare whether each explanation stays close to the control it describes and whether the primary action remains visible without unnecessary scrolling. The supplied Linear typography block records Inter Variable as a primary sans serif, Berkeley Mono as a supporting monospace face, and Tiempos Headline as an occasional editorial face. These are observations about Linear, not verified specifications for Paddle or Vellum AI. Use them only to form questions about type roles. Inspect each onboarding reference separately before assigning a family, size, or weight. ## Compare spacing as a repeated journey Record the space between the step label and title, title and explanation, explanation and fields, fields and choices, and final control and navigation. Repeat the same checks on later screens. Look for deliberate changes. A welcome screen may use more open space than a dense setup form. A review screen may group related answers tightly while separating the final confirmation. Those changes help when they signal a new task. They hurt when they come from inconsistent component rules. Also inspect the horizontal structure: - Content column width and side margins - Alignment of labels, fields, and actions - Gaps between option cards - Placement of Back and Continue - Progress indicator position and emphasis - Behavior when labels wrap or errors appear A stable content edge often makes a multi-step flow easier even when the content changes substantially. Test the longest realistic labels and an error state before deciding that a spacing pattern works. ## Turn the comparison into a buildable decision Choose the stronger pattern by asking three questions: Does each step have one obvious job? Does the hierarchy survive longer copy and validation messages? Can users understand where they are and what happens next without hunting? Then write a short recommendation with three parts: keep, change, and test. For example, keep the stable content frame, change crowded option spacing, and test whether a quieter progress treatment improves focus. This produces a useful direction without pretending that screenshots provide exact measurements. ## Use this in your AI agent > Compare the captured Paddle onboarding and Vellum AI references as onboarding flows. Inspect each visible stage for type roles, content width, repeated vertical spacing, control sizing, navigation placement, progress cues, and content density. Separate observed details from estimates, identify where the two flows use different rhythms, and recommend a reusable onboarding structure. Use the captured Linear font notes only as contextual reference, not as evidence about Paddle or Vellum AI. [Install Fudge for your AI agent](/mcp) to inspect the references and build a stage-by-stage comparison. --- Keep the outer frame stable and let the inner content adapt. Define a consistent content column, title position, main action area, and spacing between major groups. Within that frame, allow a short question to use less space than a screen with several options or helper messages. Use a small set of relationships rather than forcing every screen to have the same total height. Keep label-to-control spacing consistent, use one larger gap between related groups, and reserve the strongest separation for the final action or a change in task. If a step needs more explanation, shorten the copy or allow the page to grow before shrinking type below a comfortable reading size. Review the flow with the longest realistic labels and an error state. If the action jumps unpredictably, keep its placement anchored or use a clear bottom action area. Compare the Paddle and Vellum AI examples for frame stability, but verify exact measurements from the captured screens before implementation. --- Record the details that affect both comprehension and implementation: - The purpose of each stage and its main action. - Heading, body, label, option, navigation, and feedback roles. - Approximate type size, weight, line height, and maximum line length. - Content column width and side margins. - Repeated gaps between titles, explanations, controls, and actions. - Control height, internal padding, option-card spacing, and button width. - Whether Back, Continue, Skip, or Finish actions stay predictable. - How progress is shown and how much visual emphasis it receives. - What happens when copy wraps, an error appears, or a choice is selected. - Which observations are measured, estimated, or still unverified. End with a short recommendation: keep, change, or test. This turns visual review into a buildable decision instead of a collection of screenshots. ## Related questions - [Compare Portfolio Homepage Typography and Spacing](/share/compare-portfolio-homepage-typography-and-spacing) - [How to Compare Login Page Typography and Spacing](/share/compare-login-page-typography-and-spacing) - [How to Compare SaaS Dashboard Typography and Spacing](/share/compare-saas-dashboard-typography-and-spacing) - [Checkout Page Design Examples for AI Coding Agents](/share/checkout-page-design-examples-for-ai-coding-agents)