Please explain how to use font-size em measurements starting with base font

HTML & CSS
1

I keep reading how important it is with responsive web design to have fonts written in em rather than pixels. However, none of the info that I can find on this topic actually works for me in practise. So in its most basic form, if I declare a bass font in the body tag like this:

body { font-size:1em; }

I am told that this will equate to a base font of 10px so if I want my p tags to be 12px all I have to do is this:

p { font-size:1.2em; }

Makes sense when you read it, but in practise 1.2em is nowhere near 12px font-size - it’s much bigger.

To make my point I have put together a comparison here - 1.2em in CSS with a base font of 1em and a graphic of 12px in Photoshop. Both are Arial. The sizes are not even close.

So how is this really supposed to work?

Thanks
Charles

2

Hi Charles,

The problem sounds like a misunderstanding of quantitative proportions! :eek: :slight_smile:

1em is generally assumed to be the equivalent of 16px, not 10px. HOWEVER, the size at which 1em is rendered depends entirely on the user’s default browser setting.

Within the document, ems are proportional to their parent. If the parent has a size of 2m, a child of that parent given a size of 1em will still render as 2em. To reduce it back to 1em would require a setting of .5em.

Working with ems is a whole different ballgame than working with fixed units of measure such as pixels or points.

3

Yes, you kind of have to forget about pixels when using ems, because you don’t know how many pixels you are working with. As Ron said, 1em will mean different things to different people. Some people might choose to have a larger default font size—but that’s fine, and is a good reason to use ems.

It’s a common practice to set the font size on the body in % rather than ems. I prefer that, anyhow. I always set the body element to font-size: 100%, but others might choose something like 85% or 62.5%. That last one used to be used because, for a lot of people, it will set the base font size to 10px, but it’s way too small IMHO, and could lead to really small font sizes for some users.

A nice new CSS offering is rems, which mean the font size you are choosing is always in relation to the body font size. This gets around the problem Ron mentioned of inherited font sizes.

4

Correct me if I’m wrong, ems were primarily used for IE otherwise it would not zoom. Now that they are dead I use pixels.

5

The concept of WHY use em as well as to the meaning of an EM is being seriously misunderstood here!

First of, typographically an EM is a unit of measurement equal to that of the width of the UPPER CASE LETTER ‘M’ in any given typeface. As such, the physical value of 1em can vary based on the font, and size of the font in question ( we will revisit this in a minute) as an aside and EX is equal to the x-height of a given font. that last tidbit comes in handy as EM width and ex height are seldom equal in in a typeface.

Now lets dive into the web world.

1EM is equivalent to 100%, so percentages can be used interchangeably with ems ( just divide 100 :wink: ).

If that doesn’t help then thing of an EM as a VARIABLE or coefficient. 1EM=100% of the parent element’s font size.

so how does that affect a reset?

Well you have to break it into two parts:

  1. TYPE
    YOU SHOULD NEVER SET YOUR SIZE IN PXs!!! I cant emphasize that enough is not only an accessibility issue, but the web just doesn’t work that way. even a pix itself isn’t a physical measurement. 1px may be 1/72 of an inch in a screen at one resoultion and in another resolution be /144 of an inch in another or 1/288th of inch in yet another ( wow that high res!!!).

So, what to do… well using em (or %) on the body element makes your font size based on the user default font size, and it SCALES automatically along with he user font size preference.

SO the take away here is SCALING. There is NO PX EQUIVALENT for 1em ( even if MOST UA set the default at 16px, not all UAs do this some use 15px others 14px and some 18px and then the actually user can just change that value him/herself)

  1. ELEMENT SIZE

While with regards to font-size %s and EMs are equivalent, when setting the width of an element only EMs is type related. Same concept as above, 1em= width of the capital letter EM. SO, setting the width of an element in ems will make the element scale proportionally to the size of of the text it contains. The neat effect of this what i call “automatic copy fitting”: your line lengths ( break points) will remain virtually the same regardless on how much you scale your text.

ems were primarily used for IE otherwise it would not zoom.

Yes, that how it started, but generally speaking it’s an accessibility issue that overlaps with design. See what I said about screen resolution Think regular LED Vs retina display using EMsor %s AUTOMATICALLY correct this issue… tho you could also use PTs

I hope this helped clear things up.

6

This is great, Thanks, but looks like it doesn’t works with IE 7 or 8.

7

You have a choice there - you can

  1. Declare the font-size twice, with rem being last. Those browsers that recognize it will use it, the others will use the previous.
  2. Use conditional comments to create IE specific stylesheets for those two browsers.

I personally would go with option 1 - it’s easiest as your styles are all in one place, and it’s not that big of a hit on the processing of the css.

8

Must admit I don’t think in terms nearly that complicated. I used px now. And guess what. Nothing exploded. It actually turned out looking real good.

9

