Chat Clussman » Typography

15 years VIB: Event and 9 Books on the Behance Network

Chat — Wed, 23 Nov 2011 03:22:49 +0000

I can't believe the amount of work that went into creating this event and the nine books that went with it. It pays off though. The design is fantastic. They drew each page on a giant chalkboard, shot it, then erased it and drew the next one.

Lettering.js – A jQuery plugin for radical web typography.

Chat — Tue, 01 Nov 2011 15:28:16 +0000

Just looking at the examples and this looks like a ridiculously awesome plugin. It looks like this does a lot of what you could do if you had complete nth-of-type control over typographic elements in CSS. (Or you could achieve the same thing using tons of superfluous markup and CSS.) As with all plugins like this, there is a visible switch once the page fully loads. That part is a bummer.

Kern Type, the kerning game

Chat — Mon, 10 Oct 2011 19:43:11 +0000

Okay, you have to be a huge nerd to play this, but I had to take the challenge (I am a huge nerd). I scored an 85. I would've scored higher but I didn't get the game mechanics on the first word (hint: the outermost letters can't be moved). I might start making this part of my interview process for design candidates.

Free fonts from Lost Type Co-op

Chat — Wed, 20 Jul 2011 20:03:32 +0000

I love this. They don't just present you with a list of free fonts, they create a beautiful sample image using each typeface. I immediately wanted to download half a dozen of them.

Font sizing with rem

Chat — Sun, 10 Jul 2011 15:47:10 +0000

Jonathan Snook takes a look at the new(ish) CSS font unit, rem, and how it can be used to create text resizeable text with no inheritance issues. I'm going to try this on my next project.

3 Must-Learn CSS Techniques for Perfect Web Typography | Design Shack

Chat — Thu, 07 Jul 2011 03:41:30 +0000

New font-size units, unitless line heights and more! Really good stuff here in a very short read.

The New Bulletproof @Font-Face Syntax | Fontspring

Chat — Fri, 04 Feb 2011 05:19:30 +0000

Get web fonts working in Safari 5.03, IE 6-9, Firefox 3.6-4, Chrome 8, iOS 3.2-4.2, Android 2.2-2.3, and Opera 11!

Typography Flowchart

Chat — Wed, 21 Apr 2010 14:34:43 +0000

Need to choose the right font for your next project? Look no further.

Complex Flowchart

Simplified 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.

Panel Notes: CSS & Fonts: Fluid Web Typography

Chat — Mon, 15 Mar 2010 04:48:06 +0000

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.

Speaker Info

Website: jasonspeaking.com
Twitter: @jasonspeaking

3 Things to Learn About Web Typography

How to use web fonts
How to find web fonts
How to choose the best web fonts for your design

Why does typography matter and what is web typography?

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.

List of pre-installed fonts on Windows and Mac: http://fluidwebtype.info/web-safe-fonts/
Another List: media.24ways.org/2007/17/fontmatrix.html

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.

Web font service bureaus

Subsetting
Local Use
Bandwidth Usage
Price Structure
Speed/Bandwidth

Limits of webfont service bureaus

Do not control font name
do not control font files
Price often a yearly license
Browser support

Webfont service bureaus

Typekit: 400 fonts
Kernest: 600+ fonts
Typotheque: 40+ fonts
Ascender: 200+ fonts
Fontdeck: 40+ fonts

How to choose webfonts

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.

My own thoughts

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.

Type in Motion

Chat — Mon, 18 Jan 2010 13:00:26 +0000

I know. On a Monday instead of a Friday right?

Neutra Face : An Ode On A Typeface (A Bearded Poker Face Parody)

I thought I’d lead off with one of the funnier typography related videos that I’ve seen in a while.

Trajan is the Movie Font

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.

A few from CollegeHumor

Helvetica Film Official Trailer

Kinetic Typography

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.

Blink 182 – Online Songs Kinetic Typography

Fair Trade Coffee

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 by PaweÅ‚

Typography from PaweÅ‚ on Vimeo.

Google Wave Cinema: Pulp Fiction (NSFW)

Kinetic Typography Tutorial by Elrond Hubbard

Kinetic Typography Tutorial from Elrond Hubbard on Vimeo.