CSS Relative Units
CSS Relative Units
Relative units specify a length relative to another length (like parent element, root element, or viewport).
Relative length units scale better between different screen sizes.
| Unit | Description | |
|---|---|---|
| em | Relative to the font-size of the parent element | Try it |
| ex | Relative to the x-height of the current font (rarely used) | Try it |
| ch | Relative to width of the "0" (zero) | Try it |
| fr | A fractional unit. 1fr equals 1 part of the available space | Try it |
| rem | Relative to the font-size of the root HTML element | Try it |
| vw | Relative to 1% of the width of the viewport*. 100vw = full width of the viewport | Try it |
| vh | Relative to 1% of the height of the viewport*. 100vh = full height of the viewport | Try it |
| vmin | Relative to 1% of viewport's* smaller dimension | Try it |
| vmax | Relative to 1% of viewport's* larger dimension | Try it |
| % | Relative to the size of the parent element | Try it |
* Viewport = the browser window size. 1vw = 1% of the current width of the browser's viewport. So, if the viewport is 500px wide, 1vw is 5px.
Tip: The em and
rem units are perfect for creating
scalable and responsive websites!
Set Font Size With Em
The em unit is relative to the font size of
the parent element. So, if the parent element has a font size of 16px, then 2.5em
would result in 40px.
In the following example, the text size in
em is the same as the previous example
in pixels. However, the
em unit allows the user to adjust the text size
in the browser settings.
Example
Set font sizes with em:
body {
font-size: 16px; /* Base font size */
}
h1 {
font-size: 2.5em; /* 2.5 * 16 = 40px */
}
h2 {
font-size: 1.875em; /* 1.875 * 16 = 30px */
}
p {
font-size: 1em; /* 1 * 16 = 16px */
}
Try it Yourself »
Set Font Size With Rem
The rem unit is relative to the font size of
the root HTML element (<html>).
Unlike em, which is relative to the font-size of its parent element, rem
always refers to the font-size of the <html> element, regardless of its position
in the document tree. This makes rem very useful for creating scalable and responsive
designs. By changing the font-size of the <html> element, all elements sized
with rem units will scale proportionally throughout the entire page.
The default font-size of the <html> element in most browsers, is 16px. So, by default, 1rem equals 16px unless explicitly overridden in the CSS.
Example
Set font sizes with rem:
html {
font-size: 16px; /* Set the root font size */
}
h1 {
font-size: 2.5rem; /* 2.5 * 16 = 40px */
}
h2 {
font-size: 1.875rem; /* 1.875 * 16 = 30px */
}
p {
font-size: 1rem; /* 1 * 16 = 16px */
}
Try it Yourself »
