Thank you very much I appreciate that. Quick warning before we get in, there is audio attached to this, because you can’t really talk about musical scales without playing a few. I’m hoping it’s not too loud, they’ll fine tune that from the back as soon as it comes up.
(00:22)The slides do swivel, and there is one gif that if you do have problems with perspective or depth or motion I’ll warn you in advance "now is the time to look away". Were going to be talking about using musical scales to build harmonious and responsive typography.
A few things about me that explain how the talk happened. First of all I’m an amateur musician. Through my teenage years I took piano lessons. At college I took euphonium, tuba, trombone lessons. Played in some wind ensembles, concert bands, fun stuff like that; studied a lot of theory as well. Music like many other things has an art and a science component. And the theory is all the math and cool stuff behind it and what works and why, and I just really jumped into that.
(1:05) Secondly I’m a curious developer. If you’re a designer and you come to me with a comp or a style guide and it has like 19 font sizes listed. I’m going to look and say why, why those 19 numbers. Why just a list a numbers, why not a pattern. What’s going on here?
(1:20) Because number 3: when it helps me out I can be a lazy developer. By which I mean and many of you probably understand this; if I can automate it, if I can write a script that runs a pattern and spits out all the code I want instead of me typing everything manually, I’m way happier. That’s what computers are there for; to do dumb boring math stuff so we can do more intelligent human things.
(1:41) So those are 3 things about me that turned into a side project that I built for actually running font sizes in a browser on a website based on music annotation. So first thing let’s talk about musical intervals and math. Every note is a number. Every musical note actually has a specific frequency. Frequency of course is vibrations per second. We measure those in hertz. I suspect you already knew this. Again, for the motion warning right now.
If you’ve ever seen a trombone player; the longer the slide is, the lower the note. Music corresponds to length, to a dimension, to a measurement. Same thing with a harp. The longer strings near the end produce lower tones, lower pitches and the higher strings; the shorter ones at the top. And a xylophone, I love this kid their having the time of their life right there. The longer and wider keys on the xylophone produce lower pitches than the shorter, narrower ones; and if we took the lid off of a piano we would see the same principal happening again.
(2:46) An Orchestra will typically tune, if you go to orchestra concerts they have a little tuning bit that they do beforehand. They’ll tune to what’s called the Concert A most often. That’s measured at 440Hz. This is a precise measurement; almost every orchestra does it some of them will temper that note a little bit, but that’s pretty much standard. If we’re going to move that A up an octave, let’s say we moved from tuning the clarinets to the flutes. What happens mathematically, the frequency of that A literally doubles from 440Hz up to 880.
(3:17) If you took piano lessons; everything starts on middle C is kind of what you get in the first year, that’s rounded 131Hz. If you go up one octave, the mathematical frequency of the pitch doubles precisely to 262. Here is a visual representation if you prefer seeing things. The graph on the bottom has twice as many peaks and troughs per distance. Twice as many vibrations per second, so it would represent a pitch that is an octave higher than the graph above it.
A fifth is another common musical interval. A to E, or C to G. And again it’s 1.5 times the original frequency. If you go up a fifth on piano; that’s 5 notes away; one hand if you are still in first year lessons. From the bottom to the top, the pitch is exactly one and a half times the original note. Divide by one and a half to go down the same interval.
And again another visualization of those two waves. The one on the bottom is not quite as tightly packed, it’s only one and a half times the top pitch. It would be up a fifth musically speaking.
(4:26) And then there’s a half step and that’s a crazy, crazy precise and detailed long number. 1.0595. You don’t have to memorize that, there’s not a quiz later on, we don’t need to worry about that, but the half step is kind of the building block of all western music scales. Any music you are used to hearing at a petrol station or a restaurant or in the background of a movie for the most part is based on western scales and the half step is the building block there. All other intervals in this scale are exponents of this half step. Or to visualize the math to go from A to an A# you multiply A’s frequency by 1.0595. To go up yet another half step you multiply A# by 1.0595 and now we’re at a B; a whole step away from the A, two half steps. And of course the math is the same. If you square it instead of doing two different multiplication operations.
(5:18) Now what’s that got to do with fonts and typography. Let’s shift a little bit we’ll come back to music as we go, but talking about typography and modular scales in web development and web design. Couple different kinds of modular scales, single stranded and we’ll learn in just a moment multi-stranded. It’s a single stranded modular scale if every single interval, every step along the scale is the same. Visualized, this is like a good stairway. Every step is the same distance apart so you don’t stumble. In music a half step scale is a single stranded modular scale (Music plays). In a western octave there are 12 half steps in that octave. 8 notes in a typical major scale which we’ll hear later on, but 12 half steps in that entire octave; and then the pattern repeats itself again and again; and it’s always every note is 1.0595 the note before it. A musical whole step scale is also strictly single stranded modular. (Music plays)
(6:36) Now what about multi-stranded modular scales. You say those sound cool but they are not exactly like what I really learned when I took music or what I’m used to, so let’s talk about multi-stranded scales. Here every octave is a pattern, but the pattern repeats itself. However the intervals inside that pattern aren’t identical. In other words, single stranded is like if you take a meter stick, and every 10 centimeters you put a mark on it. And no matter how many meters stick to that pattern every single interval will be 10 centimeters because that’s just how it works. Multi-stranded however would be if you took a meter stick and marked a notch at 30 and one at 50 and one at 75. None of those intervals are the same as each other, except for the last two between 50 and 75, but you can keep repeating that same meter stick pattern over and over again. That’s multi-stranded. So let’s listen to a major scale (Music plays). Maybe a little piano lesson flashback, some of you may have not enjoyed it. But yea, the pattern there is whole whole, whole, half step; whole, whole, whole, half step. Not all the intervals are identical, but every octave that pattern repeats itself.
(7:53) A minor scale is the same way but with those intervals in a different order (Music Plays). So that’s what they sound like, what would we do to put these into play as an actual web technique.
(8:13) There are a whole mess of libraries and articles you can go to that already have parts of this puzzle implemented. Modular Scale, you may have seen the sass library and the website that goes with it. Scott Kellum and Tim Brown contribute to this one and maintain it. You can actually go to a website and pick like a scale interval and a starting font size and even set up a couple different strands if you wanted to do multi-stranded; and it will spit out a css file for you at the end that you can then import into your project and start using those assign them to classes or assign them to individual selectors.
(8:46) Sassline is a similar thing with an emphasis on baseline alignment. (Asks someone in crowd if they worked on typesettings). The rest of them basically do some flavor of the same work. They create a mathematical, modular scale and let you assign css selectors to them and get the right font sizes. And what we’re doing from a designers point of view is creating visual hierarchy. We’re creating font sizes that are enough different and distinct from each other that users on your site don’t wonder is this like an h2 or an h3; not that they think of that word usually. Is this a heading, a subheading, a block? We’re giving variety to show how important information is. And the last point on here, the A List Apart article called More Meaningful Typography describes the theory of implementing an multi-stranded modular scale. It’s not a codebase of it’s own though.
(9:47) So now let’s put these things together. We’ve kinda talked about the theory behind musical scales and mathematics and type scales and modularity. Now what do musical intervals lined up to the type specimens they represent; the font sizes they’d create look and sound like. The Octave as we covered earlier in the introduction is an even doubling. So here the headline is twice the font size of the body. Pretty simple, very basic, but that’s how they look. It’s not horrible. There’s nothing that guarantees that using certain musical notes will automagically look beautiful in some way. There’s a lot of trial and error and art to this still.
(10:39) Let’s look at another common interval, the Fifth. It sounds like this (Music Playing). And the mathematical difference between those two frequencies is 1.5 times. So here the headline is one and a half times the size of the body underneath it. Let’s try a smaller interval, the major third. A major third (Music Plays), much closer to the original pitch. The frequency is only about 1.2ish rounded, but here is a heading that’s the same proportion from the body copy.
So that’s intervals, but what about scales. Can this create like actual systems of typography that are useful in real life. I think so. Here’s a major scale, I’ll play it first and then we’ll talk about the numbers (Music Plays). So a major scale covers an entire octave as we’ve heard it so that means how many unique pitches? Eight, yea Oct; Eight; That’s a good jump there, but we’ve only got five font sizes in our hierarchy here. So we don’t actually use the entire musical scale; we only go first, second, major third, perfect fourth, perfect fifth, then back down. And we get very tight, very clustered not a lot of distinction font sizes out of that scale. So let’s pick a scale with fewer intervals per octave.
(12:26) A Pentatonic scale. A lot of early American folk music, Irish and Scottish folk music as well uses what’s called a pentatonic scale for melodies. If you’ve heard the song Amazing Grace at a funeral bagpipe or church service; All the notes in the melody can be played on the Pentatonic scale. The shorthand for that is five pitches per octave. If you are on a piano you can play a Pentatonic scale by just playing the black keys up and down, ignoring the white ones. But here is what it sounds like and looks like (Music Plays). Fewer pitches per octave, only five instead of eight which means we start moving up through the font sizes more quickly. And this time we actually used almost all of them, We’ve almost got up to perfect doubling. If we have had a sixth font size in the hierarchy we would’ve hit two.
(13:22) And let’s take an even more spread out scale. Which is actually more of a chord, a Major Triad (Music Plays). Here you can see the font sizes increasing even more rapidly. By the time we get up to the top tier heading we are at two and a half times the original font size of your body text. Now of course as you’ve probably become aware of by now there is almost nothing you can do left with css or front end development that doesn’t require some kind of responsive consideration. How does this work across breakpoints, across screen sizes, so I have some advice; Using a scale with more notes per octave let’s us get more content onto perhaps a smaller screen size, a phone, a small tablet. We still have a distinct visible hierarchy but we can fit more text on the page at once and I’ll show you some dangers we want to avoid in just a moment. A scale with fewer notes per octave as we saw iterates and increases font size more quickly and more rapidly. That’s better for a larger screen where you got the 27 inch 5k iMac kind of user to consider. Because everyone has their browser full width on that, right? I actually don’t.
(14:41) But here’s what happens if your font size is increasing to rapidly on mobile screens. And that’s actually more of a hyphenation problem than font size, but they play in together. Or “Forty Blog Topics for Entrepreneu - rs. Or this one, nothing happens; Improbability: leans into the margin there. URL’s have been removed to protect the guilty in these screen caps. But you don’t want to iterate through the font size too rapidly and using a scale with more notes per octave, more intervals per octave on smaller screen sizes, smaller break points; gives you the ability to maintain a distinct visual hierarchy without blowing up font sizes so large that they don’t fit into the screen or that they force sideways scrolling, wiggles, or other issues like that.
(15:30) So I built this sass library that does this for you. You can find it today at TypeTuner.com that aliases over to the github repo where it lives. And we’ll take just a second, I got a few moments to talk you through the API and then we can talk more about it or other related issues in the discussion track later on. So this starts with a list of labels that you as a developer choose to assign to your font sizes in the visual hierarchy. I typically do something like sm for small, p for paragraph, bq for blockquote, ssh for subsubheading, sh for subheading, h for heading, and hero for anything bigger than that. Your project needs may be different depending on what your site actually entails. So @include set-heirarchy just contains a list; that’s the labels you intend to use to identify these font sizes throughout the project. Call them what makes sense to you.
(16:25) add-breakpoints actually exposes an API that you can use this to run your media-queries as well. It takes a label which is basically the key for that breakpoint unique identifier for it, minimum width, the base font size for your paragraph, the line height for your paragraph; which type tuner actually uses behind the scenes to build a consistent vertical rhythm for elements as well, and then finally a musical scale to use at that particular min-width media-query match. This has a remove-breakpoint mixin that removes an existing breakpoint. There are three defaults; small, medium, and large, possibly XL. I don’t recall. You can undo resets or come in and modify somebody else’s code without actually deleting their code using that one. And then all the magic happens in type-tune. It takes a property, either the word extend or the word class depending on your code philosophy using sass’s extend. It will either create the percentage placeholder selectors for you or it will create the actual class selectors if you prefer to use those directly in your project.
And with that I’m grateful for your attention. Thank you very much. If you want to talk more again discussion track or you can catch me on the internet. If it says jdsteinbach it’s like 90% probably me. I appreciate the tweets and you can look for the code on this on github. Thank you very much.