Posts Tagged ‘@font-face’

by Ryan Arruda

With over 11 million daily patrons, Burger King is one of the largest fast food establishments worldwide. The Burger King website features the Trade Gothic typeface family for both display and body text, utilizing Trade Gothic Bold, Trade Gothic Bold Condensed #20, and Trade Gothic Light.

One of the most successful implementations of Trade Gothic on the site are the homepage headlines. Set in Trade Gothic Bold Condensed #20, the use of white typography slightly tempers the inherent assertiveness of the font’s letterforms, lending a confident – yet upbeat – air to the matter-of-fact text. The title case subheads set in Trade Gothic Bold provide contrast with the typographic color of the Trade Gothic Light body text, a nice showcase of this family’s versatility (and deliciousness). Customer Spotlight: Burger King

by Johnathan Zsittnik

Today we unveil a brand new If you’re a regular reader of the blog, you’ve probably already noticed a new aesthetic right here. The actual site offers plenty more to take in: In addition to a revamped design, you’ll discover additional ways to browse and search for fonts, fresh approaches to UI, and loads more typographic imagery. Despite all that’s new, the story of this site actually dates back quite a while.

In mid-2010, we took stock of the existing and drew up a lengthy list of areas to improve. Our wishlist included changes to the overall aesthetic, the organization of articles and other content, the way our products were presented and the tools we provide for discovering and trying fonts. In short: it was time to redesign.

We approached Happy Cog to help at the end of 2010. We’re big fans of executive creative director and renowned standards proponent Jeffrey Zeldman. So, the decision to work with his agency was an easy one. Jeffrey, Creative Director Chris Cashdollar and others from the Happy Cog team came out for a kickoff meeting in January of 2011. The Happy Cog team posed challenging questions regarding our vision for the new ‘Should content focus more on searching or exploration and inspiration.’ While there were no easy answers, the ensuing conversation shaped the direction of the redesign and let us know it was a good fit between agency and client.

We came out of that initial kickoff meeting inspired and charged up with the following objectives and vision for

  • Create a new home page featuring inspiring executions of fonts, an increased focus on search, and thoughtfully chosen interfaces that balance the most popular purchases, new and promoted products, and original content that is compelling and educational.
  • Integrate the Web font service into the experience.
  • Offer an improved search experience that makes smart choices about what to present and when, using the latest techniques for increasing engagement and conversion including things such as suggestive search and faceted results.
  • Release a re-envisioned font browsing experience, that focuses on font presentation, decreases steps to experimenting and purchasing type.
  • Refine the structure of content types to make it more accessible without getting in the way of getting to font products.
  • Tightly integrate social features.

An intense collaboration ensued, taking us from the objectives stated above, to sitemap, to wireframes, to the creation of the primary visual design elements to page design and eventually to the site we premier today.

With that, let’s take a tour of the new

Home: Modernized aesthetics; loads of real estate for type Inspiration

We think you’ll agree – the new homepage makes an impression. Big, bold type showings demonstrate type in use and provide in-depth looks of families. The stage premiers with showcases of Massif – a new design by our own Steve Matteson in addition to showings of the Akko, Gibson and Salvo Sans families. Hero images were designed by Monotype Imaging creative director Dennis Michael Dimos (Massif) as well as external designers Bethany Heck (Akko), Mark Weaver (Gibson) and Naz Hamid (Salvo Sans). Keep an eye on this area as we’ll rotate in fresh new showings from graphic designers and type designers on a regular basis. Beyond the hero images lies a variety of type showcases and discovery tools. Explore rich previews of hot new releases and established designs through the best selling new fonts and featured font sections. The “Find Your Type controls” allow you to search, browse, or identify fonts without ever leaving home. You’ll also find a selection of the latest articles on We’ve always put out great, informative and educational content, but now the best content is far easier to find.

The decision to incorporate Web fonts for all of the type was an easy one. Picking the typefaces families and optimizing the fonts for the Web took a little more time.

“We really enjoyed working with the type and implementing it through the Web Font service,” said Christopher Cashdollar, creative director at Happy Cog. “We were able to implement a smart, legible and well-structured type system using the Neue Frutiger and Frutiger Serif families. We knew we could trust the integrity of the type because of the level of scrutiny that Monotype Imaging puts into the screen optimization of its fonts.”

