CSS Font Size

h1 {
  font-size: 48px;
}

p {
  font-size: 18px;
}

Let me ask you something.

Have you ever landed on a website where the text was just too small to read comfortably? Or so big it felt like it was shouting at you? You probably left pretty quickly.

Font size is one of those things that people do not notice when it is right. But they notice immediately when it is wrong. Getting it right is one of the simplest things you can do to make your page feel professional and easy to read.

Let us learn how to control it.

What is Font Size

Font size controls how big or small your text appears on the page. In CSS you set it using the font-size property.

The heading is now big and bold at 48px and the paragraph sits comfortably at 18px below it.

Simple. But here is where it gets interesting. There are actually three different units you can use to set font size in CSS and each one behaves differently. Understanding the difference will save you a lot of confusion later.

CSS Font Size Using px

px stands for pixels. It is the most straightforward unit — you say 16px and the text is always exactly 16 pixels tall no matter what.

Big heading, readable paragraph. Exactly what we told it to be.

px is great when you want precise control and you know exactly how big you want something. It is the easiest unit to think about as a beginner.

The one downside of px is that it is fixed. If a user has set their browser to display larger text for accessibility reasons px ignores that preference. The text stays the same size no matter what.

That is where rem comes in.

CSS Font Size Using rem

rem stands for root em. It is based on the font size of the root element of the page which is the html tag.

By default browsers set the root font size to 16px. So 1rem equals 16px. 2rem equals 32px. 0.5rem equals 8px.

The heading is 3 times the root size which is 48px. The paragraph is exactly the root size which is 16px.

So why use rem instead of just writing 48px and 16px directly?

Because rem respects the user's browser settings. If someone has set their browser to display larger text for accessibility reasons rem scales with that. px does not. That makes rem the more respectful and accessible choice.

CSS Font Size Using em

em is similar to rem but with one important difference. Instead of being based on the root font size it is based on the font size of the parent element.

The hero div has a font size of 20px. The h1 is 2em which means 2 times the parent size — so 40px. The paragraph is 0.8em which means 80 percent of the parent size — so 16px.

em is powerful but it can get confusing fast. If you have elements nested inside other elements the em values compound on each other and things can get unpredictable.

Here is my honest take. As a beginner start with px to understand what is happening. Then switch to rem as your main unit for font sizes. Use em only when you specifically need something to scale relative to its parent.

html {
  font-size: 10px;
}

body {
  font-size: 1.6rem; /* this is now 16px */
}

h1 {
  font-size: 4.8rem; /* this is now 48px */
}

Which Unit Should You Use

Here is the honest answer.

Use px when you are just starting out and want to think in straightforward numbers. Nothing wrong with that.

Use rem once you are comfortable. It is better for accessibility and scales cleanly across different screen sizes.

Use em when you specifically need something to scale relative to its immediate parent. Not very often.

Building the Netflix Clone

Let us set proper font sizes on our Netflix clone. Right now the sizes are whatever the browser defaults are. Let us make them intentional.

Everything has a deliberate size now. The headings are big and cinematic. The paragraphs are comfortable to read. The button text is clear without being oversized.