- 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. 

Typography Terms - Paragraphs

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.

Text Weight for Charts

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.

Arizona State University

University of Michigan - Ann Arbor

Google

Data visualizations use custom styles and shapes to make data easier to understand at a glance, in ways that suit the user’s needs and context.

Charts can benefit from customizing the following:

- Graphical elements
- Typography
- Iconography
- Axes and labels
- Legends and annotations

Style in Data Visualization 


Visual encoding is the process of translating data into visual form. Unique graphical attributes can be applied to both quantitative data (such as temperature, price, or speed) and qualitative data (such as categories, flavors, or expressions).

These attributes include:

- Shape
- Color
- Size
- Area
- Volume
- Length
- Angle
- Position
- Direction
- Density

Styling Different Types of Data

Multiple visual treatments can be applied to more than one aspect of a data point. 
- For example, a bar color can represent a category
- Bar’s length can express a value (like population size)

Expressing Multiple Attributes in Data

Charts can use shapes to display data in a range of ways.
-  A shape can be styled as playful and curvilinear, or precise and high-fidelity, among other ways in between.

Shape in Data


Color can be used to differentiate chart data in four primary ways:

- Distinguishing categories from one another
- Representing quantity
- Highlighting specific data
- Expressing meaning

Color in Data 

Iconography can represent different types of data in a chart and improve a chart’s overall usability.

Iconography can be used for:

- Categorical data to different groups or categories
- UI controls and actions, such as filter, zoom, save, and download
- States, such as errors, no data, completed states, and danger
- When placing icons in a chart, it’s recommended to use universally recognizable symbols, particularly when representing actions or states, such as: save, download, completed, error, and danger.

Iconography in Data

Chart lines can express qualities about data, such as hierarchy, highlights, and comparisons but line styles can be styled in different ways, such as using dashes or varied opacities.

Lines can be applied to specific elements, including:

- Annotations
- Forecasting elements
- Comparative tools
- Confidence intervals
- Anomalies

Line and Chart Lines in Data 

Legends and annotations describe a chart’s information. 

Annotations should highlight:
- Data points
- Data outliers
- Noteworthy content

Legends and Annotation

Charts displayed on wearables (or other small screens) should be a simplified version of the mobile or desktop chart. Careful to not make it scrollable.

Small Displays in Charts 

Data Visualization References 

Labeled axes in a chart indicate the scale and scope of the displayed data. For example, line charts display a range of values along both horizontal and vertical labeled axes to provide context for the data points.

Learn Before

Related

Learn After