Color in Text Visualization

Highlighting text via bold or italic is less noticeable than color. There is an incredibly long history of the use of color in a continuum from medieval times to present. From a visualization perspective, color is scoped to the level of words, or Proper Nouns, such as keywords in context (KWIC).  Color ranks highly in a study by Strobelt et al. Color is already among the most highly used attribute for encoding data into text (as of Jan 2016: 71 of 249 text visualizations at textvis.lnu.se used color, only size was slightly higher at 76, and the next closest was orientation down at 10). And color has a strong visceral appeal – note all the tag clouds that vary word color randomly.

So, what more can be said about color in text?

The scope of text in visualization doesn’t need to be constrained to words: color can be applied to entire phrases, or down to individual glyphs. Certainly medieval authors were fond of illuminating initial letters of paragraphs and rubrication for the leading letter in sentences:

IlluminatedInitials

Colorful leading letters: Illuminated initials leading paragraphs, rubrication on lead initials of sentences. (bonus, note the sparkline at top right)

Note also that color does not need be constrained to a single color. In the above manuscript, the illuminated initials are blue set on an ornate red background. The idea of varying both foreground and background color of text has certainly occurred to some visualization designers as well:

SpatioTemporalTags

Spatiotemporal tags vary both foreground and background color.

Mixing different foreground and background colors can result in illegible type: the words architecture and alemania are hard to read in the above example, as are some of the foreground/background combinations in this stem&leaf timetable:

 

Timetable

Red text on an orange bar isn’t particularly readable.

Typographers have different ways of combining multiple colors into letters. Chromatic fonts contain complementary shapes, each printed in a separate color, each layer carefully aligned on a press. Consider this historic poster:

TheatreRoyal
Chromatic fonts on historic poster: colored outlines and drop shadows. Image courtesy of  Gerry Leonidas, Department of Typography & Graphic Communication, University of Reading. 

Chromatic fonts emerged in the mid-1800’s, along with large sizes, many weights, wide variety of serifs and decorations. For the first 40 years of computer screens 72-96 DPI probably wasn’t sufficient for chromatic fonts and likely would have resulted in visual artifacts (i.e. jagged bits of high contrast colors interfering with legibility).  Support for chromatic fonts on computers is very recent and currently not consistent across browsers.
But, computer-based chromatic fonts open up interesting design possibilities. Wood letters with ink-based printing are limited: the approach scales to only a few discrete ink colors.  Instead, with software-based chromatic fonts, many hues and gradients are feasible and can be applied to portions of letters. The implication for visualization is that color can be applied to any subset of letters or parts of glyphs; potentially used to indicate quantities; still maintain legibility; and have a much more dynamic aesthetic than plain text. Some of the examples of computer-based chromatic fonts hint at very interesting future visualization possibilities:

 

chromaticfont

Sample chromatic fonts via colorfonts.wtf

 

It would be very interesting to see what new ideas some visualization research or graphic design programs might come up with!
(Title image conveniently cropped from Specimens of Chromatic Wood Type… 1874)

About richardbrath

Richard is a long time visualization designer and researcher. Professionally, I am one of the partners of Uncharted Software Inc. I have recently completed a 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 Data Visualization, Font Visualization, Text Visualization and tagged , . Bookmark the permalink.

1 Response to Color in Text Visualization

  1. I am also excited to see what designers come up with using color fonts. Mid-May QuarkXPress 2018 will also support color fonts, thus broadening the audience being able to use color fonts.

    Here’s a great example I found recently:
    https://www.almanac.com/content/first-day-spring-vernal-equinox
    (though not sure whether it actually IS a color font, could also be hand-made vectors. However exactly THAT is where I see the huge benefit of color fonts, it spares you having to use an illustration tool to create all of this by hand)

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s