The Future Of CSS Typography

HTML & CSS
1

For those of you who don’t skim Smashing Magazine every day :slight_smile: or who missed out on this article, a Portuguese designer named Inayaili de Leon has written a terrific article on CSS typography, both now and when CSS3 becomes more widespread and codified. It’s almost a one-stop shop for the ins and outs of using fonts and typography in your designs. (No, I’m not dating the author or anything :lol: but when I find a resource worth citing, I just up and cite it.) So, a big fat FYI for everybody.

2

That’s actually a really great article! Thanks for sharing. Now, because I’m a jack of all trades and a master of none I had no idea that there was actually a hierarchy to properties within CSS.

Instead of specifying each property separately, you can do it all in one go using the font shorthand property. The order of the properties should be as follows: font-style, font-variant, font-weight, font-size, line-height, font-family.

Why do the properties need to be in that specific order? I’m sure I’ve not always used that order and it never seemed broken. Am I just missing something? Then again, I hardly ever use the shorthand font: property. I usually break them up into font-family:, font-weight:, font-size, etc. If I’m breaking them up into individual properties is it still important to keep them in some sort of cosmic order?

3

Yeah, that order has bitten me in the backside a number of times. Especially the order of the background-position coordinates - it confuses me because it’s horizontal followed by vertical, but with margin and padding it’s vertical first.

If you break them up into the individual properties then it doesn’t matter what order they’re in, they’re completely separate. Only in the shorthand does it matter. It’s useful to do things like this:

h2 {
  background:blue url('ocean.png') left top no-repeat;
}
.left h2 {
  background-color:green; /* overwrite bg colour only, image stays */
}

Thanks for sharing, Max. Once again I feel reminded of the importance of whitespace.

4

I didn’t know about the hierarchy either. I’m going to print that out and stick it on my wall (or at least in my little notebook of printed goodies).

Jeff, congratulations on the MOTM hardware. Looks good on ya. :slight_smile: