Chat Clussman » Typography

New (responsive) site design

Chat — Mon, 12 Mar 2012 05:43:00 +0000

New look for a new year (or a new SXSW). More importantly, a responsive look. Go ahead, resize your browser. Make it as big or as small as you want. The content will be sized to fit. Not bad eh?

The site runs on WordPress and I built a Twentyeleven child theme. The Twentyeleven framework did most of the heavy lifting on the responsiveness.

I had some fun with the typography. All open source or free. I’m using Lobster for the logo text, League Gothic for the main navigation, Ostrich Bold for the sidebar section titles, Museo Slab for titles, and Museo Sans for body copy. The design has only two images: the logo and the picture of me in the bottom left corner. I’m sure That’ll probably change, but not much.

Since this was launched in very little time and with very little sleep and during the distractions of SXSW, it wasn’t fully browser tested. It’s probably horribly broken in a dozen different ways. If you see something broken, please leave me a comment letting me know about it, because that is the path to good karma and enlightenment.

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. Continue reading →

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... Continue reading →

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. Continue reading →

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. Continue reading →

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. Continue reading →

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! Continue reading →

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.