Typography

We have the right font. Now let's make the text actually look like Netflix — big bold headings, readable subtitles, and text that sits exactly where we want it.

font-size

The font-size property controls how big the text is. The most common unit is px (pixels).

h1 {
  font-size: 48px;
}

p {
  font-size: 18px;
}

The browser has default sizes — headings are larger than paragraphs — but they're rarely big enough for a real design. Netflix's hero heading is huge. Let's match that.

font-weight

The font-weight property controls how thick or thin the text looks.

h1 {
  font-weight: bold;    /* thick */
}

p {
  font-weight: normal;  /* regular */
}

h2 {
  font-weight: 700;     /* same as bold — using a number */
}

Font weight can be a keyword (normal, bold) or a number from 100 (thinnest) to 900 (heaviest). Most fonts support 400 (normal) and 700 (bold). Some fonts like Roboto have in-between weights like 300 or 500.

line-height

Line height controls the space between lines of text. Without it, lines can feel packed together and hard to read.

p {
  line-height: 1.6;
}

The value is a multiplier of the font size. If your text is 18px, a line-height of 1.6 makes the spacing about 29px between lines. Most websites use between 1.5 and 1.8 for body text.

text-align

The text-align property controls where text sits inside its container.

h1 {
  text-align: center;
}

p {
  text-align: left;    /* default */
}

p {
  text-align: right;
}

Netflix centers all the hero text — the big heading, the subtitle, and the email form. Let's do the same.

letter-spacing

Letter spacing adds or removes space between individual characters. A small positive value makes text feel cleaner and more intentional.

h2 {
  letter-spacing: 2px;
}

p {
  letter-spacing: 0.5px;
}

text-transform

You can change text case entirely in CSS — without touching the HTML.

h1 {
  text-transform: uppercase;    /* ALL CAPS */
}

p {
  text-transform: capitalize;   /* First Letter Of Each Word */
}

p {
  text-transform: lowercase;    /* everything lowercase */
}