EN
CSS - change font size
0
points
In this article, we would like to show you how to change an element's font size using CSS.
Quick solution:
div {
font-size:xx-small|x-small|small|medium|large|x-large|xx-large|smaller|larger|unset|initial|inherit;
}
1. Absolute size values
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.xx-small { font-size: xx-small; }
.x-small { font-size: x-small; }
.small { font-size: small; }
.medium { font-size: medium; }
.large { font-size: large; }
.x-large { font-size: x-large; }
.xx-large { font-size: xx-large; }
</style>
</head>
<body>
<div class="xx-small">xx-small</div>
<div class="x-small">x-small</div>
<div class="small">small</div>
<div class="medium">medium</div>
<div class="large">large</div>
<div class="x-large">x-large</div>
<div class="xx-large">xx-large</div>
</body>
</html>
2. Length values
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.default1 { font-size: 1em; }
.default2 { font-size: 16px; }
</style>
</head>
<body>
<div class="default1">1em</div>
<div class="default2">16px</div>
</body>
</html>
3. Relative size values
3.1. Smaller
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.default { font-size: 26px; }
.smaller { font-size: smaller; }
</style>
</head>
<body>
<div class="default">
26px
<div class="smaller">
1x smaller
<div class="smaller">
2x smaller
<div class="smaller">
3x smaller
</div>
</div>
</div>
</div>
</body>
</html>
3.2. Larger
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.default { font-size: 15px; }
.larger { font-size: larger; }
</style>
</head>
<body>
<div class="default">
15px
<div class="larger">
1x larger
<div class="larger">
2x larger
<div class="larger">
3x larger
</div>
</div>
</div>
</div>
</body>
</html>
4. Percentage values
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.default { font-size: 26px; }
.smaller { font-size: 80%; }
</style>
</head>
<body>
<div class="default">
26px
<div class="smaller">
1x 80%
<div class="smaller">
2x 80%
<div class="smaller">
3x 80%
</div>
</div>
</div>
</div>
</body>
</html>
5. Global values
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.inherit { font-size: inherit; }
.initial { font-size: initial; }
.unset{ font-size: unset; }
</style>
</head>
<body>
<div class="inherit">inherit</div>
<div class="initial">initial</div>
<div class="unset">unset</div>
</body>
</html>