Already a customer? Please sign in.

Twenty Twelve: Typography

by Drew Strojny on May 17, 2012 / 12 comments

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.

12 Comments

  1. johanlm

    I have stopped having opinions about your themes, looks and projects. There’s no need, I havn’t been disapointed, let down or wanted to alter even a tiny thing.
    So …
    Less typing, more coding. ;)

  2. Foxinni

    Is this the official Twenty Twelve you are working on? And was there a ‘deadline’ for it’s release?

  3. Drew Strojny

    johanlm: Thanks! I’ll get to it :-)

    Foxinni: Yes, this is the official Twenty Twelve. We are shooting for WordPress 3.5.

    Paul: That would be a question for Nacin. It hasn’t been implemented yet, and I’m honestly not sure how it will work.

  4. Steven Gliebe

    I’m happy that you chose Open Sans. IMO, it’s the cleanest, most readable and attractive sans-serif font for body text.

    I’d rather it be packaged but since that’s not possible Google Web Fonts is fine since the font is optional.

    Thanks for the inside peek.

  5. Colin Jenkins

    I’d keep it active and keep testing – (just got youtube videos responsive) – except for IE8 – 2012 not really IE8 friendly yet… :)

  6. Apna Jahanian

    Many people customize this theme and I also want to do this, would please refer me to any tutorials to customize in my way?

  7. Drew Strojny

    Hi Apna, we don’t have any specific tutorials for Twenty Twelve yet, but I’m sure some will pop up around the web when the theme is officially packaged with WordPress.

Comments are closed.