Typo—what?
Typography is the craft of arranging type with the goal to make language visible. We arrange type multiple times throughout the day; whether we are writing essays, summarizing meeting minutes or creating slides for a presentation. Unfortunately, we usually end up thinking more about what we write than how we write it. And, most importantly, how others will read it.
1. Good typography makes us read
Good typography is utilitarian. It allows the reader to focus on the content, not the formatting. Ideally it is not even noticed because it just makes sense to the reader.
2. Good typography makes us feel
Good typography is emotional. The choice of typeface affects how your content is understood or perceived. Based on its character, the right typeface sets the tone and voice for your text.
This little guide is for everyone who comes across these typographic adventures or just want to do things right. Mastering the things mentioned in the short chapters below will help you get your message across more successfully.
While I try to outline guidelines for the most common challenges, I encourage you to trust your own judgement when it comes to final decisions. Work out the hierarchy of your content and design it in a way that it’s easy for your readers to follow.
I run this site as an ongoing project, so please feel free to contribute on GitHub or give feedback via email or Twitter. It’s highly appreciated!
Fonts vs. Typefaces
A common misconception is that typefaces and fonts are the same. That’s wrong, but easy to get right. Here are two excellent quotes that explain the difference much better than I can:
“The way I relate the difference between typeface and font to my students is by comparing them to songs and MP3s, respectively (or songs and CDs, if you prefer a physical metaphor).”
— Nick Sherman, typographica.org
“The physical embodiment of a collection of letters, numbers, symbols, etc. (whether it’s a case of metal pieces or a computer file) is a Font. When referring to the design of the collection (the way it looks) you call it a Typeface.”
— Mark Simonson, typophile.com
In other words, we choose and look at typefaces, just like we listen to songs.
Fonts are the digital representation of a typeface that computers use to display our text, just like an mp3 file we use to play a song.
Mixing Typefaces
There are a million and one typefaces to choose from. Picking one seems easy, right up to the point where you try to get really creative and mix different typefaces. That’s where things start to get messy. Here are some simple guidelines on how to properly mix typefaces.
1. There’s really no need to mix typefaces!
When you pick the typefaces for your content, make sure it has several different styles (you call them “weights”). You’d be surprised at how beautifully you can structure your content by simply changing the font size and/or weight—just like I’ve done on this site.
2. Sans-serif and serif from the same family
If you still feel the urge to mix typefaces, keep an eye out for typeface families that offer both serif and sans-serif characters (you can call them “twins”). By doing so, you reduce the risk that your type mix looks weird. A great example for such type twins are FF Meta & FF Meta Serif by Erik Spiekermann.
3. Champions League
Ok, I got it! You really want to mix typefaces. There are different ways to approach this. You can mix typefaces based on contrast, familiarity, extremity, or diversity. The simplest way to start is by mixing two typefaces that show similar characteristics. The typefaces you want to mix should have a similar x-height and the characters should be similar in shape and proportions. As an example you could try using Chaparral Pro and Source Sans Pro.
Font Size & Line Height
Typography should make content easy to read. You want the reader to be able to follow a line and easily make the jump to the next line. The essential factors that influence readability and legibility are font size and line height.
Since both are influenced by the x-height of the characters, the length of the line, and the shape of the characters, there is no silver bullet. There are, however, some guiding principles that can help you make the right decisions.
1. Set line height relative to font size
For most text the optimal line height lies somewhere between 120% and 145% depending on the factors mentioned above. Most apps and CSS let you define values in percent which you should prefer. It makes things easier and saves you the time you’d need to manually calculate.
2. Start with the body text
There’s more body text in your document than anything else. Make sure you start with making it read great. For print, a comfortable font size is 9–12 point, whereas for the screen it is between 14–24 pixels, depending on the typeface you choose. The optimal line length that is easy to read is between 45 and 90 characters. For bigger headlines you can usually go for a smaller line height than the percentage of the body text.
3. Every typeface is different
Various typefaces can look and feel quite different, even when they are set at the same font size. In particular, serif typefaces will appear different than sans-serif. Since you want to make it as easy as possible for the reader to both follow the line and jump to the beginning of the next, you’ll want to try out several values of both size and line spacing to find the best option.
Apostrophes
The apostrophe is a tiny little character in the shape of a “9” that doesn’t get nearly the attention it deserves. By default, your keyboard produces a so called “Typewriter Apostrophe” and while some applications fix these up—translating ' to ’—many don’t. You shouldn’t settle for that!
In the English language, the apostrophe serves two main purposes.
1. It marks the omission of one or more letters
The apostrophe indicates that there are characters left out.
Don’t or can’t
2. It marks a possessive case
The apostrophe is used before an “s” to indicate a relationship.
We are playing with Ben’s monster truck.
To produce the correct apostrophe for your writing when using an application that doesn’t automatically fix up apostrophes for you, you can use the following keyboard shortcut combinations:
US Keyboard
optionshift]’
German Keyboard
altshift#’
Quotes
Also known by the term “curly quotes” or “inverted commas”, quotes are used to mark speech or a quotation. Sometimes, they are also used to mark irony.
By default, the quotes your keyboard makes are called “dumb quotes”, also known as “straight quotes”. Don’t use dumb quotes. They’re also not the same as “prime marks” which are used for feet/inches and seconds/minutes. Read more about quotes on Wikipedia.
Quotes are language specific and you should use the right quotes for the language you are using. The Germans use „Anführungszeichen“ which start low and end high. « Guillemets » are used in French (usually with a blank before and after), Italian, Greek, and many other languages.
Fun fact
The Germans call Guillemets “Gänsefüßchen” which literally means “goose feet”.
US Keyboard
option[“
optionshift[”
option]‘
optionshift]’
option\«
optionshift\»
German Keyboard
alt2“
altshift2”
alt#‘
altshift#’
altQ«
altshiftQ»
altshiftW„
alt2“
altS‚
alt#‘
Dashes
The hyphen is the character you use most (and often misuse) on your keyboard, but there are several other dashes, including the en-dash, em-dash, and minus. These dashes aren’t the same and each has its own subtle quality. You can find a really detailed article about Dashes on Wikipedia
Hyphen
You know how to type a hyphen and that’s exactly why you use it so often in all the wrong places. The hyphen is used to break single words into parts (like when lines of type break within a word) or to combine separate words into one single words.
I’m hungry in a get-in-my-belly kind of way.
En dash
The en dash is used in dates to replace “to” or “and”. It can also be used to indicate the relationship between two different words. In German it is also used for a break of thought, with a space before and after the en dash.
I lived in the United States from 1976–1978.
I have a love–hate relationship with San Francisco.
Em dash
The em dash is used for a break of thought that is stronger than a thought within parentheses. It is a break in the sentence in order to create attention or stress a thought. The em dash is uncommon in the German language and most common in American type setting.
I once had to replace 1,000 hyphens in a single document—exhausting.
US Keyboard
--
option-–
optionshift-—
German Keyboard
--
alt-–
altshift-—
Parentheses, Brackets & Braces
Parentheses separate a thought from the regular body text, whereas Brackets indicate changes within a quoted content. Although Braces (also known as “Curly Brackets”) are mostly used in mathematical context, they deserve an honorable mention here, because they are part of almost every programming language. Parentheses, Brackets and Braces usually don’t follow the formatting (e.g. italic) of the text they surround.
US Keyboard
shift9(
shift0)
[[
]]
shift[{
shift]}
German Keyboard
shift8(
shift9)
alt5[
alt6]
alt8{
alt9}
Interesting Links & Resources
- Dan Eden’s Just My Type illustrates nicely how to mix webfonts
- Douglas Bonneville’s Best Practices of Combining Typefaces
- Jessica Hische’s wonderful site Quotes & Accents
- Jason Cranford Teague’s overview of Common Typographic Marks
- Matthew Butterick’s great book Practical Typography
- A great collection of typefaces Fonts in Use
- Andy Taylor’s Style Manual
- Codeschool’s free class on Typography (Fundamentals of Design)