The Print Typography & Lettering Awards showcases projects that feature great uses of type by any designer, handlettered work and original typefaces. Enter by Dec. 1 for a chance to be featured in Print.
In the world of design, tasks like pairing typefaces can be more of a challenge than many of us would’ve ever foreseen. Handling type, in it’s most basic forms, is an ever-present effort on behalf of designers. Not to mention working with typography on the web.
In his newly released book, On Web Typography, design icon Jason Santa Maria takes a deep dive into the the technical constraints that plague us and keep us kerning (and yearning). Here, James Pannafino gets up close with Santa Maria on his book, his approach to web typography and his big industry influences.
Jason Santa Maria: On Web Typography
In the introduction of On Web Typography, you reference Charles and Ray Eames’s film Power of Ten, how does design history as a whole effect your approach to Web Typography?
Design is a continuum, so it’s influenced by everything that happens around it as well as everything that’s come before. The practice of typography benefits from this too because we can make use of all the smart decisions made before us and build upon them. So, history not only affects my approach, but it also forms the foundation for it. I adjust for the specifics of the medium, but the underlying guidelines of what makes type look good are still the same.
On Web Typography is available for purchase through www.abookapart.com.
The first chapter of the book discusses “How We Read,” what is one of the most undervalued aspects of how we read in digital environments?
The biggest thing is that as designers we can’t predict what anyone’s reading experience is going to be like. We won’t know what device they are reading on, what kinds of customized settings it may have enabled, how the environmental conditions will affect that device or how fast of a connection it will be able to access. All of those things impact the reading experience heavily, and all we can really do is make smart choices that can weather those situations in a flexible manner.
That, and type size, line-length and line-height. What works for a big screen across the room isn’t the same as what works on a small screen a foot away from your face.
You mention there are no rules in typography and a better approach is to understand the principles and language. What are some principles that can help designers understand how type works?
One of the best things isn’t so much a principle, but a practice. In order to get better with type and understand how it works, you just need to get your hands dirty. You can learn a lot about how type works just by trying things out with real content under real conditions.
Beyond that, just as a matter of course, you’ll start to internalize shortcuts that work most of the time. You develop a gut instinct for things like how big type wants to be, how long a measure should get, or when two typefaces just feel good together. Those actions become second nature, and you find yourself just leaning on them without having to actively think through a process.
Two typefaces that appear to be different sizes despite being set to the same pixel size.
In Chapter 3, you discuss “Evaluating Typefaces,” how important is it to have a proper understanding of the em box when dealing with web typography?
Understanding what the em box is really just means understanding that two fonts at a given size may not always be the same size visually. That’s because the em box is just the available canvas a letter can occupy, but doesn’t actually prescribe the physical size of letters.
This has big implications for working on the web since we can’t guarantee a design will be rendered in the font of our choosing. Luckily, CSS covers that by allowing us to specify a list of fallback fonts to use in the absence of our desired font. We just need to take care that our fallback fonts generally occupy about the same amount of space, or that we’ve taken care to adjust our sizing accordingly.
You talk about quantifiable considerations when choosing and pairing typefaces, which consideration do you think about or use the most and why?
The biggest for me is reusability. Because every font you use on a page is going to end up being another file that has to be requested and downloaded by a reader’s browser, I want to make each one count.
I look for typefaces that can be workhorses, so that I can use them small or big, uppercase or lowercase, and ones that have good numbers, punctuation, and accented characters. This helps to not only create a versatile typographic palette, but a tightly curated one that puts the reader first. I think choosing a font that only has a single use should be the exception rather than the norm.
Some common kinds of grid systems for the web.
What type of compositional approach do you think designers will have to incorporate into their process when they have to deal with interactive environments as small as a watch?
The same approaches should generally apply: try to orchestrate the best conditions you can for reading and cognition. If you know you’re dealing with a device that has a very small screen, everything you put on that screen really needs to count. And the type needs to be as strudy as possible; something legible and effecient that can handle the environment.
Lastly, we both went to the same undergrad school (Kutztown University, PA) for Communication Design, what part of your education do you use in your current professional practice to this day?
Every bit of it. I know that you can learn how to use design tools and programs on your own, but I always tell people that you can’t beat the school environment for learning about design. You’ll learn about tools, but more importantly, you’ll learn how to think. Concepts paired with practice is what separates go
od designers from great ones, and the best place to train your brain is among others. Amongst the critiques and lectures is a concentrated environment that allows you to learn from your own successes and failures, but also those of your classmates too. The biggest thing that stayed with me is that the best design often happens among a team of dedicated and smart people working together, rather than the sole genius toiling away in their studio.
More About Jason Santa Maria
Jason Santa Maria is Senior Designer at Vox Media, author of On Web Typography, co-founder of A Book Apart; faculty at the MFA Interaction Design program at SVA; and founder of Typedia, a shared encyclopedia of typefaces online. Previously, he served as vice president of AIGA/NY and creative director for A List Apart and Typekit. He’s worked for clients such as AIGA, The Chicago Tribune, Housing Works, PBS, The United Nations, and WordPress.
As you dive into using web typography principles with your interactive work, you might be thinking: Am I scoping and pricing this work correctly? Learn how to position your business to attract the right clients with the Interactive Business Bootcamp. You’ll discover how to hook prospects with a great proposal with worksheets, case studies and more.