Note: I’m a graduate student at the University of Miami working on my capstone, a visualization of the Pictures of the Year International Archives. If you’re curious about my journey, here are my posts tagged with capstone.
For me, typography is what can take a design from good to great. Everything I learned, I learned on the job working as a designer at newspapers and magazines where typography can make the difference between happy readers and angry readers (serious). For publications, that means money. For designers, beware the wrath of your boss.
Like all my projects, I take extra time to explore my options. For my capstone, I didn’t want to purchase fonts so I gave myself constraints: use Google fonts or Fonts from Adobe.
Here are few questions I asked myself before selecting typefaces for my capstone:
- What mood or emotions do I want to convey? Modern? Approachable? Techie? Bold? Classy? Edgy?
- Do I want to be consistent with most publishing websites (Sans-serif headlines, serif body text) or do I want to break the mold?
- What are the most readable typefaces available?
- What typeface pair well together? Maybe use one super family?
- Charts often require small sizes. What typefaces are designed to be readable are extra small sizes?
Once I have an idea of what I want to convey, I do a search to see if Google Fonts or Adobe Fonts have added any new typefaces. If nothing comes up, I check out my favorites. I’m the type that, for fun, browses type foundries and makes a wishlist. What’s nice about this is that when I’m under pressure, I’m not starting from scratch. Plus, I’m on numerous email lists so I try to stay on top of all that’s font news.
Classy, Approachable with a bit of Bold
At first, I decided to go bold and setting my type with a variety of sans-serif typefaces to see how it would render on screen. I go to great lengths to get the sizes right for screens so 2.275rem vs 2.125rem makes all the difference to me. Below are just a few of the choices I explored.
I eventually went with classy, and decided to set type that is more consistent with publishing websites. Bold, sans-serif headlines with a warm, friendly serif typeface for the body text. I decided to go with FF Real by Erik Spiekermann and Ralph du Carrois, below. The weight is perfect as are the shapes of the individual characters and the space between each character. It’s solid, crisp, modern, friendly. So far, loving it.
Typeface for charts
For the charts in my project, I wanted to go with a monospace typeface for readability at super small sizes. It’s amazing the number of choices available now for monospace. Some are quite elegant. Plus, there was a quality about them that reminded me of the type etched into cameras before digital.
Body Text
I’m deciding between Droid Sans Mono and PT Mono (above) for my charts and currently going back and forth between using FF Real Text or a serif typeface such as Merriweather, FF Tisa or FF Scala. What’s nice about CSS is that trying all of them out will be fast.
There’s more to explore with type and I’ll be excited when I get to that stage of refinement, my favorite part!