Compare Pricing Page Typography and Spacing
Compare pricing page examples by type scale, font roles, card spacing, and plan density, then turn the observations into a practical design checklist.
compare pricing page typography and spacing
Contents
- [Use the same inspection checklist](#use-the-same-inspection-checklist)
- [Compare typography as a hierarchy](#compare-typography-as-a-hierarchy)
- [Measure spacing by relationships](#measure-spacing-by-relationships)
- [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)
To compare pricing page typography and spacing, inspect the same elements in each example: the headline, plan names, prices, descriptions, feature lists, buttons, and gaps between cards. Start by deciding whether the page feels editorial and spacious, compact and product-led, or somewhere between those two approaches.
Use the same inspection checklist
For every pricing page, record these details in a simple table:
| Area | What to compare |
|---|---|
| Page title | Font family, size, weight, line height, width, and distance from the intro text |
| Plan names | Case, weight, size, and spacing above the price |
| Prices | Numeral size, weight, baseline alignment, and supporting billing text |
| Feature lists | Body size, line height, bullet or icon treatment, and row gaps |
| Buttons | Label size, weight, height, padding, and distance from the list |
| Cards | Width, internal padding, border treatment, radius, and gap between cards |
| Sections | Space between the hero, pricing grid, comparison content, and FAQ |
Use the same viewport and zoom for each reference. Otherwise, a page with a wider capture can appear more generous even when its underlying spacing is similar.
Open the examples below and compare the first screen before borrowing a pattern. The HeroUI Pro and Linear pricing references give you two useful starting points, while the captured Linear type results show a system built around Inter Variable with Berkeley Mono and Tiempos Headline as supporting choices.
Captured pages
Fonts captured on linear.app
- Inter Variable
Weight 400
- Berkeley Mono
- Tiempos Headline
Compare typography as a hierarchy
Pricing pages work when visitors can scan the offer in the right order. Check whether the type hierarchy makes this sequence obvious:
- What is this pricing page about?
- Which plan is relevant to me?
- How much does it cost?
- What do I get?
- What should I do next?
A practical hierarchy usually gives the largest contrast to the page title and price, medium contrast to plan names and section labels, and restrained styling to supporting copy. Do not compare font size alone. A smaller typeface with a tighter line height can occupy less vertical space than a larger face with generous leading, and heavier weights can make a plan card feel denser without changing its dimensions.
When a pricing page uses more than one family, assign each role deliberately. A sans serif can handle interface labels and feature lists, a mono face can signal technical or usage details, and an editorial face can add emphasis to a campaign or headline. The Linear capture is an example of this kind of multi-role typography; treat it as an observed reference, not a rule to copy.
Measure spacing by relationships
Instead of asking whether a card has "good spacing," compare relationships:
- Is the price closer to the plan name or to the billing note?
- Does the feature list begin at the same height in every card?
- Are buttons aligned even when descriptions have different lengths?
- Is the gap between cards smaller than the gap between the grid and the next section?
- Does mobile spacing preserve hierarchy, or simply shrink every value?
A strong pricing grid often repeats a small set of spacing steps. For example, you might choose one small gap for label-to-value relationships, one medium gap for content groups, and one large gap for sections. The exact values should follow your layout and type metrics. Consistency matters more than a fashionable number.
Turn the comparison into a build brief
After inspecting the references, write a short brief before coding:
- Page title: family, size, weight, line height, and maximum width.
- Plan cards: minimum width, gap, padding, border, radius, and emphasis state.
- Price block: numeral treatment, billing suffix, and vertical alignment.
- Feature list: row height, icon size, and list spacing.
- Actions: button height, label treatment, and alignment rule.
- Responsive behavior: when cards stack, what stays aligned, and which spacing steps change.
Then review the result at desktop and mobile widths. If the cards feel crowded, reduce secondary copy or increase card padding before shrinking the type. If the page feels empty, tighten section gaps only after checking whether the headline or descriptions are too short.
Use this in your AI agent
> Compare the HeroUI Pro and Linear pricing references for typography and spacing. Create a table covering headline, plan names, prices, feature lists, buttons, card padding, card gaps, and section gaps. Identify the visible hierarchy, note the observed font roles, and turn the comparison into a responsive pricing-page design brief without inventing measurements that are not visible.
How should I compare pricing page spacing on mobile versus desktop?
Compare mobile and desktop as two versions of the same hierarchy, not as scaled copies. First check whether the page title still has a clear maximum width and whether the intro-to-grid gap remains larger than ordinary text spacing. Then inspect the cards in order: card padding, plan name to price gap, price to billing note gap, feature-row spacing, and button position.
On desktop, cards often rely on shared columns and aligned actions. On mobile, those alignments may disappear when cards stack. Check whether each card still has a predictable rhythm and whether the most important plan remains easy to identify without excessive decoration.
Use a short record for each width: viewport, card width, horizontal padding, vertical padding, gap between cards, title line height, price size, list row height, and button height. You do not need perfect pixel values to make a useful comparison. Relative observations such as "the mobile card gap is close to the feature-row gap" can expose a weak hierarchy.
If the mobile page feels too long, remove repetition before reducing legibility. Shorten descriptions, combine repeated billing notes, or move supporting details below the main decision. Keep the price, plan name, core benefits, and action visually distinct.
What should I ask an AI agent to turn pricing page references into CSS tokens?
Ask for an evidence-based token draft rather than a complete redesign. The agent should separate observed details from proposed values, because a screenshot or captured reference can show relationships more reliably than exact source tokens.
A useful prompt should request these groups:
- Typography: families, roles, sizes, weights, line heights, and letter spacing.
- Spacing: small, medium, large, card padding, grid gap, and section gap.
- Components: card radius, border, button height, button padding, and list row spacing.
- Responsive rules: stacking breakpoint, mobile padding, and changes to heading width.
- Confidence: mark each item as directly observed, reasonably inferred, or a suggested starting value.
Also ask the agent to preserve a clear mapping between roles and tokens. For example, --pricing-title-size is more useful than an unexplained list of numbers. Have it return CSS variables plus a small usage example for the pricing grid, then review the result at both widths.
Use this wording: "Inspect the supplied pricing references. Extract only visible typography and spacing relationships, propose clearly labeled starting tokens where exact values are unavailable, and return CSS variables for page title, plan card, price block, feature list, buttons, grid gap, card padding, and responsive section spacing."