Hyphens or en dashes—which are more readable when used in number ranges (for North American web users)?

Question

Is there evidence to show that number ranges are more readable using hyphens or en dashes (on digital screens for North American web users)?

Wikipedia notes that, according to your style choice, you can correctly list store hours two ways:

Hyphen: 10am-9pm

Dash: 10am–9pm

Since neither is eliminated as "incorrect," which style has evidence to support that it is more readable (and more readily understandable)?

(As Wikipedia notes that "both are equally "'correct,'" I'm looking strictly for evidence to support one style over the other from a usability/experience perspective.)

Answer 1

More readable in what context?. There lot's of evidence that readability depends on multiple variables.

Keeping in mind this impact of external factors, then one hyphen may be more readable if the UI is higher density of elements, and the other would fare better with a lower density UI.

Specifically in the case of store hours it is likely more important to align vertically than a difference between hyphens

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

The correct use of em and en

The em dash (— U+2014) is used to indicate a sudden break in thought ("I was thinking about writing a--what time did you say the movie started?"), a parenthetical statement that deserves more attention than parentheses indicate, or instead of a colon or semicolon to link clauses. It is also used to indicate an open range, such as from a given date with no end yet (as in "Peter Sheerin [1969--] authored this document."), or vague dates (as a stand-in for the last two digits of a four-digit year).

Two adjacent em dashes (a 2-em dash) are used to indicate missing letters in a word ("I just don't f----ing care about").

Three adjacent em dashes (a 3-em dash) are used to substitute for the author's name when a repeated series of works are presented in a bibliography, as well as to indicate an entire missing word in the text.

---

The en dash (– U+2013) is used to indicate a range of just about anything with numbers, including dates, numbers, game scores, and pages in any sort of document. It is also used instead of the word "to" or a hyphen to indicate a connection between things, including geographic references (like the Mason–Dixon Line) and routes (such as the New York–Boston commuter train).

It is used to hyphenate compounds of compounds, where at least one pair is already hyphenated. The Chicago Manual of style also states that it should be used "Where one of the components of a compound adjective contains more than one word," instead of a hyphen. Both of these rules are for clarity in indicating exactly what is being modified by the compound.

Conclusion : Use dash

Source

Answer 3

Chicago Manual of Style (15th ed.) says this:

• Hyphens are used in compound words and to separate characters.
• En dashes: "The principal use of the en dash is to connect numbers and, less often, words. In this use it signifies 'up to and including'..."
• Em dashes are used for a number of things, but not to indicate ranges.

Therefore, use en dashes. That's what they're for.

(I know this answer doesn't address readability, but this isn't a readability issue. It's a usage issue that should be determined by your style guide.)

Answer 4

Your example uses the time formatted in the english style; in continental Europe we would use

Hyphen: 10-21

Dash: 10–21

In this example it is clear that the hyphen could be confused with a minus sign. I don't mean that it is easy to enter this confusion on a time range; but there are cases where it is really easy, for example temperatures.

UPDATE:

However, there are problems with the dash:

• It is not always available, because unlike minus it is not a ASCII standard character; I had an issue caused by this on the Japanese translation of an application, Visual Studio was not compiling the respective .rc file, due to its codepage definition, and I've been forced to use its Unicode escape character direcly on the .cpp file.

• In some places where it is available it seems like a minus, as in the Stack Exchange textarea where I am typing now.

• It has a wider length than other characters which is the cause of the previous point, and that makes it difficult to use it on monospace fonts, namely when writing code.

Answer 5

While you present number ranges through dates, it's still important to notice that a dash is technically a double-hyphen:

Dash

A dash is expressed as an "em dash" ( — ) in printing, is expressed in plain text as two hyphens ( -- ) and is used in place of a comma, colon or semicolon for greater emphasis. It denotes a major break or pause and should not be overused.

President Dunn introduced the plan—the first of its kind—at a public forum. He defined core values—inclusiveness, sustainability, responsibility and respect. Traditionally, a dash is preceded and followed by a space, but more recently, spaces have been omitted. For consistency in University writing do not include spaces.

Ref: Punctuation: Hyphen and Dash

But it doesn't say which is more readable. In fact, academics worry more on what is academically correct than what is readable. So my advice is to use the character and the spaces that provide the most, and usually that is accomplished using white spaces through space or using a single dash. Either way, you win in readability the less you stress your users by strange academic rules, and focus on readability!

White Space rules!

Answer 6

Another aspect to consider is screen readers: an En dash could be actually read as "to" instead of "hyphen" or more likely, if you use a normal hyphen, it won't be read at all.

Although apparently current screen readers are not very proficient in this matter, they might improve in the future. If you use consistent and typographically sound glyphs now your content will be ready when it happens.

Answer 7

You mentioned number range. Are you interested in areas besides time? Ultimately the key point is "What do the users expect?" and "Are the users "expert" users in the system or casual visitors?"

One can make an argument that people will absorb information in an expected format. Secondly context matters - is it clear what the grouping of numbers is for? And third is there enough white space so that the brain can separate the sub-groups?

I would argue that sufficient white space is more important than the type of dash.

I have never seen an eye-tracking experiment done with hyphens but an interesting article to read is: http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php.

It has nothing to do with hyphens and dashes but it does point to the importance of white space and alignment.

Answer 8

An en dash is recommended when working with a range of values (wikipedia.com). Of course rules are made to be broken, but generally this is a good rule of thumb to follow.

It's also worth noting that "there should be no space between the en dash and the adjacent material" (thepunctuationguide.com).

Therefore a range of time should resemble the following:

1:15–2:15 p.m.

11:00 a.m.–1:00 p.m.