CSS - font-size property
Table of Contents
1 - What is font-size in CSS ?
font-size in CSS is a property that defines the length (size) of a font.
font-size by himself is an element of typography.
2 - Articles Related
3 - Example
The font-size uses generally a relative sizing
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:
4 - Size
4.1 - Base
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;
}
5 - How to
5.1 - Calculated font-size
.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);