Search: Sort, Filter and Discover; Desktop fonts and Web fonts Side by Side
Our new search results pages introduces sorting and filtering options that will help you navigate through our vast inventory and zero in on the design of your choice. Oh yeah, typefaces results are (finally) grouped by family.

As I mentioned, integrating our Web font service into was a primary goal of the redesign. The new search results page is just one place where you can find desktop fonts alongside side of Web fonts. Our search tools will return results for desktop fonts, Web fonts and articles. When you rollover a family that’s available as a Web font, a control will display that will allow you to add it to a project right from the search results page.

Family pages: Try, learn and share

Our new family pages feature a prominent showing. We’ve hand designed showings for many top families and will continue to expand this inventory over time. But we’re also counting on you. Showcase your design skills by designing and submitting images for your favorite typefaces.  Just click the ‘+’ to add your work to our gallery.

These robust new family pages gather all of the family members in one place. Type historians will appreciate the detailed descriptions – available for many of our most popular and newest families. And font enthusiasts of all kinds will enjoy rating and sharing their opinions with the community and through social avenues.

Cart: Quick, convenient shopping

The new features a mini shopping cart that is accessible from the header nav of every page. Click the shopping cart to view or delete products in your cart, without leaving the current page. This is convenient for those working their way through a lengthy shopping list and those with items remaining in their cart from a previous visit to

Manage Web Fonts: Your new Web font command center Web Fonts subscribers will notice a dramatically different set of controls for managing their Web fonts projects. Our new Manage Web Fonts page acts as a dashboard, providing virtually everything you need to build, edit, deploy and share Web Fonts projects.

Learn About Fonts & Typography: Even more great, educational content FontologyLearn About Fonts & Typography is home to the original content we produce. Here you’ll find a new series called Fontology – an ever-expanding academic resource for educational institutions, design students and those with an interest in the typographic arts. This section is also home to the blog which features topical content that will keep you up to speed with the latest from and the type design community. Lastly, our popular series, For Your Typographic Information, lives on within Learn About Fonts & Typography. This longstanding series remain an excellent source for those in search of typographic tips and tricks.

Best Sellers: Insight into typographic trends

If you’re curious to know what’s hot, look no further than our best sellers pages. View the New Best Sellers page for a look at the top new releases or the All Best Sellers page to see the typefaces whose popularity has stood the test of time. For further looks into what’s trending, note that you can sort search results by popularity. You can also access the highest rated typefaces (as determined by your ratings submitted on family pages) through the “Find Your Type controls” on the home page. Best Selling Fonts

FontGazer: Try thousands of fonts directly in Adobe InDesign
The new isn’t the only thing in beta.  As you may have seen, we recently announced FontGazer – a free InDesign plug-in that allows you to browse, try, and buy fonts from directly from Adobe® InDesign®. Download FontGazer and be sure to let us know what you think by sharing your raves, gripes and feature requests in the FontGazer Feedback Forum. FontGazer

If you’d like a more interactive tour, you can check out this video. It will give you a more detailed look at many of the features described above, plus many more — including an overview of how to manage your Web Fonts projects on the new site.

The new is out. But that doesn’t mean we’re done. We’re hard at work on additional enhancements that will arrive during and after beta. In the meantime, we want to know what else you’d like to see. We’re not there yet, but you can help us make everything you want it to be. If you notice something that’s missing or that can be improved upon – let us know. See something you like? We want to know. Click the red feedback bar on the side of the site to share your thoughts.

Now get out there on the new, and find your type.

Johnathan Zsittnik
Johnathan Zsittnik is the eCommerce Marketing Manager at Monotype Imaging. Johnathan holds both a bachelor’s degree in marketing and a master’s degree in business administration from Bentley University.

by Ryan Arruda

Owens Corning is a worldwide manufacturer of building and construction products; known for their iconic pink fiberglass insulation, the company produces a wide gamut of construction products used in both residential and commercial projects.

The Owens Corning website features the Gill Sans typeface family, employing both light, book, and medium weights. The humanistic strokes of Gill Sans projects approachability, while the light weight used in the headline provides touches of clean, architectural modernity and soundness. The multiple weights of Gill Sans in play on the Owens Corning site not only delineates product content, but provides aesthetic stability and balance as well. Owens Corning Website

