Your portfolio can have stunning work, but if the text feels flat, cluttered, or hard to scan, visitors leave before they see what you've made. Font hierarchy is the system that tells people what to read first, what matters next, and what's supporting detail. For a personal portfolio, this matters because you only get a few seconds to guide someone through your story. The right type decisions make your name, your headline, and your project descriptions land the way they should.

What does font hierarchy actually mean on a portfolio site?

Font hierarchy is the visual ranking of text elements using size, weight, style, and spacing. It creates an order of importance so a visitor's eye moves naturally from your name to your tagline, from a project title to the description beneath it. Think of it as a map. Without it, everything on the page screams at the same volume.

A basic font hierarchy for a personal portfolio usually includes these levels:

  • Level 1 Name or hero headline: The largest, boldest text. Often 36–60px on desktop.
  • Level 2 Section headings: "About Me," "Projects," "Contact." Usually 24–32px.
  • Level 3 Project titles or subheadings: 18–24px, often semi-bold.
  • Level 4 Body text: Descriptions, bios, case study paragraphs. 14–18px in a readable weight.
  • Level 5 Captions and metadata: Dates, tags, tools used. Smallest, often 12–14px in a lighter weight.

The spacing between these levels should feel intentional. A 2px difference between a heading and body text won't register. A clear jump like 32px heading next to 16px body creates rhythm that people feel even if they don't notice it consciously.

Why do portfolio visitors care about how text is sized and styled?

Most people visiting your portfolio aren't reading word by word. They're scanning. Eye-tracking studies from the Nielsen Norman Group show that users follow an F-pattern on text-heavy pages, reading the top line fully, then scanning down the left side. Good hierarchy works with this behavior instead of against it.

When heading sizes are clearly distinct from body copy, a recruiter scanning your portfolio in 30 seconds can still pick up your name, your specialty, and two or three project names. That's enough to decide whether to keep looking. Without that structure, everything blends into a wall of text and they bounce.

Font hierarchy also signals professionalism. A designer, developer, photographer, or writer who shows attention to type details on their own site sends a message: I care about craft. Clients and hiring managers notice this even when they can't name what's working.

How many fonts should you use on a portfolio site?

Two. Maybe three if you have a good reason.

One font for headings and one for body text is the sweet spot for most personal portfolios. This pairing gives you enough contrast to create hierarchy without visual chaos. If you add a third say, a monospace font for code snippets on a developer portfolio make sure it earns its place.

Common pairings that work well:

If you're unsure about which fonts go together, you can look at specific font pairing rules for portfolio sites to understand what makes combinations feel balanced rather than random.

What font sizes should you set for each hierarchy level?

There's no single correct number, but these ranges are a reliable starting point for desktop:

  1. Hero headline / your name: 40–60px, bold or extra-bold weight
  2. Section headings: 28–36px, semi-bold or bold
  3. Subheadings / project titles: 20–24px, medium or semi-bold
  4. Body text: 16–18px, regular weight, line-height of 1.5–1.7
  5. Captions / labels / dates: 12–14px, regular or light weight, sometimes uppercase with letter-spacing

On mobile, scale everything down proportionally. Your hero headline might drop from 48px to 32px. Body text should stay at 16px minimum anything smaller strains the eyes on a phone screen.

A ratio of about 1.25 to 1.5 between levels usually works. If your body text is 16px, your subheading could be 20–24px, your section heading 28–36px, and so on. This is similar to modular scale typography, where each level multiplies by a consistent factor.

How do you use font weight and style to create hierarchy without changing size?

Size isn't the only tool. Weight (thickness), style (italic or regular), and case (uppercase vs. sentence case) all contribute to hierarchy.

For example, you might set a section heading at 24px bold and a project title at 24px regular. Same size, different weight the bold one reads as more important. Or you could keep both at 18px regular but make one uppercase with added letter-spacing. That shift in treatment creates separation without adding another font size to manage.

This matters because too many font sizes can make a page feel disorganized. Using two or three sizes combined with weight and style variations keeps things clean. The body of a creative portfolio benefits from restraint here let your work be the loudest element on the page, not your type.

Understanding how typography pairing principles work for online portfolios helps you see why weight contrast between your heading and body fonts is just as important as the font choice itself.

What role does spacing play in font hierarchy?

Three kinds of spacing matter:

  • Line height (leading): Body text needs more breathing room (1.5–1.7x the font size). Headings can be tighter (1.1–1.3x).
  • Letter spacing (tracking): Slightly increasing letter spacing on uppercase headings or small caps helps readability. Don't add it to body text it slows down reading.
  • Margin between sections: The gap above a heading should be larger than the gap below it. This connects the heading to the content it introduces, a principle called "proximity" in visual design.

