CSS - font-size property

font-size in CSS is a property that defines the length (size) of a font.

font-size by himself is an element of typography.

The font-size uses generally a relative sizing

• The base size is set on the body with a value of 16 pixel

body {
  font-size: 16px;
}

• Every p.x element will show x times the size of its body parent (see CSS - Rem (Root Emphemeral Unit)

p.base1 { font-size: 1rem } /* ie 1rem = 1 * 16px = 12 px */
p.base2 { font-size: 2rem } /* ie 2rem = 2 * 16px = 32 px */

• The html code

<p class="base1">16px text</p>
<p class="base2">32px text</p>

• Output:

The base unit size for relative sizing that is set on the body has generally a set of 16px

This is the default for web browsers which means that setting a 1rem on the body will get you a font-size of 16px.

body {
    font-size: 1rem;
}

• How to get the font-size CSS property ?

Window/getComputedStyle

.parent { font-size: 20px }
.medium { font-size: 0.75em }
.small { font-size: 0.5em }

<div class="parent">
    <p>Hello Nico</p>
    <p class="medium">Hello Nico</p>
    <p class="small">Hello Nico</p>
</div>

div = document.querySelector("div");
console.log("The font size of the parent div element is "+window.getComputedStyle(div).fontSize);
allP = document.querySelectorAll("p");
console.log("The font size of the first p element is "+window.getComputedStyle(allP.item(0)).fontSize);
console.log("The font size of the medium p element is "+window.getComputedStyle(allP.item(1)).fontSize);
console.log("The font size of the small p element is "+window.getComputedStyle(allP.item(2)).fontSize);