CSS How to Properly use ems instead of pixels?


Tags: css

Problem :

I'd like to try and convert my designs from pixels to ems. I've read so many tutorials that... and I'll leave it right there.

Starting with this as my base:

body {
    font-size: 62.5%;
    line-height: 1.4;
}

... now this is where I get lost...

Should I be defining my font-size like this:

div#wrapper { font-size: 1.5em; }

... or like this:

blockquote, li, p, dt, dd, etc { font-size: 1.5em }

And then the next thing I don't really understand is where ELSE should I be using ems in addition to font-size and line-height? I will be using a fixed-width layout using 960.gs.



Solution :

line-height: 1.4em;

Probably isn't what you want. The line-height will stay at the same computed height for the size of an ‘em’ on that element, even when you change the font-size on a descendant element.

line-height has a special case where it allows a unitless number:

line-height: 1.4;

Which makes each descendant line-height depend on its own font-size rather than the ancestor's.

Should I be defining my font-size [on a wrapper or on many element types]?

Well that rather depends on what you're trying to do. With relative font-sizes it is generally best to keep the number of declarations down to a minimum, because they nest: that is, with your blockquote { font-size: 1.5em; }, if you put a blockquote inside a blockquote you'd get a font-size of 1.5*1.5=2.25em compared to the body font size. Is that what you want? Maybe, maybe not.

where ELSE should I be using ems

Anywhere you want the size of an element to respond to the user's preferred font-size. One common example would be something like:

#maintext {
    width: 60%;
    min-width: 8em;
    max-width: 40em;
}

to try to restrict text lines to a reasonable column width when doing liquid layout.

But if you are limiting yourself to a fixed-width layout it may not make sense to make element widths font-size-dependent.


    CSS Howto..

    How to cancel CSS effect in Responsive Website Footer menu?

    How to find a first td in a tr using tr class name in CSS? [duplicate]

    How can i fit my webPage in browser when user makes browser window big?

    How to make a simple pure css or jquery image toggle?

    How to read inline styling of an element?

    How to vertically center an element, that has a float, with CSS or JavaScript

    Bootstrap css navbar-inverse dropdown how to change color of checkbox label text

    How to use conditional CSS for IE browser in drupal6?

    How do I add a horizontal submenu?

    How to make this geometrical “translation” effect with javascript?

    How to add the css properties to an image in ImageResourceCell of CellTable

    Live search div not showing up when something is entered

    How to CSS the select field so that it occupy the entire cell of my table?

    How to use images for check boxes using CSS or may be Javascript?

    how to style a horizontal submenu with nested

      How can i remove all attributes from any css selector? To override and reset any css id selectors?

      “ul li a:link, a:visited” and “ul li a, visited” how they different?

      on hover and on click how to fade out image and fade in content text

      How to generate width CSS from JavaScript / C#

      How to resize div with CSS by the border

      How to create an Hours of Operation list with HTML and CSS?

      HTML with CSS: How to style font in a table?

      How do I isolate floated content?

      How can I convert an absolute file path to one CSS can use?

      How to add multiple css rules at once through Dev-Tools or Firebug

      How to make a pure css based dropdown menu?

      How to fix text with limited height and absolute position overflows

      How to remove the arrows in a scroll bar through CSS

      How to solve this (seemingly simple) formatting problem in CSS?

      How do I make this nested div to show up on top right corner and make text wrap around it?