The dashed line in use

In previous work I have advocated for the use of dashed lines, my paper for Mobile HCI 2006 [pdf] represents Touch-based interactions with dashed lines, and work on ubicomp iconography uses the dashed line to represent borders, or seams.

I’ve had trouble justifying my excitement about this intricate visual detail, so I thought it would be good to collect a bunch of examples from over fifty years of information design history, to show it as a powerful visual element in ubicomp situations.

Even though the dashed line has emerged from a designer’s shorthand and from the limitations of monotone printing techniques, it has a clear and simple visual magic, the ability to express something three- or four-dimensional in two dimensions.

The dashed line as hidden geometry

The dashed line

The dashed lineThe dashed line

Examples from Open Here: The Art of Instructional Design, Paul Mijksenaar, Piet Westendorp, 1999.

The dashed line as movement

The line is used to indicate temporal positions:

The dashed line

The dashed lineThe dashed lineThe dashed lineThe dashed lineThe dashed lineThe dashed line

Examples from Open Here: The Art of Instructional Design, Paul Mijksenaar, Piet Westendorp, 1999.

The dashed line as paths

Very similar to the representations of movement, but the line is used as the path itself:

The dashed line

The dashed lineThe dashed lineThe dashed lineThe dashed lineThe dashed lineThe dashed line

Examples from Open Here: The Art of Instructional Design, Paul Mijksenaar, Piet Westendorp, 1999.

A more modern image showing an overview of Auto ID RFID supply chain management, by Xplane:


Colin Ware defines dashed, dotted or wavy lines as linking lines:

“A linking line between entities represents some kind of relationship between them. A line linking closed contours can have different colours or other graphical qualities such as waviness, and this effectively represents an attribute or type of relationship.”

The dashed line

From the perceptual syntax of diagrams in Information Visualisation: Perception for Design, Colin Ware, 1999.

The dashed line as expectation

Ellipsis from Mac OS X interface

I’ve spoken to some people that have made an association between the dashed line and an ellipsis. This example is taken from the Mac OS X interface, conventionally used to indicate that the action will be followed by another action.

The dashed line as ephemeral material

The dashed line

The dashed lineThe dashed line

Examples from Open Here: The Art of Instructional Design, Paul Mijksenaar, Piet Westendorp, 1999.

The dashed line as border or seams





The dashed line

A table of commonly used conventions from Information Graphics, Robert Harris, 1996.

Other examples

The dashed line

This is an example of dashed lines in information design from The Visual Display of Quantitative Information, Edward Tufte, 1983. I get the sense that Tufte prefers a simple, solid line, considering the overuse of patterns a form of chart-junk:

The dashed line

And lastly, an interesting thought from a conversation with Dave Gray, of Xplane and Communication nation:

“I think of lines: double-line, solid, dashed, dotted Similar to typeface conventions such as black, bold, regular, light. It’s a matter of emphasis. The thicker and more solid the line, the stronger the emphasis. A dotted line usually does not indicate “cut here” unless it is combined with a scissors icon. I think that trying to make a direct connection between the dashed line and what it represents may be a red herring. Think of a map, for example: Whether type is bold, all caps, or light relates directly to the designer’s decisions about emphasis, but I am not sure it relates so directly to the subject matter. There are a few direct correlations of this type: for example, type representing water is usually set in italic. I like your use of the dashed line – it is clear that they serve as a guide and invitation to “place things there”.”

, , , , , , , , , , ,

