How to Pick the Right Fonts for Your Industry

This post walks through a simple, practical process. Then it shows how to lock everything into a reusable system using Breakdance’s Global Typography.

1. Two fonts is enough

Most beginner sites use four or five fonts. Most professional sites use two. Sometimes one.

Two roles to fill:

• Body font. The workhorse. Paragraphs, lists, captions, form labels, button text. Has to be readable at 16-18px, in long runs of text, on phones. Personality is fine but readability comes first.
• Heading font. The personality. Page titles, section headings, hero text. Shows up in short bursts at large sizes, so it can carry more character.

Same two fonts run the whole site.

The one-font option

You can also skip the second font entirely. Pick a font with a strong weight range and let weight do the work: regular for body, bold for headings. Stripe, Linear, and Vercel all do this. Many sites you think use multiple fonts actually use one, with weight carrying the contrast.

Single-font systems are the simplest typography setup that works. Worth considering before you go hunting for a pair.

2. How to pick the pair

Two rules for picking the pair.

1. Contrast in style, not in chaos

The two fonts should look different enough that the eye knows when it’s reading a heading vs body. A clean sans pairs with a serif. A serif pairs with a confident sans. The two should still look like they belong in the same decade.

If the fonts look too similar, the contrast disappears and the hierarchy fails. If they look too different (script with grotesque, decorative with technical), the page feels chaotic.

2. Match the brand’s adjective list

Same five-adjective exercise you ran for color: calm, premium, playful, energetic, distinctive. The fonts should land on the same descriptors as the brand.

A few starting points:

• Calm and professional: Inter or Manrope for body; Playfair Display or Lora for headings
• Modern and technical: Inter or Space Grotesk for both (one font, weight does the work)
• Editorial and considered: Source Serif or Merriweather for body; Inter for headings
• Warm and approachable: Nunito Sans for body; Fraunces for headings
• Bold and distinctive: Space Grotesk for headings; Inter for body

Read the candidates at real sizes

A serif that looks elegant at 64px can look spindly at 16px. Always view candidate fonts at the sizes they’ll appear at on the site. Mock up a paragraph, a heading, and a button, then look at all three together.

Where to start if you’re stuck

• fontpair.co shows pairings already proven to work, with live previews.
• Google Fonts suggests pairings on every font’s page.
• Open three sites you admire, inspect the font stack, copy the approach. If they only use one font, that’s your hint.

3. Type scale: the math that makes headings feel right

You’ve picked the fonts. Headings still look slightly off. Why?

Because heading sizes were chosen by guess. H1 is 48px because that felt big. H2 is 32px because that felt smaller. H3 is 24px because, sure. None of these relate to each other or to body text. The eye notices.

A type scale fixes this. It’s a single ratio that determines how each heading size relates to body text. Pick the ratio once, generate all six heading sizes from it, stop guessing.

Common ratios

• 1.200 (minor third): subtle, calm. Good for editorial and content-heavy sites.
• 1.250 (major third): the safe default. Works for most marketing sites.
• 1.333 (perfect fourth): noticeable jump between levels. Good for landing pages.
• 1.414 (augmented fourth): dramatic. Bold landing pages and hero-driven sites.

A worked example

Body 16px, ratio 1.250:

• Body: 16px
• H6: 20px
• H5: 25px
• H4: 31px
• H3: 39px
• H2: 49px
• H1: 61px

Every step up is 1.25 times the one below it. Each level looks deliberately bigger than the next, never accidental.

Mobile

Heading sizes usually scale down on mobile. A 61px H1 looks great on desktop and looks shouty at the same size on a 375px phone. Breakdance’s responsive controls let you adjust each heading size per device without rewriting the scale.

A safe approach: keep body at 16-18px on every device. Scale H1-H3 down on mobile by 20-30%. Leave H4-H6 alone.

Tools

• typescale.com for a live preview of any ratio.
• modularscale.com for a deeper calculator.

Both are free and take seconds to use.

The point: pick a scale once, apply it to all six heading levels, stop fiddling.

4. Line height, weight, and letter spacing

Three knobs that turn good fonts into a finished system.

Line height

• Body: 1.5 to 1.7. Anything tighter feels cramped. Anything looser feels disconnected from the next line.
• Headings: 1.1 to 1.3. Headings sit close because they’re meant to read as one unit, not as separate stacked lines.

The rule: short lines need less line height. Long lines need more. If your body paragraphs hit about 75 characters per line, use 1.5. If they’re wider, use 1.6 or 1.7.

Weight

• Body: 400 (regular) is standard. 500 (medium) reads as slightly heavier and modern. Pick one.
• Heading: 600 (semibold) or 700 (bold). The weight contrast with body is what makes the heading feel like the anchor.

Avoid using more than two or three weights across the site. Inter shipping with weights 100 to 900 doesn’t mean you should use all nine. Pick body weight, pick heading weight, maybe pick one variant weight for accents.

Letter spacing

• Default (0) is almost always correct.
• Tighten slightly (-0.5% to -1%) on very large headings (60px and up) if they feel airy or loose.
• Loosen (+5% to +10%) on ALL-CAPS small text like eyebrow labels, tags, and badges. ALL-CAPS without extra spacing always reads as cramped.

That’s it. Letter spacing is easy to overuse. Leave it alone unless you have a specific reason to touch it.

5. How typography pulls the eye through the page

Visual hierarchy is what makes a page feel intentional. The reader’s eye should land on the heading first, then drop to the body, then notice the CTA. That’s not random. Typography does most of the work, with help from color and spacing.

Three tools:

