How to Choose Fonts for a Website: A Practical Decision Tree

Choosing a font for a website is a decision with too many options and too little guidance. Google Fonts alone has over 1500 families, and every one of them looks good in its own preview. This article is a decision tree. You start with your project type, walk through three questions, and end with a recommended font and pairing.

Step 1: What Kind of Project Is This

The first decision is the project type. Different project types need different typography.

If you are building a SaaS dashboard, an admin panel, or a developer tool, you need a neutral sans-serif that stays readable at small sizes and does not distract from data. The font is a utility, not a statement.

If you are building an editorial site (magazine, blog, long-form publication), you need a heading font with character and a body font with reading stamina. The typography is part of the brand.

If you are building a marketing site or landing page, you need a hero heading that grabs attention and a body that converts. The typography is a conversion tool.

If you are building an e-commerce site, you need a body font that makes product descriptions readable and a heading font that makes product names and prices scannable. The typography is a sales tool.

If you are building a portfolio, you need a heading font with personality (this is your brand) and a body font that gets out of the way (the work is the hero).

Step 2: What Is the Brand Personality

The second decision is brand personality. Even within a project type, the brand personality narrows the font choice.

If the brand is modern and technical, you want geometric sans-serifs. Inter, Manrope, Space Grotesk, DM Sans. These fonts have clean geometry and a neutral voice that reads as "product" rather than "personality."

If the brand is editorial and warm, you want humanist sans-serifs or transitional serifs. Open Sans, Lato, Source Sans 3 for sans. Source Serif 4, Merriweather for serif. These fonts have warmth and reading stamina.

If the brand is luxury and elegant, you want high-contrast serifs. Playfair Display, Cormorant Garamond, Fraunces. These fonts have stroke contrast and optical sizing that reads as "premium."

If the brand is friendly and approachable, you want rounded geometric sans-serifs. Nunito, Poppins, Quicksand, Rubik. These fonts have circular forms that read as "approachable."

If the brand is bold and editorial, you want condensed display faces. Bebas Neue, Oswald, Archivo. These fonts have narrow proportions that deliver maximum impact in minimal space.

Step 3: What Is the Body Text Load

The third decision is how much body text the site has. This determines whether you need a body font optimized for long-form reading or a font that just needs to handle short UI labels.

If the site is mostly body text (blog, documentation, magazine), the body font is the most important choice. Pick a font with a tall x-height, open counters, and a weight range that includes 400 for body and 600 for emphasis. Inter, Source Sans 3, Open Sans, and Work Sans are all designed for this.

If the site is mostly UI (dashboard, app, admin), the body font needs to be readable at 14px and below. Inter and Source Sans 3 are the strongest choices because they were designed specifically for screen UI.

If the site is mostly headings (landing page, portfolio, poster), the heading font is the most important choice. The body font can be a workhorse sans like Inter or Open Sans.

The Decision Tree

Walk through the three steps and you get a recommendation.

SaaS dashboard, modern and technical, mostly UI: Inter for everything, or Inter body plus Space Grotesk headings.

Editorial magazine, warm and classic, mostly body: Source Serif 4 body plus Playfair Display headings, or Merriweather body plus Montserrat headings.

Marketing landing page, bold and modern, mostly headings: Bebas Neue hero headings plus Open Sans body, or Space Grotesk headings plus Inter body.

E-commerce, friendly and approachable, mixed: Nunito headings plus Open Sans body, or Poppins headings plus Inter body.

Portfolio, elegant and minimal, mostly headings: Raleway headings plus Lato body, or Fraunces headings plus Inter body.

Test the Recommendation

A recommendation is a starting point, not a final answer. Before you commit, test the recommended pairing at every size you plan to ship. Check the heading at 32px and 48px. Check the body at 14px and 16px. Check the contrast of your text against your background.

The FontBlend pairings library keeps 50 tested pairings, every one with a contrast score, suggested weights, and a short note on why it works. You can preview any pairing live, edit the preview text, and copy the production CSS.

The Shortcut

If you do not want to walk the decision tree, start with Inter. Inter is the safest choice for almost any modern web project. It has nine weights, variable axes, a tall x-height, and it was designed specifically for screens.You can build a complete typography system with Inter alone, and add a second font later if you need more personality.

Turning the Recommendation into a System

The decision tree picks families; the system that uses them is a separate set of choices. Start with the body size, because it decides the reading experience. A content-heavy site wants 16px or 17px body text with a line height near 1.6 and a measure between 60 and 75 characters. An application with dense tables and forms can sit at 14px or 15px with tighter leading. Once the body size is fixed, the heading scale builds from it with a ratio, and the type scale calculator turns that ratio into concrete sizes you can export.

Then check the weight plan. The body font needs a regular weight at the body size and a medium or semibold for emphasis. The heading font needs a weight that holds up at the largest size you plan to use. A 100-weight thin that looks elegant in a preview collapses on a bright background at 48px, so confirm the actual pair of sizes before you pick the lightest option in the family.

Sizes and Colors Are Part of the Decision

Families get all the attention, but the same family can pass or fail based on size and color. A heading at 32px in a medium weight reads completely differently from the same heading at 24px in a light weight. Test the pairing at the real sizes of the design, not at the sizes the preview happens to show.

Color decides whether the pairing is legible at all. Text that sits below the WCAG contrast floor fails no matter how well the two fonts harmonize, so run the text and background colors through the contrast checker as part of the same review. A pairing decision made without a contrast pass is a pairing decision made twice.

Keep the Rejects in a Note

The fonts you tested and rejected are as useful as the one you picked. A short note in the brand kit that says the geometric option felt too playful and the humanist option was too plain saves the next person on the team from re-running the same comparison. The note also protects the brand: when a stakeholder asks why not use the trendy display face from a competitor, the answer is written down instead of improvised.

Common Mistakes When Choosing

Judging a font from its specimen page. Every specimen shows the face in its best light at a flattering size. The real test is your content at your sizes.

Picking a body font for its headlines. A font with a distinctive display personality often has weak body behavior, small x-height, tight counters, or a limited weight range. The body font should be chosen for the paragraph, not the poster.

Ignoring the license for commercial work. The open-source catalog fonts are free to use in products, but a logo or a paid template can still have specific requirements, so check the license terms for the actual use case before shipping.

Forgetting that text wraps. The preview shows one headline, the site shows many, and fonts differ in how they break lines and how much space they waste in paragraphs. A compact face can save a full line per paragraph on a long article.

What to Check Before You Ship

Load the pairing in the playground and run the layout presets: the blog preset for reading flow, the UI grid preset for labels and buttons, the dashboard preset for dense data. Then check the three sizes that break pairings: the smallest heading, the smallest body text, and the largest display size. Verify the contrast on the actual background, not a white swatch, and confirm the exported CSS carries only the weights the site uses. That checklist takes ten minutes and catches most of what goes wrong after launch.

Related Tools

The font pairing generator applies this decision tree as a deterministic algorithm. The font pairings library has 50 curated pairings to start from. The typography playground lets you test any pairing against real layout presets.