Compare Portfolio Homepage Typography and Spacing

Contents

• [Build a repeatable comparison](#build-a-repeatable-comparison)
• [Inspect the typography system](#inspect-the-typography-system)
• [Inspect spacing and page edges](#inspect-spacing-and-page-edges)
• [Turn observations into a design direction](#turn-observations-into-a-design-direction)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

To compare portfolio homepage typography and spacing, record the hierarchy and the distance between repeated elements, then compare how those choices support the work being shown. Review the hero, navigation, project grid, and footer in the same order across every reference.

Build a repeatable comparison

Use the three portfolio references below as a small study set. Do not try to copy every detail. Make a table with one row per site and columns for:

• Display type: serif, sans serif, monospace, or a combination
• Body type: family, apparent size, weight, and line height
• Hero structure: single line, stacked lines, paragraph, image, or mixed treatment
• Project spacing: card gaps, internal padding, and section separation
• Navigation spacing: logo, links, menu button, and page edges
• Mobile behavior: what remains prominent on a narrow screen

Open the examples and compare the first screen before borrowing a pattern. A portfolio homepage usually works when the typography identifies the person or studio quickly and the spacing gives each project enough room to be understood. Record observations separately from recommendations, especially when a capture does not provide exact measurements.

Inspect the typography system

Look at type as a system rather than a collection of isolated headings. Ask whether one family handles navigation, labels, project titles, and descriptions. If a display face is used, check whether it appears only in a few high-impact places or repeats throughout the page.

The supplied Linear typography block lists Inter Variable as the primary sans serif, Berkeley Mono as a supporting monospace face, and Tiempos Headline as an occasional editorial display face. That is contextual evidence about Linear, not evidence about the three portfolio references. It suggests a useful comparison question: does each typeface have a clear job, or are extra styles competing with the work?

For each portfolio reference, check:

1. Scale: Is the hero title clearly larger than project titles and labels?
2. Weight: Does boldness create hierarchy, or is everything heavy?
3. Line length: Can the introduction be read comfortably without becoming a wide block?
4. Line height: Do multi-line headings feel deliberate, or do they look crowded?
5. Consistency: Do repeated project titles and metadata use the same rules?

Record approximate relationships rather than invented pixel values. Notes such as “the hero is much larger than body copy” or “project labels are compact and uppercase” transfer better to a new layout than unsupported exact numbers.

Inspect spacing and page edges

Start with the left and right page margins. Then compare the vertical pattern from navigation to hero, hero to project list, project to project, and project list to footer.

Check these questions:

• Do the logo, headline, images, and footer share an alignment?
• Does the hero have more breathing room than a project card?
• Are card gaps consistent, or do larger gaps mark a new category?
• Is text separated from imagery by a repeatable amount?
• Do section changes use space alone, a rule, a background shift, or a combination?
• Does the mobile layout reduce gaps evenly while keeping important pauses?

If the page feels messy, test spacing before changing the font. Uneven margins and inconsistent card padding often create more visual noise than a slightly different type choice. Also check the narrow layout with real project titles, long descriptions, and a menu state. A pattern that looks balanced with short placeholder text may fail when content wraps.

Turn observations into a design direction

Choose one reference for structure, one for type contrast, and one for pacing only after identifying what each reference actually does. Then write a brief such as: use a quiet sans serif for navigation and project information, introduce a display face only for the opening statement, keep a wide desktop margin, and use smaller but intentional section gaps on mobile.

Before implementation, create three checks: the hero title must remain readable at a glance, project cards must maintain a consistent internal rhythm, and the footer must align with the same page edges as the opening section. Check the page in grayscale or with images temporarily hidden. If the hierarchy still works, typography and spacing are supporting the portfolio rather than depending on decoration.

Use this in your AI agent

> Compare the portfolio homepage references below. Summarize the typography hierarchy, likely type roles, page-edge alignment, section spacing, project-card rhythm, and mobile priorities. Separate observed details from recommendations and avoid unsupported exact measurements. Then propose a compact design direction for my portfolio homepage.

Install Fudge for your AI agent to inspect and compare captured references while you work.

Start with the role each face must play. Choose one dependable family for navigation, project titles, labels, and descriptions. It should remain readable at small sizes and across several weights. Add a contrasting display face only if your portfolio needs a stronger editorial or personal voice.

A practical three-option test is:

• Single sans serif: best when the work, images, or case studies should carry most of the personality.
• Sans serif plus serif: useful when the introduction or project titles need a more editorial tone.
• Sans serif plus monospace: useful for a technical, studio, or process-led portfolio where labels and metadata matter.

Use the supplied Linear typography notes as a reference for role separation, not as a requirement to copy its families. Inter Variable is recorded as the primary sans serif, Berkeley Mono as support, and Tiempos Headline as an occasional display face. The key lesson is restraint: each face should have a job.

Test the pairing with your real content. Write the homepage statement, one project title, a two-sentence description, navigation labels, and a small metadata line. If the hierarchy still reads when everything is shown together, the pairing is doing useful work. If every line competes for attention, remove a style or reduce its weight.

Review the page at desktop and mobile widths, and check the same landmarks each time. Exact measurements are not necessary at first. Consistency and hierarchy matter more than a particular spacing scale.

Page edges

• Does the logo share an alignment with the hero and project grid?
• Do image edges and text blocks use the same main margin?
• Does the footer return to that alignment rather than introducing a new width?

Vertical rhythm

• Is the gap from navigation to hero larger than the gap between a project title and its description?
• Does each project card use the same image-to-text relationship?
• Is the space between projects large enough to separate them without making the page feel empty?
• Are section breaks clear through spacing or another simple visual change?

Responsive behavior

• Does the hero remain readable without awkward line breaks?
• Do cards stack in a predictable order?
• Are mobile margins smaller but still consistent?
• Do navigation labels have enough room to tap or read comfortably?

Write down any exception and its reason. A larger gap before a new category can be intentional; a different card padding value caused by accidental overrides usually is not. Finish by checking the page in grayscale or with images temporarily hidden. If the hierarchy still works, the typography and spacing are supporting the portfolio rather than depending on decoration.

Related questions

• Compare Pricing Page Typography and Spacing
• How to Compare Onboarding Flow Typography and Spacing
• How to Compare SaaS Dashboard Typography and Spacing
• Documentation Page Design Examples for AI Coding Agents