10

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

  • 2
    Why not hyphen with spaces around it? Also, space after the hour and before and am/pm would also make the hour look more readable, like this: 10 am - 9 pm – seismatica Aug 19 '14 at 19:41
  • You ask specifically about readability. My assumption is that the typographic standards are in place because they've been evaluated for readability over the years. – Ken Mohnkern Aug 20 '14 at 13:25
  • This question applies only to the English language, right? – unor Aug 21 '14 at 14:06
  • I'd be curious to see what the Graphic Design forum says about this one. – Pdxd Aug 25 '14 at 15:34
  • @KenMohnkern, it's not safe to assume that standards put in place before digital screens existed are reliable. The whole rule about "two spaces after a period" was created for fixed width font typewriters, and has been obviated by the spread of variable width fonts. Typographic standards change with the media. – Taj Moore Sep 4 '14 at 18:29
13
+25

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • Your right-side illustration is a good example of poor grouping actually. When looking at Monday's starting time 11am the closest thing to eye is Tuesday's starting time rather than Monday's closing time. What about a mockup with left-aligned ending times and a bit more line spacing? – Steve Dodier-Lazaro Aug 21 '14 at 10:11
  • These points are very valid. It's a lot about the context instead of technicality. I think one problem the UX sphere has is that it relies on so much on the potential of research (which is a good thing too) instead of what is more logical (because a lot of the time, things are more logical than they appear). Don't be afraid to test it out yourself because that will probably give you more answers and quicker too – Majo0od Aug 21 '14 at 12:55
  • 1
    @Sidnioulz I agree. I quickly tried another alignment, and saw issues with that too. But point I am making is that even a (poor) alignment structure still way more important than which hyphen. This topic actually sounds like a worthwhile UX exchange topic on it's own :) – Jason A. Aug 21 '14 at 15:21
  • 1
    @Majed I love testing and hard data. I'd just add a note that where you have multiple variables that interact then the number of test scenarios can become problematic. The design axioms should help decide what is worthwhile testing. – Jason A. Aug 21 '14 at 15:29
  • If you limit the context to just what I've included in the question—a single range of time, either inline or on its own—does one show better readability for users. If you're laying data in a table, sure, you can do things other than dashes. My questions relates strictly to serial dashes vs. en dashes. – Taj Moore Sep 4 '14 at 18:26
11

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

  • Style correctness has already been shown to vary. I only want evidence to support readability (and understandability, for that matter). The word "flammable" was created because of fear that the correct word "inflammable" could be misunderstood to mean its opposite. – Taj Moore Sep 4 '14 at 18:36
6

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

  • That's fine if you don't need content to be entered by (normal) people. Try asking your average copywriter where the en-dash is on their keyboard... (Personally I enjoy the type-nerdery of the different types of dashes but ordinary people will look at you like you're crazy. Probably rightly.) – edeverett Aug 20 '14 at 10:14
  • 1
    That's true, @edeverett. Word apps sometimes convert to the right thing. And if you know the differences (and care about them) you know the magic key combos. – Ken Mohnkern Aug 20 '14 at 13:22
  • 1
    This is the best answer because if the data is encoded with an en dash, the renderer can always do the right thing. In this case, it means the font designer is responsible. – John Deters Aug 20 '14 at 13:44
  • The house style guide is partly formed by evidence. Without it, it's up to designers when they think of it, and developers when they don't. That would be chaos! Chaos, I tell you! – Taj Moore Sep 4 '14 at 18:38
5

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.

  • 2
    Also, in an ideal world, you'd have consistency between time ranges and other numerical ranges - so another point in favour of en dashes even if you never write times like this is, they would be consistent between time ranges and any cases where you needed to say, for example, "We measured 6–8 units" (minimising any risk of being misread as 6-8= -2 units). Reducing ambiguity is generally good for readability too. – user568458 Aug 20 '14 at 12:19
4

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!

  • 2
    I think you've confused en dash with em dash. An en dash is not represented by double-hyphens. Please see en.wikipedia.org/wiki/Dash. Technically, we're actually talking about a serial dash vs. an en dash, but the typical solution for a serial dash is the hyphen-minus, aka, hyphen. – Taj Moore Aug 5 '14 at 20:39
4

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.

  • Usability for screen readers is an interesting angle I hadn't considered. Thanks for the tip. – Taj Moore Sep 4 '14 at 18:39
2

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.

  • I also feel whitespace is the issue instead of the length of the hyphen/dash. Unless you're into typography, most people wouldn't know/care about the difference between a hyphen and a dash. – nightning Aug 20 '14 at 18:57
  • It's incredible how underrated white space is. I think that it's important to not confuse a user and an "unusual" dash might not register well. – Mayo Aug 20 '14 at 20:25
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.