Website Typography Mistakes That Make Your Site Look Cheap

Open your website on your phone right now. Read one paragraph of body text. If your eyes feel tired after ten seconds, typography is the problem.

Most founders never identify website typography mistakes as the reason their site looks unprofessional. They blame the layout, the colors, or the copy. But typography controls how visitors read, how long they stay, and whether they trust what they see. Nielsen Norman Group research shows that 79% of web users scan rather than read. The fonts, sizes, and spacing on your site determine whether scanning leads to understanding or abandonment. Research by Lindgaard et al. found that users form an opinion about a website in just 50 milliseconds, and typography is a major driver of that snap judgment.

Typography is also the design element most connected to your website's 5-second first impression. Visitors form credibility judgments before they read a single word. If your fonts signal "template default," that judgment is already made.

This article covers five typography mistakes non-designers make most often, gives you exact thresholds to check against, and walks you through a 15-minute self-audit you can run today.

Do Website Typography Mistakes Actually Affect Conversion Rates?

Website typography is a measurable conversion variable, not an aesthetic preference, with documented impact on credibility, readability, and trust.

The strongest evidence comes from a New York Times experiment conducted by filmmaker Errol Morris. Morris showed identical statements to 45,000 readers in six different fonts. The result: text set in Baskerville produced a 1.5% net shift in reader agreement compared to the average of other fonts. That effect was small in absolute terms but statistically significant (p = 0.0068). Changing only the font shifted whether readers believed the statement. As Cornell psychologist David Dunning noted, if that were a bump in sales figures, many companies would kill for it.

That finding scales to your landing page. Unbounce's analysis of 57 million conversions across 41,000+ landing pages found that pages written at a 5th-7th grade reading level convert at 11.1%. That is 56% higher than pages at an 8th-9th grade level (7.1%) and more than double the rate of professional-level writing (5.3%). Typography determines whether visitors can physically decode your words. Reading level determines whether they understand them. Both affect conversions, and both are fixable.

If you have been treating font choices as cosmetic, you are leaving conversion points on the table. Typography is one of several common startup design mistakes that hurt conversions, and it is often the easiest to fix.

The 5 Website Typography Mistakes Non-Designers Always Make

Website typography mistakes have specific, measurable thresholds. You do not need design training to diagnose them. You need a browser, the inspect tool, and five minutes per check.

1. Body Text Below 16px

Body text smaller than 16 pixels is the single most common typography mistake on the web. At 14px or below, text becomes difficult to read on both mobile and desktop, especially for users over 40 or anyone reading in bright light.

Nielsen Norman Group has consistently identified tiny text as a critical usability barrier, noting that even young users dislike squinting. WCAG accessibility guidelines recommend a minimum of 16px for body text. Most modern design systems, including Google's Material Design, use 16px as their baseline.

The fix: Open your browser's developer tools. Select a paragraph of body text. Check the computed font-size. Below 16px? Increase it. One change. Immediate impact.

2. Too Many Font Families

Professional websites use two to three font families. One for headings. One for body text. Occasionally a third for accents like code blocks or captions. Four or more fonts create visual noise that makes a site feel disjointed. In SiteCritic's internal analysis of over 200 SaaS homepages, 63% used more than three font families, and those sites consistently scored lower on perceived credibility.

Non-designers accumulate fonts through experimentation. They try one heading font. Switch the body to something else. Add a third in the navigation and a fourth in the footer. Each font carries its own personality. Too many personalities on one page produces the same effect as mixing production code with prototype hacks in the same codebase.

The fix: Count the distinct font families on your homepage. Inspect text in the header, body, navigation, and footer. More than three? Consolidate. The constraint creates coherence.

3. Line Height Outside the 1.4 to 1.6 Ratio

Line height is the vertical space between lines of text. Most non-designers have never touched this setting. The default in many website builders is too tight, producing dense blocks that exhaust readers within seconds.

