CSS Font Size Values: A Comprehensive Guide Tutorial
Table of Contents
CSS Font Size Values
CSS provides various units and values that can be used to specify the font size.
Here are some commonly used font size values in CSS:
Absolute Lengths:
px (pixels):
The most commonly used unit for font sizes. It specifies the size in pixels, where 1px represents a single dot on the screen.
pt (points): A unit commonly used for print media. One point is equal to 1/72nd of an inch.
Relative Lengths:
em:
Relative to the font size of the parent element. For example, if the parent element has a font size of 16px, 1em will be equal to 16px.
rem:
Relative to the font size of the root element (usually the <html> element).
It allows for consistent sizing across the entire document.
vw (viewport width):
Relative to a percentage of the viewport width.
For example, 1vw represents 1% of the viewport width.
vh (viewport height):
Relative to a percentage of the viewport height.
For example, 1vh represents 1% of the viewport height.
Percentage:
%: Relative to the font size of the parent element. For example, 100% is equivalent to the font size of the parent element.
It’s important to note that different units may have different rendering behaviors and can be affected by user settings, so it’s recommended to choose units carefully based on your design requirements.
Example usage:
p {
font-size: 16px; /* Absolute length in pixels */
}
h1 {
font-size: 2em; /* Relative to the font size of the parent element */
}
h2 {
font-size: 150%; /* Relative to the font size of the parent element */
}
h3 {
font-size: 3rem; /* Relative to the font size of the root element */
}
h4 {
font-size: 2vw; /* Relative to the viewport width */
}
h5 {
font-size: 5vh; /* Relative to the viewport height */
}
These are just a few examples of font size values you can use in CSS.
You can experiment with different units and values to achieve the desired typography for your web pages.
How to use CSS font size values ?
complete code example in html
Here’s a complete HTML code example that demonstrates the usage of different font size values in CSS:
<!DOCTYPE html>
<html>
<head>
<title>Font Size Example</title>
<style>
p {
font-size: 16px; /* Absolute length in pixels */
}
h1 {
font-size: 2em; /* Relative to the font size of the parent element */
}
h2 {
font-size: 150%; /* Relative to the font size of the parent element */
}
h3 {
font-size: 3rem; /* Relative to the font size of the root element */
}
h4 {
font-size: 2vw; /* Relative to the viewport width */
}
h5 {
font-size: 5vh; /* Relative to the viewport height */
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<p>This is a paragraph with a font size of 16 pixels.</p>
</body>
</html>
Explanation:
1-In this example, we have applied different font size values to headings (h1 to h5) and a paragraph (p) element.
2-You can save this code in an HTML file and open it in a web browser to see the different font sizes in action.
Try to modify the font sizes and units in the CSS styles to see how they affect the rendered text on the page.
How to use CSS Absolute lengths for font size ?
Absolute Lengths: complete code in html
Here’s a complete HTML code example that demonstrates the usage of absolute lengths for font sizes in CSS:
<!DOCTYPE html>
<html>
<head>
<title>Absolute Lengths Example</title>
<style>
p {
font-size: 16px; /* Font size of 16 pixels */
}
h1 {
font-size: 24px; /* Font size of 24 pixels */
}
h2 {
font-size: 18px; /* Font size of 18 pixels */
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph with a font size of 16 pixels.</p>
</body>
</html>
Explanation:
1-In this example, we have applied absolute lengths for font sizes using the px unit.
2-The p element has a font size of 16 pixels, the h1 element has a font size of 24 pixels, and the h2 element has a font size of 18 pixels.
You can save this code in an HTML file and open it in a web browser to see the rendered text with the specified font sizes.
Try to modify the pixel values in the CSS styles to experiment with different font sizes for the headings and paragraph.
How to use Relative lengths for CSS font size?
Relative Lengths: complete code in html
Here’s a complete HTML code example that demonstrates the usage of relative lengths for font sizes in CSS:
<!DOCTYPE html>
<html>
<head>
<title>Relative Lengths Example</title>
<style>
p {
font-size: 16px; /* Absolute length in pixels */
}
h1 {
font-size: 2em; /* Relative to the font size of the parent element */
}
h2 {
font-size: 1.5em; /* Relative to the font size of the parent element */
}
h3 {
font-size: 1.2em; /* Relative to the font size of the parent element */
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<p>This is a paragraph with a font size of 16 pixels.</p>
</body>
</html>
Explanation:
1-In this example, we have used relative lengths for font sizes.
2-The p element has an absolute length of 16 pixels, while the h1, h2, and h3 elements have font sizes specified in em units, which are relative to the font size of the parent element.
You can save this code in an HTML file and open it in a web browser to see the rendered text with the specified font sizes.
Try to modify the em values in the CSS styles to experiment with different relative font sizes for the headings relative to the parent font size.
How to use perecentage values for CSS font size?
Percentage: complete code in html
Here’s a complete HTML code example that demonstrates the usage of percentage values for font sizes in CSS:
<!DOCTYPE html>
<html>
<head>
<title>Percentage Example</title>
<style>
p {
font-size: 16px; /* Absolute length in pixels */
}
h1 {
font-size: 200%; /* 200% of the parent element's font size */
}
h2 {
font-size: 150%; /* 150% of the parent element's font size */
}
h3 {
font-size: 120%; /* 120% of the parent element's font size */
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<p>This is a paragraph with a font size of 16 pixels.</p>
</body>
</html>
Explanation:
1-In this example, we have used percentage values for font sizes.
2-The p element has an absolute length of 16 pixels, while the h1, h2, and h3 elements have font sizes specified in percentages, which are relative to the font size of the parent element.
You can save this code in an HTML file and open it in a web browser to see the rendered text with the specified font sizes.
Try to modify the percentage values in the CSS styles to experiment with different relative font sizes for the headings relative to the parent font size.
Application about this lesson
Here’s an example of an application that utilizes the concepts covered in this lesson on CSS font properties:
<!DOCTYPE html>
<html>
<head>
<title>Font Styling Application</title>
<style>
.highlight {
font-family: "Helvetica", Arial, sans-serif;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
color: #FF0000;
text-decoration: underline;
text-align: center;
}
</style>
</head>
<body>
<h1 class="highlight">Welcome to My Website</h1>
<p>This is a paragraph that demonstrates the use of various font properties.</p>
<p class="highlight">This paragraph is styled with a highlighted font.</p>
</body>
</html>
Explanation:
1-In this example, we have an application that showcases the use of different CSS font properties.
2-The highlight class is defined in the <style> block, and it applies various font properties to the elements with this class:
- font-family sets the preferred font to “Helvetica”, with fallbacks to Arial and sans-serif.
- font-size sets the font size to 18 pixels.
- font-weight makes the text bold.
- text-transform transforms the text to uppercase.
- color sets the text color to red (#FF0000).
- text-decoration underlines the text.
- text-align centers the text horizontally.
We use the highlight class to apply these font styles to the <h1> element and the second <p> element within the <body> section.
This application demonstrates how you can combine and apply different CSS font properties to create visually appealing text styles.
You can modify and experiment with the font properties to achieve the desired look and feel for your own projects.
Quiz with answers about this lesson
Here’s a multiple-choice quiz with answers based on the concepts covered in this lesson on CSS font properties:
1-Which CSS property is used to specify the font family?
a) font-size
b) font-weight
c) font-family
d) font-style
Answer: c) font-family
2-Which CSS property is used to specify the font size?
a) font-weight
b) font-size
c) font-style
d) font-family
Answer: b) font-size
3-Which CSS property is used to specify the font style?
a) font-weight
b) font-size
c) font-style
d) font-family
Answer: c) font-style
4-Which CSS property is used to specify the font weight?
a) font-weight
b) font-size
c) font-style
d) font-family
Answer: a) font-weight
5-Which CSS property is used to control the letter spacing?
a) line-height
b) word-spacing
c) letter-spacing
d) text-indent
Answer: c) letter-spacing
6-Which CSS property is used to control the text alignment?
a) text-indent
b) text-transform
c) text-overflow
d) text-align
Answer: d) text-align
7-Which CSS property is used to control the text decoration?
a) text-indent
b) text-transform
c) text-overflow
d) text-decoration
Answer: d) text-decoration
8-Which CSS property is used to control the text transformation?
a) text-indent
b) text-transform
c) text-overflow
d) text-decoration
Answer: b) text-transform
9-Which CSS property is used to control the spacing between words?
a) letter-spacing
b) line-height
c) text-align
d) word-spacing
Answer: d) word-spacing
10-Which CSS property is used to control how white space is handled?
a) white-space
b) text-indent
c) text-decoration
d) text-transform
Answer: a) white-space
11-Which CSS property is used to specify the line height?
a) text-indent
b) text-decoration
c) line-height
d) text-transform
Answer: c) line-height
12-Which CSS property is used to control the visibility of text overflow?
a) text-decoration
b) text-indent
c) text-overflow
d) text-transform
Answer: c) text-overflow
13-Which CSS property is used to specify the font variant?
a) font-style
b) font-weight
c) font-variant
d) font-size
Answer: c) font-variant
14-Which CSS property is used to stretch or compress the width of the font?
a) font-weight
b) font-stretch
c) font-size
d) font-family
Answer: b) font-stretch
15-Which CSS property is used to control the indentation of the first line of text?
a) text-indent
b) text-decoration
c) text-transform
d) text-align
Answer: a) text-indent
16-Which CSS property is used to specify the shadow effect for text?
a) text-indent
b) text-shadow
c) text-decoration
d) text-transform
Answer: b) text-shadow
17-Which CSS property is used to control the spacing between individual characters?
a) letter-spacing
b) word-spacing
c) line-height
d) text-align
Answer: a) letter-spacing
18-Which CSS property is used to control the spacing between words in a line of text?
a) letter-spacing
b) word-spacing
c) line-height
d) text-align
Answer: b) word-spacing
19-Which CSS property is used to vertically align text within its container?
a) text-indent
b) text-decoration
c) vertical-align
d) text-align
Answer: c) vertical-align
20-Which CSS property is used to control the display of white space within an element?
a) text-indent
b) text-decoration
c) white-space
d) text-align
Answer: c) white-space
21-Which CSS property is used to set multiple font-related properties in a single declaration?
a) font-family
b) font-size
c) font-style
d) font
Answer: d) font
22-Which CSS property is used to control the size, weight, and style of a font in a single declaration?
a) font-size
b) font-weight
c) font-style
d) font
Answer: d) font
23-Which CSS property is used to control the visibility of line breaks and spaces within an element?
a) white-space
b) line-height
c) word-spacing
d) letter-spacing
Answer: a) white-space
24-Which CSS property is used to control the alignment of text vertically within a line?
a) text-align
b) line-height
c) vertical-align
d) text-indent
Answer: c) vertical-align
25-Which CSS property is used to control the appearance of a horizontal line beneath the text?
a) text-decoration
b) text-indent
c) text-align
d) text-transform
Answer: a) text-decoration
References
Here are some references you can explore for further information on CSS font properties:
CSS Fonts Module Level 4 Specification: