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. Well, the team really has the expertise to handle situations like these. It is probably why they are hired in the first place. In fact, most designers tend to have a proficiency in creating responsive designs, having a knack on how to use grep command (or similar coding commands), and handling web server and design applications. Therefore, it was not a big hassle for us to change the typography of the site. 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:

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. You can apply different types of examination to better understand users’ needs which would later lead to bringing in more traffic to your site. It might be possible to learn more about the shortcomings of design by employing UX research methods. Furthermore one can use that data to improve the design to match the user expectations.

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. Typography and UX design can be hard to wrap your head around, especially at the start. But don’t feel ashamed if it’s not clicking in your head, coding the typography for your site can be difficult, especially if you want something professional right from the start. That’s why many choose to hire a website builder to do all the bracket codes, headers, and font picking for them. As for me, I’m proud of what I’ve managed to accomplish.

Thanks to everyone linked here for helping me figure out how to implement something like this on ChefSteps. What’s next?

Some more resources:

• http://pxtoem.com/
• http://alistapart.com/article/settingtypeontheweb
• http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
• http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.2/