CSS provides powerful tools to customize text appearance. Here's a breakdown of key font properties:

1. font-family 🎨

Defines the font type. Common values:

  • serif (e.g., Times New Roman)
  • sans-serif (e.g., Arial)
  • monospace (e.g., Courier New)
  • cursive (e.g., Script)
  • fantasy (e.g., Decorative fonts)
body {
  font-family: "Helvetica Neue", sans-serif;
}
font_types

2. font-size 📏

Sets text size. Units include:

  • px (pixels)
  • em (relative to parent font size)
  • rem (relative to root font size)
  • % (percentage)
h1 {
  font-size: 24px;
}

3. font-weight 💪

Controls text boldness. Values:

  • normal (400)
  • bold (700)
  • 100 to 900 (light to black)
strong {
  font-weight: bold;
}

4. font-style 🖋️

Specifies italic styling:

em {
  font-style: italic;
}

5. font-variant 🧬

Enables small caps:

h2 {
  font-variant: small-caps;
}

6. font shorthand 💡

Combine properties in one declaration:

p {
  font: italic bold 16px/24px "Georgia", serif;
}

For advanced typography techniques, explore our CSS Basics Guide or Font Face Customization. Want to see how these properties work together? Check out this interactive demo.