by Chris Roberts

Here’s a ranked listing of Web Fonts’ top 100 most used Web fonts for March 2012:

Trade Gothic
Neue Helvetica
DIN Next
Trade Gothic Next
Gill Sans
New Century Schoolbook
Neue Frutiger
PMN Caecilia
ITC Avant Garde Gothic
DIN 1451
ITC Lubalin Graph
Avenir Next
Neo Sans
Futura T
Heisei Kaku Gothic
Linotype Didot
Monotype News Gothic
VAG Rounded
Harmonia Sans
Garamond 3
Soho Gothic
Frutiger Next
FB Han Gothic
Bauer Bodoni
Linotype Univers
Neue Helvetica eText
Eurostile LT
Sackers Gothic
ITC Franklin Gothic
Egyptian Slate
News Gothic
Gill Sans Infant
Charlotte Sans
Ocean Sans
Century Gothic
Plate Gothic MT
ITC Officina Sans
Eurostile Next
Monotype Grotesque
URW Franklin Gothic
ITC American Typewriter
ITC Franklin
ITC Bailey Sans
Wiesbaden Swing
ITC Kabel
Neuzeit Office
ITC Adderville
ITC Conduit
Fette Engschrift DIN 1451
ITC Officina Serif
Monotype Modern
Basic Commercial
Rotis Sans Serif
Neo Tech
ITC Stone Sans
Georgia Pro
ITC Caslon No. 224
Alternate Gothic
New Caledonia
Neue Haas Grotesk
Monotype Garamond

by Ryan Arruda

Geek Squad are technology professionals who help clients with all their electronic conundrums. Whether through home visits, by telephone, or even remotely, Geek Squad agents are available 24/7 to assist with the digital computing needs of consumers.

The Geek Squad UK website uses the DIN Next typeface extensively, achieving balanced hierarchy by employing both heavy, bold, and regular weights. The typeface presents both authority and affability, much in line with the image of the Geek Squad agents. The judiciously rounded curves of DIN Next nicely hint at the technological foundation of Geek Squad’s services.

Who ever thought that a squad of geeks would be so typographically hip?Geek Squad website using Web fonts


by Chris Roberts

Here’s a ranked listing of Web Fonts’ top 100 most used Web fonts for January 2012:

Futura® Bold
Neue Helvetica® 45 Light
Neue Helvetica® 35 Thin
Neue Helvetica® 55 Roman
Neue Helvetica® 75 Bold
Univers® 57 Condensed
Garamond 3 Regular
Bauer Bodoni® Black Italic
Garamond 3 Italic
Avenir® 85 Heavy
Neue Helvetica® 46 Light Italic
Avenir® 35 Light
Helvetica® Condensed Bold
DIN 1451 Engschrift
Futura® Bold Condensed Oblique
Sackers™ Gothic Heavy
Sackers™ Gothic Medium
Futura® Medium
Neue Helvetica® 25 Ultra Light
Linotype Didot® Bold
Linotype Didot® Italic
Avenir® 65 Medium
Linotype Didot® Roman
Avenir® 95 Black
Trade Gothic® Bold
Trade Gothic® Condensed Bold #20
Avenir® 55 Roman
DIN Next™ Condensed Bold
Neue Helvetica® 77 Condensed Bold
Laurentian™ Semi Bold Italic
Linotype Univers® 620 Condensed Bold
Trade Gothic® Roman
Neue Helvetica® 65 Medium
Futura® Book
Neue Helvetica® 47 Condensed Light
Linotype Univers® 420 Condensed
Futura® Heavy
Avenir® 45 Book
ITC Avant Garde Gothic® Book
DIN Next™ Bold
Trade Gothic® Bold #2
Linotype Univers® 320 Condensed Light, Extended
PMN Caecilia® 75 Bold
Univers® 47 Condensed Light Oblique, Extended
Neue Helvetica® 77 Condensed Bold, Extended
PMN Caecilia® 85 Heavy
PMN Caecilia® 76 Bold Italic
Trade Gothic® Condensed #18
Futura® Bold Condensed
Futura® Medium Condensed
VAG Rounded™ Bold
DIN Next™ Regular
Monotype Grotesque® Condensed
Neue Helvetica® 37 Condensed Thin
Neue Helvetica® 45 Light, Extended
Neuzeit® Office Bold
Neuzeit® Office Regular, Extended
ITC Avant Garde Gothic® Medium
DIN Next™ Condensed Regular, Extended
Neue Helvetica® 63 Extended Medium
Neue Helvetica® 65 Medium, Extended
Neue Frutiger® Light
Neue Frutiger® Book
Helvetica® Bold
ITC Avant Garde Gothic® Bold
Neue Frutiger® Bold
Trade Gothic® Condensed Bold #20, Extended
Soho® Regular
Trade Gothic® Bold, Extended
Neue Helvetica® 55 Roman, Extended
Neue Helvetica® 67 Condensed Medium
Univers® 67 Condensed Bold Oblique
Soho® Bold Italic
VAG Rounded™ Light
Helvetica® Bold, Extended
Gill Sans® Book
Neue Helvetica® 53 Extended, Extended
Neue Helvetica® 57 Condensed
Neue Helvetica® 73 Extended Bold, Extended
Baskerville Italic
Frutiger® 65 Bold
Helvetica® Condensed Light, Extended
Neue Helvetica® 67 Condensed Medium, Extended
Helvetica® Rounded Bold
Trade Gothic® Condensed #18, Extended
Neue Helvetica® 87 Condensed Heavy
Rockwell® Bold
Avenir® 55 Roman, Extended
Nazanin® Bold
ITC Avant Garde Gothic® Demi
Cachet™ Medium
Clearface Gothic™ 55 Roman
Clearface Gothic™ 45 Light
Helvetica® Light, Extended
DIN Next™ Medium
VAG Rounded™ Black
Trade Gothic® Next Regular
Neo® Sans Arabic Regular
Cachet™ Bold
Nazanin® Light

