Written by Harry Roberts on CSS Wizardry.
Since as long as I can remember, I’ve had a soft spot for typography, and when it makes up so much of the web, typography should be good. Learning how to design with type, and pair typefaces, is a skill unto itself, but the good news for us less design-minded developers is that there are a few simple rules we can follow to get guaranteed better looking text with almost zero effort. And if there’s one thing developers love, it’s rules.
Time and again I see mis-implemented type that could have been avoided simply by developers having a better appreciation for, and understanding of, some typographical nuance. Learn and memorise the rules in this article and you’ll find that your text will become much more harmonious and polished, and you won’t have designers bugging you about using the wrong type of dash…
Let’s start with the simplest one, the ellipsis. The ellipsis represents an omission or trailing of thought. It is a single glyph comprising three dots, like so:
To be continued…
Try highlighting the three dots: notice how there’s only one character there, not three? That because the ellipsis is not three separate period glyphs, and it most definitely isn’t a whole series of periods:
To be continued........
That isn’t a thing at all, so certainly never do that.
If you want to write an ellipsis character, you have a few options:
The quotes you find on your keyboard are ambidextrous, or dumb quotes. They are big, awful, clumsy, straight lines that look like wedges jammed into your text. They exist purely because of space constraints on modern keyboards: there just isn’t enough room to have left and right single- and double-quote marks, so instead we have quote marks that can do both.
'Single' and "double" dumb quotes. Ugly.
These are the kinds of quotes you’re used to writing in your code, and they’re fine there, but in any prose we want to make sure we use proper book quotes. Their purposefully designed shapes are much more sympathetic to the typeface, and are visually much less jarring:
‘Single’ and “double” book quotes. Beautiful.
Apostrophes follow the same rule as quotes, and use the same glyph as a right single quote:
It's awful like this.
See how awkward and harsh that looks? Like it doesn’t belong?
It’s much nicer like this.
When I was at school we were taught that opening quotes look like two sixes, 66, and that closing quotes look like two nines, 99. This likeness is much more apparent in serif faces:
“Sixty-sixes and ninety-nines.”
However, I seldom use double quotes. I share Jost Hochil’s sentiment that
more attractive appearance is achieved by using single quotation marks for the
more frequently occurring quotations, and the double version for the less
frequent occurrence of quotations within quotations.1
American English tends toward the use of “double quotes”, but I much prefer the less obtrusive appearance of ‘single quotes’. They look far more subtle in passages of text, and the best typography always goes unnoticed.
‘Sixes and nines.’
Dashes are a whole chapter unto themselves. Again, as with the ambidextrous quotes, physical limitations on keyboards meant that we have just one catch-all key, the hyphen, that is often called upon to fulfil the role of all kinds of dash.
The hyphen on your keyboard is actually only useful for a small number of tasks. If you need a compound modifier (e.g. a light-green dress), a double barrelled name (e.g. Robert Bayden-Powell), or words split over two lines in justified text, you should use a hyphen. Pretty much everything else has a more specific type of dash that should be used.
If you really want to show off, there’s technically a different character for minuses. A hyphen is a very close approximation, but is set a little lower and shorter than a true hyphen.
Your balance is £-1902.
Your balance is £−1902.
Use this in any math you need to write, or for displaying negative values. Unfortunately it’s a little harder (read, potentially impossible) to write out on a Mac.
The en dash is a slightly longer dash used to denote ranges or relations, e.g.:
Refer to pages 88–93.
It is typically, though not necessarily, half the width of the em dash.
The em dash is usually one em wide (hence the name), meaning that it would be 24 points wide in a 24pt font, 12pt wide in a 12pt font, and so on. It represents a change in thought, and is a slightly more elegant substitute for parenthesis.
It has been said—though I would say otherwise—that I’m something of a pedant.
It could also be used in place of a colon.
The three technical ingredients for responsive web design—fluid grids, flexible images, and media queries.
Em dashes are usually set with no space between them and the adjoining character, however some people prefer to use an en dash set with spaces and avoid the em dash altogether. I’m not so much a fan of this approach as it can often look a little ambiguous, but let your decision be guided by your styleguide and/or the typeface.
Spaced en dashes – like these – can take the place of ems.
Again, if you’re feeling particularly fancy, you can set your em dashes with
hair spaces (
) either side of them.
Hair-spaced em dashes — like these — are pretty neat.
There’s plenty more out there to be learned, but for now I think that would make a great start. A few simple rules that drastically improve the quality of your text without you needing any real design knowledge.
Hi there, I’m Harry. I am an award-winning Consultant Front-end Architect, designer, developer, writer and speaker from the UK. I write, tweet, speak and share code about authoring and scaling CSS for big websites. You can hire me.
I am available for hire to consult, advise, and develop with passionate product teams across the globe.
I specialise in large, product-based projects where performance, scalability, and maintainability are paramount.