Understanding CSS3’s Font-Size Property

Published October 30, 2016 by CSS Newbies.

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.

Screen Shot 2016-10-30 at 2.40.11 PM

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;
}

Screen Shot 2016-10-30 at 2.39.49 PM

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%;
}

Screen Shot 2016-10-30 at 2.45.47 PM

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>