Skip to content
Apr 15 / Michelle Windhorst

Typographic Resourses

On Choosing Type

FIRST PRINCIPLES

Typography is not a science. Typography is an art. There are those who’d like to ‘scientificize’; those who believe that a large enough sample of data will somehow elicit good typography. However, this sausage-machine mentality will only ever produce sausages. That typography and choosing type is not a science trammeled by axioms and rules is a cause to rejoice.

Before we get to the nitty-gritty of choosing type, let’s briefly talk about responsibility. Fundamentally, the responsibility we bear is two-fold: first we owe it to the reader not to hinder their reading pleasure, but to aid it; second, we owe a responsibility to the typeface or typefaces we employ. Good typefaces are designed for a good purpose, but not even the very best types are suited to every situation. Personally, I’m always a little nervous about using a newly acquired typeface. A new typeface is something like a newborn baby (though it doesn’t throw-up on you): don’t drop it, squeeze it too hard, hold it upside-down; in other words, don’t abuse it, treat it respectfully, carefully.

If you’ve understood the above two paragraphs, then you’ll know that what follows is not a set of rules, but rather a list of guiding principles.

 

Sans or Serif?

In my opinion, a lot of time is wasted attempting to prove that one is better than the other for setting extended text. I suggest that you ignore the vague and inconclusive findings of such ramblings and decide for yourself. Oh, but seriffed types are better for extended text because the serifs lead your eye along… Stop! Nonsense.

Rather than write another ten paragraphs on this topic, I’ll simply say that we read most easily that which we are most familiar with. (feel free to disagree in the comments below). And if you’re in any doubt as to whether sans serif typefaces can be used for body text, then turn left at the end of aisle three and make your way over to the Swiss Typography department.

Guideline One: honour content

This, of course, should be every typographer’s mantra. In fact good typographers, most likely won’t even have to consciously think about this—it’s instinctual.

[typography] is a craft by which the meanings of text (or its absence of meaning) can be clarified, honored and shared….
—Robert Bringhurst

It’s worth mentioning here that these principles are equally applicable to any medium. Some of my favourite typefaces look dreadful on screen; and even good typefaces like Georgia or Verdana, designed especially for the screen, often look at best mediocre on paper. Choosing type for the web is easier owing to fewer choices; however, that’s beginning to change. We now have sIFR and ‘web fonts’, so it’s all the more important to think carefully about the type we use. Is Times/Times New Roman—narrow set and designed for narrow columns—really appropriate for long-line extended text on screen?

Guideline Two: read it

And, no, I’m not being facetious. If you’re setting text, whether it be for a novel about the Franco-Prussian war or for a single-word headline, read it—really read it. Reading the text will give up vital clues, not only for choosing the right typeface or typefaces, but will also be an aid in the overall design of the page. An example: you’re setting text for an essay on the history of blackletter; so you set the text in blackletter, right?

blackletter

Probably not. There is a place for considering the historical context; however, it would be wrong to stick rigidly to this method of choosing type. If you’re setting a text on Neanderthal man, you’re going to run into problems. (seeThe Elements of Typographic Style, chapter 6.3, for excellent coverage of this particular topic). On the other hand, if your only audience is the BAF (Blackletter Addicts Foundation), then perhaps blackletter is appropriate.

In addition to reading the text, one should attempt to understand it. This is not always possible. If you’re setting text for an article on String Theory or Quantum Mechanics, then perhaps full comprehension is out of the question. However, attempt to understand the thrust or theme of the text.

Guideline Three: audience and canvas

Who will read your beautifully set text? Scientists, lawyers, engineers, echo boomers, children? If it’s not obvious from the text, then find out. Historical ligatures may not go down too well with pre-school kids.

Consider too the canvas, the page. Perhaps you’re setting text within someone else’s page design and you have no control over margins or page dimensions. A cramped page, with small margins may benefit from a lighter type, whereas ample margins may well merit a blacker typeface. We’ll look at this in much more detail in a future article.

Guideline Four: does it look right?

If your text’s final destination is paper, then print it and see. Your type might look exquisite on screen, but a train wreck on paper. There really is no substitute for printing. If setting for the screen, then check it on both PC and Mac, and at different resolutions (screen sizes).

And finally…