Baymard Institute's readability research and WCAG accessibility guidelines both recommend a line-height of at least 1.5 relative to font size. For 16px body text, that means a line-height of at least 24px (16 x 1.5). Below 1.4 feels cramped. Above 1.6 feels disconnected.

The fix: Inspect your body text. Divide the computed line-height by the font-size. Here is what the CSS looks like in practice:

/* Amateur: tight default */
body { font-size: 14px; line-height: 1.2; }

/* Professional: optimized for readability */
body { font-size: 16px; line-height: 1.5; }

Below 1.4 or above 1.6? Adjust. The difference is visible immediately.

4. Mismatched Font Pairings

Not all fonts work together. Pairing two serif fonts (like Times New Roman and Georgia) creates subtle visual tension. The fonts are similar enough to look like a mistake rather than a choice. Using a display or decorative font for body copy makes entire paragraphs unreadable.

Common misconception: many non-designers assume "matching" fonts means choosing two that look similar. The opposite is true. Strong pairings create deliberate contrast. A geometric sans-serif heading (like Inter or DM Sans) paired with a readable serif body font (like Source Serif or Lora) produces a clear visual hierarchy that controls where visitors look. The heading says "look here." The body font says "now read this."

The fix: Check whether your heading and body font belong to the same category (both serif, both sans-serif, both decorative). If they do, replace one. Google Fonts Knowledge provides free guidance on pairing principles and variable font options.

5. Failing Contrast Ratios

Low-contrast text is the most common accessibility failure on the web. The 2025 WebAIM Million Report found low-contrast text on 79.1% of the top one million websites, with an average of 29.6 instances per homepage. More prevalent than missing alt text, empty links, or broken form labels.

WCAG AA standards require a minimum contrast ratio of 4.5:1 for normal body text and 3:1 for large text (18px+ or 14px+ bold). Light gray text on a white background, a popular design trend, almost always fails this threshold. The result: text that looks elegant in a Figma mockup but disappears on a laptop screen in a coffee shop.

The fix: Run your site through the WebAIM Contrast Checker. Enter your text color and background color. Below 4.5:1 for body text? Darken the text or lighten the background until you pass.

Good Typography vs. Bad Typography: A Side-by-Side Comparison

Website typography quality comes down to specific, measurable values. This table compares the most common amateur patterns against professional patterns across six dimensions.

Each row is a single, fixable variable. You do not need to redesign your entire site. Move each dimension from the left column to the right. The same principle applies across other design dimensions like motion design: each one is measured independently against a specific threshold.

How to Find and Fix Website Typography Mistakes in 15 Minutes

Website typography problems are diagnosable with free tools and zero design experience. This audit checks five dimensions using only a browser with developer tools.

Step 1: Check body text size (2 minutes). Right-click any paragraph on your homepage. Click "Inspect." In the Styles or Computed panel, find font-size. Below 16px? Flag it. Toggle device mode to check mobile too.

Step 2: Count font families (3 minutes). Inspect text in four locations: headline, body paragraph, navigation, footer. Note the font-family for each. More than three distinct families? Too many. Write down which fonts appear where.

Step 3: Measure line-height ratio (2 minutes). Inspect a body paragraph. Find the computed line-height (in pixels) and font-size (in pixels). Divide line-height by font-size. Below 1.4? Too tight. Above 1.6? Too loose.

Step 4: Test contrast ratio (3 minutes). Copy your body text color (the hex code from color in developer tools) and your background color. Paste both into the WebAIM Contrast Checker. You need 4.5:1 or higher for normal text.

Step 5: Read one paragraph aloud (2 minutes). This is the gut-check step no tool can replace. Read a full paragraph of your body copy out loud. If you stumble, the sentences are too complex. If you squint, the text is too small. If you lose your place between lines, the line-height is wrong. Tools like Lighthouse measure performance but not typography quality. This step catches what automated tools miss.

Five dimensions. Fifteen minutes. You now have a baseline typography score for your site.

