In this section, we will learn what the font-size property is and how to use it in CSS.
Click here to run the example of font-size property.
CSS font-size Property Definition and Usage
In an HTML document, there are times we want to emphasize a line or a paragraph so that people can see that easily. This is where we can use the `font-size` property.
We use `font-size` property in order to change the size of texts on a page.
Note: the type of font also effects on the final size of that font.
In the picture above, all 4 lines have the same font-size but because the type of font is different for each line, some of the lines have slightly different size than the others.
CSS font-size Property Syntax
font-size: medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;
CSS font-size Property Value
We can assign two types of value to “font-size” property:
- Absolute: these values are fixed and won’t change based on the environment factors in which the page displayed in (like browser’s width or height etc.).
Example:
font-size:16px; font-size:10mm; font-size:1cm; font-size:1in;
- Relative: these values are not fixed and they change based on the environment factors in which the page displayed in! For example, if we change a width or height of a browser, the value of the font-size will change as well. Basically, there’s a dependency between relative values and their surrounding environment).
Example:
font-size: 1em; font-size:2vh; font-size:3vw;
Other than using relative and absolute unit values, we can also use a set of keywords as the value of this property:
- medium: this value sets the size to a medium size. This is the default value.
- xx-small: this value sets the font-size to a xx-small size.
- x-small: this value sets the font-size to an extra small size.
- small: this value sets the font-size to a small size.
- large: this value sets the font-size to a large size.
- x-large: this value sets the font-size to an extra-large size.
- xx-large: this value sets the font-size to a xx-large size.
- smaller: this value sets the font-size to a size smaller than the parent element.
- larger: this value sets the font-size to a size larger than the parent element.
- %: this value sets the font-size to a percentage of the parent element’s current font-size.
- “initial” and “inherit”: the global values could also be used for this property.
Note: font-size property is one of those properties that inherits value from its parent if no explicit value is assigned.
If we don’t explicitly set a value for font-size property, it will inherit its value from its parent element. And if the parent also didn’t set any explicit value, it will inherit font-size value from its parent. If none of the ancestor elements explicitly set the value for the font-size property, the final value will be the one that is set by default for the root element (<html>) which is 16px.
Example: font-size property in CSS
See the Pen font-size property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.
How Does CSS font-size Property Work?
Note: Although you can create a header using <p> element and change its size using font-size property in order to emphasize it, you SHUOLD always use <h1-h6> if you want to create a header.
This is for SEO reason! Basically, Search Engines look for <h1-h6> when they want to find headers on a page.
So if you want to increase your rank within search engines results, make sure you use <h1-h6> headers.
Example: CSS text size
See the Pen CSS text size by Omid Dehghan (@enjoytutorials1) on CodePen.
Example: change font size in HTML
See the Pen change font size in HTML by Omid Dehghan (@enjoytutorials1) on CodePen.
