Ananta Code Academy
ananta::html-css
MODULE 03 · CSS FOUNDATIONS

Typography & Web Fonts

Text makes up most of the content on the web. Choosing the right font, sizing it well, and spacing it out properly is one of the highest-leverage things you can do for a page's readability.

Day 19 of 30 Beginner ~18 min
01 · OVERVIEW

Why Typography Deserves Its Own Lesson

Good typography is invisible — readers don't notice it, they just read comfortably. Bad typography is the opposite: cramped lines, mismatched fonts, and inconsistent sizing make a page feel unpolished even if everything else about the design is solid.

02 · CORE TEXT PROPERTIES

The Properties You'll Use Constantly

PROPERTY WHAT IT CONTROLS
font-family

The typeface. Always list a fallback in case the first choice fails to load.

font-size

How large the text renders — in px, rem, or em.

font-weight

How bold the text is — from 100 (thin) to 900 (black).

line-height

Vertical space between lines of text within a paragraph.

letter-spacing

Horizontal space between individual characters.

text-align

Horizontal alignment of text — left, center, right, or justify.

style.css 
body {
  font-family: "Inter", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}
03 · USING GOOGLE FONTS

Loading a Custom Web Font

Google Fonts hosts free, ready-to-use fonts. Link the stylesheet in your <head>, then reference the font by name in your CSS — no font files to download or host yourself.

index.html 
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
</head>
style.css 
body {
  font-family: "Inter", sans-serif;
}
ALWAYS INCLUDE A FALLBACK

font-family: "Inter", sans-serif; — if "Inter" fails to load for any reason, the browser falls back to the system's default sans-serif font instead of breaking the layout.

04 · BUILDING A TYPE SCALE

Sizing Text With Purpose

A type scale is a small, consistent set of font sizes used across a whole site — instead of picking a random size every time, you reuse the same handful so the page feels cohesive.

A SIMPLE TYPE SCALE
2remHeading One
1.5remHeading Two
1.15remHeading Three
1remBody text
0.85remCaption / meta text
FONT WEIGHTS AT A GLANCE
400 Regular 500 Medium 600 Semibold 700 Bold
05 · LINE-HEIGHT MATTERS

The Property Beginners Skip

The default line-height is often too tight for comfortable reading, especially for longer paragraphs. A value between 1.5 and 1.7 for body text noticeably improves readability.

LINE-HEIGHT: 1 Cramped lines with no breathing room make longer paragraphs tiring to read.
LINE-HEIGHT: 1.6 Comfortable spacing between lines lets the eye track easily from one line to the next.
06 · BREAKDOWN

Breaking Down What You Just Learned

1

Core propertiesfont-family, font-size, font-weight, line-height, and letter-spacing shape all text.

2

Fallback fontsAlways list a generic fallback after your primary font choice.

3

Google FontsLink a stylesheet, then reference the font family name in your CSS.

4

Type scaleA small, reused set of font sizes keeps a page's typography consistent.

5

line-heightA value around 1.5–1.7 for body text meaningfully improves readability.

07 · PRACTICE

Try It Yourself

EXERCISE

Load a Google Font of your choice, apply it to your page's body, and set up a five-level type scale for h1, h2, h3, body text, and captions using rem units.

08 · TODAY'S PRACTICE

Type a Full Article Page

HANDS-ON EXERCISE

Putting a full typography system into practice

Create day19.html and style a short article using everything from today.

  1. Link two Google Fonts — one for headings, one for body text.
  2. Write an article with an h1, two h2 subheadings, and three paragraphs of body text.
  3. Apply your type scale so each heading level is visibly distinct in size and weight.
  4. Set line-height: 1.6 on paragraphs and letter-spacing: -0.02em on the h1.
  5. Compare the page with line-height removed to see the readability difference for yourself.
09 · RECAP

Recap

CORE PROPERTIES

font-family, font-size, font-weight, line-height, letter-spacing.

GOOGLE FONTS

Free web fonts loaded via a linked stylesheet, no hosting required.

TYPE SCALE

A consistent, reused set of font sizes across the whole page.

LINE-HEIGHT

1.5–1.7 for body text meaningfully improves comfort while reading.

10 · SUMMARY

Key Takeaways

  • font-family, font-size, font-weight, line-height, and letter-spacing shape all text on a page.
  • Always pair a custom font with a generic fallback in case it fails to load.
  • Google Fonts lets you load professional web fonts with a single linked stylesheet.
  • A small, reused type scale keeps headings and body text visually consistent.
  • A line-height between 1.5 and 1.7 makes body text noticeably easier to read.
Course Overview