I thought I’d switch up the two posts I scheduled because I was more excited about discussing typography than design principles. At the end of writing this post, I also realized that the discussion on typography needs to span two weeks because there’s way too much to talk about, and I don’t want to skim over important stuff. So onto . . .
Today’s Question: What is Typography? (Part I)
Typography, simply put, is the arrangement of letters, or type. It includes everything from those cool animated titles in the movies to the default formatting in Word documents.
You wouldn’t think it, but typography is the most fundamental aspect of design. If design is at its core a tool for communication, than what communicates better than words? In the end, the word is the most abstract form of an object being communicated, and it open to the most interpretation (which in design is a good thing). How do you communicate those words in order to grab someone’s attention and change how they think, feel, or react to those words? Use good typography.
Now that we’ve got the basics covered, I’ll ask you the question every beginning designer asks during Typography 101: Is there a difference between a typeface and a font? The answer is: YES! The words are regularly used interchangeably (sometimes I get lazy and do it too, so no worries), but they’re actually different.
So right now you’re probably like, huh? Aren’t typefaces and fonts just bunches of letters that are designed similarly, and typeface is just the posh way of saying what everyone else is thinking? I wish (because typeface is pretty posh sounding), but in reality, a typeface is the actual design of the letters. It’s what the set of letters looks like, what it’s classified by, the shape of the letters; typography is the art of using typefaces after all. The font is the form a typeface takes, or how it is used. When you type letters into a WordPress post document, you’re using a font. When you using an old printing press, you’re also using fonts. You change the size of fonts to be 10pt or 72pt.
Random Fact! The words “font” and “foundry” comes from the age of the printing press (starting in 1450) when professionals melted, molded, and refined metal into fixed letters (originally the typeface Blackletter inspired by monks’ handwriting), in the process creating miniature stamps, and lining them up in a printing press for paper to be rolled and then pressed on top. I’ve actually seen the process of using one of these presses myself, and it is the most tedious, difficult, and strenuous thing I have ever seen.
Back to the facts. Still kind of confused about the different between a typeface and a font? Hopefully this will make it clearer.
When you say you like the look of a “font” (i.e. Wisdom Script), you’re actually saying that you like the way that typeface was translated onto a screen or paper rather than admiring the inherent aesthetic qualities of Wisdom Script as a typeface (the shape of the letters, the flow, it’s decorativeness, etc).
When it comes to typefaces, people love what’s in trend. Two years ago it was Zapfino. Last year, Wisdom Script, this year: Lobster.
One of my favourite retro typefaces, Tommaso, was actually used on the cover of The Diviners by Libba Bray (love that book, btw), and since then I’ve been seeing it everwhere.
However, what’s in trend isn’t necessarily good for your blog. Here we’re applying what we learned last week about good design: just because it’s pretty, doesn’t mean it works.
If you have a clean minimalist blog with lots of lines and clear geometric forms, you’re not necessarily going to want to use a script (which has smooth curves and a softer feel). You’ll want a sans-serif (that’s the design of typefaces that doesn’t have those “notches” or flourishes at the tips of the letters). Examples of sans-serif are the extremely over-used but never out of style Helvetica, or another popular one, Futura. These fit much better with the over-all feel of your blog than something like Fangtasia.
What if you want something that has lots of retro influences and looks like it came straight out of the roaring 20s? You’re not going to pick Helvetica, which is as cold and clean as it gets. Instead you could use Fangtasia, or something like Vevey (inspired by the design of old cinema titles) or Lavanderia (influenced by laundro-mat advertising).
If you want something classic looking, try a nice serif font like Caslon, Bodoni, or Baskerville.
Futuristic? Try Figa, Alien League, or Accent.
Cute and pretty? Sofia, Dude, or Pavadee would work awesome!
Still gunning for those beautiful scripts (I’m on that bandwagon as well), some great ones you can try are Pacifico, Ballpark, and BPscript.
Ok, so now that you have that beautiful main typeface that’s going to be on your header and is going to define who you are as a blogger (at least for the first few months until you get sick of it), you have to get a feel for mixing and matching typefaces to see what works. Most people instinctively know what looks good together, but some general rules are:
1. Stay away from mixing typefaces that are in the same category (like serif, sans-serif, script, decorative, or slab-serif). If you’re using Pacifico as you’re main typeface, adding Lavanderia in your subtitle is going to clash.
2. Typefaces in all these categories have different feelings. Some have harder lines and sharper angles, some are all curves, flow, and soft lines. In this case, you’re generally going to mix like with like.
Where do I get fonts like these?
I get most of my fonts free from LostType. You don’t have to donate if you don’t want to (or can’t afford it), so for the price area, just enter $0 and click download. You’ll usually download two types of files: .ttf and .otf. Lavanderia’s font allows you to custome the types of letters and flourishes you use through .otf, so that’s the benefit of choosing that one over .ttf, but in most cases it doesn’t matter which file you choose.
Some of these other fonts I just found through Stumbleupon. Google any of them online and you’ll probably find a legal website that will let you download a version of it (for some it’s just a single weight as their demo, other times they offer them in all the weights they designed for free!).
I’m going to warn you away from Dafont.com, mostly because the fonts you can download don’t always work, glitch, screw up your computer, or just aren’t designed very well. Kudos if you find something good on there, it’s few and far between. I prefer keeping my Mac safe and secure from viruses.
Some awesome typographic inspiration to tie you over until next week!
Good Typography | Betype | TypeJunkie
Next week I’m going to go into more of the nitty gritty stuff about typography, including how to space type, organize your content, and what to avoid when it comes to picking and using typefaces.
*Revised* Schedule:
May 11: What is Good Design?
May 18: What is Typography? (Part I)
May 25: What is Typography? (Part II)
June 1: What are Design Principles?
