This post was written by Tim Croteau, a Fresh Tilled Soil Apprentice, in response to Challenge 2: Web Typography.
Develop a readable, responsive system with a “geek-centric” style, something suitable for a gaming or tech blog.
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.
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.