Fonts for Data Visualizations

Professor Cairo has a voracious appetite for reading and he thankfully likes to share books and articles. One article he included, Finding the Best Free Fonts for Numbers was an interesting read as I have a thing for type and fonts. I get picky and can spend probably too much time selecting a font that I feel works well. I’ve also taught typography classes so while I am not a type expert, I am knowledgeable about typography.

In general, I agree with the list Samantha recommends. Not everyone can afford some of the best designed super families out in the wild. I also agree that free fonts aren’t always the best choice. Most are poorly designed and more importantly were probably created for the most generic of applications. So, again, she has compiled a thoughtful list.

Old Standard TT

I disagree about one typeface: Old Standard TT.

I do not think it would function well for data visualizations where type sizes are below possibly 14 points and that might be generous. Why? Old Standard TT can be quite interesting at large sizes; however, at smaller sizes, it starts to fall apart.

I need reading glasses to be able to read Old Standard TT at 14 pts. Even with it set in black on a white background (great contrast between figure and ground), it is quite challenging to read. Imagine if it is set in a color also on a colored background. Personally, if it is hard to read, I won’t. In my mind, that is the worst possible user experience.

My recommendation: If you want to use Old Standard TT, use it for display copy—headlines, subheads, or instances where you want to set a numeral in a particularly large size.

Oldstyle or Lining

Samantha’s recommendation for lining and tabular is a good base; however, this should not be a hard and fast rule. Why? Because there is a purpose for Oldstyle figures. Oldstyle figures work well when used with running text. They don’t interrupt the flow of reading because they share the same x-height as their lowercase character companions. Lining numbers in contrast stand out when sharing the same baseline as lowercase characters in running text.

Oldstyle figures can be used for data visualizations especially in places where numbers share the same baseline as text. For example, annotations. They are also readable in tables and other data visualizations purposes. Oldstyle figures can also be tabular so please, don’t rule out a typeface because they have oldstyle figures.

OpenType and Investing in Typefaces

With OpenType fonts, you get the best of all worlds, usually. For figures, OpenType give you the flexibility of setting figures in tabular and lining and tabular and oldstyle. Usually a designer can also set type as proportional as well. This is one of the perks of OpenType fonts and investing in building a library of high-quality typefaces. (Use a font manager such as Extensis’s Suitcase Fusion). Many free fonts are not OpenType.

My Favorite Fonts for Data Visualizations So Far…

Below is a short list of sans serif typefaces I use over and over again. Many are large families so you also have a choice of many styles: thin, light, italic, regular, bold, etc.

Benton Sans

Fira Sans

Gotham

Whitney

Interstate

Poynter Gothic Text

PT Sans

Nimbus Sans

Myriad

News Gothic

FF Meta

Soleil

If you have an Adobe CC subscription …

Many of the fonts above are available through fonts.adobe.com (formerly TypeKit). It’s one of the perks of having an Adobe Creative Cloud subscription. If you are interested in others, try a search for sans serif with a large x-height. (A larger x-height usually means greater readability at smaller sizes.)

If you want to learn more about typography, I highly recommend Ellen Lupton’s website and book, Thinking with Type. I also have plenty of books which I’ll try to share soon. The great part about owning high-quality typefaces: you don’t need many. This is what makes OpenType super families so appealing.

Data Illustrator: What I Love and Hate

Early in the semester, Professor Cairo introduced us to Data Illustrator, an open source tool that was designed to create data visualizations and infographics without programming.

My first graphic using Data Illustrator:

This was for a class exercise. I used data already provided by Data Illustrator so I could get a feel for how to use it. I imported it into Adobe Illustrator to clean it up and add copy.

My second graphic using Data Illustrator:

This is a heatmap I made to include in my final project for the Intro to Data Visualization course. I made it in DI and then exported as an SVG to modify using Adobe Illustrator. I love how this turned out.

What I Love and Hate

Love: The seeming flexibility.

Even though I don’t really feel anywhere near comfortable using DI, I can see from the examples that it is very flexible in terms of the type of visualizations that can be created. Plus, I was able to create the heat map above with Data Illustrator which I could not figure out how to do with any other tool in my student tool kit.

Hate: The hurdles of learning its flexibility

I am a beginner with visualization and Data Illustrator but as someone who is learning about user research and user experience, the UX could be greatly improved for novice users. I have no idea how experts in data viz feel about Data Illustrator but from a novice point-of-view the usability — efficiency, effectiveness, and satisfaction — is low.

Love: Downloading the files as SVG

The ability to download SVG files and modify them in Illustrator is very cool. The files are relatively clean (compared to Flourish) and works great.