Remind yourself that typography really is an art and that many of the decisions you make, including type choice, are subjective. If you’re unsure, ask others (designers and non-designers) to read your work. And seek out examples of great typography.

In future articles we’ll look at specific case studies, and examples of serif and sans serif typefaces that work well together, together with a list of my favourite typefaces. Perhaps you have your own methods for choosing type. If you do, then be sure to share them in the comments.

 

 

A guide to Web typography

THE BASICS

Typography for the Web has come a long way since Tim Berners-Lee flipped the switch in 1991. Back in the days of IE 1.0, good web typography was something of an oxymoron. Today things are different. Not only do we have browsers that support images (gasp!), but we have the opportunity to make our web pages come to life through great typography.

First, it’s worth noting that Typography is not just about choosing a font, or even distinguishing one typeface from another. In recent experiments, trained monkeys were able to correctly identify Helvetica 90% of the time.

helvetica monkey

Today we’re going to talk about web typography in terms of a recipe of four fundamental ingredients. If you’ve ever tried to cook a soufflé, you’ll know how important the recipe is. Follow this recipe and your typography will rise up like … that’s enough of the culinary metaphors, let’s cook:

Contrast

Pale pink text on a pale blue background, might match your t-shirt, but it just doesn’t read well. Text exists to be read; make sure that it contrasts enough with the background to achieve that. If you’re ever unsure about contrast, then take a screen dump of your page, open up your image editing software and reduce the image to grey-scale. You’ll soon see if you have enough contrast. Robert Bringhurst, the consummate typographer writes, typography exists to honor content. Are we honouring the content, if we design our pages in such a way that the text, the content, is difficult to read?

Contrast

Personally I dislike reading long stretches of reversed out text (i.e. light text on a dark background); how often do we see books set like this? It may well be appropriate for shorter stretches of text on-screen, but I find it very tiring to read for any length of time.

Size

With the birth of Web 2.0 I noticed a rather annoying trend; namely small type. I’ve even emailed site authors and kindly suggested that they increase the default font size. I’ve received mixed replies from, tough, get yourself some glasses to thanks, I’d never even considered that my type might be too small for the average reader. I’ve even heard tiny body text defended with, “it matches my minimalist design”, or similar. It most likely reflects a small something else. Unless Super Man and 20/20 Vision Girl (Marvel Comics, keep your hands off, she’s mine) are your only readers, then small type is just not on.

is your type big enough?

Don’t set body text below 10 or 12px and, if possible, make it bigger. Remember, what’s legible on your 65 inch High Definition Plasma monitor, might not be so on a 15 inch MacBook. If in doubt, make it bigger. The body text on ILT is set at 16px.

Hierarchy

Varying type size is one of  the best ways to differentiate content. Colours and pretty boxes might help, but different sizes of type, used consistently throughout your pages, will signal loud and clear to your readers the relative importance of your pages’ elements. It also means that if your readers are in a hurry, they can quickly pick out the important bits — and that could mean that they stay longer and read on.

hierarchy can be achieved in many ways — just remember to be consistent

Hierarchy can be achieved in other ways too. We’ve just mentioned using different sizes of type to achieve it, but we can also use different styles; for example, all-caps, or using italic for sub-headings. Serif and sans serif faces can also be mixed to good effect.

Space

Let your type breathe. Don’t be afraid to leave blank spaces in your pages. This negative or white space will help focus attention on the text—and it’s the text that speaks loudest, so let it be heard. Next, remember the line-height CSS property; a good rule of thumb is line-spacing that’s at least 140% of your text size (remember, I’m writing about web typography here). Good type designers put a whole lot of effort into the micro white space that sits inside type. They spend countless hours attempting to achieve a balance between the black of the type and negative or white space that it envelops. Likewise, we should take time to consider the macro white space, the ‘voids’ that shape our blocks of text.

space, not to be confused with nothingness :)

Remember, these are not rules, but rather guidelines. However, follow them—contrastsizehierarchy, and space—and your typography will rise like one of Gordon Ramsay’s Soufflés. Oh, and I was only kidding about the monkeys.

In a future three-part series on the fundamentals of typography, I’ll look at all of the above in more detail. I’ll also be discussing numerous things (details) that will go a long way to improving your typography both on- and off-screen.

Leave a comment