Tagged: typography

How I Almost Didn’t Obsess over Typefaces

If you’re a regular reader of this site, something might look a little different.

For the last two years, I’ve been paying for webfonts from Typekit. Around 2010 or so, I noticed that a few sites I read had really nice typefaces. In my mind, they were using sIFR, a method for doing webfonts using Flash. But after looking at the source code of some of those sites, I noticed that they were using Javascript and CSS, two core web technologies, and a service called Typekit. Because they were using these core web technologies, it would be a superior solution to one based on Flash, a resource intensive and proprietary software that famously doesn’t work on iOS devices.

Because I wanted my sites to have nice type too, I subscribed to Typekit’s Personal package. For $25 per year, Typekit allowed me to select from a pool of webfonts and deploy them on two (2) websites. This package came with a limit of 50,000 page views per month, but this site doesn’t get anywhere near that much traffic. It was a great deal for a small and esoteric web operation like this one.

Earlier this week, Typekit announced that they were no longer offering the Personal plan for new customers. Instead, all Personal plan customers would continue to pay $25 per year but would receive all the fonts, not just a selection, and would be able to deploy on an unlimited (∞) number of sites. The only restriction that remains is the 50,000 monthly page views.

This is a big win for me since I now get to use any of Typekits webfonts, including ones that were only available on the $50 yearly plan. One of those fonts that had eluded me was Proxima Nova, among the most popular webfonts on the Internet.

Proximanova banner

As of Wednesday, the body font for this personal site (my “blog”) is Proxima Nova. It replaces Runda, a very nice and distinct font that I will continue to use as the body font on the professional site. The rest of the fonts remain the same: Adelle Sans for headings and Anonymous Pro for when the situation calls for a monospaced font.

And now that I’ve settle on that, I can at last seek out the difference between a font and a typeface. Do you know?

New Web Fonts

For quite some time, I have been using web fonts from TypeKit on this website. Being as miserly as I am, I kept using the free Trial plan that only allowed me to use two fonts on a single website. Since I run another website, I resorted to using two very lovely TypeKit fonts on this blog and using somewhat uglier Google Web Fonts on the other one. I had been tempted to upgrade to a paid plan—the Personal plan offers up to five fonts on two websites—but when Adobe bought TypeKit, paying for a plan was suddenly less urgent.

Since my web traffic has been climbing over the last few months, I decided that I could splurge on the TypeKit Personal plan for both websites. It would allow me to have a larger selection of fonts at my disposal for this site and my professional site.

Here are the fonts I chose and how I am deploying them.

The Professional Site

For two semesters, I had been using Adobe’s "Source Sans Pro," a font that Adobe had released as open source. The font is very versatile and was well suited for both paragraphs and headings. Until yesterday, this site used only this single font.

Starting now, I am using Tablet Gothic Wide by TypeTogether for the headings on the site. The "paragraph" font, which is a bit of a misnomer because I am also using for lists, footers, and certain headings, is Museo Sans by exljbris. I have always liked the look of this font since the Film Society of Lincoln Center began using it for their site. It also makes a nice substitute for the ubiquitous Gotham.

The Personal Site

I am using three fonts on this site. For as long as I can remember, I have been using Depot New Web by Moretype for the headings, and even today, I have yet to tire looking at it. Even with upgrading to the Personal plan, I remain committed to using it. Since it looks so nice on my professional site, I am using Museo Sans for the paragraphs on this site, too. Since I occasionally use monospaced text for code, I have selected Anonymous Pro by Mark Simonson Studio.

Although I really like the way that these fonts look on both sites, I still have the flexibility to tweak the look by selecting a different font. For example, I really like Franklin Gothic but it doesn’t come in a 100 italic weight. I need a native italic for the paragraphs because I italicize a fair amount of text.