CSS Font Size
The font-size property sets the size of the text.
Managing text size matters in web design, but do not use size to make paragraphs look like headings or the other way around. Always use the proper tags, like <h1> to <h6> for headings and <p> for paragraphs.
The size can be absolute or relative. Absolute sizes include px and keywords like small, medium, and large. Relative sizes include em (relative to the parent), rem (relative to the root element), % (relative to the parent), and smaller / larger.
How to Pick the Right Unit?
- Use
pxfor fixed, precise control, but the page will not scale as well across screen sizes or user preferences. - Absolute sizes help when the physical output size is known.
- Use
emorremfor scalable designs, which let users adjust text size in their browser. - Use
%to size text relative to a parent element.
Set Font Size With Pixels
Setting the size in pixels gives you full control over the text size.
With pixels the page may not scale well across screen sizes and users cannot change the text size in their settings, though they can still zoom the whole page.
Example
The heading and paragraph sizes are set in pixels.
<style> block, set h1 to 40px, h2 to 30px, and p to 16px. Add a heading of each level and a paragraph.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>This is a heading (40px)</h1>
<h2>This is a heading (30px)</h2>
<p>This is a paragraph (16px).</p>
</body>
</html>
Set Font Size With Em
The em unit is relative to the font size of the parent element. If the parent is 16px, then 2.5em is 40px.
Unlike pixels, em lets users adjust the text size in their browser settings.
Example
The same sizes as the pixel example, written with em.
<style> block, set the body to 16px, then h1 to 2.5em, h2 to 1.875em, and p to 1em. Add a heading of each level and a paragraph.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
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 */
}
</style>
</head>
<body>
<h1>This is a heading (2.5em)</h1>
<h2>This is a heading (1.875em)</h2>
<p>This is a paragraph (1em).</p>
</body>
</html>
Set Font Size With Rem
The rem unit is relative to the font size of the root <html> element, no matter where the element sits in the page.
This makes rem useful for scalable, responsive designs: change the <html> font size and everything sized in rem scales with it. By default 1rem equals 16px in most browsers.
Example
The same sizes written with rem, relative to the root element.
<style> block, set the html element to 16px, then h1 to 2.5rem, h2 to 1.875rem, and p to 1rem. Add a heading of each level and a paragraph.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
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 */
}
</style>
</head>
<body>
<h1>This is a heading (2.5rem)</h1>
<h2>This is a heading (1.875rem)</h2>
<p>This is a paragraph (1rem).</p>
</body>
</html>
The vw Unit
The font size can also be set with the vw unit, which means viewport width.
1vw is 1% of the current width of the browser viewport. So if the viewport is 500px wide, 1vw is 5px. This makes the text size follow the size of the browser window.
Example
The heading and paragraph scale with the window width using vw.
<style> block, set h1 to 10vw and p to 5vw. Add a heading and a paragraph, noting that resizing the window changes the text size.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
font-size: 10vw;
}
p {
font-size: 5vw;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>Resize the browser window to see how the font size scales.</p>
</body>
</html>