Typography Mistakes That Kill Credibility

You can have a great product, a clear value proposition, and a beautiful color palette. But if your typography is off, people will notice. They might not be able to articulate what feels wrong, but they will feel it. Bad typography erodes trust in ways that are invisible but measurable.

Typography is the single most underestimated element of web design. It carries 95% of the content on most websites, yet most founders give it less thought than their logo color. Here are the five mistakes we see most often, and how to fix them.

Mistake 1: Too many typefaces

We review a lot of websites. The most common typography mistake, by far, is using too many fonts. Three fonts on the homepage. A different font on the about page. A decorative script for the tagline. An entirely separate font for the blog.

The result is visual chaos. Instead of a cohesive identity, the site feels like a collage. Each new typeface competes for attention, and none of them win.

The fix: Two typefaces, maximum. One for headings, one for body text. If you want to be bold, you can use a single typeface family for everything. Some of the best websites in the world use one font at different weights and sizes. That is not boring. That is confident.

When choosing a heading typeface, look for one with distinct character. It does not need to be unusual. It needs to feel intentional. Pair it with a neutral, highly readable body typeface. Inter, system UI fonts, or any well-designed sans-serif will work.

Mistake 2: Bad hierarchy

Hierarchy is how you tell the reader what is important. It is the difference between a page that guides the eye and a page that overwhelms it.

Bad hierarchy looks like this: every heading is roughly the same size, the body text is too large or too small relative to the headings, and there is no clear visual path from most important to least important.

Good hierarchy follows a simple principle: the most important content should be the most visually prominent. This means your main heading should be significantly larger than your subheadings. Your subheadings should be clearly larger than your body text. Your captions and metadata should be clearly smaller.

A practical system that works for most websites:

• H1 (page title): 2.5 to 4rem, bold, tight letter-spacing
• H2 (section heading): 1.5 to 2rem, bold
• H3 (subsection): 1.25rem, semibold
• Body text: 1rem to 1.0625rem, regular weight, generous line-height (1.6 to 1.8)
• Small text (captions, meta): 0.875rem, muted color

The key is contrast. If your H1 is 36px and your H2 is 30px, there is not enough difference. Make the jumps meaningful.

Mistake 3: Unreadable body text

This is the mistake that costs you the most, because body text is where the actual information lives. If your body text is hard to read, nothing else matters.

The most common body text problems:

• Font size too small. Anything below 16px on the web is too small for comfortable reading. 17px is better. Some sites go to 18px or 20px for long-form content, and that is perfectly fine.
• Line length too wide. Lines that stretch across the full width of a large screen are exhausting to read. The ideal line length is 45 to 75 characters. This is roughly 600 to 720px wide, depending on your font and size.
• Line height too tight. Body text needs room to breathe. A line-height of 1.5 is the absolute minimum. 1.6 to 1.8 is better for most typefaces. Dense text feels academic. Airy text feels professional.
• Low contrast. Light gray text on a white background looks sophisticated in a mockup and is illegible in practice. Ensure your body text has a contrast ratio of at least 4.5:1 against its background.

These are not aesthetic preferences. They are readability fundamentals backed by decades of typographic research and accessibility standards.

Mistake 4: Inconsistent sizing

You have a heading on the homepage that is 48px. The same-level heading on the services page is 36px. The blog uses 42px. Every page looks like it was designed by a different person.

Inconsistency happens when designers (or developers) make sizing decisions ad hoc instead of working from a system. A type scale solves this completely.

A type scale is a set of predetermined sizes that you use everywhere. You never invent a new size. You pick from the scale. Here is a scale that works well:

• 12px, 14px, 16px, 18px, 20px, 24px, 30px, 36px, 48px, 60px, 72px

This is a rough 1.25 ratio scale. Each size is about 25% larger than the previous one. The jumps are big enough to create clear hierarchy but small enough to be versatile.

Define your scale once, use it everywhere. Your headings, your body text, your buttons, your navigation. Everything comes from the same scale. The result is a site that feels cohesive without anyone being able to explain exactly why.

Mistake 5: Ignoring mobile

A heading that looks commanding at 72px on a desktop screen becomes a wall of text on a phone. Body text sized for a laptop may be too small to read comfortably on a mobile device held at arm's length.

Responsive typography is not optional. More than half of web traffic is mobile. If your type does not work on a phone, it does not work, period.

The principles for mobile typography:

• Reduce heading sizes by 30 to 40% on mobile. A 48px desktop heading should be around 28 to 32px on mobile. Still bold, still prominent, but not overwhelming.
• Keep body text the same size or slightly larger. Counter-intuitive, but people hold phones further from their eyes than laptops. 16px minimum, 17 to 18px is better.
• Increase line height slightly on mobile. Narrower columns benefit from more vertical spacing. Add 0.05 to 0.1 to your desktop line-height.
• Test on actual devices. Browsers and design tools are not phones. Text that looks fine in a simulator may be uncomfortable on a real screen in real lighting conditions.

Typography is trust

Good typography does not draw attention to itself. It makes the content feel authoritative, the brand feel professional, and the experience feel effortless. Bad typography does the opposite: it creates friction, signals carelessness, and undermines everything else you have built.

You do not need to be a typography expert. You need to make five decisions well: how many typefaces, what hierarchy, how readable is the body, is the sizing consistent, and does it work on mobile. Get those right, and your typography will quietly build the credibility your brand deserves.