Header for punctuation article
Typography

A designer’s guide to punctuation | part 1

I’m a designer not an editor, so my view on punctuation is skewed by my need to create hierarchy and visual meaning. Some of these notes verge on typesetting tips, but I’ll go on about that in another post.

Colon? What colon?

As a rule, I don’t like the colon. Nothing personal. It’s perfectly fine in body text, but once it moves into heads and titles, I’m ready to try everything to to ditch it. My two rules are 1| drop a colon at the end of a head or subhead and 2| style the text to eliminate the need for a colon.

Sample of head without colon
In this instance, the editors are probably feeling okay without a colon after the word “offers.”
Sample of headline without colon
The editors out there would probably like to add a colon in here.

Quotation marks and apostrophes

This is pretty simple typesetting rule, but always use the curly versions for quotes and apostrophes. Other than that, who doesn’t love playing around with quotation marks?

Sample of quotation text styling
This is just one of millions of ways to play with designing quotes.

Brackets and braces

I know these aren’t equivalent to paranthesis, but I’ll swap in a head. The brackets are nice and square and work great for something more industrial or grungy, while the curly braces read softer and are great for something more refined or sweet.

Samples of braces and brackets in text
Brackets on the left fit in nicely with Helvetica Neue, while the braces add cuteness on the right.

The dashes

Typesetting rules say en-dashes go between numbers and em-dashes are a pause between thoughts, which is great. However, some fonts have dashes that are just too long. So, sometimes, I just go with what works visually.

Samples of hyphens and dashes in different fonts
Note the differences between the hyphens, en and em dashes with just three fonts.

The ellipses

I much prefer the pre-set ellipses accessed though the glyph palette or by hitting option+: I’ve had editors set and then re-set the ellipses as three periods separated by spaces, which is legitimate, but can end up grabbing too much attention. Discuss this one first before anyone does too much work.

Sample of pre-set ellipses versus set version
Pre-set ellipses versus the period-space-period version.

The pipe

I love this guy! I’m always popping it in as a substitute for commas and colons, even though it’s totally supposed to be used in mathematical equations, phonetics and anything but traditional punctuation.

Sample of the pipe in text
The pipe as a substitute for the comma or semicolon.

There’s so much more to talk about with typography; stay tuned!

 

Leave a Reply

Your email address will not be published. Required fields are marked *