Fonts & Typography

Definition

CSS properties used to control the appearance of text, including the font family, weight, size, and spacing.

Explain Like I'm New

By default, browsers use boring fonts like Times New Roman. Typography properties allow you to load beautiful custom fonts from Google Fonts, make them bold, italicized, spaced out, or transformed to ALL CAPS.

Real World Example

Loading the 'Inter' or 'Roboto' font from Google Fonts to give a web app a sleek, modern, Apple-like aesthetic.

Common Use Cases

•Branding
•Improving readability

Interactive Example

Interview Questions

basic

What property makes text bold?

intermediate

Why do we write fallback fonts like `font-family: Arial, Helvetica, sans-serif;`?

Flash Cards

Question

What makes text bold?

Click to reveal answer

Answer

`font-weight: bold;` (or a number like `font-weight: 700;`).

Question

Why fallback fonts?

Click to reveal answer

Answer

If the user's computer doesn't have 'Arial' installed, the browser moves to the next option and tries 'Helvetica'. If they don't have that either, it falls back to the generic system 'sans-serif' font. It ensures the site doesn't break.