css - font-size properties
The font-size property in CSS defines the size of the text within an element. It is one of the most commonly used and important properties for styling content.
Syntax
font-size: value;
Units You Can Use
Absolute Units
These set a fixed size regardless of screen or context.
| Unit | Description | Example |
|---|---|---|
px |
Pixels | font-size: 16px; |
pt |
Points (print) | font-size: 12pt; |
cm, mm, in |
Physical units (rarely used on screens) |
Relative Units
Size depends on other elements (like parent font size or screen size).
| Unit | Description | Example |
|---|---|---|
em |
Relative to parent font size | font-size: 1.5em; (150%) |
rem |
Relative to root (<html>) font size |
font-size: 2rem; |
% |
Percentage of parent font size | font-size: 120%; |
vw |
Viewport width | font-size: 5vw; (scales with screen size) |
Keywords
CSS also allows predefined keyword values, though less precise.
font-size: small | medium | large | x-large | xx-small | larger | smaller;Example
html
{
font-size: 16px;/* base size */
}
h1
{
font-size: 2rem; /* 32px */
}
p
{
font-size: 1em; /* 16px, same as parent */
}
{
font-size: 16px;/* base size */
}
h1
{
font-size: 2rem; /* 32px */
}
p
{ font-size: 1em; /* 16px, same as parent */
}
