Typography Episode IV: The Empire’s Next Generation of Dr. Who: Vampire Slayers

by Tim Croteau

This post was written by Tim Croteau, a Fresh Tilled Soil Apprentice, in response to Challenge 2: Web Typography.

Goal

Develop a readable, responsive system with a “geek-centric” style, something suitable for a gaming or tech blog.

Font Choices

When I sat down to select fonts, I looked to typical “pillars of geekdom”: Star Wars, Star Trek, Doctor Who, etc. In the logos for these various properties, sans-serif characters with very square shapes seemed to be the popular choice; there aren’t a lot of bubbly round fonts or old-style serifs thrown around in geek/sci-fi culture.

The first choice was my header font; as the biggest and boldest element on the page, it carried most of the style of the document, so it had to be just right. Russo One has a very square overall form, but with broadly rounded corners, reminiscent of the Star Wars logo font. Perfect.

Having chosen such a strong header font, I wanted to keep the body font pretty simple to avoid any personality clashes. I went with Armata, which features “square yet rounded” shapes like Russo One, and maintains readability throughout a wide range of sizes. I feel that the two fonts complemented each other fairly well.

I wanted a solid attention-grabbing blockquote font, and went with Press Start 2P, an 8-bit inspired pixel font. Risking a bit of a clash, its character forms are unlike either of the chosen fonts; that said, it reeks of geek culture, so I feel there’s still a workable connection with the rest of the copy.

Sizing, Spacing, Leading, etc.

I started with body copy when tackling font sizes. Armata is a pretty big font, so I brought the baseline font size down to 14px (versus 16px found in most default browser styles). In 2-column (2-thirds/one-third) layout, this gave me a decent line length at average desktop display sizes.

Once, I had that initial size, I took Tim Brown’s modular scale approach to working out header sizes and line-height. I created a modular scale based on the golden ratio, using 14px and 28px as my input values. Those 2 numbers gave me a lot of flexibility, and – to be honest – a lot of the resulting decisions were simply based on “I think this looks good.” I used only the numbers and em values prescribed by the scale, but the specific choices were completely based on how I just felt things were laying out. Unscientific? You betcha.

Result

Image of Tim's Typography Challenge

Ultimately, I’m pretty happy with how things turned out. Having not done too much with typography before, this was certainly a challenge, but I feel I created something readable, albeit not particularly pretty. I’d like to experiment and focus more on the relationships between font size, line-height and line length in the future, and play more distinct fonts against each other.

About Fresh Tilled Soil

Fresh Tilled Soil is a Boston-based user interface and experience design firm focused on human centered digital design