Your Most Important Typographic Choices

How do you choose a typeface and another to pair with it? What size should your copy and headings be? How do you determine line-height and line-length so text is both readable and legible? These were some of the questions I set out to answer when making the typographic decisions that became part of this design.

Last week I talked about the basic process that led to the visuals for the site. If you remember I started by making notes in documents about different aspects of the design. I created documents for type, grids, and color and then instead of the usual sketching, wire framing, design comp progression, I turned my notes into online style guides that eventually became prototypes.

What I didn’t mention, but promised I would, is how I made the decisions that filled up those documents. I want to talk about those decisions over the next few weeks, starting today with the typographic choices I made and why I made them.

Decisions in Type

There are many typographic decisions that are ultimately part of any design. Should headings be bold? Does the kerning need to be adjusted? Should blockquotes be italicized? Should links be underlined?

In the beginning there are a few big choices to make.

• What typeface will you choose for your main copy?
• How large or small should that type be?
• How much space should there be between lines of text?
• How long should a line of text run, before starting a new line?

These were the 4 decisions I spent the most time thinking about. I considered all of the above together, mostly playing with the variety of combinations for font-size, line-height, and line-length and trying them with different typefaces.

Choosing a Typeface

You may remember I had set a constraint to use a serif typeface for the main copy. One reason was simply a desire for change as every previous design here used Verdana or Arial. An arbitrary reason, but you have to start somewhere.

More importantly, I find serifs easier to read online as they typically are in print and have developed a preference for sans-serif and slab-serif fonts for headings.

As I often do in the thinking and planning stage, I gathered inspiration. Whenever I came across sites with type I liked, I stopped and recorded what it was. My original thought was to choose among the many new fonts that have become available in the last couple of years. I figured I’d sign up for something like TypeKit and explore all the wonderful options. Two things changed my thinking.

My typographic eye needs more training — As much as I’d rather not admit it, my eye isn’t as well trained as I’d like where the nuances between different typefaces are concerned.

Georgia is a popular choice among type experts — While recording the fonts different sites were using, I noticed many who’s opinion matters to me are using the standard Georgia as are some of the sites selling non standard fonts.

I was seeking unity in my choices, with each choice further constraining future choices so they all worked in better harmony.

Given the above 2 observations I decided my eye wasn’t yet mature enough to warrant paying to use a font, which I honestly couldn’t tell you was more appropriate than one that came standard on my computer. Since many of the typographers I respect also seemed fine using a standard font I thought I could add another constraint of choosing among commonly installed fonts.

I didn’t want to use Georgia, though. I wanted to at least push myself a little. I wanted to choose something else and defend my choice. My constraints were now to choose a serif font that wasn’t Georgia from among those fonts common to most operating systems.

Aside: None of the above should be taken as me suggesting you shouldn’t pay for fonts beyond those commonly installed. I still want to expand my use of fonts, but until I can better train my eye I can’t justify it.

With my 3 constraints set I looked through what was installed on my Mac and researched what was common on other operating systems. I collected different font-stacks and compared the different typefaces by using them in my now online style guide. I used my “in need of more training” eye to see what I liked.

Eventually I decided on Palatino for the main copy for several reasons.

• I like it
• It’s serif
• It’s not Georgia
• It’s readable and legible
• It’s not commonly used online
• Though it is commonly installed
• Friends and family I asked also liked it
• It’s an old style serif

The last wasn’t just coincidence. Given my Renaissance concept I specifically looked for old style serifs which as you might guess originated during the Renaissance. One reinforced the other, which made the decision easier.

I was seeking unity in my choices, with each choice further constraining future choices so they all worked in better harmony.

With Palatino chosen, I continued to research font-stacks and settled on:

{code type=css}
body {
font-family: ‘Palatino’, *’Minion Pro’, ‘Palatino Linotype’, ‘Georgia’, ‘Serif’;
}
{/code}

I’ve since discovered Minion Pro wasn’t looking good for some people and have temporarily removed it from the stack. I realize Georgia is in the stack, but nearly everyone should have either Palatino or Palatino Linotype installed. I’ll figure out if or where Minion Pro should be added back as well.

Next up was to find at least one sans-serif or slab-serif font to pair with Palatino so I would have something to use for page headings. I explored fonts by trying them on the page and seeing what I liked, before finally choosing Myriad Pro. I’m currently using it for all the headings on the site as well as the navigation.