Wow! Looks like I started a debate here. As a web developer I always used to use pixels for font sizes, but now with responsive websites being imperative I understand (from Sitepoint’s books as just one source) that the only way to have a font scale properly to the device reading it is to use em. A fixed pixel size will stay the same on every platform and may, for example, look too large on a small cell phone. So, from now on font sizes should always be coded with em but widths are a different matter and should be coded in percent so they will scale to whatever size the display screen is.

Having said all that, thanks for all the feedback but what I still need to know is HOW (ie code example please) do I declare a base font and then use that as the basis for what used to be 12px (for example) - without having to guess. I’ve seen this info about 16px being some sort of “default” so it seems to me that in my example 1em is looking like 16px.

So the question remains, how do I create a simple system (ie way to calculate) em font sizes in CSS that will match my designer’s Photoshop layout of various px headings and content sizes?

Thanks
Charles

10

Font size always creates a debate. Since you want to use percent or ems here is a example percent layout I did a while back. 81.5% creates a 14px size base I believe it was. Now others will say… “Not if bla bla bla” yes I’m aware. But in 99.9% of the time it will be 14px equivalent size. There is a whole size chart just google. 81.5% will be your base size (P, LI, etc). Any other size just say up and down from 100%. For instance saying h1 100% will be saying 100% of 81.5%.

I have done a font em based layout, a percentage based layout, and a px based layout. Percentage probably being to hardest to calc. 99% of heat around em/% suggestions was based on the fact IE6 and maybe 7 (don’t remember) would not zoom pixel based font sizes. Now that they are dead I use px as it is far easier. I will add that using px I DON’T see differences in font sizing throughout my layout on iPhone. As before with % I see it all over the place. Probably from nested inherited mis calcs with %.

--------- */
html {
overflow-y:scroll;
}
body {
font:81.25%/1.5 Arial, Helvetica, sans-serif;
background:#06C;
}
h1 {
clear:both;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:125%;
color:#F90;
margin:0 0 15px;
}
h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#009;
}
h2, h3, h4 {
font-size:100%;
}

Here is my base css you may find helpful. It shows a good way to base font sizes. http://www.websitecodetutorials.com/code/css/initial-css-settings.php

11

I’ve seen suggestions to use ems for mobile - but it seems from these answers that there is virtually no point in doing so. Certainly sticking with pixels is easier.

Thanks
Charles

12

It’s worth reading this before you make a final decision:

http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

13

Thanks for that link - very interesting article, it brings up another potential problem that hasn’t been considered in this discussion the effects of @media on zooming and whether @media should also be in percent rather than pixels.

Meanwhile I downloaded this week Sitepoint’s latest book Responsive Web Design and had a quick flip through it last night. Seems all the @media code is in pixels, however it also seems that all of the font-widths are in ems (as I suspected) and there is a very in depth discussion (chapter) on this. I’ll be starting a detailed read this weekend.

14

Specifying a % for font size on the body tag is needed to get em working properly in older versions of IE. Since there is no correlation between em and px whatsoever (despite any claims) that % may as well be 100%.

The only use for px in web pages is for border widths where you want them as thin as possible. There is no way to tell how big 1px is as that depends on both the screen size and the resolution that is set so anywhere between 1000px = 1 inch and 1000 inches = 1px is possible. Using em rather than px gives a far greater control of font sizes.

15

The new Sitepoint book Responsive Web Design states:

To make our applications more accessible, we should steer clear of fixed-pixel sizing and work with relative sizing.

Fluid Typography

Our goal here’s to ensure that all facets of our typography are set in relative units. That way, all our typographic elements will flow and respond to changes in the devices that display our applications. Even more importantly, relative font sizing means that our users can influence our typography—they set the base size for our fonts and we scale from there. If we accept that a font’s font-size should be relative and users should have the final say in the scale of their typography, but then restrict other typographic sizing to using fixed pixels, we’re letting our users down and missing the opportunities of fluid typography. It’s more than just about font-size; it’s about the padding, margin, and border too.

And then they give the answer to my question (which was actually how to implement em font size, not whether or not I should use it.)

body {
font-size: 100%;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.0em;
…
}
body > div {
font-size: 1.2em;
…
}

What’s important here is that we’ve set the ratios of those values, rather than the actual values themselves. If a visitor has set their base font to 36px, the ratios of the font sizes and paddings stay on target for our design; even better, we work with the user’s settings. With a 36px base font size, for example, the p would have a font-size of 27px and padding of 13.5px.

There’s no real need to know what the final calculated size is going to be as our user can change this at any time; however, we’re aware it will fit the formula target ÷ context = result

target / context = result
12 / 16 = 0.75

p {
font-size: 0.75em;
}

16

Yikes, that’s likely to lead to horribly small text. I recommend you forget that bit. It was a popular value some years ago, but was found to be flawed, as it often results in text that’s far too small.