Web Fonts & Typography

1 Font Families — The Big Three Categories

Every font falls into a category. Knowing the difference helps you make smart choices.

In CSS, the font-family property tells the browser which typeface to use. Fonts are grouped into families based on their visual style. The three you'll use most on the web are serif, sans-serif, and monospace.

Serif

The quick brown fox

Has small strokes (serifs) at the ends of letters. Feels traditional and elegant. Great for headings or editorial sites.

Sans-Serif

The quick brown fox

Clean lines, no extra strokes. Feels modern and easy to read on screens. The most popular choice for body text on the web.

Monospace

The quick brown fox

Every character takes up the same width. Used for code snippets, terminal output, and technical content.

/* CSS font-family with fallback stack */
body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
}

code, pre {
  font-family: 'Source Code Pro', 'Courier New', monospace;
}

2 Font Size & Readability

Size matters — too small and users squint, too large and it feels like a children's book.

The recommended base font size for body text on the web is 16px (the browser default). Many modern sites use 17–20px for improved readability. Headings should follow a clear size hierarchy so readers can scan the page easily.

Try it — adjust font size: 16px

This is a sample paragraph so you can see how different font sizes affect readability. Notice how text that's too small becomes hard to read, while text that's too large feels oversized for body content. The sweet spot for most sites is 16–20px.

Avoid

This text is set at 11px with tight line-height. It's difficult to read on screens, especially on mobile devices. Users will leave your site before reading this.

Recommended

This text is set at 17px with comfortable line-height (1.7). It's easy to read on any device and keeps users engaged with your content.

Body text: 16–20px — never go below 14px on the web.
Line height: 1.5–1.8 for body text gives letters room to breathe.
Line length: Aim for 50–75 characters per line (about 600–700px max-width).
Use rem units: They scale with the user's browser settings, improving accessibility.

/* Recommended base sizing */
html { font-size: 100%; }  /* = 16px default */

body {
  font-size: 1.0625rem;  /* 17px */
  line-height: 1.7;
  max-width: 680px;      /* keeps line length readable */
}

h1 { font-size: 2.5rem; }   /* 40px */
h2 { font-size: 1.75rem; }  /* 28px */
h3 { font-size: 1.25rem; }  /* 20px */

3 Popular & Reliable Web Fonts

These are tried-and-true choices used on millions of websites.

All of these are available free on Google Fonts. They load fast, render well on every device, and cover a wide range of styles.

Inter

Clean & Modern

The go-to UI font. Designed for screens. Used by GitHub, Linear, and many tech products.

Roboto

Friendly & Neutral

Google's signature font. Works everywhere. Default on Android devices.

Open Sans

Warm & Readable

Excellent for body text. One of the most popular fonts on the web.

Playfair Display

Elegant Headings

A sophisticated serif for display use. Great for editorial and luxury brands.

Montserrat

Bold & Geometric

Strong personality. Works great for headings, navigation, and branding.

Merriweather

Classic Readability

A serif designed specifically for screen readability. Perfect for long-form content.

4 Creative But Readable — Fonts With Personality

These fonts stand out visually while still being easy to read on screens.

Not every project calls for a plain, neutral font. Sometimes you need something with character — a font that gives your site a unique feel without sacrificing readability. These fonts strike that balance beautifully, and they're all free on Google Fonts.

Poppins

Friendly Geometric

Perfectly round letterforms with a warm, approachable personality. Amazing for landing pages, portfolios, and apps. One of the most versatile creative fonts.

Nunito

Soft & Rounded

Rounded terminals give it a gentle, welcoming feel. Great for education sites, health/wellness brands, and friendly UI. Highly readable at all sizes.

Quicksand

Playful & Light

Rounded geometric sans-serif with a distinctive modern flair. Perfect for creative portfolios, lifestyle blogs, and startups. Best for headings and short text.

Josefin Sans

Elegant Vintage

Inspired by 1920s geometric typefaces. Has a sophisticated, artsy vibe. Excellent for fashion, art, and design-focused sites. Use at larger sizes for best readability.

Cabin

Warm Humanist

Slightly rounded with a humanist touch — feels personal without being childish. Versatile enough for both headings and body text. Great for blogs and small businesses.

Comfortaa

Bubbly & Modern

