Font size in EMs

Hey there,

Think I’m a bit confused on font size in EMs. I need to increase the font size on my site. The CSS currently has the following body font defined: font: 12px/1.8

When I look at px to EM conversion websites, they say 12px converts to .750em, so not sure where the 1.8 comes from. I believe though it can vary depending on the font that is defined?

If I want to increase my font size to 14px, can I assume I should change this to: font 14px/2.0 or something like that ?

Hoping someone can clear this up for me and I can learn something new!

Thanks.

1.8 is the line height.

I’d say just test tweaking font size and line height till it suits what you want.

The px to em conversion is just a rough guide. As a rough guide, 1em = 16px, but that’s just a starting point at best. Anyhow, if you are just going to change the font size on the body to 14px, then ems don’t really come into the equation.

If I want to increase my font size to 14px, can I assume I should change this to: font 14px/2.0 or something like that ?

As bluedreamer said, just experiment to see what looks right. 1.8 is quite a tall line height. I tend to go for about 1.3 to 1.5. But if you leave it at 14px/1.8, the line height will adjust to the same proportions as before, as it basically is setting the line height at 1.8 times the font size. You can lock it down by including a value, like 14px/24px.

Be aware, though, that’s it’s not a great practice to set the body font in px. It is a bit restrictive for some end users who want to make the text larger and easier to read. It’s generally better to set font sizes in em or %. E.g. You could just as easily set the body font size to 0.875em/1.8 or 87.5%/1.8 and do your end users a favor.

As web developers we should ALWAYS respect what users/devices have as their comfortable continuous reading default font-size and NEVER use absolute font sizes for continuous text. I would highly recommend never using absolute font sizes such as pixels. The device/user knows what the *best font size is for them for continuous text and from there all other text components can be sized using appropriate relative measurements from the default base. I go even further and tend to completely avoid absolute measurements for anything these days. The technology has progressed far enough to where you really don’t need to use pixels or absolute measurements for anything, not even images. The only exception to that is probably borders.

I find this the most useful method:


html { 
    font-size: 62.5%; 
}
body {
    font: normal 1.3em Verdana; 
}

Declaring a percentage size on the html element standardizes older IEs. And 62.5% plus 1.3em for the body element results in exactly 13px, in terms of rendering. 1.4em results in exactly 14px, etc.

Furthermore, Verdana has shown to be the font type that is best readable on computers.

No it doesn’t - it only does that when the browser is configured a certain way.

The versions of IE that needed the fix are now long dead but the most appropriate vale to use when the fix was required is 100%

It is possible that 1px = 1em or that 100000000000px = 1em or anywhere in between. Browsers can change this dynamically and browser owners can set the default to whatever they like.

It doesn’t have to be configured “a certain way”. It just has to have a default font size setting. Then, 62.5% is a very handy font size setting on the html element, because 1.3em on the body element then results in 13px, 1.2em in 12px, etc. Just a matter of making it easy for the coder.

62.5% of what?

If the default font size setting (as the user has set the browser) is 36pt, 48px or “extra large” (maybe the user is visually impaired), then 62.5% of THAT size is considerably larger than 10px. Therefore, 1.3 em will also be considerably larger (and very unrelated to) 13px.

It sounds like you are assuming that the “default” font size is a fixed value; ie. “a certain way”.

Am I missing something?

No, I’m just assuming a browser’s default font size setting.

Here’s a nice website : http://pxtoem.com/ that converts pixels to ems (ems to pixels).

This is what I do:

body {
   font-size: 100%;
}

for most modern browsers are 16px base pixel size (Don’t believe me go to the website I just mention ;))

I also use rem (root em) instead of em when I use font-size, for most web browsers support it now ( http://caniuse.com/ ) and I don’t have to worry about converting if I nest them. This is just how I do it, but it works fine for me. :smiley:

only when the browser is first downloaded. As soon as someone starts using the browser the browser settings will change as the person expands things that are too small to see or too big for them to see properly (caused by people making assumptions about browser font sizes).

When working with fonts you should forget that pixels exist as pixels have nothing to do with font sizes. The only use for pixels in web pages is that a minimum width border is always 1px. For everything else PIXELS DON"T EXIST.

DUH, Isn’t that what I was talking about when I mention rem? An I think most people realize you can increase or decrease the font-size (and other appearance aspects of a website via their browser), but even though you don’t seem to care about you original design (or initial appearance) of you websites doesn’t mean everyone else doesn’t. Even though you don’t think I know what I’m talking about, I let you know that I have had taken typography and advanced website design classes in college. An if you really want to get technical one has to take in account 508 compliance.

DUH, Isn’t that what I was talking about when I mention rem?

Not really. People can also set the size of their system fonts. I’ve met with a few clients who’ve set their system fonts to something quite a bit larger than the default, and you’d be horrified to see what effect that has on a lot of websites … including text hanging out of boxes and overlapping other text or being cut off etc.

rems are indeed relative to the body font size, but you can’t know what that body font size will be, because the end user has control over it. So the key is to make sure the layout works well at any font size.