CSS - font-size property

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.

By setting font-size on different media query, you will set up what's called a responsive typography

3 - Example

The font-size uses generally a relative sizing

body {
  font-size: 16px;

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

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap