For your application’s dashboards to tell a clear story, you need to create a visual hierarchy with every design element. This includes fonts. Clean, organized dashboards use a strategic mix of font styles, sizes, and treatments, with the key word being “strategic.” Without a strategy, your font choices will quickly get out of control.
Use these four quick fixes to ensure your fonts—from headers to pop-up windows—are cohesive and consistent:
Fix #1: Limit Typeface, Styles, and Sizes
Like nearly everything in dashboard design, less is more when it comes to fonts. Limit the font typefaces, styles, and sizes, and make sure you’re using them consistently throughout your embedded dashboards and reports.
- Typeface refers to a certain design created by a typographer. For example, Times New Roman, Arial, and Caslon are all different typefaces. Choose no more than a couple of typefaces.
- Size refers to the weight, height, and width of a particular typeface. Limit yourself to three or fewer font sizes
- Style refers to whether the font is bold, italicized, underlined, or even in a particular color.
Fix #2: Consider Text and Background Colors
It’s important to choose text and background colors that complement each other. The goal here is less about adding visual interest and more about improving legibility.
Color adds another dimension to your text, whether for good or bad. For example, using dark text on a dark background will make your application’s dashboard illegible. By the same token, using bright green text on an orange background will look jarring and strain the eye. Follow this rule of thumb for your dashboard colors:
- Use light-colored fonts on darker backgrounds
- Use darker fonts on light backgrounds
Fix #3: Adjust Leading and Kearning
Small adjustments to leading and kerning can vastly improve the legibility and clarity of your dashboard text.
- Leading determines how much space is between vertical lines of text (think of single- and double-spaced documents). Leave enough space so each line is legible, and remember to accommodate for any long descender letters like “g” or “p.” The general
rule is the leading should be 20 percent greater than the font size.
- Kerning determines the amount of space between individual letters horizontally. Always keep spacing proportional and uniform between letters. If your letters are spaced too close together or even too far apart, the text will become difficult to read.
Fix #4: Use Free Tools for Custom Fonts
If you’re not a professional designer, choosing fonts for an embedded dashboard and report can feel like a daunting task. Fortunately, there are plenty of free font libraries available online.
- Font Awesome is a library of dozens of different types of fonts and scalable vector graphic (SVG) icons.
- Google Fonts is an interactive directory of free and hosted app programming interfaces for web fonts. It enables you to customize weights, styles, etc. and then integrate the fonts right into your CSS.
- Font Library helps you pair Google Fonts together if you decide to go with more than one typeface.