Inconsistent Typography

Mixed fonts and random sizes make your site look like a ransom note. Here's how to build a type system that ties everything together.

What is this?

You know those ransom notes in movies, made of letters cut from different magazines? Each word is a different font, size, and color. It's chaotic, unsettling, and very hard to read. When your website uses three different fonts for body text, randomly switches between 14px and 17px paragraphs, and mixes font weights without a pattern, you're building a digital ransom note. The cat has seen landing pages using Inter for the hero, Roboto for the features section, and Arial for the footer — all for body text. Pick a side.

Why it matters

For your visitors: Typographic inconsistency forces the brain to re-adapt with every section. Instead of smoothly reading your content, your visitors are unconsciously processing "wait, this looks different now" over and over. It's exhausting, and exhausted visitors leave.
For your business: Typography is the single biggest carrier of brand identity on the web. (Your text takes up 90%+ of your page.) When fonts are inconsistent, your brand dissolves. You look like you threw your site together in an afternoon — even if you spent weeks on it.
The standard: Use a maximum of two font families: one for headings, one for body text. (One font for both is even better.) Define a strict type scale with specific sizes for each heading level and body text. Never use a font size that isn't in your scale.

Consistent type system

/* One family for headings, one for body */
h1, h2, h3 { font-family: 'Inter', sans-serif; }
body { font-family: 'Noto Sans', sans-serif; }

/* Strict scale: every size is intentional */
h1 { font-size: 2.5rem; font-weight: 800; }
h2 { font-size: 1.75rem; font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
p  { font-size: 1rem; font-weight: 400; }
small { font-size: 0.875rem; font-weight: 400; }

The ransom note

/* Different fonts everywhere */
.hero h1 { font-family: 'Playfair Display'; font-size: 2.3rem; }
.features h2 { font-family: 'Roboto'; font-size: 1.6rem; }
.about h2 { font-family: 'Open Sans'; font-size: 1.8rem; }
.card p { font-family: 'Lato'; font-size: 0.95rem; }
.footer p { font-family: 'Arial'; font-size: 0.85rem; }

How to fix it

React / Next.js

Define your fonts once in your layout, then use Tailwind's font utilities consistently:

// app/layout.tsx
import { Inter, Noto_Sans } from "next/font/google";

const heading = Inter({
  subsets: ["latin"],
  variable: "--font-heading",
  weight: ["600", "700", "800"],
});

const body = Noto_Sans({
  subsets: ["latin"],
  variable: "--font-body",
  weight: ["400", "500"],
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html className={`${heading.variable} ${body.variable}`}>
      <body className="font-body">{children}</body>
    </html>
  );
}

Then in your components, only reference these two font families:

export function SectionHeading({ children }: { children: React.ReactNode }) {
  return <h2 className="font-heading text-2xl font-bold text-white">{children}</h2>;
}

Plain HTML / CSS

/* Load exactly two fonts — no more */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@600;700;800&family=Noto+Sans:wght@400;500&display=swap");

:root {
  --font-heading: "Inter", system-ui, sans-serif;
  --font-body: "Noto Sans", system-ui, sans-serif;
}

/* Apply them globally */
body {
  font-family: var(--font-body);
  font-size: 1rem;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
}

/* Strict type scale — memorize these, use nothing else */
h1 {
  font-size: 2.5rem;
  font-weight: 800;
}
h2 {
  font-size: 1.75rem;
  font-weight: 700;
}
h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

High impact — visualDesign~2 paws

Typography inconsistency is one of the most visible indicators of an unpolished site. The cat takes this very seriously — it's hard to score well on visual design if your type is all over the place.

How the cat scores this

The scanner inventories every unique font-family, font-size, and font-weight used across your page. It checks how many distinct font families appear (more than 3 is a red flag), whether heading sizes follow a consistent ratio, and whether body text uses a single size. It also detects "near-miss" sizes (like 15px and 16px body text) that suggest accidental variation rather than intentional design.