CSS Typography Tutorial: 7 Essential Font Techniques

Welcome to this CSS typography tutorial. Typography is one of the biggest factors in how professional a website looks — the right fonts, sizes, and spacing can transform a plain page into something polished.

This is Tutorial 3 of 10 in our complete CSS series on Tutorials Ocean’s CSS category. If you missed it, check out Tutorial 2: Colors, Units & Box Model first.

The font-family Property

Every CSS typography tutorial starts here — choosing which font your text should use.

body {
    font-family: Arial, Helvetica, sans-serif;
}

Notice the list of fonts separated by commas. This is called a font stack. The browser tries the first font, and if it’s not available on the user’s device, it falls back to the next one in the list.

Always end your font stack with a generic family like sans-serif, so there’s always a safe fallback.

Font Size, Weight & Style

h1 {
    font-size: 2rem;
    font-weight: bold;
    font-style: italic;
}

p {
    font-size: 16px;
    font-weight: 400;
}

Numeric font-weight values give you more control than just “bold” — for example, 300 for light text or 700 for bold, if the font family supports those weights.

Line Height & Letter Spacing

Good spacing is what separates readable text from cramped, hard-to-scan paragraphs. This is often the most overlooked part of any CSS typography tutorial.

p {
    line-height: 1.6;
    letter-spacing: 0.5px;
}

• line-height — controls vertical spacing between lines of text. A value around 1.5-1.6 is generally comfortable for body text
• letter-spacing — controls horizontal spacing between characters, useful for headings or all-caps text

Text Alignment & Decoration

h1 {
    text-align: center;
    text-transform: uppercase;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

Removing the default underline from links with text-decoration: none is one of the most common things you’ll do in real projects.

Adding Google Fonts

Default system fonts are limited. Google Fonts gives you free access to hundreds of custom fonts, and adding them is simple.

<!-- Add this inside your HTML head -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">

/* Then use it in your CSS */
body {
    font-family: 'Poppins', sans-serif;
}

Visit fonts.google.com, pick a font, select the weights you need, and Google gives you the exact link tag and CSS rule to copy. This is the standard workflow in nearly every modern CSS typography tutorial and real-world project.

For the full official reference, check the MDN documentation on CSS fonts.

Practice Exercise

Open the style.css file from Tutorial 2 and expand it with typography rules.

Requirements:

1. Import a Google Font of your choice and apply it to your body element
2. Set a font-size and line-height for your paragraphs using rem
3. Style your main heading with a different font-weight, text-transform: uppercase, and letter-spacing
4. Remove the default underline from all your links, and add it back only on hover
5. Center-align one section’s heading using text-align

Bonus challenge: Use two different Google Fonts on the same page — one for headings, one for body text — a common professional design pattern.

Save your file, refresh your browser, and compare how much more polished your page looks with proper typography.

What’s Next?

This completes Tutorial 3 of our CSS typography tutorial series. In Tutorial 4, we’ll cover CSS backgrounds, borders, and box shadows — adding visual depth to your elements.

This CSS typography tutorial is part of the complete CSS series on Tutorials Ocean — practical, beginner-friendly web development tutorials. Follow along and build real projects as you learn.