Using dashes in email and web design

October 21, 2013

Are you checking which dashes you use in your emails and web pages?

When writing in packages such as Word or Outlook, you’ll usually have the inappropriate usage of hyphens corrected for you, but when it comes to email and website design, these can get missed as they require HTML special character codes to be inserted.

It’s not important for some people, but for others an email littered with hyphens instead of the correct dashes could be jarring and affect how they perceive your message and company.

The different dashes

(-) Hyphens

•

Used to link words

•

To join prefixes to other words

•

To show word breaks

(–) en dash

•

The width of the letter n

•

Used to connect a range of numbers (pages 30–140)

•

Used to indicate a period of time (June–July)

(—) em dash

•

The width of the letter m

•

Used sparingly, often used to indicate an interruption, emphasis or change in thought

•

Connecting independent clauses to each other

•

Sometimes used to indicate the source of quotes

Using the range of dashes

HTML

In your HTML you’ll need to encode en and em dashes as special characters

•

(–) en dash &ndash;

•

(—) em dash &mdash;

Word

Word can automatically insert the correct dash for you

•

Separating a hyphen (-) with two spaces either side will convert to an en dash.

•

Typing two hyphens (--) in Word between words will automatically convert to an em dash

Shortcuts

•

On an iPhone, hold down the hyphen symbol and you’ll get the full range