Share this:

Typekit vs. @font-face: @Font-face Offers More Choices, Better Pricing

March 17, 2011 | Branding, Design Trends, Web Design

For years, any experienced web designer or developer relied on only a handful of web-safe fonts. These few typefaces were the only ones that were installed with every computer and therefore nearly universally available on any computer, any system, any browser. This meant that the majority of web site designs used: Arial, Verdana, Geneva, Georgia, etc.

If your design demanded something more elaborate, you had to create the typographic effect as a graphic, not as real text. If you’re not sure what I’m talking about, read: Is the Text on Your Web Site Really Text? When type is a graphic, and not real text, it is not readable by search engines and therefore not ideal for SEO.

As a web designer, you learned to work with the limitations this caused and tried to use real text whenever possible and style your HTML text using CSS tricks like background images, etc. While it worked, it meant that web design never had the same rich design qualities as print design because typographic design was never used as fully as it is in print design.

New options for web fonts

In the past few months that has been changing. Within the past year or so there are not one, but two competing ways to include many, many more fonts into your web design. This is really exciting and welcome news to web site designers like myself.

As a web design studio, we’ve been following these trends and studying both Typekit and the @font-face way of customizing the typography on the web. Both technologies are quickly adding fonts to their libraries and it’s impressive to watch.

However, for us, we plan to go primarily with the @font-face solution and this is why:

  1. We buy most of our fonts from MyFonts.com and as of this writing they now offer more than 30,000 fonts as web fonts. It’s been absolutely amazing to watch them convert their font library to the @font-face acceptable software. We already use MyFonts for our print fonts so it makes sense to go there first for our web fonts.
  2. The one-time-fee pricing model just makes more sense for us. The Typekit model is a per-year subscription based model. So in addition to a web hosting fee a web site would need to pay a fee for the use of their fonts.

Let me talk about each of these in a little more depth.

The ability to choosing one font for both print and web

As a graphic design and branding firm, we often work on branding projects that include the development of a logo and a web site. In fact, we find these two elements are the most critical pieces for an organization’s brand identity. That means that we look at building a branding system that works in both print and web.

When choosing a typeface that will be the corporate font for an organization, there are several considerations. First of all, there is the look of the logo itself and the wordmark that is all or part of the logo. That typography is usually a derivative of a standard typeface. Then, when we develop business cards and letterhead materials we introduce additional type elements.

Depending on the client, it may be critical that they have access to these same typefaces, other times it doesn’t matter as much. If for example, we have a design that someone wants to be able to update in-house but they only use a PC, we need to find a font that is available on both Mac and PC. This is an example of how the technology of production affects our type choice. Typekit currently has about 500 fonts whereas MyFonts has 30,000.

The ability to also find a font that has font-face capability is just one more way to narrow our choices. But like I said, there are now thousands and thousands of choices so it’s great to feel that it will not be a severely limiting factor.

One-time pricing model

The other reason we prefer font-face to typekit is that it is a pay once pricing model. This just plain works better for us when we’re estimating and for our clients.

When we accept a branding project we don’t know if we’ll have to buy any fonts, and if we do, how many we’ll have to buy, or how much they’ll cost. I never want to tell a client that there will be an extra fee to create a design with a certain font. So the font costs become an expense that we pay for.

Note: If we recommend a font for a client for their own use, (ie they will use the typeface when typing their own letters on their letterhead), they will need purchase their own license and that is not included in our design fees.

MyFonts has package deals that make purchasing print and web-based editions of fonts together an economical deal. So, if I know we’ll be creating both printed stationery and a web site we’ll purchase the font for all usages together and the cost is minimal, and again it’s an expense that we do not expect our clients to reimburse us for.

The other reason we don’t like recurring fees for web fonts is that it’s another fee to sell to the client. When we estimate on a web design project, there is usually a discussion of web hosting. Either the client has a web host they want to continue working with (and we double check that the servers will work for our needs), or we have hosting partners who we recommend and use. These estimates provide the client with an idea of their recurring costs for the web site. If I were to add-on the cost of a web font, it’s going to be an additional fee (and a recurring one) that they weren’t expecting. I also have no control if this fee is going rise. Finally, to bill for it annually is just more trouble than it’s worth. Obviously, I have the option of purchasing the Typekit license myself and we may opt to go that route, depending on what fonts are available.

First of all, I’m really excited to even have two options to consider for web fonts! We may find applications for Typekit because the two competing groups do have different typefaces and foundries that they represent. But as of right now, we are using the @font-face solution in our web designs.

Like this blog? Have it delivered to your inbox weekly.

3 comments

  1. Jeanne Hansen | March 17, 2011 at 8:25 am

    How do you use @font-face fonts on a website? Is it like using any other font, or are the actual mechanics of using it different from using the tradtional web-safe fonts? You mentioned that you check with web hosts to see if their servers will work for your needs. What specific question(s) do you need to ask to find out if they can host an @font-face font? Do I understand that the web hosting company would normally charge for allowing you to use an @font-face font, or do you mean that you just have to purchase the font in the first place? Thanks for the great post! It’s very informative, and I’ve been curious about this for some time now.

  2. Emily Brackett | March 17, 2011 at 1:45 pm

    Jeanne, Thanks for your questions.

    For @font-face to work you need to create the styles with CSS. A couple of tutorials:
    http://css-tricks.com/snippets/css/using-font-face/
    http://www.webdesignshock.com/showcase/font-face-free-fonts/

    In general this should work on any web server. My notes about web hosting are more of a reference point for setting up web hosting, and not specific to this functionality. That may have been confusing the way I wrote it. What I meant to say is that if I have a conversation with a client at the beginning of a project and say: “I estimate you’ll need basic web hosting and that’s $120/year” But then later I have to say: “plus I need you to pay $150/year to enable typekit” that’s an annoying conversation to have to have. While it’s not a LOT of money, it’s often doubling their recurring fees.

    This recurring fee is paid to Typekit and not to your web host (see: https://typekit.com/plans ). With @font-face you purchase the font once and there are no recurring fees.

  3. matt | February 17, 2012 at 11:54 am

    So I use typekit because of the giant pain it is to get @fontface to work across all browsers and mobile. Whatever the fee for typekit is, it is worth it, especially for pages viewed on a variety of devices. Its just a simple code drop and boom, it works everywhere…no loss of sleep.

Trackbacks

  1. designfloat.com

Join the Conversation

 

 

 



+ five = fourteen