As a front-end developer you'll inevitably have to work with copy or text. Whether you're writing your own copy or it is provided to you, it is important to have proper grammar by using the right characters. For this article we'll take a look at hyphens and dashes.

If you take a look through your keyboard, you might think there's only one type of hyphen or dash, and that's understandable since there is only one key. However, there are at least four different types of dashes that you'll typically encounter, and each has very different context.

Hyphen

When you hit that hyphen key on your keyboard, what you get is the hyphen. The hyphen's purpose is for compound words such as "cross-platform", "fine-tune", or "high-resolution".

A similar use is when you start a new line and break in the middle of a word. An example of this would be:

In 1995, Brendan Eich developed a com-
puter language called JavaScript.

En Dash

The en dash (–) is a little bit wider than your standard hyphen (about the size of an n). The en dash tends to be more used with data or statistics.

One use of the en dash is to display a range. Here are some examples:

• This commitment requires 20–30 hours per week.
• 1995–2019 were their most profitable years.
• Read pages 7–21.

Another use for en dash is when two terms are connected:

• I have a ticket for the Providence–Orlando flight.

Lastly, we can use en dash to display scores:

• The final score was 21–7.
• The bill passed 7–1 last night.

So, how do you get the en dash into your copy? You could:

• Simply copy and paste it form here: –
• Use the HTML entity: –
• On Mac: hold the Option key and press the Hyphen key
• On Windows: hold Alt and type 0150, then release Alt
• Use Character Map or a similar program to insert the character.

Em Dash

The em dash (—) is a bit wider than the en dash (about the size of an m). The em dash tends to be used as replacements for other punctuation.

Here's an example where we use it to replace a comma:

• The Toyota 86 has a 18.1 inch center of gravity—lower than a Nissan GT-R.

Next let's replace a colon:

• The committee finally settled on a name—ECMAScript.

Finally, we'll replace parentheses:

• After starting the build—and waiting for 40 minutes—we finally had our compiled code.

How do you get the en dash into your copy? Just like the en dash:

• Copy and paste it: —
• Use the HTML entity: —
• On Mac: hold the Shift and Option keys and press the Hyphen key
• On Windows: hold Alt and type 0151, then release Alt
• Use Character Map or a similar program to insert the character.

Minus Symbol

Finally, when you're working with mathematical expressions, technically it's more accurate to use the minus symbol (−) instead of the hyphen:

• 120 − 70 = 50

However, I haven't seen this used commonly outside of mathematics publications, and screen readers can interpret a hyphen correctly given a math related context. You can use the HTML entity for this: −

You Can't Unsee It

Now that you know about these different dashes and have seen how they're used, you won't be able to unsee it. Next time your working on your copy, take that extra moment to see where these might fit in.