CSS3’s font-size property is one that is used very commonly, so it’s important to understand exactly how to use it. Most new developers may think that the font-size property only takes fixed values in any of the common units of measurement (px, em, rem, cm, etc), but the property also takes values in percentages (%) and predefined values (small, medium, large, etc), which is what we’ll cover in this post.
The predefined values that the font-size property takes are as follows:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller
- larger
Here’s an example of how you’d use it in your CSS (compare the font-size in the screenshot below to the font-size in the one above to see the difference between the default and the fixed values):
- p{
- font-size: larger;
- }
You can also adjust or define the font-size using percentage values, which work to set the font-size to a percentage of the font-size of the parent value. Check it out below:
- p{
- font-size: 300%;
- }