Previously, in Typography I: Typeface Selection: Interestingly, FF Real is featured on a poster in my moodboard that says “Design will save the world. Just after Rock&Roll does.” – and I often tend to grab a guitar to play some blues and rock music while taking a break from the design work. Maybe, subconsciously, that’s why it speaks to me?

I always found myself amused working with the type scales. There’s a fascinating relationship between typographic scales and music – they both rely on mathematical ratios to create harmony.

I’ll start with what looks good on mobile and consider bumping it up for larger screens once the layout is in place. That means starting with the browser default: 16px as the root.

But wait, what if I try to implement the blues scale, and use the intervals from minor blues pentatonic for setting the type? The blues scale in music is a six-note scale often used in guitar solos. It’s raw, expressive, and slightly irregular, thanks to the addition of a blue note. That’s the one that makes you go “uugh”. You don’t just hear it — you feel it. I thought: what if text could groove too?

Yes — instead of chasing a perfect scale, let’s chase one with a soul! Here’s how the musical intervals translated into font sizes:

From there, I excluded the sizes too close to a blue note, and put together two subscales, one for the titles, and one for the body text. I lined them up on a nuanced 4px grid, for a fine vertical rhythm. Here they are, combined:

To the eye, the method behind the scale might not stand out — but I like what’s underneath the letters. It adds a subtle rhythm that undoubtedly shapes the feel that I’m after. It makes me like its bytes one tiny bit more.

Play the scale!

I put up a tiny script so you can actually hear what I’ve been talking about! How does the font size sound? Click it! Give it a go!

Can you spot the blue note?

As always, here’s how the site looks like right now:

to be continued…

Typography III: Styling →