CODEWITHSUNDEEP
htmlcssfont-size
Joe Fenny
Joe Fenny

Reputation: 225

How to change font size to em

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?

Upvotes: 1

Views: 3000

Answers (4)

sharadrathore046
sharadrathore046

Reputation: 13

Set Font Size With Em

h1 {font-size:2.5em;} // 40px/16=2.5em 

h2 {font-size:1.875em;} // 30px/16=1.875em 

p {font-size:0.875em;} // 14px/16=0.875em

Upvotes: 0

rob_was_taken
rob_was_taken

Reputation: 413

You can set default text size for the document on the body element.

body {
    font-size: 100%;
}

This will set the base font size to 100% - approximately 16px in most browsers. You can then assign font-sizes in relation to this.

For example:

h1 {
    font-size: 2em; // This will render at 200% of the base font so around 32px
}

small {
    font-size: .5em // This will render at 50% of the base font size
}

Remember though that these are relevant to their parent though, so putting a <small> element within a <h1> will mean that the small element will render at 50% of that of its parent - in this case back to the base font size... confusing right?

To counteract this I would use rem rather than em (there's also nothign wrong with using pixels for fonts). rem units always refer to the parent element - so .5rem will always be 50% of the base font size, regardless of the parent size.

Hope that helps.

Upvotes: 5

PeteAUK
PeteAUK

Reputation: 988

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

Upvotes: 1

webkit
webkit

Reputation: 3369

set your body in percent and the rest in ems:

body { font-size:62.5%}; // this means 10 px

div { font-size:2em} // this will be 20px
p { font-size:1em} // this will be 10px

and so on...

Upvotes: 1

Related Questions