Need to choose the right font for your next project? Look no further.
Complex Flowchart
Simple Flowchart
This comes courtesy of a tweet from @cameronmoll. Cameron credited @swissmiss who credited @markboulton who credited both @nathansmith and @chrisbowler and on and on. I stopped there. Cameron was the only one to include the simplified chart so I think he deserves the lion’s share of the credit for this anyway.
Flying cars, trips to Jupiter and web fonts: three things we were supposed to have by 2010. Cranford Teague is a funny guy, this should be good.
Web typography is not text in an image. (Duh. This panel might be a bit remedial.)
Sites using cool web typography:
Five font-stacks: sans-serif, serif, monospace, cursive, and fantasy.
He’s explaining what those are. This is definitely remedial. Probably a good session for neophytes. I’m hanging out with a friend so I’ll be staying for the duration.
Running through the CSS syntax for webfonts now.
Hey, a good semantic idea:
Give your webfonts a custom name based on usage (Headline, BodyCopy, etc.) instead of using the actual font name, which requires you to change all the references in your stylesheet if you later decide to change fonts.
Discussing formats now, EOT and WOFF.
Sweet, he mentioned Font Squirrel’s @font-face Kit Generator. That’s what I used for the fonts on this site. Discussing font EULAs now.
All fonts on exljbris.com are available for use on the web.
Choose for voice. Consider the phrase “I am going to kill you” rendered with different fonts.
Font-stack: webfont, web safe font, core web font, generic.
Choose for consistency. Select understudy fonts with similar widths and kerning to the primary font. This is something I’m struggling with my use of League Gothic for headlines.
Choose for style. Select fonts with bold, italic, and bold/italic versions. I’m less worried about that for headlines, but it’s important if you want to use custom fonts for body copy.
Choose for legibility. Select fonts with consisten weight and thickness with simple, low contrast strokes and serifs.
Choose for readability. Select fonts that are well balanced between letter spacing, counter width, letter width, and x-height.
Free fonts can sometimes be a bit dodgy. There are good sources you can get your free fonts from though. Places like the League of Moveable Type and Font Squirrel. Once you download a font, you can inspect it and generate versions (OTF, TTF, etc.) with FontForge.
I know. On a Monday instead of a Friday right?
I thought I’d lead off with one of the funnier typography related videos that I’ve seen in a while.
This video actually turned me on to Goodie Bag. I know follow Kirby on Twitter and routinely check his website for updates. He seems to be relatively unknown, which I find amazing—in a bad way.
Definition of kinetic typography from Wikipedia:
the technical name for “moving text”—is an animation technique mixing motion and text. This text is presented over time in a manner intended to convey or evoke a particular idea or emotion. It is often studied in Communication Design and Interaction Design courses. Some commonly seen examples of this technique include movie title sequences and credits, web page animation and other entertainment media.
Here are a few samples. My favorite, “Google Wave Pulp Fiction” is near the end. It’s NSFW. It’s also awesome.
This one is really more of a data visualization but I like the use of typography in it.
Fair Trade Coffee Infographic from Simon Vieira on Vimeo.
Typography from Paweł on Vimeo.
Typography from Paweł on Vimeo.
Kinetic Typography Tutorial from Elrond Hubbard on Vimeo.
Have any favorite typography related videos? Share them in the comments. I’d love to see them.
Chat Clussman is a design technologist and a father. His main obsession is quality of life but he’s also fond of writing, photography, design, grids, Apple, and WordPress. He lives in Austin, TX.
