Hot damn! Our biggest ever sale is almost over. Ends Sunday. Save up to 50% now.

Twenty Twelve: Typography

By team on May 17, 2012

Screenshot of the Open Sans font in Twenty Twelve

As you may have read earlier, I’m currently working on the the new WordPress default theme, Twenty Twelve. One of the early Twenty Twelve discussions was about typography. I felt it was important we use a web font. Not only would a web font look great, it would also show WordPress is pushing forward to adopt new web development technologies. The font would obviously be open source, so we had 2 options:

  1. Use the free open-source Google Web Fonts directory to load the font directly through Google’s external API.

  2. Package it with the theme and use CSS to load the font. We would have to ensure a GPLv2 compatible license in this case (more on this later).

In the end, it was important to choose a great looking font with extensive language support. Whether we included it in the theme or not was a secondary concern.

Open Sans

After some research Open Sans made it’s way to the top of the list. Open Sans is a clean and readable sans-serif that includes a beefy character set with fantastic language support. It would also match up well with the clean and simple look I was trying to achieve with Twenty Twelve.

License concerns

Open Sans is licensed under version 2 of the Apache License. Believe it or not, Apache Version 2 is not compatible with GPLv2, therefore packaging it with the theme wasn’t an option. All code that ships with WordPress must be GPLv2 compatible. Our only choice was to use Google Web Fonts. This sidestepped the problem — we would load the font directly from Google’s API, instead of distributing it with the theme itself.

A few weeks later, a discussion popped up on the Twenty Twelve Trac ticket. Some contributers were concerned about using an Apache licensed font with the theme. This prompted a chat between Matt, Lance, Nacin, and myself. There was some disagreement, and we needed an official decision on the issue. In the end, Matt didn’t see linking to an Apache licensed font through an API as a negative, and felt it was a more appropriate and efficient license for fonts anyway. Open Sans through Google Web Fonts was a go!

Default settings

I had some concerns about the default web font settings. What about non-western languages? Those users would be out of luck if we had Open Sans turned on by default. They would see a bunch of empty space and garbled characters when they switched to Twenty Twelve. Not a very accessible or friendly experience.

So what to do? I proposed turning Open Sans off by default, and allowing users to switch it back on from the Theme Options menu. Nacin jumped in and suggested we use language detection to turn the font on or off. Non-supported languages would have the font turned off by default and supported languages would have it turned on. Nacin’s idea represented the best of both worlds — awesome!

What do you think?

I’m extremely happy with how Open Sans has performed so far with Twenty Twelve, and I’m glad we were able to resolve the license and language issues. WordPress will now help push web standards forward by including a great looking web font in Twenty Twelve, without sacrificing accessibility and usability. What do you think about the font and the decisions that were made?

Enjoy this post? Read more like it in From the workshop.

Post a comment

Basic HTML is allowed. Your email address will not be published.

Subscribe to this comment feed via RSS

“My website is absolutely gorgeous, and the support service is literally unlike any other I’ve experienced, probably in my whole life, in any industry!”

Jacqueline Smith

“I’m blown away by the generous and effective support provided. Super accessible, laid back, and knowledgeable!”

Micah Davisyes
Discover our WordPress Page Builder Now

(Over 600 small businesses got started last week)