CSS Tutorial 3: Typography

Lesson 2 Review

In the last class, we learned that every HTML element is a box. We use Margin to push boxes apart, Padding to create inner cushion, and box-sizing: border-box; to keep our math accurate.

Step 1: Font Family & The Fallback Stack

To change the typeface of your text, we use the font-family property. Because you can never guarantee which fonts a user has installed on their computer, professional developers always provide a Fallback Stack.

The browser will read the list from left to right. If it doesn't have the first font, it tries the second. The last font in the stack should always be a generic family like sans-serif or serif.

The CSS:

.modern-text {
  /* Tries Helvetica first, then Arial, then any default sans-serif */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.code-text {
  font-family: "Courier New", Courier, monospace;
}

Output:

This is modern, clean sans-serif text.

This is monospace text (like a code editor).

Step 2: Sizing (The Battle of px vs. rem)

There are two primary ways to set font-size in modern web development:

• Pixels (px): Absolute sizing. If you say `24px`, it will always be exactly 24 pixels. (Easy to use, but bad for accessibility if visually impaired users try to zoom their browser).
• REM (Root EM): Relative sizing. 1rem is equal to the default font size of the user's browser (usually 16px). Therefore, 2rem is 32px. This is the Professional Standard because it automatically scales if the user changes their device settings!

The CSS:

.pixel-size {
  font-size: 24px;
}

.rem-size {
  font-size: 1.5rem; /* 1.5 * 16px = 24px */
}

Step 3: Text Formatting & Spacing

CSS gives you granular control over exactly how text is drawn on the screen. Let's look at the most important properties for readability.

• font-weight: Controls thickness. Can be keywords (normal, bold) or numbers (100 to 900).
• text-transform: Changes the casing without altering the HTML. (uppercase, lowercase, capitalize).
• letter-spacing: Adjusts the horizontal space between individual characters.
• line-height: Adjusts the vertical space between lines of a paragraph. A value of 1.5 or 1.6 is standard for good readability.

The CSS:

.fancy-heading {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #0277bd;
}

.readable-paragraph {
  line-height: 1.8; /* 180% of the normal line height */
}

Output:

This is a Fancy Heading

This paragraph is much easier to read because the lines are spaced further apart. Without line-height, dense blocks of text look cluttered and can cause eye strain for your users. Always give your text room to breathe!

Step 4: Google Fonts (The Professional Standard)

You are no longer limited to the 10 basic fonts installed on Windows and Mac. Google provides a free library of thousands of high-quality fonts at fonts.google.com.

To use them, you import the font file directly into your CSS using the @import rule at the very top of your stylesheet.

The CSS:

/* 1. Import the font from Google's servers at the top of your CSS file */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

/* 2. Apply it to your elements */
body {
  font-family: 'Poppins', sans-serif;
}

Performance Warning: Every time you import a new Google Font (or a new font-weight like Bold and Italic), the user has to download that file. Too many fonts will severely slow down your webpage's loading speed. Stick to 1 or 2 font families maximum per website!

Final Quiz: Test Your CSS Logic

Click the buttons below to verify your knowledge of CSS Typography.

1. Why is the `rem` unit considered more professional than the `px` unit for font sizing?

A) Because it renders the text in higher definition.

Incorrect. Both render at the exact same quality.

B) Because it automatically scales relative to the user's device/browser settings, improving accessibility.

Correct! If a visually impaired user sets their browser's default font to 24px, 1rem becomes 24px, scaling your entire website seamlessly to accommodate them.

C) Because it is faster to type.

Incorrect. It has to do with responsive scaling, not typing speed.

2. If you want to make all the text in an `<h1>` tag appear in ALL CAPS without changing the actual HTML code, what CSS property should you use?

A) font-style: uppercase;

Incorrect. `font-style` is used for things like `italic` or `oblique`.

B) text-transform: uppercase;

Correct! `text-transform` visually changes the casing of the text while leaving the raw HTML exactly as you typed it.

C) font-weight: bold;

Incorrect. This makes the text thicker, but does not change lowercase to uppercase.

3. What does the `line-height` property control?

A) The horizontal distance between letters.

Incorrect. That is controlled by `letter-spacing`.

B) The vertical distance (breathing room) between lines of text in a paragraph.

Correct! Increasing line-height (usually to 1.5 or 1.6) is the easiest way to make large blocks of text instantly more readable.

C) The height of the border surrounding the text.

Incorrect. That is determined by padding and the Box Model.

4. Why do developers use a "Fallback Stack" (e.g., `font-family: Arial, Helvetica, sans-serif;`)?

A) Because it randomly selects a different font every time the page loads.

Incorrect. The browser does not randomly select; it reads strictly from left to right.

B) Because it combines the letters of all three fonts into one new font.

Incorrect. You cannot combine fonts this way.

C) In case the user's device does not have the first font installed, the browser has backup options to try.

Correct! It is a safety net. If Arial fails, it tries Helvetica. If that fails, it defaults to whatever standard sans-serif font the operating system uses.

Class Dismissed!

You now know how to design text that looks sharp, modern, and highly readable. Text is the primary way we communicate on the web, so mastering typography is a vital skill for any Front-End Developer.

Next time, we will tackle CSS Layouts, replacing legacy HTML tables with modern CSS Flexbox and Grids!