www.webdeveloper.com
Results 1 to 3 of 3

Thread: Why do I need to use em units?

  1. #1
    Join Date
    Jun 2006
    Location
    Under your bed
    Posts
    357

    Why do I need to use em units?

    I keep getting told that if I don't use em units, the text on my site won't scale, but I'm sitting here zooming in and out of my site and it seems to be working fine. Is it just old browsers that have a problem?
    The better I get at programming, the more I appreciate arrays. Handy dandy things they are.

  2. #2
    Join Date
    Mar 2011
    Posts
    67
    I got this from the W3 so I would guess that they would know best.

    http://www.w3.org/WAI/GL/css2em.htm


    "
    Chapter 4
    The amazing em unit and other best practices

    This chapter is about writing style sheets with style. By showing you case studies and how they are constructed, we hope to give you a sense of how CSS can be used to encode the visual presentation you want to achieve. Also, more importantly, if you follow the guidelines in this chapter your documents will behave well on a wide range of web devices. For example, they will scale gracefully from one screen size to another.

    Use ems to make scalable style sheets

    The foremost tool for writing scalable style sheets is the "em" unit, and it therefore goes on top of the list of guidelines that we will compile throughout this chapter: use ems to make scalable style sheets. Named after the letter "M", the em unit has a long-standing tradition in typography where it has been used to measure horizontal widths. For example, the long dash often found in American texts (--) is known as "em-dash" since it historically has had the same width as the letter "M". Its narrower cousin (-), often found in European texts is similarly referred to as "en-dash".

    The meaning of "em" has changed over the years. Not all fonts have the letter "M" in them (for example Chinese), but all fonts have a height. The term has therefore come to mean the height of the font - not the width of the letter "M".

    In CSS, the em unit is a general unit for measuring lenghts, for example page margins and padding around elements. You can use it both horizontally and vertically, and this shocks traditional typographers who always have used em exclusively for horizontal measurements. By extending the em unit to also work vertically, it has become a very powerful unit - so powerful that you seldom have to use other length units.

    Let's look at a simple example where we use the em unit to set font sizes:


    <HTML>
    <STYLE>
    H1 { font-size: 2em }
    </STYLE>
    <BODY>
    <H1>Movies</H1>
    </BODY>
    </HTML>
    Always use ems to set font sizes

    When used to specify font sizes, the em unit refers to the font size of the parent element. So, in the example above, the font size of the h1 element is set to be two times the font size of the body element. In order to find what the font size of the h1 element will be, we need to know the font size of body . Since this isn't specified in the the style sheet, the browser will have to find it from somewhere else - a good place to look is in the user's preferences. So, if the user has set the normal font size to be 10 points, the size of the h1 element will be 20 points. This will make document headlines stand out relative to the the surrounding text. Therefore: always use ems to set font sizes.

    Designers who come from desktop publishing may be inclined to skip the indirection that em introduces and specify directly that the font size should be 20 points. This is possible in CSS (see the description of the font-size property) but using "em" is a better solution. Say, for example, that a sight-impaired user sets his normal font size to 20pt (20 points). If the font size of H1 is 2em - as we recommend - h1 elements will scale accordingly and be displayed in 40 points. If, however, the style sheet sets the font size to be 20pt , there will be no scaling of fonts and the size of headlines will have the same size as the surrounding text.

    The usefulness of the em unit isn't limited to font sizes. Figure 1 shows a page design where all lengths - including the padding and margins around elements - are specified in ems."

    -Randy

  3. #3
    Join Date
    Jun 2006
    Location
    Under your bed
    Posts
    357
    Yeah, I saw that article too. It seemed good. However, I've yet to have anybody explain to me why my browsers seem to scale pages without ems just fine.

    EDIT: NEVERMIND. I finally found some information: http://stackoverflow.com/questions/2...still-relevant
    Last edited by evenstar7139; 01-10-2013 at 10:34 PM.
    The better I get at programming, the more I appreciate arrays. Handy dandy things they are.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles