Expressing Yourself (and Your Brand) with Webfonts
Web typography has become a buzz word over the last two years, but what does it really mean for you?
For a long time we, designers have been limited to the core web fonts that are widely available because of their inclusion in many Microsoft products. Web designers use them because -- thanks to their universally-available nature -- users are more likely to have that font installed on their machine and, therefore, be able to view designs as they’re meant to be viewed.
Over the years, many smart people experimented with new ways to get beyond these standard fonts -- which include Arial, Georgia, Verdana, Comic Sans, and Times New Roman -- by using CSS font stacks, images, or Flash (sIFR).
But the reality is that @font-face CSS font linking has existed since the CSS 2 specification in 1998. The real problem has been browser file format compatibility and licensing.
Web Typography Now
Forward-thinking web designers in the last two years have been pushing the typography boundaries by encouraging font designers to start adapting their End User Licensing Agreements to include @font-face as an acceptable method of font embedding. Fortunately, they’ve agreed, and the result has been a slew of new font services such as Typekit or Fontdeck. In addition to that, many people have also started creating open-source typefaces. (More on all these below.)
Now, with all of these new options, there is a lot of opportunity to set your website apart using web fonts. They provide the ability to express a brand, feeling, or emotion by conveying more than just what they spell.
The advantage of using a webfont embedded using @font-face or a webfont service comes for the findability of your site through search engines, accessibility to those with disabilities, selectability, and the ability to control the text through a CMS like Drupal. Up until now, there were really no great ways to get all of that with one type method other than using your plain Jane core webfonts.
Where to Begin
This is the current challenge facing web designers and those who are looking to bring their brand online. Sometimes people are looking to use a typeface online that has been traditionally licensed for print. Other times, we are interested in browsing the options available to us. But every option has different implications and pricing structures. It can be exciting and intimidating.
Below is a run-down of some of the best options I’ve found so far.
Open-Source Typefaces
This is a great option if you are looking for a font that you can use both online and in print from a limited set of typefaces that won’t be too overwhelming. It is also great if you are looking for an option that is low cost, especially if you will be creating collateral that will need to be updated by multiple people across an organization with a limited budget.
Open-source typefaces do require knowledge of HTML and CSS, so they can be a little tricky if you’re unfamiliar with that territory. But with the help of a team like Phase2’s or a skilled front-end developer helping out, it’s a no-brainer.
One of our favorite open-source fonts is League Gothic, which we used both on our Phase2 Design Studio site and on our OpenPublic website.
Font Services
An annual subscription to Typkit’s Portfolio Plan costs only $50, and it provides access to an expansive webfont library over multiple sites. That fee opens the door to creativity for an organization wanting to explore lots of creative type over several projects. In fact, we are currently using Typekit on the CapitalCamp landing page with Atrament Web and Crete Rounded.
Another great service with a beautifully usable interface is Fontdeck, which has a very robust library but a different pricing structure. With font deck, you pay only for fonts when they go live on whatever new website you’re launching. Then, you pay annually per website that has Fontdeck fonts in use. So if you are looking to only use a specific typeface, you could save money with this structure.
A font service requires significantly less CSS and HTML savvy than open-source typefaces; however, the font service’s typefaces can only be used on the web. This makes mocking up sites in Photoshop a lot more complicated. Many who use services like these design their mockups in markup.
Web Fonts Licensing
More recently, I’ve noticed that designers are purchasing a typeface with a one-time print license and/or a web license. When designing a website, there is often additional collateral that goes along with it -- for a conference you might want to print T-shirts or badges, for example. For this, purchasing 2 one-time licenses is very helpful and cost effective.
There are a lot of traditional typefaces becoming available with this option, and for me this is especially exciting because one of my favorite font foundries is getting in on the action, Sudtipos out of Argentina. Myfonts now lets you browse by fonts that have the separate webfonts licenses and Fontshop.com has a great selection with lots of information about what it means to use webfonts. (P.S., we used Bodoni Egyptian Pro on the Phase2 Design Studio site from MyFonts.com.)
What it All Means
No matter who you are or what you do, you can leverage the power of webfonts to help tell your story online. Publications can seamlessly bring their offline brands onto the web, and non-profits and associations can help create a better story of who they are through letters.
While the technology and methods for implementing webfonts still has a lot to be worked out, you can follow design teams like ours, who are definitely staying current on all the developments in the wonderful world of web fonts and blogging about it to share the love.
Still not sure what webfonts can do for you? Check out my slide deck from SXSWi on getting Stoked on Web Typography to learn more.
Comments
Post new comment