by Jason Cranford Teague

Last year, 2011, was the year that Web typography finally came of age as Web fonts have grown in popularity. The history of Web design has been full of inspiration and innovation, but little of that has been around typography, in large part due to the lack of font choices available. To be sure, typography is about far more than just the font, but when you only have five fonts to choose from for most of your work, imagine a culinary world where you could only choose from five ingredients.

Web designers are finally coming out of the type coma of the last 15 years and using a variety of typefaces in their compositions. With the wide adoption of the @font-face CSS rule and the rise of Web font service bureaus, there are now close to 50,000 fonts available for your designs that will work on virtually all Web browsers – yes, even the Internet Explorer® platform. IE has supported Web fonts since version 4.

We’ve entered into a renaissance of the visual appearance of pages all over the Web. Designers are now experimenting with new ways of displaying text that were previously impossible or only achievable through the use of text in images.

2011 was a period of intense experimentation – some more successful than others – but there are some clear trends emerging in how Web typography will evolve and how it will differentiate itself from print typography.

1. Typographic Voice Diversity

Kitchen Sink Studios website using Web fonts

Kitchen Sink Studios uses five different typefaces in their home page, but it works to create a unique voice, showing off their services.


Type is to text what voice is to speech. The fonts you choose have a dramatic impact on the tone and emotion of the message you are presenting. As the famed book designer Richard Bringhurst put it, “When the type is poorly chosen, what the words say linguistically and what the letters imply visually are dishonest, disharmonious, out of tune.” Now that we are no longer limited to the “Fatal Five” families – the Arial®, Georgia®, Trebuchet® MS, Times®, and Verdana® faces – we are free to explore, mix and match a wider variety of typographic voices.

Some worry that this will lead to an explosion of fonts in designs, with inexperienced designers mixing a smorgasbord of typefaces, creating a cacophony of voices rather than a chorus. Time will tell, but at least the era of monotone typographic voices is finally at an end.

2. Larger Font Sizes

Information Architects website

Information Architects website, speaks softly, but carries a big font.

Text on the Web has been too small for far too long. For a variety of reasons  including the “above the fold” myth and the belief that small type looks more sophisticated, most type on the Web is set on the screen at 12px or lower. However, as a clever yet simple experiment by Information Architects has shown, 12-point printed type is visually the same size as 16-pixel screen type

