Skip to main content
Which fonts to use for your charts and tables

Which fonts to use for your charts and tables

…and how to customize them. How should the text appear in your data visualizations? The possibilities are endless: There are millions of typefaces out there (Arial, Times New Roman, Lato, …) belonging to different categories (serif, sans-serif, condensed, wide, …). Many of these typefaces come in different fonts (thin, bold, …). And then they are so many extra ways of adjusting them (uppercase, size, color, …). The short answer: When in doubt, set your text in a font that’s easy to read. Easy to read is everything that readers are used to. On the web, that means sans-serif, neither overly narrow nor wide, regular (instead of bold or thin) text set in sentence case, in a size that’s big enough to read, and in black or almost black. This article explains all these options — and shows how ignoring this advice can set your visualization apart from others. Let’s start: Choosing a font Use sans-serif typefaces. Serif typefaces (like Times New Roman or Georgia) bring you into a reading flow — that’s why they’re great for setting long texts like novels or newspaper articles. For data visualizations, sans-serif (”without serifs”) typefaces are most often the better choice. They look cleaner and are often easier to skim than serif fonts, especially when it comes to numbers. Our free Datawrapper visualizations, for example, use the sans-serif typeface Roboto. Changing the fonts – including size, placement, color, etc. – in Datawrapper is possible with a custom theme. Most data visualizations use sans-serif typefaces — like all charts from The Economist and Bloomberg: The Economist, 2022. Fonts: Econ Sans and Econ Sans Condensed. The Economist uses different styles from the same commissioned typeface for all text in their visualizations. Bloomberg, 2022. Font: Neue Haas Grotesk. Bloomberg’s typeface is based on Helvetica but has a slightly straighter appearance, e.g. in its R and a. While serif typefaces are rare in data vis, they do exist. Serifs look a bit more classy, traditional, and serious/professional than sans-serifs and can set a visualization apart from others out there. Most often, serifs are only used for visualization headlines: The Guardian, 2022. Fonts: Guardian Headline and Guardian Text Sans. The Guardian uses the same commissioned serif font for chart titles as they use for article titles. Our World in Data, 2019. Fonts: Playfair Display and Lato. “Display” means the font is only suitable at large sizes, like in titles. (The font name doesn’t seem to be an homage to data vis pioneer William Playfair.) The Washington Post, 2022. Fonts: Postoni and Franklin. Like Playfair, Postoni is a Display font: It has a high contrast of thick and thin strokes (just look at that “U” in “Ukraine”) and should therefore only be used at large sizes, like here. Pew Research, 2022. Fonts: Georgia Italic and Franklin Gothic. Unusual: Pew Research uses sans-serifs everywhere except in the description. But some data vis designers use serifs for labels and numbers, too: Federica Fragapane, 2022. Most of Federica’s data visualizations use serif fonts. They help set an almost “map-explorative” and literary vibe.  » Read More

Like to keep reading?

This article first appeared on blog.datawrapper.de. If you'd like to continue this story, follow the white rabbit.

View Full Article
Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

#Dev
How to Channel a Daily Vision into a 20-Year Photography Career

How to Channel a Daily Vision into a 20-Year Photography Career

#Silicon Valley
WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

#Web Design
Fresh For Designers

Is the Dynamic Island plain stupid or the next revolutionary UX pattern?

#All

Let's talk about Web Design

The term "web design" describes the layout of websites that are seen online. Instead of software development, it typically refers to the user experience components of website development. The primary focus of web design used to be creating websites for desktop browsers, but from the middle of the 2010s, designing for mobile and tablet browsers has gained significance.

What is a webdesigner?

A web designer is responsible for a website's look, feel, and occasionally even content. For instance, appearance refers to the colors, text, and images utilized. Information's organization and categorization are referred to as its layout. An effective web design is user-friendly, aesthetically pleasing, and appropriate for the target audience and brand of the website. Many websites focus on keeping things simple so that viewers won't be distracted or confused by additional information and functionality. Removing as many potential sources of user annoyance as possible is a crucial factor to take into account because the foundation of a web designer's output is a site that gains and nurtures the trust of the target audience.

Responsive and adaptive design are two of the most popular techniques for creating websites that function well on both desktop and mobile devices. In adaptive design, the website content is fixed in layout sizes that correspond to typical screen sizes, while in responsive design, information moves dynamically based on screen size. A layout that is as consistent as possible across devices is essential to preserving user engagement and trust. Designers must be cautious when giving up control of how their work will appear because responsive design can be challenging in this area. While they might need to diversify their skill set if they are also in charge of the content, they will benefit from having complete control over the final output.

What does a web design worker do?

A web designer is a member of the IT industry who is in charge of planning a website's structure, aesthetic appeal, and usability.

A skilled site designer must possess both technical know-how and creative graphic design abilities. They must be able to envision how a website will seem (its graphical design) and how it will operate (conversion of a design into a working website).

The terms web developer and designer are frequently used interchangeably but erroneously. In order to construct more complex interactions on a website, such as the integration with a database system, a web developer is frequently more likely to be a software developer who works with programming languages.