Font specific attributes, such as bold, italic and case can be used in knowledge mapping and information retrieval to encode additional data in texts, lists and labels to increase data density of visualizations; encode data quantitative data into search lists; and facilitate text skimming and refinement by visually promoting of words of interest.
Information visualization (infovis) transforms data into visual representations. In knowledge mapping, visualizations are used to gain insight into the structure of large scale information spaces. In knowledge maps, similar to geographic maps, text should have an inherent role to help viewer comprehend information, however, the use of font-specific attributes, such as bold, italic, caps, etc., in infovis is uncommon for encoding additional information. In information retrieval, search results may use a few font-attributes, e.g. bold, underline, serif/sans serif, to differentiate classes of metadata.
The goal of this paper is to illustrate that font-specific attributes can be used
to: 1) facilitate skimming texts such as abstracts or lead paragraphs; 2) encode
quantitative data using a novel technique of proportional encoding in search
results and facets; and 3) encode multiple data attributes in labels.
Knowledge maps frequently use text labels: Places & Spaces (scimaps.org) is
a repository of information visualizations and maps typically organizing large
information spaces (i.e. knowledge maps). Of 144 maps, 80% use some form of
text in the central visualization. When text is used, 2/3 use traditional infovis
attributes of size and color (e.g. text size corresponding to size of a region or size
of a node). Text-specific attributes are used in 28% of the examples, however,
these are typically used only to differentiate between compositional elements
(e.g. labels, axes, tick labels, hyperlinks, city, region, body of water in a map).
In only a few instances (mostly maps, infographics and a few infovis) are a
broader mix of font attributes used, e.g. case, italics and spacing [
Information retrieval infovis has a similar usage. Of 45 examples in
Hearst’s infovis chapters [
Other infovis also use font attributes, e.g. italics [
Typography and cartography have centuries of history with innovative
font encoding of information in documents hundreds of years old (e.g. fig. 1).
There are many techniques for creating emphasis and differentiation with font,
with various guidelines and conventions (e.g. typographic [
Historically, user interfaces recommended against type attributes due to low resolution displays. New higher resolution devices, improved font rendering technology, a wide range of typefaces designed for the screen and rich markup formats, now result in recommendations to more broadly use type-specific attributes for user interfaces and web.
In contrast to infovis for information retrieval, text-based search results and
navigation interfaces typically differentiate metadata associated with a document
using type size, color, underlines (e.g. links) or font family (e.g. titles). Bold or
color is frequently used to highlight search terms. See Hearst [
Notation systems such as chemical formulas (e.g. [As@Ni12As20]3−), mathematical formulas (e.g. μe(A) = inf{λ∗(O) | O ∈ O, A ⊂ O} ) and markup notation (e.g. <div class=“body”>Text </div>) use different type elements to emphasize, delineate or otherwise add information to text.
Based on an review of these above domains, a list of font-specific properties (not including generic color and size visual attributes) include: • Weight (bold) can have up to six weights for screen and up to 9 for print. • Italic or Oblique are both sloped fonts but italics have different letterforms and there are instances of reverse italics and vertical italics. • CASE includes UPPER, lower, Mixed and Small Caps. Uppercase is designed to standout from lowercase while small caps blend in. • S p a c i n g . Tracking (space between letters) and leading (between lines). • Typeface indicates font family: sans, blackletter, script, source, MATHBOLD,... • Underline can be d:i:s:tr:a:c:t:in:g:. Typographers recommend .s.u.b.t.l.e. variants. • Condensed/Expanded. Similar to, but better than, horizontally scaled fonts. • Superscript and subscript encode via size and position to adjacent text. • “Paired delimiters” evoke enclosure by pairing the same (or mirrored) shapes. • Alphanumeric glyphs (A,B,C,1,2,3) can literally encode data and are uniquely orderable. Glyphs not native to the viewer (e.g. α, β, γ) are also orderable, but symbols (e.g. ∞, ∀, [) are not orderable. 3
Type for Knowledge Maps and Information Retrieval Type attributes can be used to encode additional information at different levels of use in knowledge mapping and information retrieval, ranging from low-level document views, to search lists, to the macro-level overviews. A few examples: 3.1
In some search results, full sentences, abstracts or lead paragraphs are presented (e.g. BioText Search Engine, Wikipedia’s Today’s featured article archive). At the micro-level of documents and texts, type attributes can be used to aid comprehension without changing layout. Text skimming is a reading technique of rapid eye movement across a large body to text to get the main ideas and content overview. At a low level, the strategy requires the reader to dip into the text looking for words such as proper nouns, unusual words, enumerations, etc. Word frequency analysis can be used to weight the least common words (fig. 2).
Font weight draws visual attention to the highest contrast which are the
least frequent words as per text skimming strategy. In the above introductory
paragraph on flight, the terms glider and motor have the heaviest weight and
are possible terms for query refinement. Similarly, visual weighting of proper
nouns, enumerations and unusual words facilitates fact-finding tasks. Attributes
could instead be based on specific domain vocabulary [
Query results can be visualized and may include quantitative data e.g. readership, relevance or number of citations. Newsmap.jp displays news headlines in a treemap, with headline size indicating readership (fig. 3).
Instead, using fixed size text enables more legible headlines to be displayed and then font-weight can be used to encode readership, either by setting the weight per headline (fig. 4-left), or proportionally encoding readership by setting bold to proportionally correspond to the magnitude (fig. 4-right).
Any visualization technique has some degree of lossiness as data is
transformed into a visual encoding. Lossiness can be evaluated in the above
representations by measuring:
1. Number of readable headlines: if a headline is too truncated, too small to
read or does not appear, it is considered unreadable. Six point was used as
the threshold for too small for a 96dpi screen.
2. Number of uniquely perceivable sizes: can be estimated using prior
experimental data [
Information density is a function of the measures (#readable x #sizes / area). Density was measured across all three variants and repeated for different aspect ratios with different numbers of items (e.g. sparse scenario, dense scenario). Information density for the proportional encoding consistently outperformed the treemap by a factor of 2 while the font weight encoding could underperform:
1.42x 0.67x 0.86x 2.68x 2.22x 2.07x
These three different encodings were presented to three different groups of infovis researchers, each with more than 10 attendees. Proportional encoding received a positive response. None of the participants were confused by the encoding and consistently scored 3 or 4 on a 1-4 scale on three questions indicating desirability, ease of use and likelihood of ease for others to understand.
One concern expressed with proportional encoding is that the maximum proportion length is limited to the shortest headline. This can be addressed by adding the beginning of the lead sentence to the end of the headline, similar to email lists (fig. 5). Also, the approach can be extended to convey multiple data attributes, e.g. (font weight and underline).
This approach could lead to new techniques for rapidly scanning through search results, particularly in applications where each result is presented as an individual row. For example, news search on financial terminals (e.g. Reuters, Bloomberg) typically result in dense lists of headlines where space is at a premium, so visual techniques such as icons or color are used to indicate additional information; and font-based approaches could also be used to provide information without requiring any additional space. Similarly, facets for query refinement may have additional metadata and typically exist in narrow side panels. For example, fig. 6 represents facets for query refinement provided by Amazon on a search for information retrieval where the length of underline has been added to indicate the quantity of matching items.
Network Administration | Computers & Technology | Databases |
Programming | Web Development & Design | Reference Macro-scale visualizations of large domains of information usually have some text but sometimes text can be minimal. For example, choropleth maps color regions to indicate data values and are extremely popular. However, choropleth maps have issues, including: 1) Small areas can be invisible (e.g. Dubai, Singapore are not visible on a world map); 2) Identification of a selected area or finding a named target can be difficult e.g. 63% of young adults in USA could not locate Iraq on a map in a National Geographic survey in 2006; and 3) Data encoding is typically limited to a single value, such as hue or brightness.
Instead of using shapes to identify regions, mnemonic codes (e.g. ISO country codes) are used. With some spatial adjustment to remove overlap, all labels are visible while maintaining local proximity. Color can still be used, as well as type-specific attributes to encode additional data. Health expenditures, life expectancies and HIV data are represented using bold, case and italic into a single label in fig. 7 allowing complex queries to be made visually, e.g. Are there countries with high HIV (italics) and short lives (lowercase) even though a signification portion of GDP is spent on health care (ultrabold)? (A. Yes, e.g. Rwanda (rwa) or Sierra Leone (sle)).
In addition to offering greater data density and no loss of small countries, a similar map (using only labels and color) resulted in 62% correct responses on identification tasks compared to 17% correct for a shape-based map with no labels (i.e. choropleth map); in surveys in a seminar setting. This indicates a strong potential for richly labeled maps to offer greater information density and lower data lossiness.
In knowledge maps (e.g. scimaps.org) representations range from highly
labeled maps such as Skupin’s self-organizing maps (e.g. [
These typographic attributes may not have the same degree of effectiveness
as other visual channels (e.g. size, hue, angle, shape). Visual channels have been
researched in more detail (e.g. Bertin, Cleveland, MacKinlay, Wilkinson, Mazza,
Munzner), although a definitive list ranking visual channels for different types
of tasks and number of uniquely perceivable levels does not exist. Font-specific
attributes can be mapped back to these well-known visual channels [
Future work should also consider different representations e.g. there may be other novel visualizations; as well as systems implemented to evaluate applicability and efficacy to specific information retrieval tasks.