CSS - font-size Property
CSS font-size property sets the size of the font for an elements text. It can be defined using various units like pixels, ems, rems, percentages, or keywords, impacting text readability, layout, and overall design consistency across different devices and resolutions.
Syntax
font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | percentage | initial | inherit;
Property Values
| Value | Description |
|---|---|
| medium | It sets the element's font size as medium. |
| xx-small | It sets the element's font size as xx-small. |
| x-small | It sets the element's font size as x-small. |
| small | It sets the element's font size as small. |
| large | It sets the element's font size as large. |
| x-large | It sets the element's font size as x-large. |
| xx-large | It sets the element's font size as xx-large. |
| smaller | It sets the element's font size as smaller. |
| larger | It sets the element's font size as larger. |
| length | The font size of the element is specified in length units (px, em, rems etc.) |
| percentage | The font size of the element is specified in percentage. |
| initial | It sets the property to its initial value. |
| inherit | It inherits the property from the parent element. |
Examples of CSS Font Size Property
The following examples explain the font-size property with different values.
Font Size Property with Medium Value
To set a medium size to the element's font, we use the medium value. This is shown in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.font {
font-size: medium;
}
</style>
</head>
<body>
<h2>
CSS font-size property
</h2>
<p>
This is sample text.
</p>
<p class="font">
This text has a medium size.
</p>
</body>
</html>
Font Size Property with XX-Small Value
To set a xx-small size to the element's font, we use the xx-small value. This is shown in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.font {
font-size: xx-small;
}
</style>
</head>
<body>
<h2>
CSS font-size property
</h2>
<p>
This is sample text.
</p>
<p class="font">
This text has a xx-small size.
</p>
</body>
</html>
Font Size Property with X-Small Value
To set a x-small size to the element's font, we use the x-small value. This is shown in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.font {
font-size: x-small;
}
</style>
</head>
<body>
<h2>
CSS font-size property
</h2>
<p>
This is sample text.
</p>
<p class="font">
This text has a x-small size.
</p>
</body>
</html>
Font Size Property with Small Value
To set a small size to the element's font, we use the small value. This is shown in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.font {
font-size: small;
}
</style>
</head>
<body>
<h2>
CSS font-size property
</h2>
<p>
This is sample text.
</p>
<p class="font">
This text has a small size.
</p>
</body>
</html>
Font Size Property with Large Value
To set a large size to the element's font, we use the large value. This is shown in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.font {
font-size: large;
}
</style>
</head>
<body>
<h2>
CSS font-size property
</h2>
<p>
This is sample text.
</p>
<p class="font">
This text has a large size.
</p>
</body>
</html>
Font Size Property with X-Large Value
To set a x-large size to the element's font, we use the x-large value. This is shown in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.font {
font-size: x-large;
}
</style>
</head>
<body>
<h2>
CSS font-size property
</h2>
<p>
This is sample text.
</p>
<p class="font">
This text has a x-large size.
</p>
</body>
</html>
Font Size Property with XX-Large Value
To set a xx-large size to the element's font, we use the xx-large value. This is shown in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.font {
font-size: xx-large;
}
</style>
</head>
<body>
<h2>
CSS font-size property
</h2>
<p>
This is sample text.
</p>
<p class="font">
This text has a xx-large size.
</p>
</body>
</html>
Font Size Property with Smaller Value
To set a smaller size to the element's font, we use the smaller value. This is shown in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.font {
font-size: smaller;
}
</style>
</head>
<body>
<h2>
CSS font-size property
</h2>
<p>
This is sample text.
</p>
<p class="font">
This text has a smaller size.
</p>
</body>
</html>
Font Size Property with Larger Value
To set a larger size to the element's font, we use the larger value. This is shown in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.font {
font-size: larger;
}
</style>
</head>
<body>
<h2>
CSS font-size property
</h2>
<p>
This is sample text.
</p>
<p class="font">
This text has a larger size.
</p>
</body>
</html>
Font Size Property with Length Values
The font-size of an element can also be set using length values (e.g. px, rem, em etc.). This is shown in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.size1 {
font-size: 2em;
}
.size2 {
font-size: 25px;
}
.size3 {
font-size: 3rem;
}
</style>
</head>
<body>
<h2>
CSS font-size property
</h2>
<p>
This is sample text.
</p>
<p class="size1">
This text has a 2em size.
</p>
<p class="size2">
This text has a 25px size.
</p>
<p class="size3">
This text has a 3rem size.
</p>
</body>
</html>
Font Size Property with Percentage Values
The font-size of an element can also be set using percentage values (e.g. 10%, 4% etc.). This is shown in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.size1 {
font-size: 120%;
}
.size2 {
font-size: 140%;
}
</style>
</head>
<body>
<h2>
CSS font-size property
</h2>
<p>
This is sample text.
</p>
<p class="size1">
This text has a 120% size.
</p>
<p class="size2">
This text has a 140% size.
</p>
</body>
</html>
Supported Browsers
| Property |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| font-size | 1.0 | 5.5 | 1.0 | 1.0 | 7.0 |