Hate: Saving projects

Ok, it would be nice if I could save the project name within Data Illustrator rather than having to rename an Untitled DI file after I it downloads to my desktop. This is just so counter-intuitive. Still, at least when you re-open a saved DI file, the web-based tool actually recognizes it and it works so you can continue to modify as desired.

I wish and hope…

A usability test will be done if not already with Data Illustrator to improve it. It think it has a lot of promise but from a usability standpoint, it really needs refinement. Some user testing and UI improvements and improvements to the Help and Documentation especially for novice uses would help make Data Illustrator really shine.

Maps, Maps, Maps …

So … where do I start? I love maps! As strange as this may sound, I had forgotten how much I love them. It took an Intro to Data Visualization course to remind me or renew that spark and I’m so glad.

Even with my love for maps, I never really studied them; looked closely or heck, even questioned them. For me, it was about where I had traveled, where I wanted to go, how I would get from point A to point B. I used to be the navigator for my dad when our family would take road trips. I loved having that responsibility; knowing where we are, how we will reach our destination … Big girl stuff.

But I guess with GPS, maps aren’t so much a presence in our daily lives and perhaps that is how I forgot my love of maps?

Learning and looking at maps through a different lens

These are just a few of the maps I’ve been drawn to of late. The first of measles in the United States in 2019. It’s nothing ground-breaking but it sure is astonishing as it is attractive which is an odd thing to say about a map that presents disease.

But, I think that is what is most interesting about being human. What catches our eye can be a twist on the expected? I’m not sure if I’m explaining that well but that’s how it feels for now.

Source: NYTimes.com

The colors are striking. The reds are a direct link to measles (I have no idea if that was intentional but that’s what it seems to be) and set off against the neutral grays and creams, they pop out.

Having lived in the Pacific Northwest, I’m a bit shocked that there are so many cases in Southern Washington and Portland, Oregon. But then again, maybe not. I’m not sure what the connection is but it would be interesting to investigate more.

Source: The Economist

This map above scares me but also comforts me in that currently I live in Syracuse, New York (Miami is temporary as far as I know). I worry about my parents who live in the South and this just brings to mind a ton of questions. What are states doing to prepare for this warmth? It is going to have such an impact on daily life. Bandaids here and there are not going to help though it may make people feel better … I’m no expert on what impacts are but the first thing that comes to mind from just reading the news is water and disease. Everything else from there is like a row of dominoes.

Oh but what I also love about the map above is the pairing with the bar graph of income! If I’m reading this correctly, the intensity of the orange bars are connected to the colors of the map, too. Scary and depressing. Will those with less survive? What will we do as a country to help people who don’t have the resources to escape climate change?

Source: Morphocode

This last map … It’s a map of that shows the age of buildings in Lower Manhattan. The project is called Urban Layers. I looked up one building where my husband and I stay when we visit the City and I definitely want to explore this more because I wonder how the building of buildings is connected in terms of where they are located in Manhattan.

One thing I sort of wished for or thought of was when hovering over the different colors or buildings, it would be cool to read more about them, especially the historic buildings. I guess I’m wishing for just a bit more depth! Check it out.

Plans to learn more about Maps

My summer plans include a lot of learning; mainly code such as R and Javascript. Perhaps I can dabble in some mapping tools as well to get my feet wet. I know that for my final year of graduate school a GIS class is planned but in the meantime, I want to study them more. Maybe there’s a way to practice building maps using R? Or perhaps D3.js?

Two Data Visualizations about Women

So I can’t remember how I arrived at Scientific American and these two data visualizations but upon first impression, I really like them.

Why?

  • Both are about topics and issues about and related to women. I am a woman, therefore I am partial to stories about anything that could affect me or enlighten me about what it is to be a woman.
  • At first glance, they are beautiful. Not in that omg, wow, cool sense but in that I’m looking out on a lake and watching the sunrise; those moments before the sunrises. Slow, quietly beautiful. I think what I love most is the contrast between the organic, fluid shapes and the harder edges; the natural and scientific for lack of better terms. Hmm
  • In diving in more, the content is rich, helpful and fascinating. I took a physiology and anatomy class so more medical jargon of The Menstrual Cycle is familiar to me. The Maternal Mortality visualization was just downright shocking. This was a visualization from 2009 and maternal mortality has been in the news quite a bit lately but this visualization, I think, hits hard about the U.S. Seriously, flat-out sad.

I need to subscribe to Scientific American. If looking at and studying more visualizations is key to learning to be a better data visualization designer, then I think this magazine would be helpful. I’m also thinking that I want to collect visualizations about women.