Recap: Designing with Web Fonts

by Jodi Vautrin

photo by Ben Gebo   more photos

We hope you had a chance to join us on May 24th for the Designing with Web Fonts panel discussion in Cambridge. If not, we hope to see you next time! In the meantime, here are some discussion highlights and resources that were shared.

We kicked off the discussion with a keynote introduction from our moderator, Sam Berlow
http://www.fontbureau.com/people/SamBerlow/

How we got here is long and complex tale…
http://www.alistapart.com/articles/cssatten/
Suffice to say, the options for designers are nearly limitless: 10’s of thousands of typefaces available for web use…are all of them good? That is your job…
http://typekit.com/tour/library
http://fontdeck.com/typefaces

Why Web fonts?
The promise of Web fonts was that it would allow seamless branding from print to web, save time and money by reducing the production time, and enable search engine optimization because all of he text on your sites would be live.
http://www.fontslive.com/info/web-fonts.aspx

Getting fonts to work on a website requires the following: specific font formats for specific browsers and bulletproof CSS to tell the browser to display the correct font in the users browser.
http://www.extensis.com/en/WebINK/how/index.jsp
;jsessionid=5EFTDAETEJUDHLAQAAUARSQ

There are two ways to get Web fonts
1. Pay a service to deliver the data, or
2. Deliver the data yourself
http://www.miltonbayer.com/font-face/
(beware of delivering data yourself, you need rights and delivering print fonts may not have the same quality as a web font)

How do these subscription services work? Subscription and Self-hosting:
http://www.extensis.com/en/WebINK/how/index.jsp
http://typekit.com/
http://fontdeck.com/
http://webfonts.fonts.com/
http://www.webtype.com/
http://www.extensis.com/en/WebINK/

Subscription: Sign up, Choose a pricing tier base don your usage needs, assign the font to a URL it will be used for, pay, copy and paste the CSS into your site code, the fonts are live
The service will send the appropriate font file to the user accessing the url you have specified

OR

Self Host: You serve the font file to user accessing the url you have specified, by placing the fonts on your own server and serving the data yourself.
http://webfonts.myfonts.com/
http://www.fontsquirrel.com/
http://www.miltonbayer.com/font-face/

Advantages to both:
Subscription services are constantly adjusting delivery as browsers and data improves. Pay every year.
Self host, there is a one time payment, but you need to keep up with the technology and adjust code/data as both are upgraded.

Pricing Information:
Font Licence Calculator: Get a real time quote for typeface licensing
http://www.typotheque.com/licensing/price_calculator
Typekit https://typekit.com/plans
Fontdeck http://fontdeck.com/about/pricing
WebINK http://www.extensis.com/en/WebINK/pricing/index.jsp;
jsessionid=WM5VPK4YOCSOVLAQAAUARSQ

Fonts.com (Monotype Imaging) https://webfonts.fonts.com/en-US/Subscription/SelectSubscription
Webtype (Font Bureau) http://www.webtype.com/info/advantage/

Compatibility:
Here is an overview of the options and their compatibility:
Web font hosting services – An Overview – by sprungmarker.de

A couple of Myths I would like to debunk:

1. You can only use one of these services or methods.
Not true. Here is sample of a website using two services and serving files them selves all on the same page. http://getsatisfaction.com/

2. Web fonts do not work on windows.
Not true. But make sure you test
That was simple right?
Here is how I recommend navigating this labyrinth:

Sign up for all of the free trials play with the different services.
https://browserlab.adobe.com/en-us/index.html

In general, what to look for:

1. Quality
don’t buy anything for the web until you have tested it in the browsers you or your users will be—using. Mac, windows, and devices
https://browserlab.adobe.com/en-us/index.html

2. Legal
Find out who owns the data
Serving data illegally puts your client and you in a legally compromised position.
Font Squirrel is a great service for converting print fonts to webfonts, but
do not take fonts and convert them unless you have permission. We will find you…
http://www.fontsquirrel.com/

3. Budget
Check the pricing carefully
Pageviews, GB, time…

I want to reiterate number one. If you are developing for a client, Check their Google Analytics carefully to see what browsers and platforms the users are coming from. If your analytics say Windows XP and Internet Explorer, test the site in that exact environment.

Examples of others who have begun to take advantage of display and text capabilities of web fonts:
http://spymuseum.org/
http://reesenews.org/
http://www.webfontawards.com/gallery
http://typographica.org/

The real future is implementing Web fonts into responsive web design and dynamically adjusting typography to page size.
http://demo.nomadeditions.com/real-eats/toc.html
http://treesaver.net/

In conclusion
If you have not jumped in, jump in, it is free and easy to get started.
Make sure you test in users environments
Make sure you use fonts at the sizes they have been recommended for.
This an exciting time to be developing web sites
Good luck to you all.
– Sam Berlow

A big thank you also to our panelists, from L to R from audience:

Scott Dasse / Creative Director, Boston University Interactive Design
http://www.bu.edu/interactive-design/our-work/
Mike Swartz / Creative Director, Upstatement
http://upstatement.com
David Berlow / president, Font Bureau; partner Webtype, Ready-Media
http://www.fontbureau.com/people/DavidBerlow/
Vladimir Levantovsky / Sr. Tech Strategist at Monotype Imaging & W3C
http://www.monotypeimaging.com/

We’re going to continue this topic into some hands-on workshops in our Fall/Winter season, so let us know what, specifically, you’d like to learn. No questions are too basic or too complex, so ask away! We’ll also send out an informal survey to you all to find out what you’d like to get out of the workshop.

Jodi Vautrin serves as Vice President of Programming and
Director of Emerging Ideas on the board of AIGA Boston.

By AIGA Boston
Published June 7, 2011