CSS Font Properties: Detailed Notes

CSS font properties allow you to style and control the appearance of text. Below are the frequently used properties with detailed descriptions and examples:

---

1. font-family

Defines the font typeface for an element.

• Syntax:

  font-family: "Arial", "Helvetica", sans-serif;
  

• Details:

  • Specify a prioritized list of fonts.
  • Always include a generic family (serif, sans-serif, monospace) as a fallback.

• Example:

  p {
    font-family: "Times New Roman", Times, serif;
  }
  

---

2. font-size

Sets the size of the text.

• Syntax:

  font-size: value;
  

• Units:

  • Absolute units: px, pt, cm (fixed size).
  • Relative units: %, em, rem, vw, vh (responsive size).

• Example:

  h1 {
    font-size: 24px;
  }
  p {
    font-size: 1.2em;
  }
  

---

3. font-style

Specifies whether the font should be italic, oblique, or normal.

• Values:

  • normal: Default text.
  • italic: Italicized text.
  • oblique: Slanted text.

• Example:

  em {
    font-style: italic;
  }
  

---

4. font-variant

Used to display text in small-caps or other stylistic variants.

• Values:

  • normal: Default text.
  • small-caps: Small capital letters.

• Example:

  h2 {
    font-variant: small-caps;
  }
  

---

5. font-weight

Defines the thickness of the font characters.

• Values:

  • normal (default).
  • bold.
  • lighter, bolder.
  • Numerical values: 100 to 900 (e.g., 400 for normal, 700 for bold).

• Example:

  strong {
    font-weight: bold;
  }
  p {
    font-weight: 300; /* Light */
  }
  

---

6. line-height

Sets the space between lines of text.

• Syntax:

  line-height: normal | number | length | percentage;
  

• Details:

  • normal: Default spacing based on the font size.
  • Numbers like 1.5 multiply the font size to calculate spacing.

• Example:

  p {
    line-height: 1.6; /* 1.6 times the font size */
  }
  

---

7. letter-spacing

Defines the spacing between characters.

• Values:

  • normal: Default spacing.
  • Custom values using units (e.g., 2px, -1em).

• Example:

  h1 {
    letter-spacing: 0.1em;
  }
  

---

8. word-spacing

Defines the spacing between words.

• Values:

  • normal: Default spacing.
  • Custom values using units (e.g., 5px, -1em).

• Example:

  p {
    word-spacing: 5px;
  }
  

---

9. text-transform

Controls the capitalization of text.

• Values:

  • none: Default text.
  • capitalize: Capitalizes the first letter of each word.
  • uppercase: Converts all text to uppercase.
  • lowercase: Converts all text to lowercase.

• Example:

  h2 {
    text-transform: uppercase;
  }
  

---

10. font (Shorthand Property)

A shorthand for multiple font-related properties.

• Syntax:

  font: font-style font-variant font-weight font-size/line-height font-family;
  

• Example:

  p {
    font: italic small-caps bold 16px/1.5 "Arial", sans-serif;
  }
  

---

Practical Exercises

1. Combine font properties
   • Create a styled heading with bold text, uppercase transformation, and a specific font family.
2. Experiment with spacing
   • Adjust letter-spacing and word-spacing to see how they affect readability.
3. Responsive design
   • Use em and rem for font-size and line-height to ensure text adjusts well on different devices.