I start all my projects with a base font size 100 percent, which uses the browser’s default size, generally 16px unless otherwise set by the user. I then use sizes set using the em unit to scale text larger or smaller as needed.  Smaller text – like footer text and notes – can go as low as .625em (~10px assuming the base size is 16px), but body copy should be a minimum of .875em (14px) to 1em (16px) and headers start at one em and go to two em, three em, and even four em or larger. If you need help converting to PXs or PTs, is a great resource.

The transition to larger text may seem awkward at first – I’ve actually had to convince clients that the text is not too large – but once you adjust, small text will begin to feel cramped and amateurish.

3. Slab Serifs Fonts

Slab Serif Fonts

German Website Pixelbäker uses the popular Museo Slab™ slab serif font (Exljbris).


One important concern for Web typography is legibility, making sure that characters are as easy as possible to discern. There are a lot of factors that go into making a legible font, but two of the most important are consistent strokes and either thick serifs or no serifs at all. Thinner serifs tend to get fuzzy at the edges, as they are blurred for anti-aliasing. For this reason – as well as general style reasons – we are seeing a  lot of slab serif fonts being used in Web designs over the last year.


Egyptian Slate (Monotype), already popular in print, base become a popular slab serif Web font.

Slab serif fonts have serifs that are square and of generally uniform width, thus with little or no tapering at the ends. These fonts can have a strong typographic voice. Often feeling heavy and constructed, but because of this they are clear, stand out on a page and are easy to apply typographic effects to using text shadows, especially the letterpress effect.

4. Letterpress and Other Text Shadow Based Effects

Facio Design Website

British Design Firm Facio Designs Blog uses a paper texture background with a light letterpress effect.

A long time coming, text shadows are now available to Web typographers using CSS. Even better, since you can add multiple shadows to a single text block, there are a variety of new effects that are quickly becoming common on the Web, most notably the letterpress effect.

Letterpress effect

The letterpress effect up-close

The letterpress effect is achieved by placing text on a contrasting, but not 100 percent contrast background color (i.e. not 100 percent black or 100 percent white), and then offsetting a text shadow with a color lighter than the background down and to the right and a darker drop shadow up and to the left. The offset should be only slight – one to three pixels depending on the text size – to avoid having the corners show a gap. Smaller type will not need any blur, but larger type may need a slight blur added to soften the effect slightly.

Text Effects

I put together a list of some interesting text-shadow effects


Aside from straightforward text shadow effects, letterpress is the effect I see most frequently, but there are many others, all achieved through the judicious application of text shadows.

5. Color Contrast

Contrast Rebellion

Contrast Rebellion is a site with a cause: fight low contrast text.

There’s debate in the design community about the need for contrast in type – whether it’s acceptable for the font color to be closer to the background color. Several argue that this is bad design, harming legibly and readability. However, many designers believe in reducing contrast in text, feeling that it adds an understated sophistication to the appearance, also allowing them to better guide the viewer’s eye by mixing contrast on the page.

Recent studies support the notion that decreasing legibility can actually increase viewer focus and cognition. The logic goes something like this: if you force the viewer to take more time to read something by decreasing the legibility, then they are forced to pay more attention and retain the information longer. This argument is something of a mixed bag, however, since some of the studies have used the Comic Sans® face to prove the point.

Designers intuitively know that perfect contrast can be visually dull. Black text on white background is much like making everything bold; everything is important so nothing stands out. You need contrast to engage the viewer’s eye and help them prioritize what they are looking at, and one way to do that is with different color contrasts.

Still, there’s a point at which low contrast goes from forcing readers to focus to just becoming unreadable. Colour Text Legibility is a great resource for testing foreground and background combinations, and will alert you based on the W3C’s guidelines for color readability and Web accessibility guidelines to ensure you do not stray too far.

6. Mixing Font Weights

Aspen Ideas Festival Website

The Aspen Ideas Festival mixes different weights of the Futura® typeface (Neufville).

A lot of Web designers I meet think that “bold” is the font weight, but bold is actually a font weight. Although certainly the most common, bold is not the only weight available for fonts. There are also thin, light, medium, heavy, black and many others. For example, the Neue Helvetica® design includes weights ranging from ultra light to black.

Neue Helvetica Type System

The Neue Helvetica font family with weights ranging from ultra light to black

Additionally, many fonts use a base 100 number scale to indicate weight, with 100 being the lightest, up to the heaviest at 1000.

