Before you choose a cool font, keep this in mind.
My Sans fonts tips
For numbers
Serif Fonts
Sans Serif Fonts
Display Fonts
Proportional Fonts
Source: https://blog.graphiq.com/finding-the-best-free-fonts-for-numbers-25c54002a895
For small text
- labels, sources, callouts
Good visualizations help the user understand complicated data without allowing the design to get in the way.
When choosing a font for data visualization, opt for a typeface with a large x-height.
When choosing a font for your visualization, look to use a font with a stable, open counter.
While some serif fonts are passable at smaller sizes, if you are unsure, then skip them and opt to use a sans-serif typeface.
Because that little bit of awkward space requires your brain to work to understand that this is a continuous string of numbers. We can eliminate that work by choosing a typeface with tabular numbers and even spacing.
Good Fonts
- Lato is a good data visualization typeface because it is highly readable at small sizes.
- Assistant is a crisp, modern typeface that works well in design because of its simple, open aesthetic, and rhythmic letter sizing.
- PT Sans — a strong, rounded typeface with a generous x-height. PT Sans and PT Serif were developed for the Russian alphabet as a comprehensive font to encourage printing and reading in the national language. The family also includes a PT Sans Caption style which was designed specifically for small type and works well for long notes or sources sections.
- Noto Sans, a clean font, with slightly condensed letter spacing, compensated by clear circular counters and a generous x height. Noto Sans is part of a larger family of Noto typefaces. There are over 100 different typefaces in the group, with the purpose of providing “visual harmony” across multiple languages and script forms. This makes Noto Sans a particularly good option for multilingual visualizations.
- Merriweather is a slightly bubbly font with thick and thin stroke widths of medium contrast, making it suitable for headings, but not for small text.
- Source Sans Pro is used for the content. Source Sans Pro was specifically designed for user interfaces.
- Lora is a Google font optimized for screen, but also works well for print projects.
- Libre Franklin, a Franklin-based typeface, meaning it belongs to a group of fonts inspired by the original Franklin Gothic typeface designed around 1910.
## Typographic Design Systems
- One font/One size
- The “One font/One size” typographic system uses a single typeface with a continuous set size, resulting in a universal visual texture.
- One font / Big header
- The “One font/Big header” typographic system uses a single font with a header that is larger and bolder than the rest of the content.
- Two fonts / Heavy & light
- The “Two fonts/Heavy & light” typographic system uses two sans-serif fonts with complementary x-heights and letter spacing. The header is set to a heavy weight, the content is set to a light weight.
- One serif / One sans-serif
- The “One serif/One sans-serif” system uses two fonts — one serif and one sans-serif.
- Serif for reading/Sans-serif for labeling
- With the “Serif for reading/Sans-serif for labeling” system, the header, sub-header, and any article copy is should be set to a serif typeface. For maximum readability, keep line length to less than 60 characters.
Choosing the “right” font for your design determines how well your designs are perceived.
Even if typography itself is only 10% of your overall design, it can still have a major impact on how the design is perceived overall.
Let’s dig a little deeper into fonts and typefaces. Remember, a font is a specific size and style of a typeface.
In the previous article about typography terms, we reviewed typographic terminology and we mentioned that one example of a typeface is Helvetica… The font itself would then be Helvetica italic 10-point.
It follows then that the first part of choosing the right font starts with choosing the right typeface. We’ll cover how to use something called a Pangram to help you choose the right font later in this article.
Source: https://medium.com/nightingale/choosing-a-font-for-your-data-visualization-2ed37afea637
4 Ways To Choose The Right Typeface
1. Use Safe Typefaces
Every designer has some amazingly outlandish typefaces that they use for special occasions. However, 95% of the time you are designing, you’ll use safe and clean typefaces. These safe typefaces are akin to the shoes you wear everyday.
It’s better for a typeface to be clear and legible, rather than so unreadable that it’s distracting from the overall communication goals of the design. If someone has to spend an extra 4 seconds to understand what have written, then they will disregard your design.
Garish Monde is difficult to read. (Photo Credit: Downloadatoz)
The right slide is very easy to read. (Image Credit: FSCONS)
Here are some safe sans-serif typefaces you might start with: Arial, Impact, Lucida Grande, Tahoma, Verdana, and Helvetica.
Here are some safe serif typefaces to start with: Georgia, Palatino, and Times New Roman.
These fonts are likely available to you and will display on the web with little to no issues (they’re what are known as “web safe fonts”).
2. Know 5 Families Of Type
These five classifications of different typefaces are the 20% that are used in 80% of today writing and content.
This is not a comprehensive list of all the available typeface classifications, but it is sure to get you moving toward picking the right typeface.
Geometric Sans-Serif
Geometric Sans is a combination of three different groups (Geometric, Realist, and Grotesk), but there is enough commonality between them to group these as one group for this example.
This type family of sans serif typefaces are based on strict geometric forms. The letters are often uniform in width and focus on a “less is more” aesthetic in their design.
Geometric typefaces are often classified as clear, objective, modern, and universal. On the flipside, they can be said to be cold, impersonal, and boring.
Examples of Geometric/Realist/Grotesk Sans: Helvetica, Univers, Futura, Avant Garde, Akzidenz Grotesk, Franklin Gothic, Gotham.
Humanist Sans-Serif
Humanist Sans typefaces are more clean and modern and derived from handwriting.
These typefaces are designed to be as simple as possible, involving thinner and thinner stroke weights similar to our handwriting.
They are often classified as modern yet human, clear yet empathetic.
Examples of Humanist Sans: Gill Sans, Frutiger, Myriad, Optima, Verdana.
Old Style Serif
Known as the “oldest typefaces”, Old Style is marked by little contrast between thick and thin, and curved letter forms tend to tilt to the left.
These typefaces are often classified as classic, traditional, and readable.
Examples of Old Style: Jenson, Bembo, Palatino, and Garamond.
Transitional and Modern Serifs
Created in the mid 18th century and late 18th century, Traditional and Modern typefaces emerged as an experiment in making letterforms more geometric, sharp, and virtuosic.
Transitional and modern faces are often classified as strong, stylish, and dynamic. They are also said to be too conspicuous and baroque to be classic, and too stodgy to be truly modern.
Examples of transitional typefaces: Times New Roman, Baskerville.
Examples of Modern serifs: Bodoni, Didot.
Slab Serifs
Slab Serif have become more popular in recent years. They have a stroke similar to those of sans faces but with solid rectangular shoes stuck on the end. Slab Serifs are unusual in the world of typography; designer Dan Mayer says: “Slab Serifs are an outlier in the sense that they convey very specific — and yet often quite contradictory — associations: sometimes the thinker, sometimes the tough guy; sometimes the bully, sometimes the nerd; sometimes the urban sophisticate, sometimes the cowboy.”
Slab Serif can be known as urban or rural, generally standing out in the wrong surroundings but fitting right in in the right places.
Examples of Slab Serifs: Clarendon, Rockwell, Courier, Lubalin Graph, Archer.
3. When Selecting Two Fonts, Use Decisive Contrast
Much of the time one typeface is all you will need to use in your designs. However, there are certain occasions where you’ll want to use multiple typefaces to make parts of your design stand out.
When you choose to use multiple typefaces, make sure the typefaces you’re using have large contrasting differences.
Now, we’re not saying any two typefaces can work well together, but there are some that work quite nicely in tandem.
There is a good rule of thumb at work here that you can use in your designs. If the two typefaces have one thing in common but are otherwise vastly different, this helps determine if the two might look elegant when paired together:
- If the two have a similar x-height or stroke weight
- If the two are from the same period of time
- If the two are by the same designer
Take a look at typography techniques here and Type Genius to dig further into combining fonts.
4. Use “Wild” Typefaces Sparingly
Let’s go back to the analogy of how your shoes and clothes clothes pair well together. If we have a wild belt - one that has quite a bit of personality - it does more for the outfit than wearing an entire outfit of bright pink.
Let’s dive even deeper—an amazing belt buckle on a well dressed suit can create subtle contrast.
If the suit is too wild, this can create a polarizing negative impression:
The same can be said for typefaces like on a Thai Menu:
All wild typeface.
Wild typeface mixed with neutral typeface.
The little bit of wild typeface in title and headers of the bottom menu fits right in with the cleaner, more neutral, readable font in the body.
5. Bonus Rule for Choosing Fonts: ‘There Are No Rules’
These four principles are guidelines to help you pick the right typeface.
As you build your own skills in selecting typefaces, you’ll develop your own rules about choosing type. There are no “wrong” or “right answers” as many would like you to believe.
It’s up to you to determine how you want the viewer to feel when they look at your designs.
This is how typography invisibly enhances your design—the choices you make can reduce friction and even bring delight to your designs.