Overview

I recently gave the Design for Software talk to my colleges here at Clarity, and not surprisingly, the typography portion raised the most questions. Unfortunately there really isn’t a definitive source for learning how to set type “the right” way. So I decided to drill into some key principles of digital typography.

There are a few typography questions that seem to bubble up more than the rest:

1. What sizes should I pick for headers and body text?
2. What are some typefaces look good together?
3. Should I use serif or san-serif?

In this first post I’ll try to shed some light on the topic of choosing a suitable scale for sizing your screen elements. In the following posts I’ll attempt to tackle the fine art of pairing typefaces and give some general rules of thumb for using serif and sans fonts. For the record, I am no expert on the subject, just enthusiastic about it and hopeful that other tech-minded creatives will find this post helpful.

Rhythm and Scale (What sizes should I pick?)

Choosing the right font sizes for your application involves three key components: Scale, Leading and consistent Vertical Rhythm. Once you wrap you mind around these little nuggets making space and size decisions should be a breeze.

Scale

Scale refers to the intervals of size and the relationship between them. There are many different scales available for many scenarios- these two are well suited for most typographic tasks

Scale in typography is akin to scale in music. Choosing notes in the correct scale result in harmonious chords and tones. The same is true for choosing a scale for typographic elements, arbitrarily picking sizes can result in a discorded visual rhythm.

When you’re deciding what size to make your headers a good rule of thumb – multiply your body size text by 2 and then find the nearest value in your scale.

Leading

Leading is the space between the baseline of the type and the next. In CSS and most programming languages this is the Line-Height property. Most classic typography books recommend a general leading value of 1.5em or:

Anything less than 1.5 is typically too cramped for comfortable readability.

Vertical Rhythm

The Vertical Rhythm is the spacing and positioning of text blocks as they descend down the page. The primary characteristic of perfect vertical rhythm is when the spacing between paragraphs and headers are equal or related to the leading. In other words, equal spacing between headings and paragraph text is ideal for keeping a consistent vertical rhythm.

Rhythm & Scale Widget

So far so good, BUT, programmatically positioning elements on a page can be a real downer. Adding margins and spacing manually to all your textblocks could get real cumbersome real fast.

The good news is that with some simple math inspired from this site we can calculate the CSS values for keeping good vertical rhythm. I created this html5/OSX widget to generate the base CSS values for scale and baseline aligning text in html.

Using the widget

1. First, choose a comfortable reading line height value. The amount will vary depending on your typeface…sans-serif faces typically need more than serif faces. Depending on my base font size I typically choose a value between 18 and 24.
2. Second, pick between one of the two common size scales. The Diatonic Scale is based on traditional typography sizes and the Golden Ratio Scale is based on the Fibonacci sequence (for natural-looking size values).
3. Last, preview the generated css on the backside of the widget and copy it to the clipboard. The values generated should be a good starting point for establishing vertical rhythm and font sizes.
4. *Bonus* If you are a mac user, download the dashboard widget. If you are an ie9 user, pin the site to your taskbar. And if you are a chrome fanatic get the widget HERE from the chrome web store

Generated Sample

Check out this sample page to see all this theory stuff working together. Taking the generated css from the widget I added a couple of css rules for columns and the bingo-bango…everything lines up nice.

Resource Roundup

During my exploration of this topic I found some great resources that give a much deeper dive into the typic of rhythm and scale. If you are interested in learning more these are key:

• Compose to a Vertical Ryhthm
• Setting Type of the Web to a Baseline Grid
• SxSW Talk: “Web Typography Sucks”
• Modular Scale Calculator
• Typographic Design Patterns and Best Practices

Best,
Erik Klimczak | eklimczak@claritycon.com |twitter.com/eklimcz