Bold rounded shapes with a fun, futuristic vibe. Stands out immediately. Best used for headings, logos, and branding — pair with a simpler body font.

Space Grotesk

Techy & Sharp

A proportional sans-serif with a technical, cutting-edge feel. Perfect for tech startups, developer tools, and SaaS products. Surprisingly readable at body sizes.

Sora

Clean & Distinctive

A modern geometric font with subtle quirks that set it apart from standard sans-serifs. Works beautifully for both headings and body text on contemporary sites.

Rubik

Rounded & Friendly

Slightly rounded corners give it a soft, approachable feel while keeping a professional edge. Used by many modern web apps and product sites.

DM Sans

Geometric Elegance

Low-contrast geometric sans-serif with a refined look. Perfect for dashboards, fintech, and minimalist designs. Excellent readability at small sizes.

Outfit

Smooth & Balanced

A geometric sans-serif with softened edges. Feels polished and contemporary — great for SaaS landing pages, portfolios, and modern brand sites.

Manrope

Modern Workhorse

Semi-condensed with a hint of quirkiness. Designed for clarity at any size. A strong choice for product interfaces, marketing sites, and documentation.

Lexend

Built for Reading

Scientifically designed to improve reading proficiency. Wider letterforms reduce visual crowding. Ideal for education, accessibility-first sites, and long articles.

Bricolage Grotesque

Quirky Character

A variable-axis grotesque with charming irregularities. Adds personality to editorial layouts, creative agencies, and bold portfolio sites.

Archivo

Sharp & Technical

Grotesque with slightly narrowed proportions. Has a strong, confident feel. Works well for tech blogs, developer tools, and data-heavy interfaces.

Plus Jakarta Sans

Refined & Trendy

One of the hottest new fonts in web design. Elegant geometry with friendly curves. Used by modern startups and design-forward brands everywhere.

Headings vs. body: Fonts like Quicksand, Josefin Sans, and Comfortaa shine at larger sizes — pair them with a neutral body font for long text.
Versatile all-rounders: Poppins, Nunito, Sora, and DM Sans work well for both headings and body text.
Test at small sizes: Always check creative fonts at 14–16px — some lose clarity when they shrink.
Match the brand: Choose fonts that reflect the mood of your project — playful (Nunito, Comfortaa), techy (Space Grotesk, DM Sans), or elegant (Josefin Sans, Sora).

5 Font Pairing — Combining Fonts That Work Together

The golden rule: contrast without conflict. Pair a heading font with a body font that complements it.

A great website typically uses two fonts — one for headings and one for body text. The key is to create visual contrast (e.g., serif + sans-serif) while keeping the overall feel harmonious. Here are proven pairings:

Article Headline

Body text set in Inter feels clean and modern beneath the elegant Playfair heading.

Playfair Display + Inter

Bold Statement

Merriweather's readability pairs perfectly with Montserrat's geometric strength.

Montserrat + Merriweather

Minimal Design

Two sans-serifs can work together when one is more distinctive and used only for headings.

Raleway + Open Sans

Classic & Warm

Lora's calligraphic curves contrast nicely with Roboto's clean, no-nonsense style.

Lora + Roboto

Artsy Vibes

Josefin's vintage geometry paired with Nunito's soft roundness creates a creative yet readable combo.

Josefin Sans + Nunito

Tech Forward

Two modern sans-serifs — Space Grotesk's edge for headlines with DM Sans' clean precision for body text.

Space Grotesk + DM Sans

Fun & Friendly

Comfortaa's bubbly headings balanced by Poppins' geometric clarity — perfect for playful brands.

Comfortaa + Poppins

Modern Minimal

Sora's subtle distinctiveness with Cabin's warm readability — a polished, contemporary pairing.

Sora + Cabin

Stick to 2 fonts max — more than that looks chaotic and slows load time.
Contrast categories: Pair a serif with a sans-serif for natural contrast.
Match the mood: Both fonts should fit the tone of your site (playful, professional, elegant, etc.).
Use weight for hierarchy: Bold headings + regular body weight creates visual structure.

6 How to Use Google Fonts in Your Web Page

A step-by-step guide to loading and applying custom fonts from Google Fonts.

Google Fonts is a free library of 1,700+ font families. It's the easiest way to add professional-quality fonts to any website. There are two main methods to load them — here's how both work:

