Definition:
CSS Font size is used to set the font size of your browser. The default text size in the browser is 16 px. 1 em is equal to your current text size. Here, 1 em = 16 px. If your default text size is 25 px then 1 em = 25 px.
Syntax:
font-size: smaller | xx-small | x-small | small | medium | large | x-large | xx-large | larger | length | % | initial | inherit;Property Value:
| Property Value | Description |
| 1. smaller | set the font-size smaller than its parent size |
| 2. xx-small | set the font-size to an xx-small size |
| 3. x-small | set the font-size to an x-small size |
| 4. small | set the font-size to an small size |
| 5. medium | set the font-size to medium size. This is a default font-size. |
| 6. large | set the font-size to a large size |
| 7. x-large | set the font-size to an extra-large size |
| 8. xx-large | set the font-size to a double extra large size |
| 9. larger | set the font-size to a larger size than its parent size |
| 10. length | set the font-size in a fixed size defined by px, em, in, etc. |
| 11. % | set the font-size to a percentage value. |
| 12. initial | set the font-size to its default value. |
| 13. inherit | Inherit the font-size to its parent value. |
Scroll down to see each font-size output with example.
1. smaller
Definition:
It sets the font size smaller than its parent size
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.smaller {
border: 3px solid black;
background-color: pink;
font-size: smaller;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="smaller">This is a paragraph with a smaller font size.</div>
</body>
</html>
Output:
2. xx-small
Definition:
It sets the font size to xx-small size.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.xx-small {
border: 3px solid black;
background-color: pink;
font-size: xx-small;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="xx-small">This is a paragraph with a xx-small font size.</div>
</body>
</html>
Output:
3. x-small
Definition:
It sets the font size to x-small size.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.x-small {
border: 3px solid black;
background-color: pink;
font-size: x-small;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="x-small">This is a paragraph with a x-small font size.</div>
</body>
</html>
Output:
4. small
Definition:
It sets the font size to a small size.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.small {
border: 3px solid black;
background-color: pink;
font-size: small;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="small">This is a paragraph with a small font size.</div>
</body>
</html>
Output:
5. medium
Definition:
It sets the font size to medium size. This is a default font size.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.medium {
border: 3px solid black;
background-color: pink;
font-size: medium;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="medium">This is a paragraph with a medium font size.</div>
</body>
</html>
Output:
6. large
Definition:
It sets the font size to a large size.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.large {
border: 3px solid black;
background-color: pink;
font-size: large;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="large">This is a paragraph with a large font size.</div>
</body>
</html>
Output:
7. x-large
Definition:
It sets the font size to extra-large size.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.x-large {
border: 3px solid black;
background-color: pink;
font-size: x-large;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="x-large">This is a paragraph with an extra large font size.</div>
</body>
</html>
Output:
8. xx-large
Definition:
It sets the font size to double the extra-large size.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.xx-large {
border: 3px solid black;
background-color: pink;
font-size: xx-large;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="xx-large">This is a paragraph with a double extra large font size.</div>
</body>
</html>
Output:
9. larger
Definition:
It sets the font size to a larger size than its parent size
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.larger {
border: 3px solid black;
background-color: pink;
font-size: larger;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="larger">This is a paragraph with a larger font size.</div>
</body>
</html>
Output:
10. length
Definition:
It sets the font size in a fixed size defined by px, em, in, etc.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.px {
border: 3px solid black;
background-color: pink;
font-size: 15px;
}
.em {
border: 3px solid black;
background-color: pink;
font-size: 2em;
}
.in {
border: 3px solid black;
background-color: pink;
font-size: 0.2in;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="px">This is a paragraph with a 15px font size.</div>
<div class="em">This is a paragraph with a 2em font size.</div>
<div class="in">This is a paragraph with a 0.2in font size.</div>
</body>
</html>
Output:
11. %
Definition:
It sets the font size to a percentage value.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.percentage{
border: 3px solid black;
background-color: pink;
font-size: 50%;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="percentage">This is a paragraph defined in a 50% percentage font size.</div>
</body>
</html>
Output:
12. initial
Definition:
It sets the font size to its default value.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.initial{
border: 3px solid black;
background-color: pink;
font-size: initial;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="initial">This is a paragraph set the font-size to its initial default value.</div>
</body>
</html>
Output:
13. inherit
Definition:
It inherits the font size of its parent value.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.inherit{
border: 3px solid black;
background-color: pink;
font-size: inherit;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="inherit">This is a paragraph set the font-size inherit to its parent value.</div>
</body>
</html>
Output:
Donate to support writers
You may be interested in the following topics:
- CSS Font Google
- CSS Font Kerning
- CSS Font Weight
- CSS Font Variant
- CSS Font Stretch
- CSS Font Style
- CSS Font Size
- CSS Font Family
- CSS Font (All Properties)