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.

Typeface anatomy sketch

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 underline?

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.

Stone sign with 'Palatino' carved into it

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:

1
2
3
body {
  font-family: 'Palatino', *'Minion Pro', 'Palatino Linotype', 'Georgia', 'Serif';
}

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.

1
2
3
h1 {
 font-family:'Myriad Pro', 'Gill Sans', 'Gill Sans MT', 'Calibri', sans-serif;
}

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.

typographic-scale.png

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.

1
2
3
html {
  font-size: 16px;
}

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.

Several measures of musical notes

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.

Freeform handwritten typefaces FF Erikrighthand and FF Justlefthand
Original freeform handwritten typefaces FF Erikrighthand and FF Justlefthand

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

1
2
3
p {
  margin: 0 0 1.625em 0;
}

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.

1
2
3
4
body {
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%; 
}

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.

A big letter 'M' from FF More font

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.

Download a free sample from my book, Design Fundamentals.

15 comments

  1. If you’re taking votes – to me (on a wide, desktop monitor) the palatino is a bit too small to read comfortably. Bumping it up will help us guys who don’t hold the screens in our palms or our laps. Perhaps a media query?

    • Thanks DJ. What size monitor do you have? Bumping up the font-size is something I’ve been thinking about anyway. I wasn’t aware it was currently displaying too small for some people, but if it is that’s another good reason to bump it up some.

      Currently it should display at 1em or 16px. It’s possible Palatino needs to be larger to be more legible. Do you see it at that size? I’ve been thinking of going up to 18 or even 20px. Can you give it a temporary bump to both sizes and see how they look on your end?

      Thanks.

  2. Sounds a lot like how I work nowadays. One step I include in this phase is determining the boundaries of the line-length. I find out the min and max line-lengths for the combo typeface, font-size and line-height.
    Just as a preparation for responsive.

    On a side note, the line-height of the .pullquote in your new design seems off. Should be higher I think.

    • Great minds things alike :)

      I can’t say I looked a lot at the minimum line-length in advance. I just eyeballed it as I shrunk my browser.

      I did set the .pullquote to use a smaller line-height, but I think you’re right that it should be increased. I’ll play around with it later. It probably just needs a slight increase.

  3. I was playing with the line-height using firebug. I settled for a line-height of 1.4em. If you take a step back from your monitor it becomes really clear. The 1.4 has a nicer read-flow. It invites you to take your time to read the quote (as opposed to reading body text). (You asked what I was thinking :-) )

    Though, you could argue that, at 1.4 line-height, the quote starts weighing too much in the design but there are other ways round that.

    • Thanks Peter. I did ask and I’m glad you answered. Interesting response too.

      I’ll keep playing around with it and see what I end up liking. I should probably think some about the baseline grid as well and adjust padding or margin. You make some good points and I’ll see what I think of 1.4. This morning I went with a quick change, but it deserves a little more conscious thought.

  4. Very interesting process. Thanks for sharing. I have been using this little tool for a while http://www.pearsonified.com/typography/ for calculating font-size, leading, line-length. It’s calculations may not be perfect and final decision mostly depends on the fonts being used. But it’s still handy in adjusting type sizes.

    Recently Trent Walton shared his method of calculating type sizes http://trentwalton.com/2012/06/19/fluid-type/. I like his trick of using ‘*’ for determining appropriate line-lengths.

  5. Great post Steven.

    The trend definitely seems to be toward bigger fonts and line spacing. However, IMO, you can definitely go too far. I’ve experimented with different variations and find 15px font size with 18px spacing to be really nice with Arial.

    16px font and 20px spacing looks good visually, but at least for me, when I go to actually read it it’s not as fast and nice to read as the former.

    The other consideration is that a significant percentage of visitors may be on a mobile device. One one hand, smaller fonts are harder to read. But on the other, bigger fonts mean they’ll have to scroll a lot more.

    • Thanks.

      I think it’s more than a trend. I think font-size online has been too small for years and designers are finally realizing they should become larger. In print something like 12pt is common and I assume people just went with 12px thinking it was the same when 16px is really closer to the same size. It could also be as simple as designers who could once read 12px easily have aged and their eyes need larger fonts.

      I do agree that in some places it might be getting too big and that you still have to choose an appropriate line-height for the spacing.

      Funny you mention mobile devices. I was thinking about what size font to display and had originally decreased the size at phone sizes. Eventually I just kept it at the same size everywhere.

  6. Hi Steven, I just read this piece today, and I think it’s a good read. May I suggest writing something about the choice of color when choosing type. There’s so many pieces on type, and so little of them say anything about the color selection.

    Anyway, thanks :)

    • Thanks Jim. What kind of information were you looking for when choosing type color? I think most of the rules of color in general will apply to type, with the most important rule being your type needs to be readable.

      Generally you want high contrast between your main text and your background. Dark text on a light background offers the most contrast, though it’s not the only choice.

      For type that isn’t your main text it depends on what purpose that type is serving? Do you want it to stand out? Do you want it to fade into the background a bit?

      If you let me know some of the things you were hoping to know, maybe I can put a post together to answer your questions.

      Thanks again.

  7. It’s more of a general wondering I guess. You often see text set a slightly lighter or darker hue of the same color as the background, which looks nice, but can be tricky to pull off. You have chosen for a pure black for both the headings and the body text yourself. Was that just for readability or did you mainly like the look of it? I don’t think it is that common to ‘just’ use black as a text color in sites like these. Don’ get me wrong, I really like the look of it, but I was thinking you must have had some other alternatives as well. I think it’d be interesting to read about stuff like this, as you mostly read about font choices, font size, and general color schemes, but not often about the specific text styling. Might try to write something like that myself :)

    Anyway, thanks for the reply.

    • Oh, got’cha. I went with the black text on the light background for readability. Once I chose the light background I knew I was going dark for the text.

      Some of the sites with the slighter lighter or darker text are hard to read in my opinion. I assume it’s the designer trying to be different or trying to stick tighter to a color scheme. I think where your main text is concerned the most important thing is to make sure it can be read so opt for more contrast between it and the background.

      I took a look through my code and realized I never actually set the color on the main text. D’oh. I’m not sure how I forgot. I’ll probably go back in and lighten it just a bit. Maybe 111 instead of 000. I tend to stay away from absolute black and white.

      As far as a post, I did just post about my color choices here, though I didn’t specifically talk about the main text. I’ll have to see if I can think of enough to say for a post. If you end up writing one let me know. I’ll be sure to check it out.

Leave a Reply

Your email address will not be published.

css.php