CSS, though, only has limited capabilities to directly access these weights. The font weight includes values for regular, bold, as well as 100, 200, 300, 400, 500, 600, 700, 800, 900, and 1000. However, if you use the @font-face rule, you can still use any of the font weights available by simply assigning each weight its own font-weight value or, alternatively, a unique font name for each weight.

7. More Space

Future of Car Sharing Website

The Future of Car Sharing site uses a lot of space and a horizontal scroll.

Along with larger font sizes, there is a trend toward more white or negative space in Web designs. This is partially in response to the realization that the above-the-fold rule was actually a myth (people do scroll and expect to, as explained in 2007 by Melissa Tarquini) as well the fact that larger monitors have become ubiquitous over the last several years.

More space in designs is a very good thing, allowing for easier scanning and cleaner, less cluttered designs. Many designers have started playing around with layouts that really only work on screens that scroll, and this trend will only continue as we begin to master the new powers that @font-face and CSS3 provide.

8. Responsive Typography

Boston Globe Website

The Boston Globe reformats its layout and typography to fit desktop screens, tablets, and smartphones.

Although desktop monitors have gotten larger, the display screens on which we expect our design to be viewed are getting smaller, as more people view the Web through tablet devices and smartphones. The good news is that rather than returning to tight designs for our Web pages, we can create designs that “respond” to the device on which they are displayed.

Responsive Design (sometimes called “Reactive Design”) is a development methodology which forgoes the one-size-fits-all philosophy of the past, and instead leverages CSS media queries and the JavaScript™ language to deliver designs that are tailored to the capabilities of the user’s device. This means not only resizing images and interface elements but also tweaking the typography of designs so they scale up or down as needed. This applies to font sizes as well as column widths, line height and even justification in some instances.

Although it might seem like a pain at first to have to consider your designs as scalable, it will soon be a necessity. It is predicted that by 2015, mobile use of the Web will surpass desktop use and desktop use will begin to decline.

In addition to mobile, there are future screen types to consider. Although the fabled WebTV seems to be always just on the horizon, there is some very real movement in that arena with Google and Apple working hard to find the right formula. It may not be too much longer until you need to consider how your designs will look in a 62″ HDTV.

9. Handwritten Fonts

Lilac Creative Website

Lilac Creative uses the Coral™ Regular handwriting font (Scholtz Fonts) to give the site a friendly appeal.

Handwriting fonts are another design type that’s becoming increasingly popular. Despite how many feel about Comic Sans – the most notorious handwriting font of them all – type that looks as if it were written by hand gives a friendly, open, and approachable feel.

Handwritten Font

JasonSpeaking01 is my own homegrown handwriting font I created using the iFontMaker™ app. Download it free and let me know what you think.

In addition to the numerous commercial and free fonts available, it’s also now relatively easy to make your own handwriting font, using the iPad® app, iFontMaker, vLetter’s custom handwriting font service or other options.

10. Dingbats Instead of Images

Although the Webdings® font is one of the Microsoft® core Web fonts preinstalled on virtually every computer in existence, using this font for icons in Web pages has never caught on. There is a simple reason for this: the font will not display in the Firefox® browser. The reason has to do with how the font is encoded, but the upshot is that you can’t use them.

Frames and Borders Font

The Frames and Borders Font (Outside the Line) contains a variety of images and symbols and is available as a Web font.

However, if you are using @font-face to embed properly encoded fonts, there is a close to 100 percent chance the font will be used. The advantage of using a font for a dingbat, in place of an image is scalability and styles. Whereas image-based icons are a fixed size, fonts can be quickly scaled up or down to any size, altered in color or have other styles changed on the fly without any loss of fidelity.

by Johnathan Zsittnik

Club Nintendo is a rewards program for Nintendo players and enthusiasts. Members earn “coins” that can be exchanged for games, downloads and other goodies by registering products and taking surveys.

The site features many of Nintendo’s most recognizable personalities. Mario certainly takes center stage, but the Avenir® typeface family gets its share of the spotlight. Avenir Black ensures headlines come across loud and clear, while the typeface’s humanistic traits keep text in line with the fun, informal tone of the Nintendo brand.

Take a closer look at Club Nintendo by following this Link… err, this link.

Club Nintendo using Web Fonts


