The Maligned Underline

Many current texts on typography and cartography recommend against underlines (e.g. Denise Bosler’s Mastering Type. The Essential Guide for Print and Web Design, or John Krygier’s Making Maps: A Visual Guide to Map Design for GIS), for example “if you feel the urge to underline type, STOP and use bold instead” (Krygier). There are many reasons for this negative recommendation, such as:

  • Underlines interfere with descenders, g,j,p,q,p,y sometimes italic f or z, uppercase Q and J in some typefaces, some punctuation (,}), old-style numerals such as 3 and 9, and subscripts. For example, many glyphs interfere with the underline: Queue 329 jiggly puffs (quietly).
  • Underlines are distracting.
  • Single underlines are the convention of indicating hyperlinks.

Different underline linestyles are associated with particular conventions. Given the recent prominence of underlines indicating hyperlinks (late 1990’s to mid-2000’s), all other uses of the single underline have the potential for confusion with the association of the hyperlink. However, this trend is changing with different sites using non-underline means of indicating hyperlinks, such as changing the color of hyperlink text.

The wavy linestyle has been popularized in text editors to indicate spelling or text errors (e.g. WordPress). Strikethroughs are sometimes associated with deletions, such as legal document markups, or editing marks).

However, the quick dismissal of underlines doesn’t consider the many nuances and variations for underlines that have evolved over hundreds of years. Further, conventions can be redefined and limitations may be overcome. The domain of data visualization often creates new rules and new conventions in the creation of novel visualizations. Established conventions change over time. Consider:

  • Typewriters. Underlines were commonly used with typewriting to create emphasis, as typewriters did not have techniques such as bold or italics. Typewriters did have an underscore character which could be added to text by simply backspacing and typing underscores thereby creating an underline that emphasized the associated glyphs. Underlines may have been combined with uppercase and layout (i.e. indentation) to aid the structure of a document.

    TypewrittenTVscript2

    Portion of a typewritten TV script using underlines (and caps and layout) to structure information. (http://www.lib.umd.edu/LAB/exhibits/leadingrole/fn-images/FN-show2.jpg)

  • Annotation. With paper books, underlining was a common convention for marking important passages: using a pencil, underlining could easily include multiple weights, multiple lines and other added marks to draw attention to particular passages.

    Underline1475

    Historic underlines added to both the typeset text and the handwritten note in an edition of Seneca the Younger’s works (Naples: Mattia Moravo, 1475; ISTC is00368000. Via Penn Libraries: https://www.flickr.com/photos/58558794@N07/9629599118/in/photostream/).

  • Editing Markup. Because underlines are so easily added to already existing text, they are used extensively to markup edits. Simple underlines indicate word to be set in italics, wavy underlines for bold, double for small caps and triple for uppercase. A dashed underline under and underline indicates removal of the underline (via Ellen Lupton’s Thinking with Type). 
  • Cartography. Various styles of underlines have been used historically with cartographic labels to add information. In this map from the 1800’s, dashed, solid and double underlines are used to indicate additional information for some cities.

    UnderlineMaps

    Various underline styles on city names indicate data. From Stieler’s Atlas of Modern Geography 1925. Via davidrumsey.com.

The deficiencies of underlines can be addressed in various ways as well:

  • In the broader discussion of emphasis, a solid underline may be distracting, but there are less distracting underline styles such as dashes and dots (e.g. Microsoft Word or LaTeX). And there are a variety of other styles, such as double underlines, wavy underlines, strikethroughs and overlines (but not in WordPress).
  • Uppercase. While underlines may interfere with lowercase descenders, in many font families uppercase letters do not have descenders. The same sentence discussed earlier renders with minimal interference in uppercase: QUEUE 329 JIGGLY PUFFS (QUIETLY). Some maps use this approach, where underlines only occur on labels set in uppercase.
  • Breaking Underlines. Underlines only interfere with descenders when underlines cut across descenders indiscriminately, as with typewriters and poorly implemented text rendering technologies. However, a closer inspection of historical underlines will reveal cases where underlines break around descenders: as a result descenders are clearly legible and underlines visually carry across their gaps using the gestalt principle of continuation. Underlines that break around descenders are quite possible, either with some considerable effort on the part of the web page designer (http://www.acusti.ca/blog/2014/11/28/towards-a-more-perfect-link-underline/ ) or as part of the browser technology for some browsers at the time of this writing (same URL).

Underlines can offer some unique advantages over other types of font attributes:

  • Layout Retention. Underlines are an attribute that can be added as an annotation to already set blocks of text. Underlines do not change character width, whereas bold, italic and case do. Underlining could thus be an effective technique applied interactively.
  • Strong Emphasis. Underlining, like bold, may be considered a way to create strong emphasis within text. It is difficult to ignore underlines. There is a strong pop-out effect.
  • Separable Attribute. Underlines are visually separable from the character glyphs, unlike, bold, italics and capitalization. As such, underlines can be visually distinguished and separate from other combinations of font-specific attributes. This separability may be desirable for encoding multiple data attributes into multiple font attributes, where the viewer needs to respond analytically making judgements on the basis of one variable or the other instead of holistically (e.g. see Colin Ware’s Information Visualization: Perception and Design).
  • Separate Color. Since an underline is separate from the text, its color may be independent of the text.
  • Versatile. Underlines are quite versatile as a visual marker and can be applied to individual characters, words, sentences or any combination thereof. Unlike other font attributes, underlines can be applied to spaces between words. Unlike other font attributes, underlines do not necessarily need to apply to the entire character width, however, font rendering technologies only apply underlines to full character widths.

In the context of existing visualization research, underlines are perceived the same as lines and utilize visual attributes such as width, length and style. Nick Feltron uses an almost-underline to create a labeled bar chart in his 2013 Annual Report: by pushing the line a bit further below the text Feltron avoids the problem of lines interfering with descenders.

FeltronUnderlines

 

However, text underlines do have some unique properties beyond simple lines, such as familiarity, co-existence with text, the text retains high readability (assuming the underlines break nicely around descender) and the ability to be displayed in tightly set text. Should underlines break for descenders or individual words, the underline retains visual perception as a single continuous line, as per the gestalt law of continuity.

The effectiveness and applicability of underlines can be quite high for data visualizations. Considered as a line, they have the same properties as other lines used in data visualizations:

  • Underline Style. Line styles (dash, dot, wavy) are attributes of shape, which can be effective for encoding categoric information (see Bertin or Mackinlay). Wavy, straight, dotted, dashed, doubled, thin, thick are all variations that can be applied for categorization. A small ordering could be created, for example, ranging from thin, thick, double, to indicate increasing quantities.
  • Underline Weight and Length. Various weights can be applied, although given the usually constrained space available only a few widths can be applied and only a two or three widths can be perceived. Line lengths can be estimated more accurately than many other encodings (e.g. see Cleveland and McGill). Lengths are highly recommend in many visual attribute rankings specifically for encoding quantities (e.g. see Bertin or MacKinlay).

Below is the same chart from 2013 Feltron’s Annual Report redrawn directly using font underlines in the text editor – no graphical libraries nor charting software required.

 TOP PARTICIPANTS                          
 New Yorker            48
 Merrill Edge          25
 Merrill Lynch         17
 Facebook              14
 Wired                 13
 Con Edison            12

How far can underlines go in visualization? The above example collapses a horizontal bar chart down to an underline that exists inside the layout conventions of text. There may be many other novel ways that underlining could be used together with text and with other font attributes.

Advertisements

About richardbrath

Richard is a long time visualization designer and researcher. Professionally, I am one of the partners of Uncharted Software Inc. I am also pursuing a part-time PhD in data visualization at LSBU. The opinions on this blog are related to my personal interests in data visualization, particularly around research interests related to my PhD work- this blog is about exploratory aspects of data visualization not proven principles.
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s