CSS Font Properties

CSS Font Properties

CSS provides various font-related properties to control the appearance of text, including font family, size, weight, style, and more.

1. Setting the Font Family (font-family)

Defines the font type for text. Always include a fallback font.

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

✅ Uses Arial; if unavailable, it falls back to any sans-serif font.

🔹 Common Font Families:

• Serif: "Times New Roman", Georgia
• Sans-serif: "Arial", "Helvetica", "Verdana"
• Monospace: "Courier New", "Monaco"
• Cursive: "Brush Script MT"

2. Setting Font Size (font-size)

h1 {
  font-size: 24px;
}

✅ Sets the font size to 24 pixels.

🔹 Units You Can Use:

• px (pixels) – Fixed size
• em – Relative to parent
• rem – Relative to root (html)
• % – Relative to default size

Example:

p {
  font-size: 1.2em; /* 120% of the parent element's font size */
}

3. Font Weight (font-weight)

Controls text boldness.

strong {
  font-weight: bold;
}

🔹 Other values:

• normal (default)
• bold
• lighter / bolder
• 100 to 900 (where 100 is thin and 900 is extra bold)

Example:

h2 {
  font-weight: 700;
}

4. Font Style (font-style)

Controls whether a text is italicized.

p {
  font-style: italic;
}

🔹 Values: normal, italic, oblique.

5. Font Variant (font-variant)

Controls small caps text.

span {
  font-variant: small-caps;
}

✅ Displays lowercase letters as smaller uppercase letters.

6. Font Stretch (font-stretch)

Adjusts the width of characters.

h3 {
  font-stretch: expanded;
}

🔹 Other values: condensed, semi-condensed, ultra-expanded, etc.

7. Shorthand for Fonts (font)

Instead of writing multiple properties, use a shorthand:

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

✅ This is equivalent to:

p {
  font-style: italic;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 16px;
  font-family: "Arial", sans-serif;
}

Example Usage in a Full CSS Rule

body {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}