Typography and Renaissance-Era Eroticism
Hold on tight, people: I'm about to take you way, way back.
Think back to a time before the Internet, before computers, before typewriters, back when the word “America” was still fresh on the lips of European colonists and people were still getting used to that newfangled Gregorian calendar. I'm talking about the 1600s, the Renaissance, perhaps the highest pinnacle of European art and creativity.
Back in those days, a man by the name of John Donne stunned his peers with glorious poetry that was highly clever, highly metaphysical, and highly erotic.
Yeah, I'm talking about the same John Donne you probably studied in high school. Since English teachers seem to delight in draining the fun out of the great works of literature, I'm not surprised if you're a bit skeptical about the whole eroticism thing. Let me prove you wrong.
In “The Flea,” Donne set out on the unlikely task of attempting to seduce his reticent lady-friend by explaining that, since they'd both had their blood sucked by the same flea, they'd practically already had sex. That being the case, they should just go ahead and consummate their relationship — after all, why should the flea have all the fun?
MARKE but this flea, and marke in this,
How little that which thou deniest me is;
It suck'd me first, and now sucks thee,
And in this flea our two bloods mingled bee;
As if the juxtaposition of flea infestation and sex wasn’t clever enough, Donne took an extra step and cracked a few typographical puns. Take a closer look at the third line — “It suck’d me first, and now sucks thee” — and then think back to Renaissance typography, particularly the infamous “long S.” Not familiar with what it looks like? I'll fill you in:
Replace all the S's in that third line with long S's, and you'll get this:
And just in case you're wondering, yeah, John Donne knew exactly what he was doing. There's a reason why he's still remembered today — he was witty, unafraid of ribaldry, and a literary master beyond compare.
Now let's fast-forward to the present day. There's actually a lot Webmasters can learn about the importance of Web typography from this little exercise in Renaissance-era eroticism. The way you present your text can and does have an effect on its meaning — even if you aren't using typography that transforms a relatively innocuous word into the F-bomb.
Typeface Vs. Font
Before we get started, one thing needs to be clarified: the difference between typeface and font. Most people use these two terms interchangeably, but they actually mean two different things. A typeface is a specific design within a type family. For example, Times New Roman is a typeface within the serif type family. A font, on the other hand, is a variation of a typeface. Every time you bold, enlarge, shrink, italicize, or otherwise modify a typeface, you're working with a font.
For more information about the typeface vs. font debate, I highly recommend Jon Tan's examination of the subject.
Types of Type
When you're deciding what typeface to use, you should first figure out which type family best fits your textual intentions. Like John Donne, you should know how your text is going to look when rendered in a specific typeface, and what layers of meaning the typeface is going to add to what you're saying.
Typefaces come in many shapes and sizes, but they can all be categorized into six type families: serif, sans-serif, monospace, cursive, fantasy, and picture.
Serif typefaces got their name because they have serifs — those little decorations on the end of strokes within each character. Serifs are useful because they provide a horizontal groove that serves as a visual cue for the reader's eyes to lock into. This makes them easier to read, particularly at small sizes, which is why they're so widely used in the text of newspapers. They tend to be proportionally spaced, which means that different characters have different widths. They're great if you're trying to convey an authoritative, professional feel, but you should avoid them if you want your text to seem more personal and friendly. This isn't a hard-and-fast rule, though; for more information about using serif types, check out David Rodriguez's fabulous article on the subject. A few serif typefaces you may have seen are Times New Roman and Georgia.
Sans-serif typefaces are proportionately spaced and, as you may have guessed, don't have serifs. This means they're harder to read at smaller sizes; however, they work well as headings or large text. They also seem a lot friendlier and more approachable than their serif counterparts. Popular sans-serif typefaces include Arial, Helvetica, and Verdana.
Monospace typefaces may or may not contain serifs. What sets them apart is that they aren't proportionately spaced — that is, each character takes up the same amount of horizontal space. Monospace isn't the best choice for most text, but if you're looking to set certain text apart, or if you want to create a mechanical or typewriter-esque feel, typefaces like Courier and Lucida Console will work just fine.
Cursive typefaces such as Comic Sans are curvy and stylistic, and are meant to look like handwriting. As you might guess, these can be kind of cheesy and difficult to read, and as you might not have guessed, they sometimes inspire hatred. This means it's best to limit your use of them to accent text; for instance, if you’re going for a really personal look in a heading, a cursive typeface could be just what you're looking for.
Fantasy typefaces are decorative and artistic — think Impact — which means that, like cursive typefaces, they can be difficult to read. In addition, these typefaces can come with unique limitations, such as a lack of lowercase letters. These typefaces are best used as accents, not your main text.
The picture type family consists of those crazy typefaces that replace characters with symbols and illustrations, like astrological signs, shapes, and the like. I'm sure at some point you've had fun checking out what your name looks like in Wingdings or Zaph Dingbats, but it's best to avoid these typefaces altogether when designing your Website. The reason for this — besides the fact that they're completely nonsensical — is that there are no browser defaults for picture typefaces, because they don't correspond to an actual language. An A is an A no matter whether you're using Arial, Comic Sans, or Times New Roman, but if you're using a picture typeface, it could show up as anything from a flower to a pair of scissors to a Kronecker delta.
Play it Web-Safe
So, now that you know the different type families you can choose from, it's time to go wild and pick out all your favorite typefaces for your Website, right?
Unfortunately, no. Web browsers are finicky beings, and they usually don't get along very well with creative-looking typefaces. If a browser encounters a typeface that isn't installed on its computer, it will default to another typeface, which can seriously mess up your design, let alone the meaning you had in mind for your text. Your best bet is to stick to Web-safe typefaces, which are generally rendered the same in all browsers, for your main body text. This isn't necessarily a bad thing — there are enough of these typefaces to ensure that you'll be able to find something to fit the mood of your text and your Website. Here are the most common Web-safe typefaces:
Times New Roman
Comic Sans MS
Meanwhile, you should play up the power of creative typefaces by exclusively using them as headers and text accents. In order to do this without the browser defaulting to another, safer typeface, you can create an image of text or use a program like CoffeeCup sIFR Font Maker to create Flash™ text. You can go further with Flash™ by adding colors and effects to your typefaces using a program like CoffeeCup Website Font. I'd go into more detail about these processes here, but David Rodriguez has already written an excellent article on this topic.
Getting Choosy With CSS
When John Donne was penning poetry, he only had two options for displaying his work: handwritten pages or the relatively new technology of the printing press. That being the case, he didn't have the opportunity to choose between different typefaces that might work better with his artistic vision. Instead, he had to work within the established system. Although modern-day Web designers have to do this in a sense with Web-safe typefaces, they do have the option of choosing which Web-safe typefaces they'd like displayed. You can do this using a simple bit of CSS: the font-family property.
Say you want to use Baskerville, a stately, sophisticated serif typeface, for your Website text, but you're not sure all your users are going to have it installed on their computers. What you could do is pick another, more common serif typeface, like Georgia, and set that as a backup. You could even set “serif” as a backup for the backup, just in case your Website visitor is using some strange browser that doesn't recognize Georgia. Setting serif instructs the browser to use its default serif typeface in case it doesn’t recognize the other typeface(s). The rule would look like this:
font-family: Baskerville, Georgia, serif;
You can learn more about this technique in yet another article by the illustrious David Rodriguez.
Webmasters are presented with a ton of freedom when it comes to typography. Novelists, journalists, academics, Renaissance poets, and other purveyors of the written word are pretty much limited to strict typeface conventions, but the Internet plays by a different set of rules. Big text, small text, colorful text, text that glows and explodes and reassembles — pretty much anything is possible with the powerful tools available to Web designers.
But just because you’ve got a lot of freedom doesn't mean you should abuse it. The “suck” pun only appears in “The Flea” twice — John Donne knew that if he overused it, it would lose its power and cleverness. In the same way, you should preserve the power and cleverness of your Web typography by using tasteful text and saving the creative, exciting typefaces for special occasions.
Otherwise, your Website could suck.
“The Flea” screenshot taken from http://digitaldonne.tamu.edu/.