On “Modern CSS Typography and Font Styling Examples”

I read an arti­cle titled, “Mod­ern CSS Typog­ra­phy and Font Styling Exam­ples”, and though mis­takes and omis­sions weren’t major, I felt com­pelled to com­ment on them. My com­ment got so long, I fig­ured a quick blog post would be bet­ter than a long-winded comment.

Small­caps is not the same as upper­case. Even if you can sim­u­late small­caps using upper­case let­ters (sim­i­lar to sim­u­lat­ing ital­ics or bold), fonts that employ small­caps are specif­i­cally cre­ated to main­tain proper bal­ance and weight.

Fur­ther­more, it’s impor­tant to use glyphs as intended with proper for­mat­ting. This is a small detail, but in the CNN exam­ple, a double-hyphen is incor­rect. An emdash should be used instead and with­out the spaces. Many CMSes and blog­ging soft­ware, Word­Press included, are able to con­vert typo­graphic short­hand like dou­ble– and triple-hyphens and con­vert them to their proper glyphs. An old but time­less arti­cle: Typog­ra­phy Mat­ters cov­ers this topic. Also it wouldn’t hurt to look at print style guides such as the Chicago Man­ual of Style.

Also not men­tioned but use­ful to know is to make sure that when using jus­ti­fied text (most every­thing is on the web is flush-left), that it should be used in com­bi­na­tion with hyphen­ation. See wp-Typography for example.

As for the top-10 list (I dis­agree that Dreamweaver should be on the list), it’s impor­tant that the imagery is con­sis­tent. The Pho­to­shop icon sticks out like a sore thumb. Also if the list is ordered, it would make sense to pro­vide some way to indi­cate that it is ordered like num­bers. That sets it apart from an item­ized list.

I like Geor­gia since it is one of the bet­ter look­ing serif fonts among the web core fonts. How­ever, since this is sup­posed to be a post about mod­ern typog­ra­phy, the author should have men­tioned upcom­ing font-embedding tech­nol­ogy that would allow the use of much bet­ter look­ing fonts than Georgia.