A primer on typography

You’ll find a million and one articles on the web waxing lyrical about the “art” of typography without saying much about how to practice it. That sort of navel gazing pushes beginners away and perpetuates an incorrect notion that typography is an arcane skill which requires years of formal training and “a good eye”. Nothing could be further from the truth. This post sets the record straight.

Why typography matters

Compare the two handwriting samples below. On the left is a sample plucked from the internet and on the right is a rendition of it in my own handwriting (far from the most elegant, but does the job).

Deciphering the left note is exhausting and uses up cognitive attention that could have been deployed on comprehending the text itself. The goal of most writing is persuasion and attention is a prerequisite for persuasion. Poor handwriting distracts and frustrates the reader. I’ll even hazard adding a corollary to that. Given multiple copies of the same text, readers will make judgement based on typography as they will struggle to compare substance at a glance. It is no surprise then that, in Medieval Europe, the Christian Church had hundreds of monks diligently writing illustrated copies of the Bible. By god did those get read, praised and used for proselytised millions; so much so that they have become an important chapter of the medieval human history.

The goal of most writing is persuasion and attention is a prerequisite for persuasion.

Typed or printed text is no different. Typography is to printed (or digital) text what handwriting is to written words. It is by no means more important than the substance of your writing, but it sure helps to improve its effectiveness. Good typography is characterised by how well it reinforces the meaning of one’s text, not by some arbitrary measure of aesthetics or decor. Therefore, typography is first and foremost utilitarian. One’s ability to produce good typography is contingent upon how well they understand the goals of their writing.

What is typography

Typography is the visual arrangement of written or typed characters. These characters can be words, sentences, paragraphs, the spaces between those elements and their alignment with respect to each other. To become a good typographer, one must familiarise themselves with these characters – tools of the trade if I may say so – and then always use the best tool for the job.

Table of Contents

  1. Proportional and fixed-width
  2. Serif and Sans-serif
  3. Emphasis: bold, italics and underlining
  4. Whitespace
  5. Reference: paragraphs, sections, copyright, trademark
  6. Quotes: Apostrophe, straight and curly quotes
  7. Dashes
  8. Ligatures
  9. Line height and paragraph spacing

1. Proportional and fixed-width

When designing a typeface, one could have all characters take up equal horizontal space (width) or give each character just the space it needs. The former are called fixed width or monospaced typefaces. The latter variable-width or proportional.

This website is published in a proportional typeface.

2. Serif and Sans-serif

Fonts, or typefaces, can have characters with small decorative flourishes at the end of the strokes. Such typefaces are called serif types.

Typeface which lack such features are called sans-serif types. (sans is French for “without”)

Like all dichotomies in life, the serif and sans-serif factions are constantly at war trying to prove their primacy. There are no general, catch-all rules in typography. Use the one that supports the tone and purpose of your message. For instance, always use a fixed width font for source code listings.

This website is published in a serif typeface.

3. Emphasis

Text comes in broadly three flavours:

  • Roman, neither bold nor italics
  • Bold, slightly thicker than roman
  • Italics, cursive form of the font. These calligraphy-inspired typefaces originate from Italy hence the name. Take a close look at this roman a and this italic a. On the contrary, sans-serif italics tend to be just a slanted variation of the roman text and doesn’t stand out as much.

With a serif font, use italics for gentle emphasis and bold for heavier emphasis. With a sans-serif font, skip italics and use bold for emphasis.

Underlining is a legacy of the typewriter era and should be relegated to history just like those machines.

4. Whitespace

Whitespace is the most misunderstood and most abused set of characters in all of human history. There are six key whitespace characters:

  • The word space. A horizontal space between two words. To type, press Space bar.
  • The non-breaking space. Same width as a word space but prevents the text from flowing to a new line or page, sort of like invisible glue between the words on either side. To type, Ctrl + Shift + Space in Windows; Option + Shift + Space in macOS.
  • The tab. A tab stop marks a column on the page and typing a tab moves the cursor to that location. Microsoft Word automatically creates columns (tab stops) on a page as you type. For instance, the spacing between bullet points and text in a list is controlled by tabs. Using the Ruler, you can (and should) set tab stops to suit your needs instead of relying on Word. To type, Tab.
  • The hard line break. Moves the word to the beginning of new line without starting a new paragraph.
    Like this. To type, Shift + Return.
  • The carriage return. Starts a new paragraph. Another remnant of the typewrite era. The cylinder over which paper was rolled was called the carriage and it shifted leftward as one typed. To move to beginning of the next line, the carriage had to be returned to its starting position, hence the name carriage return. To type, Return.
  • The hard page break. Puts the next word at the top of new page. Don’t use a litany of carriage returns to move the cursor to the next page. That’s poor work ethics. To type, Ctrl + Return.

