1

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Joe Fenny
  • 205
  • 1
  • 2
  • 7
  • Well... you mean like this? `body { font-size: 12em; }` – Siyah May 29 '14 at 10:34
  • The default size of the text can be set in body – AndrewWhite May 29 '14 at 10:34
  • so to set the font size i just change it in body as px then the rest as em? – Joe Fenny May 29 '14 at 10:37
  • What do you mean by “transfer my text sizes for px's to em's”? They are two different units, and one of them is physical (though not really fixed), the other one is relative. So this is like asking how to transfer something from kilograms to percentages. – Jukka K. Korpela May 29 '14 at 13:07

4 Answers4

4

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.

rob_was_taken
  • 384
  • 4
  • 14
  • 1
    Only think to be careful of is that rem (root em) isn't available on IE8. Might not make any difference, but it's worth bearing in mind :) – PeteAUK May 29 '14 at 10:50
  • Right okay, thank you for the info on rem, definitely will be using this also. I would upvote but i can't until I have more reputation :| – Joe Fenny May 29 '14 at 10:57
  • You're right PeteAUK, always worth considering (sadly). Thanks @JoeFenny - you've already marked another answer as correct so can't mark two. PeteAUK's answer is good though so we're all good - we're not here for the points :) Glad it helped out. – rob_was_taken May 29 '14 at 11:41
  • I've managed to format the page so the text is the same as it was but with em measurements, however when I go on the uploaded dev site to test it, the text is still huge on mobile :/ any further ideas? the site is dev.kerrigans.org if you go on on a mobile you can see the text is too big. – Joe Fenny May 29 '14 at 12:17
  • Hey Joe - Don't take this the wrong way but there is quite a lot wrong with that site to be able to debug effectively. That said, I'm looking on mobile now, what issues are you trying to overcome? It looks about as good as I expect apart from the "Property Sales and Lettings" dropping to two lines. @JoeFenny – rob_was_taken May 29 '14 at 12:35
  • It's the size of the text compared with the images etc, the actual text on the mobile site is sort of scaled up and cant be zoomed out of. And no worries, I didn't create the site, I'm trying to improve it, but sort of learning web design as i go. – Joe Fenny May 29 '14 at 14:59
  • I think you learn more (and quicker) by rebuilding the site - you have a lot of hurdles to overcome there that you have inherited from the previous builder. Look around at some css layout tutorials and start again, you'll be surprised how quickly it will come together. PS: You travel all over the internet and you're talking to a guy in Donny ;) Small world. – rob_was_taken May 30 '14 at 18:14
1

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...

webkit
  • 3,349
  • 1
  • 16
  • 18
0

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;
}
PeteAUK
  • 968
  • 6
  • 16
0

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
sharadrathore046
  • 13
  • 1
  • 3