• Size. Bigger reads as more important. Differences should be obvious. 24px next to 18px looks accidental. 32px or 40px reads as “this is a heading.”
• Weight. Bold reads as more important than regular. Pair size with weight for double emphasis.
• Color. A dark heading on a softer body color pulls the eye. A primary-colored CTA inside a wall of neutrals does the same. Color and palette work is covered in detail in the color palette post.

The squint test (typography edition)

Squint at any section of your page until the text blurs. The most important element should still read as the dominant block. If everything looks equally important when blurred, the hierarchy isn’t working.

Fix it by widening the size gap, increasing the weight contrast, or both. Often one tweak is enough.

The principle: pick a system, stick to it. Don’t fiddle case by case.

6. Lock everything into Breakdance

Once the fonts and scale are picked, lock them in so applying them is automatic. Breakdance has two layers here: defaults (the cascade for body, headings, and links) and presets (named combinations you can apply to any text element).

Set the defaults first. Then add presets for the patterns the defaults can’t cover.

Set the defaults

Open Breakdance > Settings > Edit Global Styles from your WordPress admin bar. Or, if you’re already in the editor, click the three-dot menu at the top right and pick Global Styles. Either route opens the same panel. Go to the Typography tab.

Step by step:

1. Set the body font, body size, body line height, and body weight.
2. Set the heading font (if different from body).
3. For each heading level (H1 through H6), set size and line height. Use the type scale values from Section 3.
4. Set weights for headings (600 to 700 usually).
5. Set the link color to your primary brand color (from the Colors tab if already configured).
6. Optional: text transforms for specific levels (uppercase for tags, for example).

Now any new heading, paragraph, or link you drop onto a page picks up these defaults. Same cascade as colors. Change once, propagate everywhere.

JP at Websites 4 Beginners has a clear walkthrough showing the whole Global Typography setup, including sensible default sizes, line heights, and weights inside Breakdance:

Save custom presets for everything else

Defaults handle headings, body, and links. They don’t handle the in-between cases:

• Oversized hero headings (bigger than H1)
• Eyebrow text (small ALL-CAPS labels above a heading)
• Pull quotes (large, styled body)
• Stats text (huge numbers in their own treatment)
• Card titles (between H3 and H4)
• Form labels and metadata (semibold body)

That’s what presets are for. A preset is a named combination of typography settings (family, size, weight, line height, transforms) that you apply by name to any text element. Same cascade rule. Change the preset once, every place it’s used updates automatically.

How to create one:

1. In Global Styles, go to Typography then Presets.
2. Click Add Preset and give it a clear name (e.g. “Eyebrow”, “Hero Heading”, “Stat Number”).
3. Set the typography options that define it: family, size, weight, line height, letter spacing, transform.
4. Or: build the typography on an existing element first, then click Save as Preset and name it.

Apply it: on any text element, open Design > Typography > Preset and pick the preset from the dropdown.

Louis from Breakdance covers the full preset workflow in a short video:

Rule of thumb: a project usually needs three to six presets. More than that and the typography is probably trying too hard.

Shortcuts if you’d rather not set it up from scratch

Same two add-ons we mentioned in the color palette post: HeadspinUI and BreakColorUI. They handle full design system setup inside Breakdance, including typography. Fonts, type scale, weights, presets, all preconfigured and editable.

If you build sites for clients or want a starting framework you can customize, they’re worth a look. We cover both in more detail in the color palette post.

7. Example directions by industry

You can adapt this process to your industry like this:

• B2B SaaS: clean sans for body and heading (Inter, Manrope). Type scale 1.250. Body weight 400, heading weight 600. Modest contrast. Reads as professional without trying too hard.
• Editorial and news: serif heading (Playfair Display, Merriweather) over sans body (Inter, Source Sans). Type scale 1.333 for clear hierarchy. Heading weight 700. Body line height 1.6 for long reads.
• Wellness and skincare: warm rounded sans for body (Nunito Sans, Mulish), characterful serif for headings (Fraunces). Generous line heights (body 1.7). Type scale 1.200 for a calm feel.
• Tech and developer tools: geometric sans for body (Space Grotesk, Inter), same or paired display sans for headings. Sometimes a monospaced font (JetBrains Mono, Space Mono) for code samples and accents.
• Luxury and fashion: classic serif for headings (Cormorant Garamond, Tenor Sans), refined sans for body (Inter, Manrope). Tighter heading letter spacing. Wider letter spacing on ALL-CAPS small caps in eyebrow labels.

8. A simple decision checklist

To keep things practical, you can run through this checklist:

1. Pick a body font (clean, readable at 16-18px on mobile).
2. Pick a heading font that contrasts in style and matches the brand. Or skip and use one font with a strong weight range.
3. Pick a type scale ratio (1.250 is the safe default).
4. Set body line height 1.5-1.7, heading line height 1.1-1.3.
5. Pick body weight (400 or 500) and heading weight (600 or 700).
6. Set defaults in Global Typography in Breakdance.
7. Add 3-6 presets for the patterns the defaults can’t cover (eyebrow text, oversized headings, pull quotes).
8. Use heading levels consistently (H1 once per page, H2 for major sections, H3 for sub-sections).

This gives you a typography system that’s grounded in the brand, works at all sizes, and is easy to maintain as the site grows.

What’s next: spacing

Fonts and colors are two-thirds of a design system. The last third is spacing: how content breathes, where the eye rests, what holds the page together. The same role-based thinking applies (margins, padding, gaps as system tokens), and Breakdance handles it the same way.

We’re working on a spacing post that walks through the same exercise. Link coming soon.

Until then, get your typography in place. Once fonts, colors, and the system around them are locked, the spacing decisions will land on a foundation that’s already working.