Simple and effective. Thanks.

Russell – the # is a ID selector, just as the dot is a Class selector. The fundamental difference is that an ID uniquely identifies an item on the page – you can’t have two items with the same ID.

A class is more of a grouping concept (think ‘classification’). Many items on a page can be part of the same class.

Great explanation Richard, like your website design for the Clear Left as well.You Jeremy and Andy are no doubt one of the most knowledgable web consultants on the web today!

How did you know I didn’t have a clue what the heck EM was… if I read the article will I…??? derrr…..??

This site is a really great idea. Found it on digg.com and i am very impressed. Keep up the good work, i will be sure to check back in hopes the quality keeps up. Great job!

I thought I knew what the em was but this was all new to me! I doubt it will impress any of MY friends, but I will try it nonetheless.

Thanks for the great info, I’ll be looking forward to your site launch.

This was very helpful, I too had trouble clarifying Ems. say, is it the same with Exs?

another digg visitor

I had no clue what em meant. thanks for the short and sweet article.

Short but absolutly correct and helpful explanation. Nice Example ;o) It is easy to explain people they don’t have any idea of Ems. Excellent!

Prem – in CSS terms, ex is to lower case ‘x’ as em is to upper case ‘M’. One ex is exactly half of one em.

Richard: one ex is not necessarily half an em. See the definition of em and ex

Drew: tabbing from the URL field in the comments form does not focus the message field. Also, I couldn’t get the link to work, even though (I think) I used the Textile formatting.

Both: thank you for this nice site!

Sorry, yes the tab order sucks. That’s a default Textpattern ‘feature’. I’ll try and get it sorted.

I’ll fix your link.

This didn’t render properly in IE so I was wondering what you were jib-jabbing about. I opened of Firefox and now I see =)

I, too, recently discovered ems. I like ‘em because they allow me to size divs and their ilk so that as the font size on a page increases, the div size does too. Awesome!

Now it renders properly in IE as well ahhhh what’s going on ignore my comments haha

The way I like to use ems in my CSS is when I’m setting line-heights. For some reason, my eye really likes a line-height of anywhere between 1.2 and 1.4ems (depending on the circumstance).

I think it’s nice to set line-height this way because the line-height will always be in proportion to the size of your font.

Want to give it a try?

body {

OK, I kinda get it, but I’m still confused. Why does setting “id” set the style? The only way I knew how to do this would be to define .box1 and then do a div class=”box1” .. which , I checked, that works too, but I don’t understand the #box1 format with the use of “id”

OK, that makes sense. Looking forward to day 3

I have added to your code to use it as a dropcap

p#box3:first-letter {

float:left;

color:#399;

font-size: 60px;

width: 1em;

height: 1em;

font-family: Times, serif;

border-right: 0.15em solid #fff;

To fix your tabindex order, read this article…

Hacking Comment Form Tab Index

Jan!: yes you’re right, 1 ex is not precisely half of 1 em, however 1 en is (not that there is such a unit as en is CSS).

1 ex refers to the ‘x-height’ of the font as so an this will vary depending on which font is being displayed.

I enjoyed the reading

Even more so when they own up to their mistakes, rather than hiding away anonymously, wouldn’t you say “impressive”?

Well, I’m not promoting a guide to typography, or making mistakes with basic terminology in doing so…

As I am neither promoting my own sites, or products, I’d say the point is not my anonomous state, but rather your choice to author and market something that is clearly not an area of expertise -otherwise a such an error would not occur. That you later accept this expert status only debases your project, and your authorship on the subject…

I’ll see you around…

So 1em == 1pt? Interesting? Why use two different but equal units of measure for the same area? Is there an advantage to one over the other or do I have it wrong?

Also, there isn’t to much of 2005 left for something to be coming later in 2005. ;-)

I can’t believe Richard’s excellent “How to size text using ems” hasn’t been linked yet. http://www.clagnut.com/blog/348/

Is the example broken now? It’s only been about 9 years since this post was written but I see the boxes containing the M’s are the exact same size.

Nice, concise article – one thing: I noticed that the ‘M’s are overlapping the bottom of the container boxes when viewed with Firefox/Linux, does anyone know why this is? Is Firefox/Linux (1.0.7/Fedora) broke?

Strange because it renders fine in Firefox/OSX 1.0.7 …

1em != 1pt. That was the whole point of this article. em is a relative (sliding) measurement.

That’s really the main advantage to using em fonts sizes instead of pt or px. When you use em, the font sizes are rendered relative to the user’s browser font size. Like in IE, the em is relative to the View -> Text sizes (Medium by default I think) and you can increase and decrease as you please. But for all those people that set their font sizes in fixed pt or px in their css, they essentially take this functionality away from the users.

I love a good fight – Rutter v Impressive – but I doubt it’ll sell tickets. Thanks for eming it up for me so succinctly. And all the other contributors were excellent as well by expanding on the explanation and carrying it even further. Great work.