Go to Google Fonts

Visit fonts.google.com and browse or search for a font you like (e.g., "Poppins").
Select your font weights

Click on the font, then click "Get Font" → "Get embed code". Select the weights you need (Regular 400, Medium 500, Bold 700, etc.). Only pick what you'll actually use — more weights = slower load time.

Copy the <link> code

Google gives you a <link> tag. Copy it and paste it into the <head> section of your HTML file, before your CSS stylesheet link.

<!-- Paste this in your <head> BEFORE your own CSS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">

Apply the font in your CSS

Now use the font-family property in your CSS to apply it. Always include a fallback.

body {
  font-family: 'Poppins', sans-serif;
}

/* Want two fonts? Load both in the same <link> tag: */
/* ...css2?family=Poppins:wght@400;600&family=Playfair+Display:wght@700 */

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
}

p, li, a {
  font-family: 'Poppins', sans-serif;
}

Get the @import code from Google Fonts

On the Google Fonts embed page, switch to the "@import" tab instead of the link tab. Copy the code.

Paste it at the top of your CSS file

Place the @import statement at the very beginning of your CSS file — before any other rules.

/* At the VERY TOP of your style.css file */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* Now use it normally */
body {
  font-family: 'Poppins', sans-serif;
}

When to use @import vs <link>

The <link> method is faster because the browser starts loading the font immediately. @import waits until the CSS file itself loads. Use @import if you only have access to the CSS file (e.g., in CodePen or a CMS).

Download the font files

On Google Fonts, click "Get Font" → "Download all". You'll get a .zip with .ttf files. For web use, convert them to .woff2 format using a free tool like CloudConvert.

Add the font files to your project

Create a /fonts folder in your project and place the .woff2 files there.

your-project/
├── index.html
├── css/
│   └── style.css
└── fonts/
    ├── Poppins-Regular.woff2
    ├── Poppins-SemiBold.woff2
    └── Poppins-Bold.woff2

Declare with @font-face in your CSS

Tell the browser where to find the font files using @font-face rules.

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Poppins', sans-serif;
}

When to self-host

Self-hosting is best when you need fonts to work offline, want full control over caching, or have strict privacy requirements (no third-party requests). For most student projects, the <link> method is easier and works great.

Complete Example — Putting It All Together

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>

  <!-- Step 1: Load fonts from Google -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@400;600&display=swap" rel="stylesheet">

  <!-- Step 2: Your CSS (can be external or inline) -->
  <style>
    body {
      font-family: 'Poppins', sans-serif;
      font-size: 17px;
      line-height: 1.7;
      color: #333;
      max-width: 700px;
      margin: 0 auto;
      padding: 40px 20px;
    }
    h1, h2, h3 {
      font-family: 'Playfair Display', serif;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Site</h1>
  <p>This text uses Poppins for the body and Playfair Display for the heading.</p>
</body>
</html>

Use display=swap in the Google Fonts URL — this shows a fallback font while the custom font loads, preventing invisible text.
Add preconnect links — they speed up the font download by telling the browser to connect to Google's servers early.
Only load weights you need — each additional weight adds to page load time. Most sites need just 2–3 weights (400, 600, 700).
Place the <link> before your CSS — the font needs to be available before your styles try to use it.
Always end with a generic fallback — like sans-serif or serif — in case the font fails to load.

7 Try It Yourself — Font Playground

Experiment with different fonts, sizes, and weights to see how they look in real time.

Heading Font

Body Font

Body Size

The Art of Web Typography

Good typography is invisible — readers notice the content, not the font. Bad typography makes people leave. Your job is to pick fonts that get out of the way and let your content shine.

8 Quick Reference — Key Takeaways

Pin this to your wall while you're learning!

Use sans-serif for body text — Inter, Roboto, and Open Sans are safe, readable choices.
Use serif for headings — Playfair Display, Lora, and Merriweather add personality.
Base font size: 16–20px — use rem units so text scales accessibly.
Line height: 1.5–1.8 — gives text room to breathe on screen.
Max 2 fonts per site — one for headings, one for body.
Always include fallbacks — end your font-family with a generic like sans-serif or serif.
Load from Google Fonts — it's free, fast, and supported everywhere.
Test on mobile — what looks great on desktop might be too small on a phone.