Note: Cristy Miller, Tableau’s director of visual design, contributed to this piece.

Update: Tableau 10 is here! Download now to try out the feature outlined below.

When you think of data visualization, you might think of bars, lines, or shapes; they are the beating heart of interactive vizzes. Visual features like position, color, shape, and size create meaning we understand at a glance.

However, right alongside those classic, visual elements we find text—numbers, short labels, and runs of prose—to add context of quantity and story. This text is what takes our rapid, visual comprehension of data and connects it with meaning.

Last January, we decided it was time to move beyond the limited set of faces available to most users. While Helvetica is a beautiful, modern typeface, it was designed for large type and signage. In contrast, data visualization includes small type, set next to interactive visual elements, and often in strange, curvilinear places like meandering labels on a rural lane.

We knew it was time to give data visualization its own typeface. Without having to think about it, our users should create legible, meaningful text that informs and expands on the visual expression of their data.

Like with the new color palettes in Tableau 10, we wanted to go all-in to create the best typeface possible. This led us to partner with Tobias Frere-Jones, a world-class designer with over 700 typefaces to his name.

His work is part of the Museum of Modern Art’s permanent collection, spanning from the tiny type of Retina on the Wall Street Journal’s stock pages to his take on US highway signs in Interstate. We also adopted his Benton Sans fonts in the updated Tableau 10 user interface.

We asked Tobias to create a new classic. We wanted to mirror the elegance of typefaces like News Gothic and Frutiger while addressing the challenging digital landscape that spans from high-definition phone displays to conference room projectors.

We also had to look beyond the typical type environments, where text is set in static horizontal lines on an even background. With high densities, multiple layers of information, and subtle colors, a viz can overwhelm most conventional typefaces.

The outermost shape of each word has been made as strong as possible to stay coherent amidst strong visual activity. Letters like L, T, and Y are narrower than convention would suggest, to avoid introducing gaps that distract the eye and undermine continuity.

Of course, the horizontal spacing and kerning between pairs of letters has been carefully tuned. For example, a lowercase a will tuck itself gracefully under a capital T, and text gracefully arcs to follow this road in Paris:

Expressiveness is also important with text, so instead of relying on just two font weights, Frere-Jones Type crafted a range of six weights from light to bold. Important information can come to the foreground while letting background information stay where it belongs, and your text can take advantage of the rich subtleties of modern displays.

Regardless of the weight of the font, each character maintains the same width across the weights. So, for example, in a text table, columns of numbers will line up regardless of their weights.

Text can also be a visual part of the story being told. Tableau users take advantage of a rich palette of symbols that convey scientific, statistical, financial, and other data. There are dozens of symbols across many different domains, including math, global currencies, pointers, bullets, fractions, and more.

Data knows no boundaries, so in addition to a full set of diacritical marks to support Latin languages, the complete Cyrillic and Greek alphabets are supported as well. While the Tableau fonts do not support other scripts, like those of East Asian languages, all our products continue to have rich Unicode and locale support.

Finally, to make distribution of this beautiful type easy, we’ve made it part of our full product line, including Tableau Desktop, Tableau Server, Tableau Online, Tableau Public, and our mobile applications. We've also carefully tuned the size of the fonts and optimized them to download to devices and browsers while other processing is happening, so you can use this typeface with minimal impact to page-load times and mobile bandwidth.

The Tableau typeface is just the next step on our journey with text in visualization. We hope to expand the palette of text expressiveness in Tableau by giving access to subtler features of type, like tuning our text rendering on maps to reduce gaps further and to use variable-width digits in runs of prose. We look forward to seeing what beautiful things you build with the new fonts.

Learn More about Tableau 10

Tableau 10 includes a brand new look and feel, and a host of new features to help you prep, analyze, and share your insights even faster. Check out our Coming Soon page for details.

Você também pode gostar de...

Comentários

I'm glad they finally did this and I genuinely like it. Having their own font that is well thought out for the application makes a bigger impact on the readability than most people realize. Very nicely done!

Thanks, Toby! We spent a lot of time looking at the type on a huge array of displays, from washed out conference room projectors to bright, high-def laptops. It felt great to see that readability coming through as the colors and forms came together. I hope you get great mileage out of the fonts.

I like the new font, but there doesn't seem to be an italic version. (When I set the font to italic, it just slants the letter - doesn't actually change to italic.) Is this true, or am I just missing something?

Stacy, you're spot on. Oblique is not the same as italic. We're getting the italic ready to go now, and we'll add it to the products as soon as it's done.

I've been using Tobias Frere-Jones' new Tableau fonts with great joy. They are excellent! And thank you Tableau for spending the time/money to engage his creativity. I have one question, and one comment.

Question: Could you please have Tobias Frere-Jones write a short blog on how he envisioned these new fonts would/should be used. I know the Tableau defaults give us a hint, but I'd very much like to hear from him on his design concept for the use of these six new fonts.

Comment: The percent sign overhangs the numbers too much. Making very small font sizes difficult to read.

Cheers,

--Shawn

Shawn, I'm glad you're enjoying the fonts, literally with joy. Thanks for the compliment, and I'll make sure Tobias sees what you wrote, too. I'll see if I can get Tobias to write up something about the usage he envisioned for the font—that's a great idea!

When you say the percent sign overhangs too much, do you mean the horizontal space between the number and percent sign, or something else?

Thanks for the reply Jeff. Yes the horizontal space between the last digit and the percent symbol. At small (8 pt.) size on high-rez monitor they are difficult to read. And adding a full space between them is too much. I think if you just kern them apart a bit it will help.

Are these fonts available for use outside of Tableau? If so, how does one obtain them?

Yes--this is important. I've exported a graphic to PDF for editing in Adobe Illustrator, and the Tableau fonts aren't found on my system. I'll try to find the original Benton (?) fonts as a substitute, but it would be best to see the Tableau fonts on the system. I'm willing to pay for them if necessary!

Anybody know where to find a symbol map for this font? And if it includes a copyright symbol? Or which key combo it is? Thx

For most fonts, you can use the built-in viewers provided with Mac OS or Windows to get to these things. For Mac OS, go to System Preferences » Keyboard » Keyboard tab and check Show Keyboard, Emoji & Symbols Viewers in menu bar. That will add a little flag next to your system clock from which you can open those viewers. (The Keyboard Viewer shows that Mac OS makes a copyright symbol by pressing Option-G, for example. Or the Emoji & Symbols Viewer will "type" characters you double-click in that window.)

For Windows, run the Character Map application. You can use this app to "type" a character or set of character in the window, then copy and paste them elsewhere. Also, when you select a character, a short message in the bottom right corner of the app window shows the key combination that will make it. (Well, sort of. For ©, it shows "Alt+0169", which means "press and hold Alt, type 0, 1, 6, 9 on the number pad, then release Alt".)

Yes, the copyright symbol is in the Tableau font.

All that being said, you can't use those utilities to show the contents of the Tableau font, because we don't have a license to install the font for use in other applications. While we commissioned the production of the font and got to help pick its name, Frere-Jones Type still owns the intellectual property of the font software. This is standard practice for digital typefaces, where the creator or their assignee retains the rights.

SO...
https://public.tableau.com/views/TableauTypefaceCharacters/CharacterMap?...

That shows all the available characters. Once you know they are there, you can use the system OS tools to find the way to type those characters, regardless of the font they're in.


Comentar

Assine nosso blog