5. Reference

A pilcrow (¶) or paragraph mark is used when citing documents with sequentially numbered paragraphs. Here’s an example: “… notice duration as defined in ¶ 5.2 …” To type, alt + 0182 on Windows; option + 7 on macOS.

A section mark (§) is used when citing documents with number or lettered sections. E.g. “According to the Indian Penal Code § 76, a person who is bound by law to do something does not commit an offence when he does it.” To type, alt + 0167 on Windows; option + 6 on macOS.

To markup a trademark, use the trademark symbol ™ instead of ™ or other silly approximations. A registered trademark is denoted by the ® symbol. No space is needed between the text and these symbols. E.g. Apple® iPhone™.
To type ™, alt + 0153 on Windows and option + shift + 2 on macOS. To type ®, alt + 0174 on Windows and option + R on macOS.

Copyright notices must use either the copyright symbol ©, or the word “Copyright” but never both. So “© 2018 Animesh” is correct, and so is “Copyright 2018 Animesh”, but “Copyright © 2018 Animesh” is redundant and wrong. Use a non-breaking space between the symbol and the year to make sure the two don’t end up on different lines or pages.
To type, alt + 0169 on Windows and option + G on macOS.

6. Quotes

Always use curly quotes. Except for foot and inch marks, which should be straight quotes (or slightly slanted quotes specifically used for foot and inch marks, but most fonts don’t include such glyphs).

Straight quotes are the two generic vertical quotation marks located near the return key: the straight single quote (‘) and the straight double quotes (”). Straight quotes come from the typewriter. In traditional printing, all quotation marks were curly. But typewriter character sets were limited by mechanical restraints and physical space. By replacing the curly opening and closing quotes with ambidextrous straight quotes, two slots became available for other characters.

Curly quotes are the quotation marks used in good typography. There are four curly quote characters: the opening single quote (‘), the closing single quote (’), the opening double quote (“) and the closing double quote (”). Use the Smart Quotes feature in word processors.

7. Dashes

There are three kinds of horizontal line marks: a hyphen, an en dash and an em dash.

The hyphen (-) is the smallest of these marks. It is the symbol on the key next to the “0” number key on your keyboard. A hyphen often appears at the end of a line when a word breaks onto the next line. This is called automatic hyphenation. Some multipart words are spelled with a hyphen, e.g. brick-and-mortar.

The en dash (–) is about half as wide as a capital H. It indicates a range of values (e.g. 1880–1929) and denotes a connection or contrast between pairs of words (e.g. the Tory–LibDem coalition).
To type, alt + 0150 on Windows; and option + hyphen on macOS.

The em dash (—) is twice as wide as an en dash and is used to make a break between parts of a sentence. Use it when a comma feels too weak, but a semicolon would be too strong. It is generally underused.
To type, alt + 0151 on Windows; and option + shift + hyphen on macOS.

8. Ligatures

Lig­a­tures were in­vented to solve a prac­ti­cal type­set­ting prob­lem. In the days of metal fonts, cer­tain char­ac­ters had fea­tures that phys­i­cally col­lided with other char­ac­ters. To fix this, font mak­ers in­cluded lig­a­tures with their fonts, which com­bined the trou­ble­some let­ters into one piece of type.

The most com­mon lig­a­tures in­volve the low­er­case f be­cause of its un­usual shape. Other lig­a­tures also ex­ist—some prac­ti­cal, some dec­o­ra­tive, some ridiculous.
Dig­i­tal fonts don’t have phys­i­cal col­li­sions, of course, but cer­tain let­ter combi­na­tions might still over­lap vi­su­ally. The only time lig­a­tures are manda­tory is when you have an ac­tual over­lap be­tween the let­ters f and i. Check this com­bi­na­tion in the bold and italic styles too.

Ligatures are a largely stylistic choice and can bestow a somewhat quaint feel to your text. I tend to avoid them. If you are a programmer, check out Fira Code, a monospaced font with programming ligatures.

9. Line height and paragraph spacing

Leading, or line height, is the distance between consecutive lines of text and can have a dramatic impact on the readability of your text. A leading of 120–150% (or 1.2–1.5 in Word) is the sweet spot for most body text.

Paragraph spacing is the distance between two consecutive paragraphs. You should never use a series of carriage returns to increase/decrease spacing between paragraphs. That sort of behaviour is what makes most Word documents a nightmare to format. A paragraph spacing same as the leading works for most body text. Here’s a 12pt type with 14pt leading, and a paragraph spacing of 14pt.

Further reading

This is all you need for a good grounding in typography. Make sure you understand the goals of your writing, and use the best tools (characters) to buttress your message. Everything else is secondary.

If you’d like to dive deeper, I’d recommend The Elements of Typographic Style. Have fun!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s