Back to Blog

The World Needs More Type and Cats


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

The Typographic System
My main goals for my typographic system is to combine two of my favorite things: typography and cats. For my first challenge in Fresh Tilled Soil’s AUX program, my personal requirement was to make something fun in combination with my minimal aesthetic.

I wanted my site to feel sort of retro so I chose Brandon Grotesque, a font inspired by geometric-style sans-serifs that were popular from the 1920s to 30s as my header fonts. The friendly looking Brandon Grotesque is supplemented by an extremely legible body font (but still fun!) called FF Tisa, a soft slab serif wood type.

The Design
Oliver Reichenstein’s article on responsive typography served as the starting point of my design in deciding 16px or 1em as the body font-size. I realized as I started to design that the readability of the header font (Brandon Grotesque) increases when they are in all-caps and letter-spaced a little bit out. Plus the all-caps treatment helps increase their visual hierarchy in relation to the body text.

I used media queries to keep the site adaptative to the browser window and this effect is especially noticeable when I decrease the width of the browser around  the cat images.

In terms of how I determined how to style the type, most of it came from the gut and my decisions were based on what visually felt right.

The main typography set-up comes from Twitter Bootstrap and Zurb’s Foundation. Most of the cat content was pulled from wikipedia.

The site can be found here: Type & Cats

Author Yifan Zhangxu

More posts from this author

How we work Process

Product Hero Talin Wadsworth