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 following sets the font-size so that exactly 40em fits within the viewport, ensuring that roughly the same amount of text always fills the screen no matter the screen size.

With the root selector, the calc function and the vw length unit (1/100th of the window's width)

:root {
  font-size: calc(100vw / 40);
}

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

The higher the font-size, the readable.

Not that for small size, you can use the font-size-adjust property ¹⁾ legibility of fonts, especially at small sizes