CSS Fonts & Text Styling

🎯 Why Typography Matters

Typography is the art and technique of arranging type to make written language legible, readable, and appealing. In CSS, font and text properties give you complete control over how text appears on your webpage.

Benefits of Good Typography:

✅ Improves readability and user experience
✅ Establishes visual hierarchy
✅ Creates brand identity and personality
✅ Guides user attention
✅ Makes content more engaging

🔤 Font Family

The font-family property specifies the typeface for text. Always provide fallback fonts in case the primary font isn't available.

Syntax:

selector {
    font-family: "Primary Font", "Fallback Font", generic-family;
}

Examples:

/* Serif Fonts */
p {
    font-family: Georgia, "Times New Roman", serif;
}

/* Sans-serif Fonts */
h1 {
    font-family: Arial, Helvetica, sans-serif;
}

/* Monospace Fonts */
code {
    font-family: "Courier New", Courier, monospace;
}

/* Cursive Fonts */
.signature {
    font-family: "Brush Script MT", cursive;
}

Generic Font Families:

serif: Fonts with decorative strokes (Georgia, Times New Roman)
sans-serif: Clean fonts without strokes (Arial, Helvetica)
monospace: Fixed-width fonts (Courier, Consolas)
cursive: Handwriting-style fonts
fantasy: Decorative fonts

📏 Font Size

The font-size property sets the size of the font. You can use various units like pixels, ems, rems, or percentages.

/* Absolute Units */
h1 { font-size: 32px; }
p { font-size: 16px; }

/* Relative Units */
h2 { font-size: 2em; }  /* 2x parent size */
p { font-size: 1rem; }  /* relative to root */

/* Percentage */
small { font-size: 80%; }

Common Font Sizes:

Headings: 24px - 48px
Body Text: 14px - 18px
Small Text: 12px - 14px

Best Practice: Use rem units for better accessibility and responsiveness.

💪 Font Weight

The font-weight property controls the thickness or boldness of text.

/* Keyword Values */
p { font-weight: normal; }   /* 400 */
strong { font-weight: bold; } /* 700 */

/* Numeric Values (100-900) */
h1 { font-weight: 100; }  /* Thin */
h2 { font-weight: 300; }  /* Light */
h3 { font-weight: 400; }  /* Normal */
h4 { font-weight: 600; }  /* Semi-bold */
h5 { font-weight: 700; }  /* Bold */
h6 { font-weight: 900; }  /* Black */

Common Font Weights:

100-300: Thin to Light
400: Normal (default)
500-600: Medium to Semi-bold
700: Bold
800-900: Extra Bold to Black

🎭 Font Style

The font-style property specifies italic, oblique, or normal text.

p {
    font-style: normal;   /* Default */
}

em {
    font-style: italic;   /* Slanted text */
}

.quote {
    font-style: oblique;  /* Similar to italic */
}

📝 Text Properties

1. Text Alignment

.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }

2. Text Decoration

a { text-decoration: none; }           /* No underline */
.underline { text-decoration: underline; }
.overline { text-decoration: overline; }
.line-through { text-decoration: line-through; }

3. Text Transform

.uppercase { text-transform: uppercase; }  /* UPPERCASE */
.lowercase { text-transform: lowercase; }  /* lowercase */
.capitalize { text-transform: capitalize; } /* First Letter */

4. Line Height

p {
    line-height: 1.6;    /* 1.6x font size */
    line-height: 24px;   /* Fixed height */
}

5. Letter Spacing

h1 {
    letter-spacing: 2px;    /* Space between letters */
}

.tight {
    letter-spacing: -1px;   /* Closer letters */
}

6. Word Spacing

p {
    word-spacing: 5px;      /* Space between words */
}

✨ Text Shadow

Add shadow effects to text for depth and emphasis.

/* Syntax: x-offset y-offset blur-radius color */
h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Multiple Shadows */
.fancy {
    text-shadow: 
        2px 2px 4px red,
        -2px -2px 4px blue;
}

/* Glow Effect */
.glow {
    text-shadow: 0 0 10px #fff, 0 0 20px #667eea;
}

🌐 Web Fonts (Google Fonts)

Use custom fonts from Google Fonts to enhance your typography.

How to Use Google Fonts:

Step 1: Add to HTML

<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

Step 2: Use in CSS

body {
    font-family: 'Roboto', sans-serif;
}

🎨 Live Examples

Serif Font - Georgia

This is a sans-serif font with normal weight and justified alignment. Line height is set to 1.6 for better readability.

Monospace font with letter spacing

Italic text centered

Uppercase with letter spacing

Text with Shadow Effect

📝 Test Your Knowledge - MCQ

💪 Practice Questions

Create a heading with font-family "Georgia", font-size 36px, and font-weight bold.
Style a paragraph with line-height 1.8, text-align justify, and letter-spacing 0.5px.
Make all links have no underline (text-decoration: none) and change color on hover.
Create a class that transforms text to uppercase with 2px letter spacing.
Add a text shadow to a heading: 2px horizontal, 2px vertical, 5px blur, with a gray color.

📌 Summary

font-family: Specifies the typeface (always include fallbacks)
font-size: Sets text size (use rem or em for responsiveness)
font-weight: Controls boldness (100-900, normal=400, bold=700)
font-style: Sets italic or normal text
text-align: Aligns text (left, center, right, justify)
text-decoration: Adds underline, overline, or line-through
text-transform: Changes case (uppercase, lowercase, capitalize)
line-height: Controls spacing between lines (1.5-1.6 recommended)
letter-spacing: Adjusts space between characters
text-shadow: Adds shadow effects to text
Best Practice: Use web-safe fonts or Google Fonts for consistency