In chart design, headings and varying font weights communicate visual hierarchy, indicating which content is more or less important. These text treatments should be used sparingly with a limited number of typographic styles to avoid visual clutter.

Arizona State University

University of Michigan - Ann Arbor

Google

In data visualization, typography is used to label various chart elements, including chart titles, data labels, axis labels, and legends. Text styling establishes a visual hierarchy; typically, the chart title holds the highest level of hierarchy, while axis labels and legends have the lowest.

Typography in Data Visualization

- Typeface (aka font family): the group to which a specific font belongs. Example: Arial, Calibri, Helvetica
- Font: a specific set of letters within a typeface that are stylized and distinct. Example: Arial, italic, 24px
- Serif: font families with a small "hook-like" elements aka a "serif" at the end of lines of the letters. Popular examples: Times New Roman, Garamond, Bodoni
- Sans-Serif: font families whose letters do not have serifs. They're typically cleaner, more minimal, and geometrics. Popular examples: Helvetica, Futura, Open Sans

Basic Typography Terms

- Font (or text) decoration: this includes over-lining, underlining, and strikethrough text.

- Font effect: modifications made to text such as bevels, inlines, outlines, shadows, which are usually used to make the text more prominent. 

- Font style: a specific variant of the typeface's appearance which includes case (uppercase, lowercase), skew (roman, italics), etc. 

- Font weights: the thickness of the lines in each letter. This can range from ultrathin to ultra-black.

- Font width: the width of each letter. This is the widest point of the outermost lines of that letter, irrespective of the thickness of each letter.

- Letter spacing (aka tracking): space between the widest points of each character.  This is often applied to an entire word, sentence, or paragraph.

- Kerning: this is the negative space i.e. the "breathing room" between consecutive letters which is often applied to a group of letters. 



Typography Formatting Terms

- Hanging indent: when the first line of a paragraph's leftmost margin is further to the left relative to the margins of the lines that follow.

- Leading (aka line height or line spacing): the negative vertical spaces between lines.

- Ligature: when two or more letters touch to form a single character. Usually used for branding or aesthetic purposes (Example: FedEx). Sometimes also used for linguistic purposes (For example, in French with the oe)

- Gazdook: the decoration or the way of connecting two letters of a ligature.

- Orphan:  a single word or a very short line of text on its own line after a line break.

- Line break: the point in a block of text where one line ends and the next one begins. 

- Paragraph break: the point in a block of text where one paragraph ends and the next one begins. 

Learn Before

Related