Here’s the complete font-stack for h1 tags.

{code type=css}
h1 {
font-family:’Myriad Pro’, ‘Gill Sans’, ‘Gill Sans MT’, ‘Calibri’, sans-serif;
}
{/code}

I’d love to tell you that I made the best choices possible, but as I said above I learned that I need to spend more time looking at type to better develop my eye. I made the best choices I could given my current ability and understanding.

I’m proud of myself for not choosing arbitrarily. I did spend considerable time exploring fonts and have reasons to justify my decisions.

What Size and Leading?

The choice of a font didn’t happen in a vacuum. While exploring fonts I was also experimenting with different font-size and line-height combinations.

An early decision about the size of the type was to make it larger than it had been. The old design used 14px for copy, though it often looked smaller to me. I decided it should be at least 16px or larger, though I did briefly toy with 15px and now wonder if 18px (or larger) would be better.

While I’m saying px here, elements are actually sized in ems other than on the html element where I set a default font-size in px.

{code type=css}
html {
font-size: 16px;
}
{/code}

With line-height I arbitrarily started with 1.5 and then explored making it larger and smaller. Again I used my eye to decide what looked good to me, though I eventually grabbed a lot of numbers from Tim Brown’s modular scale calculator.

Using 16px (ideal), 14px (important), and basing the scale on the golden section (1:1.618), I collected and added the values to my growing style guide. I used these numbers to refine the values I eventually used.

At one point I thought aboueusing whatever would be easiest for the math that would come with a responsive layout and baseline grid, but decided against that as it seemed arbitrary. I settled on a font-size / line-height combination of 16/26 or 1em for font-size and 1.625 em for line-height.

How Long a Measure?

Next up was choosing a measure. I started by adjusting the blocks of text in my style guide and finding a width that would include 65-75 characters. Then I increased and decreased the width to see what I found easiest to read.

I also let the work I was doing with typographic grids influence my decision a bit. The grid I was working on suggested a maximum of 600px for the column of main copy. That width leads to about 85 or so characters per line. A little long, but still within reason.

I’ve considered bumping up the font size just a bit to get it more in balance with the line-length, though for now it looks fine to me as is. If you notice it getting bigger, you’ll know why.

Since the length of the line influenced and was influenced by the grid, I’ll offer a little more about the measure next week.

A Bit of Extra

There are a few of other things I thought I would mention. Firs is how I set margins on paragraphs. By default browsers will set a top and bottom margin on paragraphs. I find it’s easier to control when the margin is either top or bottom and not both. I usually 0 out the margin on all sides, except the bottom

{code type=css}
p {
margin: 0 0 1.625em 0;
}
{/code}

Note the bottom margin is the same as the line-height I’d chosen. This is to help with a baseline grid. I also added two properties to the body, both specifically for WebKit as you can see in the code below.

{code type=css}
body {
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: 100%;
}
{/code}

The first, text-rendering is to improve the handling of kerning pairs and ligatures. I can’t remember where I came across it, but come across it I did.

-webkit-text-size-adjust is something I’ve added since launching the redesign. It’s to help correct an annoyance in iOS when you switch from portrait to landscape mode. iOS bumps up the font-size, which often isn’t what you want. The css above doesn’t prevent that, but it does allow people to quickly pinch and zoom back to where things should be.

Summary

Please don’t assume anything I’ve said suggests the decisions I made were the best or only decisions I could make. They’re simply the decisions I did make along with the reasons why I made them. There’s never going to be a single or best decision and I know that can sometimes make it hard to decide.

My hope is that seeing my choices and reasons for making them will help you make some choices next time around.

While I certainly made many more decisions than what’s here, the biggies were

• Typeface
• Font-size
• Line-height
• Line length

I explored all 4 at the same time and through the constraints I set and some trial and error made some decisions for better or worse.

Along the way I learned that my understanding of typography has improved with study. These choices are better than those made for the last design. They were informed and reasoned choices. Still I realize that I have a lot to learn, particularly in better developing my eye for the less obvious nuances.

On the bright side my type palette now includes Palatino and Myriad Pro, both of which I continue to like and can use as a base upon which to expand.

Next week I’ll share another of the style guide documents I created. I’ll talk about the notes, thoughts, and decisions I made in regards to laying out a grid.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.