Font Weight: The use of bold in visualization

Text weight is a very strong cue for differentiation. Traditionally, with word processors on computers there are only two levels, bold or plain. But many fonts are designed with a wider range of weights: the highly popular font Univers has 9 levels of weight. The freely available font Source Sans Pro has 6 weights.

Font weight – a relatively new invention

In the domain of typography, bold is a relatively recent invention. Gavin Ambrose and Paul Harris (Fundamentals of Typography), point to the origins during the industrial revolution:

The Industrial Revolution brought mechanisation, which allowed printing to speed up. Photo-engraving, which replaced handmade printing plates and line-casting machines that revolutionized typesetting also allowed for ever increasing levels of detail and intricacy. One development of the time was the introduction of Boldface, used for adding emphasis and hierarchy.

Or, a more detailed account comes from Peter Bil’ak:

For about 400 years printers and publishers did well with a single weight of a typeface, using just the type size as the main means of semantic differentiation. The idea of varying the weight of a single typeface probably happened in the mid-nineteenth century. The commercial pressures of the industrial revolution inspired the creation of different weights of typefaces. The idea was simple: to differentiate one text from another, or to highlight a particular part of the text. For example, the Zbesley and Company foundry’s Clarendon type (1842) is widely acknowledged as one of the first bold typefaces, but soon after its three year copyright protection expired it was extensively imitated and pirated. From the early twentieth century it became standard practice to include several weights of a typeface to complement the release of new type designs.

Even in domains where bold doesn’t necessarily exist, techniques have evolved to create bold fonts. With manual typewriters, a user could backspace over previous over previous characters and then type the same characters a second time to double the amount of ink creating a bolder font. On blackboards, mathematicians created a font doubling vertical strokes with offsets that became known as blackboard bold (available e.g. in LaTeX or Mathematica):

Blackboard bold: a bold font that evolved in mathematics.

Blackboard bold: a bold font that evolved in mathematics.

The nuances of type weight

Each weight is uniquely designed. A type designer will “compensate of added heaviness increasing tapers where strokes meet while maintaining similar curves, structure and height to ensure that the weight speak the same language as the rest of type family.” (Bruce Willen and Nolen Strals, Lettering & Type: Creating Letters & Designing Typefaces).

Above: Arial font. Middle: Arial with an added stroke around the perimeter. The resulting letters are too close, the openings on the S are almost completely closed and the enclosed white space in the A is tiny. Bottom: The real Arial Black adjusts spacing, openings and other geometry to make the heavyweight Arial more legible.

Above: Arial font. Middle: Arial with an added stroke around the perimeter. The resulting letters are too close, the openings on the S are almost completely closed and the enclosed white space in the A is tiny. Bottom: The real Arial Black adjusts spacing, openings and other geometry to make the heavyweight Arial more legible.

A couple of points to note. Firstly, a text lengths will change depending on the weight, as shown in the image using Arial above. If it is important to align strings, track the length of a string, or superimpose text then this variable length needs to be taken into account. One alternative is to use a fixed width font that offers a variety of weights, such as Source Code Pro. The image below shows text of various weights superimposed, top row being a fixed width font and the lower row being a proportional font. While not used anywhere today (that I know of), a superimposition approach could be used to compare keywords counts from different sources e.g. how many times Fox News says a particular word vs. PBS.

Superimposed text. Upper: fixed width font (Source Code Pro). Lower: proportional sans serif font (Source Sans Pro)

Superimposed text. Upper: fixed width font (Source Code Pro). Lower: proportional sans serif font (Source Sans Pro). Click for larger version.

Note that the amount of black associated with successive weights in a font family is logarithmic. The font family Segoe UI comes in 5 weights and the amount of ink associated with each level is as follows (computed by generating a long sample string and measuring the of black to the overall area):

Bold_SegoeBlackRatio

 

The widest range of weights can be found with sans serif fonts, such as all the examples shown here. Multiple weights are available with other types of fonts but may take a bit more effort to find. A nice free serif font with four weights is Merriweather.

Using bold to encode data

Bold is a strong differentiation cue. In cartography, Krygier (Making Maps: A Visual Guide to Map Design for GIS) points out:

Type weight variations imply ordered (quantitative) differences.  Bolder implies more, lighter weight implies less.

National Geographic’s cartographic fonts seem to include a few styles with at least three weights.