Johnathan Zsittnik
Johnathan Zsittnik is the eCommerce Marketing Manager at Monotype Imaging. Johnathan holds both a bachelor’s degree in marketing and a master’s degree in business administration from Bentley University.

by Bill Davis

As moderator of a recent AIGA Chicago panel, “The New Web Typography,” I was reminded of how many designers and developers are still looking for a quick primer on Web font basics.

If you were one of the 120 designers in attendance, then you heard from the diverse range of panelists about the need to know more about the fundamentals of Web fonts. Our panel of experts – a Web developer, a Web engineer, and a type designer – offered insights into why the basic rules of Web fonts differ from the traditional world of system fonts.

Whether you’re a traditional graphic artist, a Web designer or developer, here are the top three “need to know basics” of Web fonts. For those who would like to see the AIGA Chicago presentation, check out the slide show at

Web Fonts presentation at AIGA by Bill Davis

What Web font tips would you add to this list? What questions do you have? E-mail me at and please let me know.

1. Font Licensing
Can you take your desktop fonts and load them on a Web server?

For Web fonts, you have to secure the rights. For instance, you can’t take a system font and put it up on the Web just because you have the license to the system font. This point was amplified by each of the presenters. Some fonts on your computer may have been installed with an application, such as Adobe® Creative Suite® software. So you have to be careful and check the font licenses to ensure you have the right to use them on the Web.

You will find that there are some system fonts that are not yet Web fonts. The list of new Web fonts grows each day. However, if the font is exclusive to a foundry and not available through resellers, you may need to check with that foundry as to whether and when the Web font version will be available.

2. Font Quality
How do you choose print fonts that will look good on a screen?

Testing. Often designers ask about the best ways to determine font quality. The answer is testing. As you select fonts, you also need to build out Web pages in order to view your font choices on screen and across multiple Web browsers.

Recently we added a browser preview feature to the Web Fonts service. This allows you to see how fonts appear in different browsers, and with different operating system font-rendering settings.

3. Font Selection
How do you show clients different Web fonts during the creative stage of a Web design without having to buy each font?

There are different answers based on the Web font solutions you use. For example, the Web Fonts professional tier entitles you to 50 desktop downloads per month. This gives you the ability to use, play with and test fonts as part of your subscription during the client comp phase. The alternative is to make an investment in the desktop fonts so you can use them not only for Web design comps, but for any kind of print and Web project.

by Alan Tam

Monotype Imaging’s Web Fonts team and Google have been brainstorming ways to make Web fonts better. Our main focus has been on file size. The idea is simple. Smaller Web fonts are faster Web fonts. Faster is better.

Looking to reduce Web font file sizes, the Google Web Fonts team began working closely with us to discuss the advantages of our patented MicroType® Express (MTX) algorithm. The results led to the joint conclusion that in order to truly maximize the value of this technology, it needs to be adopted by Web browsers and font tools. Thus, we decided that the greatest benefits would be achieved by sharing MTX with the entire Web community. As a result, Monotype Imaging has agreed to make the MTX format, as described in our W3C submissions, available to the public at no cost, subject to the terms of a license which can be found at: Further details on the contributed technology can be found at

Our ongoing collaboration will lead to a significantly better user experience, including:

  • Page load speed – with smaller font files, Web fonts used in your branded content will load faster than ever!
  • Font rendering quality – smaller font files enable greater screen optimization of Web fonts for noticeably better display quality across a variety of device screens.
  • Font features – smaller fonts enable more room for OpenType® features.
  • Cross platform performance – With Monotype Imaging and Google working with the W3C, the Web community and other browser vendors on adopting Web font compression technology, you will see enhanced performance of your Web font content across browser platforms. In other words, you’ll be able to deliver great experiences to your audiences regardless the browser.

Initially, Monotype Imaging and Google will focus on font creation tools. Currently, Microsoft’s Internet Explorer® browser supports EOT (Embedded OpenType) font files which make use of MTX compression. Open source tools needed to make EOT files can now be extended and improved. Beyond these efforts are several other interesting prospects including the possibility of adoption by additional browsers. Learn more about this collaboration.

We are excited to continue our collaboration with the Google Web Fonts team and to see how the Web community might make use of this technology. More to come!

Great type makes sites stand out