How to change font size to em

Issue

How do I set my default text size so that i can transfer my text sizes for px’s to em’s?

On This thread, it was explained that em’s work as a scale and therefore my text will be an appropriate size on mobile, but how do I set my default text size so that I can set my em sizes?

How do I set the measurement that I’m scaling by using em’s?

Solution

Generally I set the body size to a fixed pixelage and then em the rest:

body {
    font-size: 14px;
}
p {
    font-size: 1em;
}
h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.8em;
}

This gives a p size of 14px, h1 of 28px, h2 of 25px.

Equally if you want to use whatever size the browser uses just use:

body {
    font-size: 1em;
}

Answered By – PeteAUK

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published