In typography, bold is well understood as a means to create emphasis. Craig (Designing with type: the essential guide to typography) says:

Bold is a thicker, heavier version of a typeface, typically used for increased emphasis. Next to italics, bold type is most widely used for emphasis. It is difficult to ignore words set in bold type!

In cartography and typography, font weight traditionally is applied to entire lines of text (e.g. bold headlines) or singular words. However, bold can be readily applied to any subset of letters and still retain a high degree of visual pop-out.

Baecker and Marcus (e.g. Human Factors and Typography for More Readable Programs) used a variety of font attributes in their formatting of computer code. Constrained to laser printers in the late 1980’s, their recommendations include limiting text to only two weights and used sparingly to emphasize individual words and phrases, such as key elements in a program such as function definitions, global variables and warning comments.

Font weight leverages the preattentive visual channel of intensity and size. In print, bold fonts use more ink creating a strong visual differentiation from the surrounding characters that use less ink. This differentiation is perceivable since a well-designed font has an even distribution of text ink across a sequence of letters regardless if the letters are sparse (e.g. r, i) or dense (e.g. m, e). In type design this even distribution of ink is referred to as color (not to be confused with hue). See section on The Even Color of Well Designed Type in the post Why Visualize with Fonts Now?

Font weight can also be considered to be an attribute of line width (i.e. the size channel): at the micro-level of individual glyphs, weight can be considered to be the line thickness over the alphanumeric glyph’s spine (see Lupton Designing Type) albeit with additional design enhancements to improve legibility such as tapering.

Given the high ranking of intensity and size on most rankings of visual attributes (e.g. Bertin, Cleveland or Mackinlay), font weight is likely to be highly effective among font attributes.

Using Font Weight for Quantitative Data in Visualizations

Font weight can be used to represent a few levels of ordered data or quantitative data. While up to 9 levels may be available, at smaller sizes it is unlikely that the viewer will be able to distinguish 9 different levels.  In an informal test, I created a visualization mockup using five levels of font weight with 9 point Segoe UI and presented it to over 40 people (i.e. coworkers, students and profs in the visualization community). All people could clearly perceive three distinct weights, with the majority of people being able to distinguish four weights. Only a few people were clearly able to see the all five weights:

News headlines with the number of related articles encoded as five levels of font weight. Note that weight = normalized(log(numarticles)), with 0-.2 = light, .2-4 > semilight, etc.

News headlines with the number of related articles encoded as five levels of font weight. Note that weight = normalized(log(numarticles)), with 0-.2 = light, .2-4 > semilight, etc. Most people see 4 distinct weights when presented at 9 point.

Presumably the ability to distinguish weights is related to the degree of difference between each level of weight and also related to font size: at smaller sizes, subtle weight variations will be harder to detect particularly on screen where the resolution is not as high as paper.

Note that intensity variation could be achieved using the brightness of the letters. However, this will be less effective: legibility of a font is related to the contrast between the font and the background (Ware).

In data visualization, font weight can be used in many different ways. A simple use is binary: differentiation between two different classes of information.

Weight can also be used to encode quantitative data. The news headlines above are one example of using weight across a line of text. Below is a simple example using the many weights available in Source Sans Pro. The left edge shows a list of characters from Grimm’s Fairy Tales with a list of adjectives associated with those characters weighted by frequency. One can see that birds are beautiful, kings are old, princesses beautiful and girls little:

Font weight indicates the frequency of adjectives associated with characters from Grimms Fairy Tales. Kings are old, princesses are beautiful and girls are little.

Font weight indicates the frequency of adjectives associated with characters from Grimms Fairy Tales. Kings are old, princesses are beautiful and girls are little.

Contrast the above example with tag clouds. In a tag cloud, fonts are sized based on word frequency. While size certainly works well for encoding quantitative data, the readability of text can be compromised. For example, when there is a significant difference between sizes of the text and non-aligned words, the viewer will not be able to visually scan across a sequence of words as easily as they can with aligned words of consistent size. A tag cloud treats all words independently, as if all the words from a document have been mixed together in a blender and the words no longer need to be understood in any particular grouping. The above example of character traits has a required association between a character (e.g. princess) and the adjectives (e.g beautiful, young) meaning that maintaining sizes and alignment is required for improved readability and association between words.

This example, and other examples using font weight, are discussed more in the paper Using Text in Visualizations for Micro/Macro Readings from TextVis 2015 (textvis.org). 

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