CSS provides several units for formatting the size of text on a page. All of them can be used without any restrictions on the use of units.
| CSS Unit | Pixel Equivalent (px) | Best Use Area |
|---|---|---|
| px | 1 px | Frequently used in web design. |
| pt | 1 pt ≈ 1.33 px | Used in print designs. |
| pc | 1 pc ≈ 16 px | Used in print designs (large-scale prints). |
| em | 1 em = Top font size 2 em = Top font size x 2 | Used for flexible designs, dependent on a parent element. |
| rem | 1 rem = Font size of the page 2 rem = Font size of the page x 2 | Used for proportional designs, depends on the font size of the page (html). |
| in | 1 in = 96 px | Used in physical printing. |
| cm | 1 cm ≈ 37.8 px | Used in physical printing. |
| mm | 1 mm ≈ 3.78 px | Used in physical printing. |
Physical units such as px, pt, pc, in, cm, and mm are fixed values. However, em and rem are variables and change according to the font size of the element to which they are attached.
Because browsers’ default font-size is 16px, 1em and 1rem are generally considered 16px. However, if font-size: 20px; is set on the <html> element, 1rem = 20px.
Measurements may vary physically on the print medium because screen resolution and DPI (dots per inch) may differ.
It corresponds to one physical pixel on the screen and is a fixed value.
p {
font-size: 18px;
}Example
Lorem ipsum dolor sit amet
In designs intended for print, it is often used for printer outputs.
p {
font-size: 12pt;
}Example:
Lorem ipsum.
It is used for printing and typography, especially preferred for large-scale print designs.
p {
font-size: 2pc;
}Example:
Lorem ipsum.
The size of the element to which the CSS property is added may vary depending on the parent element’s size.
div {
font-size: 16px;
}
p {
font-size: 1.5em;
}Example:
Lorem ipsum.
It is adjusted according to the page root (HTML) font size.
html {
font-size: 16px;
}
p {
font-size: 1.25rem; /* 16px * 1.25 = 20px */
}Example:
Lorem ipsum dolor sit amet
Used to indicate physical dimensions in designs for printing.
p {
font-size: 1in;
}Example:
Lorem ipsum dolor sit amet
Cm (centimeter) and mm (millimeter) are also physical measurement units used for printing.
.cm {
font-size: 2cm;
}
.mm {
font-size: 10mm;
}Example:
cm: Lorem ipsum dolor sit amet
mm: Lorem ipsum dolor sit amet