Fallacy… doesn’t that mean, well, penisy?

my girlfriend

I guess you could say she’s my muse. Try not to throw up now…

One thing I never knew when I started web design was that italics were not simply a way to emphasise text. The correlation of the HTML <em> tag with the default style being italic text was a design choice made in context of the rest of the default styles. It could easily have been that normal paragraph text was italic and for emphasis it was made regular.

What I find interesting about italics is their origin – matching the hand-written style of lettering in order to fit more text into books (for more detail ilovetypography.com has a great series covering the basics of typography). Something my girlfriend said to me while I was bemoaning her use of Comic Sans (even though it was for a children’s worksheet) was that the children find the letter forms easier to read because they more closely resemble letters the way they are taught to write them. It made perfect sense.

Why then, I wonder, do we rarely see larger blocks of copy set in italic? I believe that part of the reason was because italic text served a purpose such as providing narrow but legible text and saving on ink while more often than not there was no lack of space for text or a need to tighten the purse-strings.  Perhaps there is mileage in the use of italics for purposes we instinctively use regular text for. If done well (as illustrated by Wolfgang Weingart in the photo) it can be visually very striking and compelling.

One last thought is that if children are shown beautiful, elegant italic lettering, at least when learning to write cursive, would their hand writing reflect that?

Apologies if that annoying opera fruit’s verbal excretions from the Go Compare adverts gets stuck in your head but I was at a loss for a better name.

Fo’compare is a font comparison tool. It uses a little snippet of flash to get a list of your installed fonts allowing you to choose and view them in your browser. It can be used to help decide on font-stacks for CSS or to help the novice typographer learn all the subtle differences between the thousands of serif faces in circulation.

After playing the Font Game from I Love Typography I was determined to learn the nuances of certain typefaces and fo’compare has already taught me a lot. In particular my favourite observation is the difference between italic and regular ampersands in faces like Garamond or Caslon with its rather ornate and beautiful italic variation.

I guess the web page can be used as an alternative to having font browsing software installed on your computer – although in that regard it could do with a better way to browse your installed fonts such as tagging . Maybe in the next iteration.

Try it out: fo’compare

NEVER use CAPITAL letters to accentuate words in running copy. They STICK OUT far too much spoiling the LOOK of the column or page. Use italics instead. If you have to set words in capitals, use proper small caps with or without initial capitals.

For acronyms where each letter is pronounced – the letters are still capitalised. As Erik states this is where small caps come into play. They allow you to have capital letters with the same x-height as your regular letter text, thus not sticking out and ruining your lovely paragraph.

This tidbit of CSS is a must in all of my style sheets from now on:

abbr { font-variant: small-caps; text-transform: lowercase; }