Qfyilyi

Currently in the final stages of building a new website and have recently ran an accessibility checker. The checker is recommending changing my font sizes from px to em.
However when I do a straight forward conversion (16px to 1em) the font becomes really small. Am I missing something?

Here is my styling.

.bodyText {font-size: 16px !important; padding-top: 10px; margin-bottom: 20px;}

.bodyText a {color: #008080 !important; text-decoration: underline;}

.bodyText a:hover {color: #008080 !important;}

.bodyText li {font-size: 16px !important; color: #686868;}

.bodyText p {font-size: 16px !important; color: #686868;}

.bodyText p strong {color: #333333;}

All of this also sits in the body which has this attached.

body {font-size: 16px !important; font-family: "Source Sans Pro", sans-serif !important; font-style: normal; font-weight: normal;}

tbody {font-size: 16px !important; font-family: "Source Sans Pro", sans-serif !important; font-style: normal; font-weight: normal;}

First of all let me say that EM is used locally and REM is used globally what do i mean with that?

Rem uses the html tag font-size so if:

html {

  font-size: 16px;

}

Then the 1 rem is equal to 16px

On the other hand when you use em you need to be context aware, meaning that if the parent container of the text element got font-size: 12px the 1em becomes 12px

You can read more about it here: https://j.eremy.net/confused-about-rem-and-em/

So em is not a size like px is. em refers to the current font-size set on an item,

so if

p {

  font-size: 16px;

}

then when you add in the em to a certain piece like say you have

<p class="em-class">Hello World</p>

<style>

.em-class {

 font-size: 2em;

 }

</style>

then your font-size would be 32px on that class. It essentially works as a % of the current font-size