CSS
🎯 What is CSS font-size?
The font-size property defines the size of text in HTML elements. It controls how large or small text appears and plays a key role in readability and UI hierarchy.
It is one of the most important typography properties in CSS and is widely used in headings, paragraphs, buttons, and responsive layouts.
🔹 Basic Usage
CSS
p {
font-size: 16px;
}
📌 This sets paragraph text size to 16px.
1️⃣ Length Values
You can use units like px, em, rem.
CSS
h1 { font-size: 32px; }
p { font-size: 1.2em; }
- px → fixed size
- em → relative to parent
- rem → relative to root
2️⃣ Percentage (%)
CSS
div {
font-size: 120%;
}
📌 Makes text 120% of parent element size.
3️⃣ Keywords
- small
- medium
- large
CSS
p {
font-size: large;
}
4️⃣ Relative Values
CSS
p {
font-size: smaller;
}
5️⃣ initial & inherit
These values reset or inherit font size from parent elements.
CSS
p {
font-size: inherit;
}
- initial → browser default (16px)
- inherit → takes parent value
💡 Summary Table
| Value | Description |
|---|---|
| px | Fixed size unit |
| em | Relative to parent element |
| rem | Relative to root element |
| % | Percentage-based sizing |
| small / large | Keyword-based sizing |
-
🧠 Summary
- The font-size property controls text size in CSS.
- It is essential for typography hierarchy and responsive design.
- Common units: px, em, rem, %, keywords.