Font height

The font-size property is used to set the font size :

    font-size: 18px;

In this case, the font height will be 18 pixels. Pixels represent the most commonly used units of measure. To specify a value in pixels, the value itself is followed by the abbreviation “px”.
If no font-height is explicitly applied to the text, the browser’s default values ​​are used. For example, for plain text in paragraphs, this is 16 pixels. This is the base text style.

The basic style for different text elements is different: if for paragraphs it is 16 pixels, then for h1 headings it is 32 pixels, for h2 headings it is 24 pixels, and so on.

You can also use a variety of units to measure font.


There are seven keywords in CSS that allow you to set a font size relative to the base:

  • medium : browser’s base font size (16px)
  • small : 13 pixels
  • x-small : 10px
  • xx-small : 9 pixels
  • large : 18 pixels
  • x-large : 24 pixels
  • xx-large : 32 pixels
  • For example:
  • font-size: x-large;


Percentages allow you to set the value relative to the base or legacy font. For example:

font-size: 150%;

In this case, the font height will be 150% of the base, i.e. 16px * 1.5 = 24px

Font inheritance can change the final value. For example, the following situation:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Font Height in CSS3</title>
        <p>Once upon a time in the cold winter time</p>

Here, the p element inherits a 10px height font from its container div. That is, 10 pixels will now be the base for the paragraph.

Next, the p element is given a new font height of 150%. This means that the final height will be 10px * 1.5 = 15px.

Unit em

The em unit is in many ways equivalent to percentages. So, 1em equals 100%, .5emequals 50%, etc.