CSS font-size Property Tutorial

In this section, we will learn what the font-size property is and how to use it in CSS.

CSS font-size property

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.

CSS font-size property

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:

  1. 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;
  1. 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.

Leave a Reply