95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.
- Web Design Is 95% Typography
Learning about typography has had a huge impact on my approach to building websites and web applications. The quote above makes a lot of sense to me, so much though that I think the first visual design component I recommend tackling in any web development project is typography.
- Font Family
- Font Size
Over the next several articles we will explore the basic building blocks of typography.
Choosing a Font Family
Let’s begin with font family and how to select the right font family for your project.
Tim Brown, the Type Manager for Adobe Typekit, begins projects by reviewing body text to understand the "tone for a piece," followed by markers like headers, "that give it personality and character." His goal:
Write down a general description of the qualities of the message you are trying to convey, and then look for typefaces that embody those qualities.
- Tim Brown quoting Jason Santa Maria in Perfect Typography
The article, "A Brief Primer on Typeface Selection," echoes the same idea:
Read your content to determine the mood it conveys. Describe this mood using a list of adjectives. Find typefaces that you feel are accurately described by these adjectives. Essentially, you want to ensure that your typeface conveys the appropriate feeling.
Create an Adjectives List
What adjectives describe your project?
In creating a list to describe my consultancy ViewThought, I revisited its storyline:
We are a great website design, development and user experience shop. We have tons of experience, have worked with a bunch of different clients who are all happy with our work, and we really care about what we do. We specialize in Ruby on Rails, and we pay special attention to what your users will see. You should hire us! ...or give us a call and learn more.
That is the message, and here are the adjectives that I believe help communicate the qualities and mood of this message:
- Cutting Edge
With a great list of descriptors, it’s a lot easier to be inspired and pick a font family. Most fonts come with a description of why it was created, or what it was trying to embody. Go to font foundries or even better, take a look at the fonts managed by the font services listed here.
I’ve also created a list of inspirational sites and other font choosing resources to help. You can find this list here.
The following presentation "On Web Typography" by Jason Santa Maria's provides excellent advice on picking typefaces (starting at minute 31:45). I’ve transcribed this portion here.
Based on my adjectives list, here are some ideas I had for ViewThought:
When it comes down to it choosing fonts is really a practice in trial and error, and the only real way to get a good feel for them is to try them on. In other words, use them with your own content like I have illustrated above with mine. I ultimately chose
Rooney Web for the body text,
CamingoDos Web for headers and navigation:
Rooney Web – I wanted to use a serif font and Rooney seemed to embody the right combination of serious and fun that I was looking for.
Rooney feels serious yet its rounded shapes and soft curves make for an overall impression of warmth and smoothness.
CamingoDos Web – oftentimes Choosing fonts from the same foundry produces the best combinations. I wanted to use a sans-serif and Rooney Web's brother Rooney Sans Web was nice, but CamingoDos felt right.
CamingoDos Web is tailored for use on websites. The fonts are manually hinted for optimal on-screen reading, providing a good performance across different operating systems and browsers.
As you can see I chose two typefaces rather than one. This is called pairing. Doing so can really up your design game, but it’s also difficult to find a good pair that work together:
You might have already heard this; successful pairing relies on concord, or contrast, but not conflict. That is to say your selected fonts can work well together by sharing certain qualities, or by being completely different from one another. However, font pairs can conflict in a number of ways – being too similar being just one.
- A Beginner’s Guide to Pairing Fonts
You don’t have to choose two different fonts for your website, but if you do, take a look at this list for inspiration. Here, designers with substantial typographic knowledge and experience have paired fonts, described their personalities or feel, and provide samples to review and choose from.
A few Google Web Fonts pairing ideas derived from the reference articles are already implemented in the foundation markup and CSS boilerplate code:
Use a Font Service
In general, OS’s have a very limited number of default fonts to choose from. If you’re fonts are not installed on your end user’s computer or device, then they will not be available so you will need to serve them.
You can serve fonts directly from your application, but using a font service to deliver fonts is a better idea. Font services eliminate the licensing headaches sometimes encountered with creative works and also provides a content delivery network (CDN) to efficiently serve fonts. Some services are subscription based and others are free. I have listed a few here.
My preferred service is Typekit. They provides an excellent series of articles on implementing Typekit. Another excellent service is Google Web Fonts. Typekit is a paid service, Google Web Fonts on the other hand is a free service. A Beginner’s Guide to Using Google Web Fonts does a decent job of describing how to use it if you go this route.
Define Fallbacks (Font Stacks)
Finally, it's good practice to define fallback fonts. Together your chosen font and its fallbacks are a "font stack". For example:
"rooney-web", Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif
The desired font is
rooney-web, but if it were not available for whatever reason the browser will try to use the next font in the stack, in this example
Georgia, and so forth, until the very last font which is a generic font and the most broadly available across different operating systems.
The idea is that all the fonts in the stack are similar enough to the desired font that the design won't be so far off from what was intended if a font is not available (at least that is the goal).
I’ve compiled a list of font stacks here to help you find a font stack for your project. For a list of preinstalled fonts checkout:
I’ve only just barely brushed the surface of typography, but enough for you to choose a font for your project. A well-chosen font can really enhance a project. It’s the difference between a well-designed website and a mediocre presentation. You don’t have to be a designer to do a good job in choosing, just follow the guidelines I have provided here.
In the next few articles we will explore typography further, and as an FYI, if you really want to learn about typography the most highly acclaimed resource out there that I am aware of is:
Want to know when the next article is published? Subscribe here. Thanks for reading!