SEO

May 21, 2011

ONLY typography post you'll need

How Much is that Em Over There? The em is a relative size.

This means that
instead of being an actual size by itself it
Here's an example in actual CSS notation. Notice that ems work both for vertical (line-height) and horizontal (width) lengths. So that begs the question: What if no font-size was given? And also the question: If I'm setting the font-size in ems but it needs another font-size number to work where does it get the other font-size number?The basic answer to those questions is that the browser will look at the inherited font-size for the element. OK, but how do I know the inherited font-size? The basic rule is to look at the parent element (the parent is the element that contains the one you are styling). Whatever font-size the parent element has will be the inherited font-size.

 

Example: What if the element has no font-size?

 

In this example the element has no font-size set in the CSS so it will inherit a font-size of 10 pixels from the body element. So when the line-height is set in ems the browser will multiply it by the inherited font-size of 10px – in this case the em is 1.4 so the line-height will be set to 10px × 1.4 which equals 14px.

Example: If I'm Setting the font-size in Ems What Number is the Em Multiplied by?

This is an interesting question. Remember when the browser sees and em size it will multiply the font-size of the element by the em to get the actual size to display. This is fine if you are setting line-height or margin to an em but what if you are setting the font-size itself to an em?

The answer is again in inheritance. The browser will use the inherited font-size as the number to multiply with the em number. Here's an example. Because the head and html elements don't effect the inheritance of the f ont-size I will leave them out in further examples.

HTML Markup

<body> <p>First paragraph</p> </body>

Nested em sizes

Let's look at a slightly more complicated example to see if you understand what's going on. In this case we are going to have tags nested inside of each other that are each set with em sizing. In the example below there is on element (the first paragraph) that is just inside of the body element, and another element (the second paragraphs) that is nested inside the body and the blockquote elements. See if you can figure out what the font-size will be for the two paragraphs. Because the head and html elements don't effect the inheritance of the font-size I will leave them out of the HTML Markup in further examples.

HTML Markup

<body> <p>First paragraph</p> <blockquote> <p>Second paragraph</p> </blockquote> </body>

CSS styling

body{ font-size: 10px; } { font-size: 1.3em; line-height 1.4em; } blockquote{ font-size: 1.5em; }

Notice that I did not add any comments about the calculations after the font-size or line-height. This is because it's not quite so simple this time. What is going to be different this time is that the text in the First paragraph will be smaller than the text in the Second paragraph. Here's an example of how it looks:Nested paragraph screenshot

Now let's look at why this happens. When the browser gets to the first paragraph it looks for the inherited font-size and because this paragraph is right inside of the body element it inherits 10px. So the browser sets the font-size by multiplying the 1.3 by the 10px and gets 13px (1.3 × 10 = 13).

However when the browser gets to the second paragraph and looks for the inherited font-size it sees the blockquote element is the parent. The blockquote also has a relative font-size (1.5em) so the browser must now go to the parent of the blockquote element so it can calculate the actual size of the blockquote element. In this case that is the body element. This is a more detailed look at how the calculation is made for the second paragraph.

  1. Calculate the actual size of the blockquote element
    • 10px × 1.5em = 15px
  2. Use the calculated size of the blockquote (15px) to calculate the size of the element.
    • 15px × 1.4em = 21px

So in this case the first paragraph has a font-size of 13px and the second paragraph has a font-size of 21px. To make your life a little easier and not have to do this kind of complex calculation it's a good idea not to set the blockquote element's font-size directly. Remember all blockquotes are supposed to have another block level element inside of them (usually the element). So how do you change the font size inside a blockquote? The answer is to make a selector that only targets elements inside blockquote elements and set the font-size for that. It's easier than it sounds. All you have to do is add the selector to the blockquote selector. Nested Paragraph Screenshot 2

 

 

Final Thoughts and Rules of Thumb

At this point you might be concerned about all of these calculations and keeping things straight. First, don't worry it will get easier with time. Second, here are some rules of thumb you can follow that may help make your life easier (explicity set means to include the element and css property in your stylesheet:

  1. Always explicitly set the font-size of the body element and set it in pixels (see exception for Internet Explorer below). The body element is the parent of all the other elements so by setting this font-size in pixels you give yourself a known base to work from.
  2. Always explicitly set the font-size of the elements in the following list using ems.
    • p
    • h1, h2, h3, h4, h5, h6
  3. Don't set the font-size of the blockquote element by itself. Instead to set the size of blockquote text by writing a selector that sets the paragraph element inside the blockquote element. Here is an example:
blockquote { font-size: 1.5em; }
  • Don't set a font-size on any table elements ( table, td, tr, th). Table elements are often nested inside of each other and so it can make figuring out what to set the ems to very difficult or impossible. Instead make classes with the font-sizes you want and apply the classes to the appropriate table elements.
  • If you are setting the size of a property in ems for an element also set the font-size in ems. Even if you don't want the size to change still set it to 1em. That way you have a point of reference to make your calculations.
    • WRONG:
    { line-height: 1.4em; margin-bottom: 1.5em; width: 40em; }
  • RIGHT:
  • { font-size: 1em; /* font-size explicitly set */ line-height 1.4em; margin-bottom: 1.5em; width: 40em; }

    Setting the base font size with IE in mind

    Set the body tag to the base font-size. This should be one in pixels but that causes problems for IE (see left). So you have to actually make two settings one in percentage for IE and one in pixels for other browsers. Here's an example of setting a base size of 12pixels. You need BOTH of these:

    body { /* setting for IE */ font-size: 75%; } html>body { /* all other browsers */ font-size: 12px; }
    blockquote { font-size: 1.5em; }

    HTML Markup <head><title>Simple Example</title></head> <body> <p>First paragraph</p> </body> </html> CSS styling
    body{ font-size: 10px;  line-height 1.4em; 10px * 1.4 = 14px

    How Much is that Em Over There? The em is a relative size. This means that instead of being an actual size by itself it Here's an example in actual CSS notation. Notice that ems work both for vertical (line-height) and horizontal (width) lengths. So that begs the question: What if no font-size was g ...»See Ya