A nice CSS typography trick

I just found out there’s a fairly obscure, but cool syntax to declare line-heights in CSS:

.mytext { font: 12px/14px Arial; }

Notice the slash and the second pixel value. The rule above defines the text to be Arial, 12 px, with a line-height of 14px. It’s short, sweet and it even works in all browsers!

Note, though, that this should be used mainly as a typography trick. For aligning forms and one-off elements, I’d still advise using the regular line-height property to avoid re-declaring fonts everywhere.

With that being said, it’s worth mentioning that most design and typography blogs use higher-than-default line-heights to great effect, as the extra bit of spacing between the lines of text makes content look more classy. For example, look at alistapart.com or smashingmagazine.com and try disabling the line-height via firebug to see the difference :)

So, in summary, those 5 extra characters can go a long way in giving a static site an extra oomph.