Font Properties

Typography: Font Properties 🎨

The Story of Letters Getting Dressed

Imagine you’re a letter on a page. Just like you pick clothes every morning, letters need to pick their outfits too! That’s what font properties are—they’re the wardrobe choices for your text.

🏠 The Font-Family Property

What Is font-family?

Think of font-family like choosing which family of clothes to wear. Are you wearing sporty clothes? Fancy clothes? Casual clothes?

p {
  font-family: Arial;
}

This tells the browser: “Hey, dress all my paragraphs in Arial clothes!”

Why Do We Need It?

Without font-family, your text wears boring default clothes. With it, your words can look fun, elegant, or technical.

🔒 Web-Safe Fonts

The Problem

Imagine you pick a super rare t-shirt that nobody else has. If your friend wants to copy your look, they can’t—they don’t own that shirt!

Fonts work the same way. If you use a font that’s not on someone’s computer, they won’t see it.

The Solution: Web-Safe Fonts

These are fonts that almost every computer already has. They’re like basic white t-shirts—everyone owns one!

The Safe Fonts Everyone Has:

h1 {
  font-family: Georgia;
}

📚 Font Stacks

What If Your First Choice Isn’t Available?

Imagine you want to wear your blue shirt, but it’s dirty. What do you do? You pick your backup shirt!

A font stack is a list of backup fonts:

p {
  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;
}

How It Works:

graph TD
    A["Browser reads font-family"] --> B{Helvetica Neue installed?}
    B -->|Yes| C["Use Helvetica Neue"]
    B -->|No| D{Arial installed?}
    D -->|Yes| E["Use Arial"]
    D -->|No| F["Use any sans-serif"]

The browser tries each font in order until one works!

Pro Tips for Font Stacks

1. Put your dream font first
2. Add similar backup fonts next
3. End with a generic family (more on this below!)

👨‍👩‍👧‍👦 Generic Font Families

The Five Big Font Families

Just like there are types of clothing (sporty, formal, casual), there are types of fonts:

1. serif — Letters with little “feet”

Times New Roman has tiny feet on letters

2. sans-serif — Letters without feet (“sans” means “without”)

Arial is smooth and footless

3. monospace — Every letter takes the same space

Code looks like this
Each letter = same width

4. cursive — Looks like handwriting

Fancy script letters

5. fantasy — Decorative and wild

Fun display fonts

Using Generic Families

Always end your font stack with one:

body {
  font-family:
    "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
}

code {
  font-family:
    "Fira Code",
    Consolas,
    monospace;
}

📏 The font-size Property

Making Text Bigger or Smaller

Just like you can wear small, medium, or large shirts, text can be any size you want!

h1 {
  font-size: 32px;
}

p {
  font-size: 16px;
}

small {
  font-size: 12px;
}

Common Units for Size

Which Should You Use?

• px — When you need exact control
• rem — For most text (flexible and accessible)
• em — For sizes relative to parent

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;   /* = 32px */
}

p {
  font-size: 1rem;   /* = 16px */
}

💪 The font-weight Property

Making Text Bold (or Light!)

Weight is how thick or thin your letters are. Think of it like the difference between a skinny pencil line and a thick marker line.

.light {
  font-weight: 300;
}

.normal {
  font-weight: 400;
}

.bold {
  font-weight: 700;
}

The Weight Scale

graph TD
    A["100 - Thin"] --> B["200 - Extra Light"]
    B --> C["300 - Light"]
    C --> D["400 - Normal"]
    D --> E["500 - Medium"]
    E --> F["600 - Semi Bold"]
    F --> G["700 - Bold"]
    G --> H["800 - Extra Bold"]
    H --> I["900 - Black"]

Using Keywords

You can also use words instead of numbers:

.light-text {
  font-weight: lighter;
}

.normal-text {
  font-weight: normal;  /* = 400 */
}

.bold-text {
  font-weight: bold;    /* = 700 */
}

.bolder-text {
  font-weight: bolder;
}

🎭 The font-style Property

Italic and Normal Text

Sometimes you want text to lean a little—that’s italic!

.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

What’s the Difference?

Real Example:

em {
  font-style: italic;
}

.book-title {
  font-style: italic;
}

.reset {
  font-style: normal;
}

📐 The line-height Property

Giving Text Room to Breathe

Imagine if all the lines in a book were squished together—impossible to read! Line-height is the space between lines.

p {
  line-height: 1.5;
}

How It Works

graph TD
    A["line-height: 1"] --> B["Lines touching!<br>Hard to read"]
    C["line-height: 1.5"] --> D["Nice spacing<br>Easy to read"]
    E["line-height: 2"] --> F["Double spaced<br>Very open"]

Common Values

Ways to Set Line-Height

/* Unitless (recommended) */
p {
  line-height: 1.5;
}

/* With pixels */
p {
  line-height: 24px;
}

/* With em */
p {
  line-height: 1.5em;
}

/* Percentage */
p {
  line-height: 150%;
}

Pro Tip: Unitless values like 1.5 work best because they scale with font size!

🎯 Putting It All Together

Here’s a real-world example using ALL font properties:

body {
  font-family:
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
}

h1 {
  font-family: Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.quote {
  font-style: italic;
  font-weight: 300;
}

code {
  font-family:
    "Fira Code",
    Consolas,
    monospace;
  font-size: 0.9em;
}

🧠 Quick Memory Tricks

🌟 You Did It!

You now know how to:

✅ Pick font families and create backup stacks ✅ Use web-safe fonts everyone can see ✅ Set text size with different units ✅ Make text bold, light, or anything in between ✅ Add italics for emphasis ✅ Control line spacing for readability

Typography is like dressing up your words. Now you can make them look amazing! 🎉