175 Responses to The dashed line in use

  1. Nicolas 28 September 2006 at 18:52 #

    This is really sound Timo; you should go further and develop those insights in a book “in the mood for dashed lines” or sth. And I am dead serious, there is a lot to draw from you discuss here (and a niche that Tufte did not seem to have tackled ;) ).

    Specifically, I am intrigued by dashed lines in real space (leading people to a certain trails) with different levels of spaces between the lines; and of course the relation between dashed lines and elephant paths.

    What about dashed lines as scalpel lines?

    I’d love to see dashed lines on the back of my computer with the curious part that I cannot see (position of the wifi card, the hard drive and the Ram): the stuff I may need to change and that I have to no cue about their positions.

  2. MK 29 September 2006 at 17:37 #

    I love these examples you’ve posted. The dashed line is indeed (erm) dashing!
    My pal Rob Cruickshank tells me to remind you of the dashed lines used to indicate direction of a gaze in comic books. Not done as often these days, more of a vintage comic thing.

  3. IH 29 September 2006 at 21:35 #

    ... and don’t forget the dashed line classic – coupon outlines [with obligatory scissors clip art]!

  4. Ugo 29 September 2006 at 21:43 #

    Great topic, funny how we forget how that dashed line is seen avery day for every and any thing almost.

    another example, following MK’s comment, in comic books, the speech bubble is not solid but dashed to indicate thoughts or soomeone talking under his breath.


  5. Giusto 30 September 2006 at 0:55 #

    Looking to the environment in which we navigate … dashed lines are also paths to follow. They can get us to the appropriate wing of the hospital (some dashed some solid) and they keep us in our lanes while driving.

    Thanks for this great post.

  6. Neale 30 September 2006 at 17:47 #

    Although, the dashed line is nowhere near as flexible as the un-dashed line.

  7. David 30 September 2006 at 23:56 #

    Also there is the dashed line as indication of folded paper, such as in origami instructions.

  8. Scott Smith 1 October 2006 at 1:38 #

    Excellent Timo. Also, don’t forget the classic comic book convention of the dashed line as the line of sight between the main character’s eyes and the object he/she is looking at. It always seemed to be used in the sense of suddenly having observed a desired target (a good looking girl across the street, a hidden bomb, money, food, etc).

    Interesting that often now the “observer” is omitted from pictograms, with only the focal object in view. Does this say something about context?

  9. miked 2 October 2006 at 0:37 #

    In autocad the dashed line is also called a “phantom line” and it is used to indicate a range of motion or multiple positions i.e. complete arc of a door in a plan view of a house.

    Great article, keep it up!

  10. Matt MWM Moore 2 October 2006 at 2:27 #

    I think I’m up ut to a few billion dots…..
    I use them in almost all of my artwork and design.
    Thanks for such an informative and entertaining piece.
    Keep it perforated YO!

  11. nk21 4 October 2006 at 22:01 #

    sorry, an elipses is not a dashed line… it is three periods.

  12. Timo 5 October 2006 at 7:52 #

    An ellipsis is as much a dashed line as it reminds people of dashed lines.

  13. vahakn 5 October 2006 at 12:07 #



  14. Olmec Sinclair 5 October 2006 at 22:49 #

    Long live the lovely dotted line. I work in web design and I often find myself using deashed lines to help break up a page without adding too much weight. Also, we have a dashed line running along the middle of the road, something to follow, a boundry, taking us to new places…

  15. Dave Gray 7 October 2006 at 21:57 #


    This is a beautiful and elegant visual essay. Thank you for putting it together; it’s a treat, pure delight!

  16. John Dinger 8 October 2006 at 5:34 #

    Aviation sectional maps take dashed lines to a new level. I believe the cartographer feels he must use every one ever created.

  17. William Becher 14 August 2007 at 18:46 #


  18. James 17 August 2007 at 0:15 #

    Famous ! I love dashes :)

  19. Philip 29 August 2008 at 12:19 #

    OMG, Huge work! Respect from designwar =)

  20. Arnold Aprill 2 January 2009 at 0:43 #

    Great work! Here is another use:

    The dashed line as indicator of cuts of meat

    this essay is heavily referenced in my own blogpost on the same subject:

  21. Paul 18 February 2009 at 14:09 #

    A good example of the dotted line as a key information element used to indicate an expected repsonse to a conditon or set of circumstances is found in aircraft manuals, where many precise combinations of circumstances and corresponding actions are printed or displayed in the “Challenge/Response” format, e,g,
    MAX FLT TIME…............................................................................5 HOURS

  22. Paul Anastasiu 11 March 2011 at 11:31 #

    loving this article, thank you so much for sharing

    i needed some reference regarding the use of dashed lines in webdesign, and this gave me some really good inspiration

    thank you, quality article right there!

  23. Tatiana 26 September 2012 at 2:36 #

    I’ve just seen a notebook page using only dotted lines instead of solid lines. What are your thoughts on this? Why not just using solid lines? Is that acceptable or simply a poor design choice?
    – - – - – - – - – - – - – - – - – - – - – - – - – -
    – - – - – - – - – - – - – - – - – - – - – - – - – -
    – - – - – - – - – - – - – - – - – - – - – - – - – -
    – - – - – - – - – - – - – - – - – - – - – - – - – -


  1. Week 7: What is Visualization? | ARTS2090 - 11 November 2014

    […] Timo,. (2006). The dashed line in use | Touch. Retrieved 13 September 2014, from […]

  2. Syrian Refugee Crisis Visualization | minimonique - 7 October 2015

    […] […]