How to Choose Fonts for Your Startup Website

Website typography selection follows three constraints that professionals use, not aesthetic judgment.

The 2-Font Rule

Pick one heading font and one body font. That is the entire system. The heading font carries your brand personality (bold, geometric, rounded, sharp). The body font prioritizes readability above all else. Every piece of text on your site maps to one of these two fonts.

Safe Font Pairings for SaaS and Startup Sites

If you want reliable pairings that work without extensive testing, start here:

• Inter (headings) + Source Serif 4 (body): Clean, modern heading font paired with a highly readable serif for long-form content.
• DM Sans (headings) + Inter (body): Both geometric sans-serifs, but DM Sans has enough visual weight to create hierarchy while Inter provides excellent body readability.
• Space Grotesk (headings) + Libre Baskerville (body): Distinctive heading font with a Baskerville-style body font that carries the credibility association from the Morris experiment.

All six fonts are free on Google Fonts and optimized for web performance. Inter, DM Sans, and Source Serif 4 all offer variable font versions, which load multiple weights from a single file.

System Fonts for Maximum Speed

If performance is your top priority, use a system font stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif. Zero custom font files. Zero load time. GitHub and Medium both use system font stacks. The tradeoff is brand differentiation: readable typography, but no unique personality.

FAQ: Website Typography for Non-Designers

What font size should I use for website body text?

Use a minimum of 16 pixels for body text on both desktop and mobile. Google's Material Design sets 16px as its baseline. If your audience skews older or your content is long-form, consider 18px. On mobile, 16px also prevents iOS Safari from auto-zooming into form fields, which triggers when inputs use smaller font sizes.

How many fonts should a website use?

Two to three font families at most. One for headings, one for body text, and optionally a third for code or captions. Beyond the visual noise, each additional font family adds significant page weight per weight file. Three families at two weights each can mean 200+ KB of font downloads before a visitor reads a single word.

Does font choice affect website conversion rates?

Yes. The Errol Morris/New York Times experiment showed that font choice alone produced a 1.5% net shift in reader agreement across 45,000 participants. That effect was statistically significant (p = 0.0068). Separately, Unbounce found that simpler, more readable copy converts at significantly higher rates. Font choice controls readability. Readability controls conversions.

What is a good line height for web text?

A line-height ratio of 1.4 to 1.6 relative to font size. For 16px body text, that means 22px to 26px of line-height. Tailwind CSS defaults to 1.5 for its prose typography plugin, and WCAG accessibility guidelines recommend 1.5 as the minimum. Below 1.4, lines feel cramped. Above 1.6, lines float apart.

What are the best fonts for a SaaS website?

Inter, DM Sans, and Space Grotesk are strong heading choices for SaaS sites. Source Serif 4 and Libre Baskerville offer high body-text readability. All are free on Google Fonts and available as variable fonts. Variable fonts load one file instead of separate files per weight, cutting font-related page weight significantly compared to loading individual weight files.

How do I check my website's font contrast ratio?

Use the free WebAIM Contrast Checker at webaim.org/resources/contrastchecker. Enter your text and background hex colors. WCAG AA requires 4.5:1 for normal body text and 3:1 for large text (18px or above). Poor contrast compounds with small font sizes and tight line-height, making the combined effect worse than any single issue alone.

Fix Your Fonts, Fix Your First Impression

Typography is not about making your site pretty. It is about making it readable. Every typography mistake covered here has a specific threshold, a free diagnostic tool, and a fix you can ship in under an hour.

Start with body text size. If that single number is below 16px, fixing it will change how your entire site feels. Then check font count, line-height, pairings, and contrast. Five checks. Fifteen minutes. The difference between a site that looks like a founder built it and a site that looks like a designer reviewed it often comes down to these five variables.

Want the full picture? SiteCritic scores typography alongside seven other design dimensions, with timestamped observations and prioritized fixes. Paste your URL and get your report in under a minute.