Typogasm

Inspiration

The Elements of Typographic Style by Robert Bringhurst; every time I pick it up I get a crush on typography. It's a technical manual but it's written by a poet. And it's a gorgeous object to hold in your hands and flip through. All of the lessons inside are brought to life in the design of the book itself. Reading it is a constant reminder of what a beautiful art form typography is.

“By all means break the rules, and break them beautifully, deliberately and well.”

—Robert Bringhurst

With Typogasm I wanted to build a tool that made it easy to apply two of the core concepts in Bringhurst's book to the web: typographic scales and vertical rhythm. The elastic nature of type in the browser often makes this tricky. And for the growing number of us that design in the browser rather than photoshop, the creative process can get clogged up with all of the calculations needed to play with vertical motion and scales.

So the first goal was to make it easy and fast to compose with a scale and grab the css needed to keep everything on beat. But I also wanted a tool that captured some of that feeling you get flipping through Bringhurst's book ... a tool that felt less like a calculator and more like a stage for beautiful type.

Typographic Scales

A typographic scale is just a series of harmonious font sizes laid out at regular intervals. When you compose with a scale, you know that any variations you end up choosing will share that inner harmony.

In music, an octave doubles the frequency of the note. In typography, an octave or 1:2 ratio doubles the size of the type. If you divide the interval into equal pieces you get additional 'notes' or sizes to work with. In western music, the octave is divided into seven notes. You can add additional sizes to your typographic scale, but typically you want to use as few as possible to get the range of font sizes you need. The obvious exception is the classic typographic scale from the 16th century; it's an octave ratio with five notes per interval.

Scales become easier to wrap your head around when you can see the scale you're working with spread out in front of you and know at a glance how each 'note' in the scale is related to the others. On a piano keyboard, the relationship between notes is obvious because the arrangement of keys gets repeated every octave. On Typogasm, the markers below the letters in the scale serve a similar purpose, defining the interval, and making the relationships between sizes clearer.

Vertical Rhythm

The line height of our text typically sets the vertical beat of our page.

But the line height alone gives us a very low resolution grid to play with; what we often need are fractions of lines.

If we use half the line height as our rhythm instead of the full line height, a line of text simply takes up two beats instead of one; everything stays on beat but we end up with a much more versatile grid.

Typogasm takes all of the grunt work out of playing with half lines. Everything is locked to the vertical grid, and you know that the end result is always going to be on beat.

Vertical grids get even easier with a css hack I call vrem (vertical rem). It turns 1 rem into one line, making it easy to nudge elements around in css without a calculator. Adding a one and half line margin to a heading becomes as simple as margin: 1.5rem.

There are lots of factors conspiring against pixel perfect layouts on the web. In an elastic environment like a browser, our designs and creative processes can become very rigid and brittle if we get too hung up on pixels. But you don't have to fight the fluid nature of the browser to maintain a tight vertical grid. The trick to keeping a half line rhythm on beat in as many different scenarios as possible is to start with a line height that, when translated into pixels, is an even number so that it will divide cleanly.

Good Reading