Set Font Size Using font-size [2/16]

The font-size property sets the font size.

The best unit for font size is em, a relative measurement unit. 1em is commonly equal to the width of the letter M in a given font.

Also, you can set font size in other units e.g.:

  • Pixels: 20px
  • Points: 15pt
  • Percentage: 80%

Pixels and points are absolute units while percentage is a relative unit.

Moreover, you can set the font size using keywords: small, large, etc. However, such keywords are commonly avoided.

Do it
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Set Font Size Using font-size:</title> </head> <body> <h1>What Graceful Degradation Does?</h1> <p><span class="bigger">With Graceful Degradation</span> your Web page would work with JavaScript disabled, look quite neat in a browser not supporting new CSS3-specific features, and be displayed adequately with images toggled off.</p> <p>In any case, the user would be able to run the interface, <span class="smaller">although probably without the same ease and comfort</span>.</p> </body> </html>
HTML Academy
  1. Set the header size to 1em.
  2. For the tag with the bigger class, set the size of 1.5em.
  3. For the tag with the smaller class, set the size of 0.7em.
Theory Check Next