How to Make CSS Font Auto-resize
To make a font automatically resize in CSS, you can use the vw (viewport width) unit in the font-size property of an element. The vw unit is equal to 1% of the width of the viewport, so a value of 10vw would mean that the font size would be 10% of the width of the viewport.
Below is an example of how you could use the vw unit to make the font size of an element automatically resize. This will make the font size of the element equal to 10% of the width of the viewport. When the viewport width changes, the font size of the element will also change accordingly.
.my-element {
font-size: 10vw;
}
You can also use the vh (viewport height) unit in a similar way to make the font size automatically resize based on the height of the viewport. Example below will make the font size of the element equal to 5% of the height of the viewport.
.my-element {
font-size: 5vh;
}
More Alternative Methods
There are a few other methods you can use to make the font size of an element automatically resize in CSS.
The em and rem Unit
The em unit is based on the font size of the parent element. If you set the font size of an element using the em unit, and then change the font size of the parent element, the font size of the child element will also change.
In example below, the font size of the .child-element will be 16px (0.8 * 20px), and if you change the font size of the .parent-element, the font size of the .child-element will also change accordingly.
.parent-element {
font-size: 20px;
}
.child-element {
font-size: 0.8em;
}
The rem unit is similar to the em unit, but it is based on the font size of the root element (i.e., the <html> element) instead of the font size of the parent element. This means that if you set the font size of an element using the rem unit, and then change the font size of the root element, the font size of the element will also change.
Media queries
You can use media queries to change the font size of an element based on the width or height of the viewport.
In this example, the font size of the .my-element will be 16px for viewport widths less than 768px, and 20px for viewport widths greater than or equal to 768px.
.my-element {
font-size: 16px;
}
@media (min-width: 768px) {
.my-element {
font-size: 20px;
}
}
That’s all for this tutorial. If you like it, check out our YouTube channel and our Twitter to stay tune for more dev tips and tutorials
