Confused about using em's for font size

Forum Moderators: not2easy

Message Too Old, No Replies

Confused about using em's for font size

denisl

7:51 pm on Oct 22, 2014 (gmt 0)

So I thought I would brush up on my CSS knowledge and want to use the correct/best way to define font size.
I have always defined it in pixels but aware that em's are supposed to be better.
So, after some reading on the subject, I set the font size of the body to 100% (had read that this better than using 62.5% just to save some maths), and everywhere I stipulated a size of 10px, I changed this 0.8em.

The result was that my text was far too small to see.

I am guessing that if I have nested elements, each with a font-size:0.8em, that at each level, the text size is 0.8 the size of the text in the parent.
Am I guessing correctly - it is more complicated than I thought.

londrum

8:35 pm on Oct 22, 2014 (gmt 0)

Try setting it to 62.5%, then 10px = 1em. and 11px = 1.1em etc,
That makes the maths easy

not2easy

8:44 pm on Oct 22, 2014 (gmt 0)

It is more complicated than it was a few years ago. To understand what has gone wrong, it helps to understand what happens at each step. Browser default font size is 16px. That is on your desktop browser - all browsers, if you look at a page with no style sheet or inline style settings, the body font size is 16px by default - unless your view settings are altered (zoom in - zoom out). With that information you can see that a 100% font size setting will give you a default body font size of 16px. (we're still talking desktops to avoid confusion). The em itself has no size, it is a relative measurement based on your default font size setting so 1em becomes the equivalent of 16px for your stylesheet and 0.8em should give you a 12.8px font size which shouldn't be "too small to see" but that depends on your browser settings and your screen resolution. A high resolution screen can cause what you describe, seeing what should be 12.8px font as too small to see. Add a viewport setting to the <head> of your page and your browser will do the math for you.

If you have made any adjustments to the default font size in your browser in the past, and want to view it as others would see it, set the browser to 16px for default. Try another browser or a different monitor and see if it looks the same, if not, then check your browser settings.

Pixels are familiar to us, but new developments mean that pixels are not always the same either. We need to consider "hardware pixels" and "css pixels" to get better control over the final appearance. One of the best articles I read that spells it out (much better than I have) is "A Pixel Identity Crisis" here: [alistapart.com...]

cross-posting note: - what londrum says is correct and it would be the simple, fast fix. I do realize that often that is all that's required.

lucy24

12:22 am on Oct 23, 2014 (gmt 0)

Browser default font size is 16px.

Unless you made the hideous error of upgrading to OS 10.9, which in turn leads to Safari 7, which inexplicably defaults to something utterly idiotic like 11 points.

Planet13

5:35 am on Oct 23, 2014 (gmt 0)

Pardon the interruption...

If there is a default font size for each browser, are there also default DIV margin and / or padding sizes?

For instance, if I write some html like this:

<div>
some text here
</div>

Will some of the major browsers automatically add padding or margin values?

denisl

6:59 am on Oct 23, 2014 (gmt 0)

Thank you for the comments but main point was -

I am guessing that if I have nested elements, each with a font-size:0.8em, that at each level, the text size is 0.8 the size of the text in the parent.
Am I guessing correctly - it is more complicated than I thought.

So having declared a size of 0.8em for <P> and the same for a link, a link within a paragraph ends up as 0.64em. I hadn't expected that to happen.

I had obviously declared a font size in more places than I needed to so I have now slimmed by css file down a bit.

tangor

7:17 am on Oct 23, 2014 (gmt 0)

Check your css for any declarations on the link attributes. Might be something there unintended.

lucy24

8:08 am on Oct 23, 2014 (gmt 0)

If there is a default font size for each browser, are there also default DIV margin and / or padding sizes?

Not so much for a div-- that is, there's always a default, but the value is probably 0. A div (and also a span) is basically just an armature for you to hang styles on.

Where you'll really notice browser defaults is in core-html properties like <h1> <p> or <table>. But by this time, most browsers will use similar defaults. Paragraphs, for example, have line-height 1 (too small!) and top & bottom margins of 1 em (too big!). You can easily experiment by making a simple html document that just uses the various elements, and see how they look in different browsers. Give everything a different background color and/or border, but don't specify anything else.

I had obviously declared a font size in more places

If you need something to be the same size no matter where it appears, use absolute sizes [w3.org].* This doesn't mean explicit numbers, but certain reserved words:

x-small
small
medium
large

et cetera. These are always based on the document's overall default size. But be careful though: here too the browser may have its own opinion of how much smaller each "small" will be.

Why do you want your document's overall text size to be 20% smaller than what the user is accustomed-- and perhaps explicitly prefers-- to read?

* There's a CSS3 version, but the CSS2 docs are generally easier to navigate.

denisl

8:18 am on Oct 23, 2014 (gmt 0)

Why do you want your document's overall text size to be 20% smaller than what the user is accustomed-- and perhaps explicitly prefers-- to read?

Always thought 10 or 12px size looks best and was fairly normal. This site certainly isn't 16px (I see it says text size 2, can't remember what that means)

Fotiman

1:43 pm on Oct 23, 2014 (gmt 0)

font-size is an inherited property, so if you specify a font-size on some ancestor element, then all of it's decedents will inherit that size. When you specify a relative font-size, the size is relative to the font-size on the parent element, not to the font-size of the body element (unless, of course, the parent element was the body element).

For example:


body {
  font-size: 100%; /* Relative to the browser default, 16px; */
}
p {
  font-size: .5em; /* Relative to the parent */
}
a {
  font-size: .5em; /* Relative to the parent */
}


<body>
  This text is 16px.
  <p>
    This text is 8px.
    <a href="#">
      This text is 4px;
    </a>
  </p>
</body>

Planet13

3:22 pm on Oct 23, 2014 (gmt 0)

@ Fotiman:

Thanks for the clear-cut explanation. Very easy to understand.