When spacing is inconsistent, hierarchy breaks down even if your sizes and weights are correct. A 32px heading with 12px of space above it feels crammed. The same heading with 48px above it feels like the start of something new. Spacing is what gives hierarchy its punctuation.

Should your portfolio use serif or sans-serif fonts?

Both work. What matters is matching the font style to your personal brand and industry expectations.

  • Sans-serif fonts (like Helvetica, Montserrat, Lato) feel modern, clean, and tech-forward. They're the default choice for designers, developers, and UX professionals.
  • Serif fonts (like Georgia, Merriweather, Playfair Display) feel traditional, editorial, and refined. Writers, photographers, and architects often lean toward them.
  • A mix of both creates natural contrast between headings and body. A serif heading with sans-serif body (or vice versa) is one of the easiest ways to build visible hierarchy.

The wrong choice is picking a font only because it looks trendy. If you're a data scientist with a minimal portfolio, a decorative display font for your headings sends a mixed message. If you're a wedding photographer, a hard geometric sans might feel cold. Match the type to the tone of your work. You can explore more options with font combination rules for creative portfolios to see how different styles interact.

What common mistakes do people make with font hierarchy on portfolios?

  • Using too many font sizes. Five or six different sizes on one page creates noise, not order. Stick to three or four levels and use weight/style for additional variation.
  • Making body text too small. Anything below 14px for main content is hard to read, especially on mobile. 16px is the safe minimum.
  • Ignoring mobile scaling. Your hierarchy might look perfect on a 1440px screen but collapse on a 375px phone. Always test on real devices or at least resize your browser.
  • Setting all headings to the same size as the body text. If the only difference between a heading and a paragraph is that one is bold, the hierarchy is too subtle. Size creates the strongest visual cue.
  • Choosing decorative fonts for body copy. Script, display, and handwritten fonts work for a logo or a hero phrase. In long paragraphs, they destroy readability.
  • Forgetting about contrast. Light gray text on a white background might look elegant in a mockup, but it fails accessibility standards and frustrates real users.

How do you apply font hierarchy in a real portfolio layout?

Here's a practical breakdown of how hierarchy works in each section of a typical portfolio:

Hero section

Your name or headline is the largest text on the page. Use your heading font at 40–56px in bold. Below it, a short tagline in your body font at 18–20px, regular weight. The size gap between these two elements should be obvious at a glance.

About section

Section title ("About Me" or "Hi, I'm Alex") at your Level 2 size. The bio paragraph below in your body font. If you include a subtitle or callout line something like "Currently building at [Company]" style it at Level 3 with a lighter weight or muted color.

Projects grid or list

Each project title is Level 3 (20–24px, semi-bold). The short description under each is Level 4 body text. Tags like "Branding," "UI/UX," "2024" are Level 5 small, lighter, sometimes uppercase with letter-spacing.

Contact section

Keep it simple. A heading at Level 2, a short sentence at Level 4, and your email or social links styled clearly. Don't let the contact section feel like an afterthought it should have the same typographic discipline as the rest of the page.

How do you test if your font hierarchy is actually working?

Do the squint test. Literally squint at your page until the text blurs. Can you still tell which elements are headings and which are body text? If yes, your hierarchy is doing its job. If everything blurs into the same shade of gray, you need more contrast in size, weight, or spacing.

Another method: ask someone unfamiliar with your portfolio to find your project descriptions in under 10 seconds. If they struggle, your hierarchy isn't guiding the eye effectively.

You can also use browser tools to check your font sizes systematically. Right-click any text element, inspect it, and note the computed font-size, font-weight, and line-height. Write these down for every level on your page. If the numbers are too close together (like 16px body and 18px heading), increase the gap.

Quick checklist before you publish your portfolio

  • ✓ You have at most 3 distinct font sizes for hierarchy (plus weight/style variations)
  • ✓ Body text is at least 16px with 1.5+ line height
  • ✓ Headings are visibly larger and/or bolder than the text below them
  • ✓ You're using 2 fonts maximum (or 3 with clear purpose)
  • ✓ Spacing above headings is larger than spacing below them
  • ✓ Text passes contrast checks against the background (4.5:1 minimum for body text)
  • ✓ Font sizes scale down appropriately on mobile screens
  • ✓ Decorative fonts are limited to display text only, never body paragraphs
  • ✓ You've tested the squint test and the 10-second navigation test with a real person

Next step: Open your portfolio right now, resize your browser to 375px wide, and check every heading and paragraph. If any section feels like the text levels blend together, increase the size gap by 4–8px on the heading and add 20–40px more margin above it. Small adjustments in hierarchy create big improvements in how professional and intentional your site feels.

Try It Free