CSS Fonts

CSS provides several properties to control fonts in a webpage, including font family, size, weight, and style. Using these properties correctly ensures that text is readable, stylish, and user-friendly.

1️⃣ CSS Font Properties

Property	Description	Example
`font-family`	Sets the font type.	`font-family: Arial, sans-serif;`
`font-size`	Controls the size of text.	`font-size: 16px;`
`font-weight`	Defines the thickness of text.	`font-weight: bold;`
`font-style`	Sets normal, italic, or oblique text.	`font-style: italic;`
`font-variant`	Displays small caps or normal text.	`font-variant: small-caps;`
`line-height`	Controls spacing between text lines.	`line-height: 1.5;`

2️⃣ Font Families (`font-family`)

Types of Fonts:

Serif – Fonts with small strokes (e.g., Times New Roman, Georgia).
Sans-serif – Clean fonts without strokes (e.g., Arial, Helvetica).
Monospace – Fixed-width fonts (e.g., Courier New).
Cursive – Handwritten-style fonts (e.g., Brush Script).
Fantasy – Decorative fonts (e.g., Papyrus).

Example:

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

✔ Tip: Always provide a fallback font in case the preferred one is unavailable.

3️⃣ Font Size (`font-size`)

Font size can be set using:

Pixels (px): Fixed size (e.g., font-size: 16px;).
Em: Relative to the parent element (e.g., font-size: 1.2em;).
Rem: Relative to the root <html> size (e.g., font-size: 1rem;).
Percentage (%): Based on the parent’s font size (e.g., font-size: 120%;).

Example:

h1 {
  font-size: 24px;
}

4️⃣ Font Weight (`font-weight`)

This property controls the boldness of text.

Normal: font-weight: normal;
Bold: font-weight: bold;
Lighter or Bolder: Adjusts relative to the parent text.
Numerical Values (100-900): Fine-tune thickness (400 = normal, 700 = bold).

Example:

p {
  font-weight: 600;
}

5️⃣ Font Style (`font-style`)

Changes the appearance of the text:

normal – Default text.
italic – Italicized text.
oblique – Similar to italic but slightly slanted.

Example:

em {
  font-style: italic;
}

6️⃣ Font Variant (`font-variant`)

Used for small-caps styling, where lowercase letters appear in uppercase but smaller.

Example:

p {
  font-variant: small-caps;
}

7️⃣ Shorthand Property (`font`)

You can set multiple font properties in a single line:

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

📌 Order:

font-style
font-variant
font-weight
font-size
font-family

Summary Table

Property	Description	Example
`font-family`	Specifies the font type.	`font-family: Verdana, sans-serif;`
`font-size`	Defines text size.	`font-size: 18px;`
`font-weight`	Controls boldness.	`font-weight: 700;`
`font-style`	Sets normal, italic, or oblique.	`font-style: italic;`
`font-variant`	Enables small caps.	`font-variant: small-caps;`

Conclusion

CSS fonts allow complete control over typography, ensuring better readability and aesthetics. Using proper font sizes, weights, and styles improves user experience. You can also use Google Fonts to enhance the design with custom typography.

CSS

CSS Fonts

1️⃣ CSS Font Properties

2️⃣ Font Families (font-family)

Types of Fonts:

Example:

3️⃣ Font Size (font-size)

Example:

4️⃣ Font Weight (font-weight)

Example:

5️⃣ Font Style (font-style)

Example:

6️⃣ Font Variant (font-variant)

Example:

7️⃣ Shorthand Property (font)

Summary Table

Conclusion

2️⃣ Font Families (`font-family`)

3️⃣ Font Size (`font-size`)

4️⃣ Font Weight (`font-weight`)

5️⃣ Font Style (`font-style`)

6️⃣ Font Variant (`font-variant`)

7️⃣ Shorthand Property (`font`)