The CSS font-size property is used to define the size of text content. You can set the font size using absolute units like pixels (px) for a fixed size, or relative units like em, rem, vw, vh, or percentages for responsive and scalable designs.
Font size plays a crucial role in readability and visual hierarchy, so choosing an appropriate size is important for effective communication on your web pages.
The font-size property can be specified using pixels (px). Pixels provide an absolute measurement, meaning the font size will have a fixed value regardless of the device or screen resolution
Example
p {
font-size: 16px;
}
This sets the font size of <p> elements to 16 pixels.
CSS provides several relative units for specifying font size relative to other elements. These units are helpful for creating responsive designs that adapt to different screen sizes.
The em unit represents the font size relative to the parent element's font size.
h1 {
font-size: 2em;
}
This sets the font size of <h1> elements to be twice the size of their parent element's font size.
The rem unit represents the font size relative to the root element (<html>). It ensures consistent sizing regardless of the nesting hierarchy.
p {
font-size: 1.2rem;
}
This sets the font size of <p> elements to be 1.2 times the font size of the root element.
The vw and vh units represent a percentage of the viewport width and height, respectively. They allow for responsive font sizing based on the size of the viewport.
h1 {
font-size: 5vw;
}
h2 {
font-size: 3vh;
}
In this example, the font size of <h1> elements is set to 5% of the viewport width (vw unit), and the font size of <h2> elements is set to 3% of the viewport height (vh unit).
Let's say the viewport width is 1000 pixels and the viewport height is 600 pixels. Here's how the font sizes would be calculated:
Using vw and vh units for font size allows you to create responsive designs where the font scales proportionally based on the width and height of the viewport. This ensures that the text remains readable and appropriately sized across different devices and screen resolutions.
Remember to adjust the percentages (5vw and 3vh) according to your specific design needs to achieve the desired font sizes.
The font-size property can also be specified using percentages. Percentages are relative to the font size of the parent element.
.container {
font-size: 120%;
}
This sets the font size of elements with the class "container" to 120% of their parent element's font size.
It's important to consider factors such as readability, accessibility, and responsive design when choosing font sizes. Testing and adjusting font sizes across different devices and screen sizes can help ensure that your text content is legible and visually pleasing for your users.
<html>
<head>
<style>
html {
font-size: 18px; /* Sets the base font size for the entire HTML document. 1rem = 16px.
Note: The font-size value of the HTML element will not affect the em value
because the font-size value is defined in the body element. */
}
body {
font-size: 16px; /* Sets the base font size for the body element. 1em = 16px. */
}
div.wrapper {
font-size: 20px; /* Sets the font size for the elements inside the div
with the class "wrapper". 1em = 20px for the elements inside this div. */
}
h1 {
font-size: 3em; /* Sets the font size for the h1 heading element.
3em = 48px (assuming the base font size is 16px). */
}
div.wrapper h1 {
font-size: 3em; /* Overrides the font size for the h1 heading element when it is inside
the div with the class "wrapper". 3em = 60px (assuming the base font size is 20px). */
}
</style>
</head>
<body>
<div class="wrapper">
<h1>This is a heading</h1>
</div>
</body>
</html>