Nearby lessons

12 of 19

🔤 CSS Font Properties

📌 What are CSS Font Properties?

CSS Font Properties allow you to control typography, such as font family, size, weight, style, and more. These properties enhance readability, accessibility, and design consistency.

This guide includes key font-related properties and live examples to visualize their behavior in real-world scenarios.

🔠 Font Family

Defines the typeface of the text by specifying one or more font names.
Example02
🎨Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

📏 Font Size

Controls the size of the font using keywords, units, or relative values.
Example03
🎨Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

🧱 Font Weight

Adjusts the thickness or boldness of text.
Example04
🎨Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

🖋️ Font Style

Defines whether the font is normal, italic, or oblique.
Example05
🎨Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

🧬 Font Variant

Used to display text in small-caps (uppercase letters with lowercase sizing).
Example06
🎨Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

📏 Line Height

Controls the vertical spacing between lines of text.
Example07
🎨Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

🧾 Font Shorthand

Combines multiple font-related properties in a single declaration.
Example08
🎨Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

🧠 Test Your Knowledge

5 Questions
Progress: 0 / 5