Typography of ChefSteps

Fortunately, I have the freedom here at ChefSteps to go down rabbit holes I think are important, as long as I can A) Convince the team they are necessary and B) Can execute. So, after feeling like something was a bit off about the typography of the site, you’ll notice in the last couple of months that we moved away from using Raleway and Helvetica Neue on headers and body text respectively, and moved to mostly just Gotham. I love it, and I think the site looks very clean with it, but there was something missing.

It all started with MailChimp’s Archived Post of Rhythm and Grid , and I got started down the path of looking at our own typography and vertical rhythm (it was lacking). Once I started on the path of defining a vertical rhythm, I found several great resources that all coincided with choosing a scale for the typography as well. We’re currently using Gotham as the main font for the site through H&FJ (typography.com). A little more digging and bam! 8th light post about choosing a scale.

I started here, with a 9:16 scale, which is a minor seventh in musical terms. I chose 9:16 because of the similarity (while not exactly the same as) to 16:9 aspect ratio, which Ryan shoots the video at. That scale looks like this. The minor seventh looked good, but sounded a tad discordant for my taste. Knowing no one would really care/know about his, I still took the time to change it so it matched up to a perfect fourth. A perfect fourth sounds like the first chord on this song, which was playing everywhere at ChefSteps one day:

17 by Youth Lagoon on Grooveshark

By this time, I’d seen several blog posts about incorporating music into your typography, and Robert Bringhurst’s advice to compose to scale is where a lot of these rooted from. Tim Brown’s article on A List Apart and Owen Gregory’s on 24 Ways are older posts, but also absolutely amazing and in-depth. I’ve not even come close to the thoroughness of the composition for layout as these two do, but it’s a start.

Here’s what I did: I took the Perfect Fourth and associated our scale to those and used the true 16:9 pixel dimension as the magic number (in this case, 1136px for our videos, which is a true 16:9 resolution. So, we’re using the perfect fourth scale now, which was a small adjustment, but gives me a really nice story behind the design :)Here’s the modular scale. We skip a few sizes between h3 and h5, but that also allows us flexibility in typography for different sized text should we need it.

One of the big things I struggled with was em vs. rem. I was defining baseline by em, which was screwing up issues because it was all defined by the parent and ems can compound in size based on inheritance. The only real solution while still using ems is to write more css — The answer was to use rems. I then defined the root for html to be 62.5%, which is the same as what Jonathan recommends, in order to have every X.Xrem to translate into XXpx (1.1rem = 11px). Then I used a SASS mixin to define a baseline of 1.1rem and anytime I add margin, I use $baseline * N for as much space as I need.

All this took a little while, because the rhythm is constantly disrupted by image sizes that don’t fall into multiples of our baseline (11px), but for the most part, the text up and down the page does. It helps the pages look more composed and any new modules we have in the future should fit neatly into the grid, making the entire site more flexible and robust from a UX perspective.

Did you get this far? You must really like typography! You’re probably like:

But I’m like:

Vertical rhythm and composing to a scale: Like doing the robot in a robot suit. Thanks to everyone linked here for helping me figure out how to implement something like this on ChefSteps. What’s next?

Some more resources:

14 thoughts on “Typography of ChefSteps

  1. Such a nerd… I think it’s brilliant that you actually care about this stuff! Keep it up!

  2. I’m not a designer by any means, but I love this post because you’ve actually gone to the trouble of explaining your thought process step-by (painstaking) -step. It seems most other designers seem to just “get” it and have a hard time explaining things like important ratios, em, and rhythm. Thanks!

  3. Huh?

  4. damn i got the nerd chills, like goosebumps when you listen to a really nice song

  5. moustacheofdeath

    I appreciate you writing the post but why did you feel the need to dumb it down so much for lay people. Nerd out, brother!

  6. I stumbled upon this book in an art supply store as a budding calligrapher in high school in the late 70′s. http://www.amazon.com/Writing-Illuminating-Lettering-Edward-Johnston/dp/0273434322/ref=tmm_hrd_title_0?ie=UTF8&qid=1384830019&sr=1-1
    Mr. Johnston puts a lot of thought into the beauty, utility, and design of the written word (or information) that you might find fascinating (though he did it all by hand). He points out in wonderful detail the pros and cons of various letter forms and ways of arranging information for different results.

  7. Tim, great post. Any thought to adjusting the line-height to let the text breath a little more, or does this break the system you worked so hard to build/cause too much scrolling on mobile?

    • Ethan! Awesome suggestion, thanks for sending it over. I failed to mention that some of the typography over at chefsteps.com hasn’t made its way fully to the blog—Which I fully intend to fix someday. And also, I fully intend to start blogging again! Things have been crazy. :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>