Menu
13/08 2010

Nest the list, not the size

I'm always looking for the best way to build Web sites and one thing that always seems to catch me out is the use of a unit called em. This unit is a more recent convention which Web designers overuse. There is no reason why we shouldn't be using the px unit for font sizes. This recurring issue I have noticed in many sites I have started to build or fixed in my work for clients is what made me realise this, so much so that I thought it a good idea to share it.

See what I mean?

  • item1
    • item1
      • item1
        • item1

When I use the em unit as a default for font sizes for all content on a page, this is the result you get when you add a nested list. The following shows the markup I used to show the list above. This particular list uses inline styles to illustrate that all list items have the same value applied to them.

Inline styles should be avoided in markup at all times. A separate stylesheet is always best practice to reduce the amount of markup used on a Web page.

  
  • item1
    • item1
      • item1
        • item1

The list shows up on the page like the example above because the rules under which em units operate are related to the hierarchy of the DOM (Document Object Model), which dictates that the item the em unit is applied to should be proportionate to the value applied to the element immediately above it.

Knowing this, it now makes complete sense why we get this effect on a nested list. The value I used means that the current list element is 0.8 smaller than the same element in the list element in the one above.

Thats better

  • item1
    • item1
      • item1
        • item1

In order to avoid this issue, I have now reverted back to using px units for all lists. As you can see above, all list elements are now the same size as they are being set to a rigid pixel size instead of being proportionate to each other.

  
  • item1
    • item1
      • item1
        • item1

The markup is shown above, as you can see, again for illustration purposes (and to override the main css for this site) each nested list item is being set.

What about the rest of the site?

This question was the first thing to pop into my head as soon as I realised this solution and yes, it does have a bearing on the rest of the site. Setting the initial font size and then setting other font sizes in relation to it mean that if you decide to change all other elements globally using your inital font size value, your lists will not follow suit. It's something I personally don't mind doing though. I would rather change the nested lists in one go than have to set each level with em units seperately, which just doesn't make sense.

I think it best to break all your main content elements down anyway, giving them each their own initial values. When I say content elements, I refer to things like <p></p>, <h1></h1>, <h2></h2>, etc, <ul><li></ul></li>,<a href=""></a> etc etc.

Leave a Reply

Your email address will not be published. Required fields are marked *

This article is in the html and css category. Here are some other related articles also in this category.