6 February, 2017

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…

Ellipses

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:

Quotes

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

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.

Sixty-Sixes and Ninety-Nines

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 [a]
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.

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

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.

Hyphens

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.

Front-end Developer

Minuses

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 minus.

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.

En Dashes

The en dash is a slightly longer dash used to denote ranges or relations, e.g.:

Refer to pages 88–93.

Father–son relationship.

It is typically, though not necessarily, half the width of the em dash.

Em Dashes

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.

Hair Spaces

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.