The Shape of Words: An Introduction to Typography
Typography is the craft of designing and arranging type (i.e. text). Using various typefaces, spacing, sizes and contrast, typographers seek to make writing more legible, ordered and appealing to read.
Typography is powerful. Yet the field isn’t — and shouldn’t — be restricted to designers. Typography is a tool writers would do well to study and wield. Why?
It not only shapes what we read — but how we read.
In fact, typography influenced how you read the above introduction. The bold text focused attention, the em-dashes elaborated on ideas and the standalone paragraph stressed the importance of the sentence.
It’s a shame typography is underutilised by most writers.
More power to those who care to learn and apply its full potential.
Typefaces
Serif Typefaces
The defining feature of serif types are the little feet protruding out from the end of letters. Why are they there? Serif types trace their roots back to antiquity when stone carvers followed the brush marks of letter outlines, flaring at end of each stroke/corner.
Because of this, serif types often convey a more traditional look and feel. Times New Roman, Baskerville and Georgia all fall into this type category.
Sans-serif Typefaces
Sans-serif types discard the feet (sans meaning without in Latin). The headings throughout this article are written in a sans-serif font. Owing to its streamlined, modern look, this family of fonts is often employed across digital text. Common sans-serif types are Helvetica, Futura and Ariel.
Sidenote: Historically, serif fonts have been held up as more readable than their sans-serif cousins. Yet research into the topic has found little-to-no difference between the two families in terms of legibility.
Decorative Typefaces
Decorative typefaces are a special case, sitting outside the two main families. They are elaborate, creative fonts often used in titles and graphic designs. They have their time and place — posters, birthday invites — but are better left alone lest your writing appear whimsical or childish. Common decorative types include Marker Felt, Chalkduster and Noteworthy.
A quick aside, the terms typeface and font are used largely interchangeably. However, to be more accurate, a typeface is a collection of similar fonts. Without going into too much detail, fonts can vary by weight (e.g. Thin, Medium, Semibold, Bold), widths (e.g. Compressed, Condensed, Expanded) and style (e.g. Roman, Italic, Oblique). For example, the fonts Futura Condensed Medium and Futura Bold both fall within the Futura typeface.
Using Typefaces
It’s good practice to use a combination of a serif and sans-serif typeface to delineate between headers and body text. But stick to two — three at the very most. Too many typefaces and a piece becomes befuddled with a lack of hierarchy and structure.
For example, take this (and ever other) Medium article. Each heading is written in sans-serif (Marat Sans), while the body text solely uses serif type (Charter). This is a conscious design choice from the folks at Medium to establish structure and retain consistency across all articles. Here’s a brief post on Medium’s typography choices.
Lastly, I urge you to never, ever use Papyrus or Comic Sans in your writing. Just don’t.
Colour and Contrast
A typeface’s weight is the thickness of its characters (bold being just one). In increasing thickness, common weights are: Light, Regular, Medium and Bold.
Why are weights important? They increase contrast across your design/web page/article. Contrast adds structure to the layout and helps to make the key messages prominent to a quick scan (I’m looking at you TL;DR).
When an idea is important, bold it.
Don’t be afraid to use colours either — but do so sparingly. Use too much and the variety becomes jarring. Like varying weight, use colour to signify a change in hierarchy or category — for example, a title or quote. Across my site Word Craft, I’ve employed grey for body text and used red to indicate anything clickable.
Underlying all of these points is consistency — the key to good typography. Decide how you wish to delineate your hierarchy (i.e. title, headings 1/2/3, body text) and stick to it. Make the text as easy for your reader to decipher as possible.
Space and Size
Line spacing has a large effect on readability. It’s also the option I abused in high school essays to make it appear as if I’d written more than I actually had.
Too narrow the line spacing and the writing feels cramped, claustrophobic. Too wide, and the lines become disjointed from one another, airy. A good middle ground is 1.2x — 1.5x.
Also consider the size of the type. 12px (the default in many text editors) can often appear too small, making the text more difficult to read than it needs to be. Even a bump from 12px to 14px helps significantly with legibility — especially over long-form articles.
When in comes to text alignment, I prefer justified text for my articles — the traditional choice in newspaper columns and novels. However, when in doubt, choosing left-aligned is the safe option for most cases. Use center alignment sparingly.
Lastly, don’t be afraid to grant important sentences whole paragraphs of their own.
As is often the case, fewer words often have more impact than too many. Provide your reader with moments to breath as they progress through the text.
Final Thoughts
When all is said and done, the above points are merely guidelines. Typography isn’t an exact science. There is no one-size-fits-all font (not even Helvetica), or perfect spacing or ideal hierarchy. Sound judgment and an appreciation of context are infinitely more important than knowing the difference between a font and a typeface.
Yet it pays to be mindful of the elements and considerations involved in typography. Why? So that when we design and layout passages of text, we do do with readability, structure and aesthetics in mind. To give our audience a pleasing, clear reading experience.
Applied well, good typography just feels right. Most readers won’t be able to articulate why the text is pleasant to read. Yet that’s the hallmark of good design — it becomes invisible.
Further Readings
Typography Elements Everyone Needs to Understand — An informative overview of Typography and the elements which comprise it.
Typography That Sacred Cow — A delightful read (and source) for much of the above. The article dives deeper into dash variations (-, –, — ) and kerning — the spacing between letters.
How Typography Determines Readability — A good breakdown comparing serif and sans-serif typefaces.
Typography is Impossible — A deep dive into the technical elements which make up a typeface.
About The Author
Mitch Green writes for Word Craft, a curation of ideas on the use and power of words for curious souls wanting to better understand their world.
The Writing Cooperative is sponsored by
Grammarly makes sure everything you type is easy to read, effective, and mistake-free. Take your writing to a new level. Try it for free!
