Fonts
Fonts and typography are essential to how we communicate with our users. When text is used effectively, it grabs attention, evokes emotion, and emphasizes tone and voice.
Note: Starting with the Dashboard Extensions API v1.7 library, and supported with Tableau 2021.4 or later, you can apply workbook formatting on the HTML elements in your extension. For more information, see Add Tableau Workbook Formatting.
In this section
Typography Principles
Highlight important information through hierarchy. Let users know what content is important by having a simple and clear hierarchy of type. This is achievable through variations in font size, weight, color and spacing.
Less is more. Fewer words and less variation in hierarchy reduces confusion by allowing users to focus their attention on only the most necessary content.
Limit font and weight variations. Mixing too many different fonts and font weights can confuse the type hierarchy. In fonts, mediums and bolds should be used sparingly to indicate headers or important content.
Fonts
We recommend that you use a sans serif font family in your extension. Here, we provide guidance and options that are compatible with Tableau dashboards. Using these exact fonts is optional.
Benton Sans
Benton Sans Book is the default font for the Tableau UI elements. To learn more about Tableau font colors, see Color.
Other weight variations of Benton Sans should be used infrequently. For example, Benton Sans Medium is typically used for section titles in dialogs. Benton Sans Light and Book Italic are used in more specific cases like lightweight captions and should not be overused.
Font Size
For Tableau Desktop, the default size for Benton Sans on Mac OS X is 12pt. The default size for Benton Sans on Windows is 10pt.
You may use Benton Sans if you want your extension to look and feel natural to Tableau. Tableau is a licensed commercial user of Benton Sans–so if there are potential conflicts or liabilities with using Benton Sans due to your company branding, we have listed several alternative fonts below.
Alternative Fonts
Using some of these common fonts that are likely available on your user’s machine can improve performance and load times for your extension. Here are some recommendations for common sans serif font families.
- Helvetica
- Arial
- Open Sans
- Segoe UI (Windows system font)
- San Francisco (Mac OS X system font)
- Helvetica Neue, Lucida Grande (older Max OS X)
Font Size
It is important to compensate for OS and device specific DPI and font rendering. Since these are alternative fonts that aren’t directly used in Tableau, you may choose to use different font sizes and weights based on your extension’s design needs.