CSS Font Size
The font-size property sets how large text appears using absolute units, relative units, or keywords.
The <font-size> property controls the size of text. The unit you choose matters, because some units are fixed while others scale relative to a parent or the page's root, which affects accessibility and responsiveness.
Units to know
Sizing with rem
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 16px;
}
h1 {
font-size: 2rem;
}
p {
font-size: 1rem;
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<p>This paragraph uses the root font size.</p>
</body>
</html>Because <rem> is measured from the root font size, changing the html size scales the whole page consistently. This makes rem a popular choice for predictable, accessible typography.
Nested em sizing
<!DOCTYPE html>
<html>
<head>
<style>
.card {
font-size: 18px;
}
.card small {
font-size: 0.8em;
}
</style>
</head>
<body>
<div class="card">
Order total: $42 <small>(tax included)</small>
</div>
</body>
</html>Note: Prefer relative units like rem over fixed px for font sizes so text respects the user's chosen browser font size.
