Posts Tagged ‘css3’

by Mark Larson

When the University of the West of England was founded in 1595 (as the “Bristol Society of Merchant Venturers’ Navigation School ”), the font selection they had to choose from was quite a bit smaller than it is today, to say the least. However, when it came to their recent website update, they not only had a vast selection to choose from, but they took the opportunity to implement Web fonts.

Because the university’s mission is to “make a positive difference to our students, business and society”, the university’s website is, in effect, the face of that mission. With than in mind, they chose to use the VAG Rounded™ typeface throughout the navigation elements and headlines on the website. The type’s rounded ends make text appear more informal, imparting a friendly appearance, while still maintaining a professional demeanor.

University of the West of England

University of the West of England

by Johnathan Zsittnik

Historic Hotels of America is an exclusive collection of American hotels that have retained their historic integrity, architecture and ambiance, providing an authentic travel experience for guests to enjoy. These classic properties enjoy one modern amenity: Web fonts. Sabre Hospitality Solutions elected to break free from the restraints of “Web-safe fonts” or the inelegant implementation of Flash® text replacement in preference for the rich palette of Web fonts available from Web Fonts.

The member hotels vary wildly in age, from the 1600s to the more contemporary period of the 1960s. The Sabon® typeface was chosen for its classic form, practicality and suggestion of literary and historical pedigree, allowing it to work with hotels from any of the historical periods featured within the collection. “The Web fonts from were a vital piece of our design strategy, allowing us to broaden our vision to encompass fonts beyond those that have been the traditional mainstay for Web design until now,” said Tavis Tucker, website development manager at Sabre Hospitality Solutions.

Thanks Tavis for the kind words and for being so “accommodating” in the creation of this spotlight on Historic Hotels of America.

Historic Hotels of America 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 Chris Roberts

Here’s a ranked listing of Web Fonts’ most used Web fonts for July 2011:

Neue Helvetica® 87 Condensed Heavy
Administer BookItalic
Helvetica® Condensed Bold
Garamond 3 Regular
Garamond 3 Italic
Neue Helvetica® 45 Light
Neue Helvetica® 77 Condensed Bold
Univers® 57 Condensed
Sackers™ Gothic Heavy
Sackers™ Gothic Medium
Futura® Bold
Neue Helvetica® 57 Condensed
Avenir® 85 Heavy
Trade Gothic® Bold
Neue Helvetica® 35 Thin
Avenir® 65 Medium
Futura® Medium
Bauer Bodoni® Black Italic
Rockwell® Bold
ITC Legacy® Serif Bold Italic
Futura® Book
Avenir® 35 Light
Trade Gothic® Condensed Bold 20
Neue Helvetica® 47 Condensed Light
Neue Helvetica® 55 Roman
Rockwell® Regular
Avenir® 95 Black
Neue Helvetica® 37 Condensed Thin
Neue Helvetica® 67 Condensed Medium
Neue Helvetica® 75 Bold
Monotype Grotesque® Condensed
Futura® Bold Condensed
VAG Rounded™ Black
Helvetica® Condensed Bold, Ext
Futura® Medium Condensed
Trade Gothic® Roman
ITC Avant Garde Gothic® Book
Futura® Heavy
PMN Caecilia® 75 Bold
PMN Caecilia® 85 Heavy
PMN Caecilia® 76 Bold Italic
Neue Helvetica® 67 Condensed Medium, Ext
Avenir® 55 Roman, Ext
Neue Helvetica® 45 Light, Ext
Neue Helvetica® 63 Extended Medium
Neue Helvetica® 53 Extended, Ext
Neue Helvetica® 73 Extended Bold, Ext
Linotype Univers® 420 Condensed
Felbridge™ Regular
Linotype Univers® 620 Condensed Bold
Frutiger® 65 Bold
Frutiger® 55 Roman
Eurostile® Next Regular
Eurostile® Next Extended Regular
Eurostile® Next Extended Bold
Trade Gothic® Condensed Bold #20, Ext
Neue Helvetica® 65 Medium
Eurostile® Next Extended Semibold
Neue Helvetica® 75 Bold, Ext
Linotype Univers® 320 Condensed Light, Ext
Neue Helvetica® 55 Roman, Ext
Trade Gothic® Light
Eurostile® Next Semi Bold, Ext
Neue Helvetica® 77 Condensed Bold, Ext
Univers® 47 Condensed Light Oblique, Ext
Helvetica® Roman, Ext
ITC Avant Garde Gothic® Demi
Neue Helvetica® 65 Medium, Ext
Avenir® 45 Book
Trade Gothic® Extended Bold
VAG Rounded™ Bold
Helvetica® Bold, Ext
Trade Gothic® Next Regular
Neue Helvetica® 57 Condensed, Ext
Helvetica® Condensed, Ext
ITC Avant Garde Gothic® Medium
ITC Avant Garde Gothic® Bold
Helvetica® Light, Ext
Neo® Sans Regular, Ext
Avenir® 35 Light, Ext
Trade Gothic® Next Condensed Bold
Trade Gothic® Condensed 18
Helvetica® Condensed
Helvetica® Rounded Condensed Bold
Futura® Extra Bold
DIN Next™ Regular
ITC Lubalin Graph® Book
Neue Helvetica® 25 Ultra Light
Neue Frutiger® Regular
Helvetica® Narrow Bold, Ext
Univers® 67 Condensed Bold Oblique
Frutiger® 45 Light
Helvetica® Narrow Regular, Ext
Soho® Gothic Light
Frutiger® 45 Light, Ext
VAG Rounded™ Light
Futura® Light
Helvetica® Light
Avenir® 55 Roman
Neue Frutiger® Light

by Chris Roberts Web Fonts now provides advanced features for controlling how Web fonts are loaded into Web pages.

Customers can now use the WebFont Loader, an Open Source JavaScript™ library that provides a variety of options for Web developers to control the Web font loading experience. The WebFont Loader is served through the Google AJAX Libraries API.

The functionality allows developers to deliver a more consistent experience across browsers and tap additional features related to the process of downloading and displaying fonts on a Web page. At various phases of Web fonts loading into a browser, WebFont Loader provides notification of event status. Web developers can then write code to control browser behavior based on the status of events. For example, one popular use is to combat the notorious “flash of unformatted text” (a.k.a. FOUT). A description of WebFont Loader capabilities is provide on the Google Font API website located here: Web Fonts offers over 10,000 premium quality fonts from leading type designers and foundries for license as Web fonts. Web Fonts makes it simple and fast for Web designers and developers to implement Web fonts by adding a single line of code to Web pages. Both JavaScript and non-JavaScript options are available. The WebFont Loader JavaScript library hosted by Google offers an alternative method for loading the fonts and CSS defined within Web Fonts projects.

To get started, you can check out this sample page we’ve created using example code: You’ll also need your Web Fonts project ID. To get your project ID, login to your account and visit the Publish tab. If you’re using the JavaScript publishing method, your project ID is the character string in your line of code just before the .js suffix. If you’re using the non-JavaScript publishing method, your project ID is the character string in your line of code just before the .css suffix.

We hope our customers find this new capability useful. Watch this space for further enhancement to Web Fonts.


by Chris Roberts

Earlier this week Microsoft announced the much anticipated release of Windows® Internet Explorer® 9. Today, I’m happy to announce Web Fonts support for Internet Explorer 9.

One of the first things you will notice is that Web fonts look much better in IE9. This is due to the use of the new DirectWrite subsystem. DirectWrite employs a significantly different text rendering approach than earlier IE browsers, and the results are dramatic. Bottom line, Web Fonts look great in IE9. Enjoy!

by Steve Lee

The top 5 languages used online are English, Chinese, Spanish, Japanese, and Portuguese. Perhaps more surprising is the fact that 22.6% of Internet users have Chinese as their primary language. Web support for world languages is increasingly being recognized as a key success factor for global enterprises. That’s why we think the promise of Web fonts as a global solution rests on language support.

One of the biggest challenges for Web font providers is to support as many languages as possible. Certain world scripts, such as non-Latin writing systems like Chinese, Japanese and Korean, extend the challenge further because of their large numbers of characters and the burden this places on delivering text quickly to your screen. When you land on a Web page, you expect that the text should display instantly, no matter what the language.

The problem is that large font file sizes can cause slower page load times. To overcome the font size vs. speed issue, different approaches for different fonts that support different languages are needed. The goal is to deliver fonts as quickly as possible and hide the complexity from the user. Web Fonts offers lightning fast delivery for over 40 major languages, including those with gigantic character sets like Chinese, Japanese and Korean. So, how do we do it?

Dynamic Subsetting
Looking closely at Chinese, Japanese and Korean fonts, they each can have thousands of characters, from 10,000 to 30,000 or more. The average Chinese Big5 font with 13,000 characters is about 8MB. A Unicode 6 font has 109,449 characters and can require more than 50 MB. That’s where our Dynamic Subsetting comes in.

We are able to deliver fonts that contain ONLY the characters used on the page, thus dramatically reducing font file size. Our patent-pending invention called Dynamic Subsetting accomplishes this. Here’s how it works: a JavaScript code is placed in the target HTML page, which parses the page and reports back to the Web font servers which fonts and which characters are used on the page. This operation is done in a local machine; a simple POST back is rather uncomplicated and small in terms of size. The process is instant. Upon receiving the fonts and character information, the font servers generates the fonts containing only the required characters.

Without Dynamic Subsetting, text set in three East Asian fonts could require a 30 MB download. Dynamic subsetting reduces the font to just the characters needed to render the page. In this example, the combined file size of three East Asian fonts could be shrunk to under 100K – only 0.3% of the original size. Without Dynamic Subsetting, Web fonts are almost off limits to Chinese, Japanese and Korean fonts.

With Dynamic Subsetting and Web fonts, it’s now possible to overcome several language support challenges that have existed since the dawn of the Web. International portals like Facebook, Twitter and Google can now leverage a variety of Unicode fonts to support world languages online without worrying about which system fonts exist on recipient computers. Another great example are Gaiji characters. Gaiji are non-standard characters that are found in people’s names in countries such as Japan, Taiwan and China. These characters are not available in standard character sets, but are very important for government agencies and large global enterprises. Web fonts which include these characters can be deployed to solve this problem. Similar problems can now be addressed with WGL4 fonts for Pan-European characters, Japanese Ruby characters, Chinese Bopomofo and Chinese Pinyin.

For the first time in the history of the Web, countless culturally and educationally important characters can finally move into the digital age. In these examples, Web fonts don’t just match the language support provided by system fonts, they exceed it, providing a new set of language support capabilities. Web fonts have arrived, and with Web Fonts web designers can now deliver better looking Web sites with improved language support. A truly beautiful global solution.

by Steve Lee

After a little more than four months of beta, we are officially launching Web Fonts. Our mission is to make fonts available to all websites and applications. We believe the way to do that is to continuously provide our customers with additional value, quality and convenience. We kept this objective in mind as we began incorporating the feedback we received during our beta. This has resulted in some new features and options that we think will be of interest to you. Here’s a quick rundown of what’s new.
Desktop downloads – installable fonts for Professional subscribers:
Professional subscribers can download installable fonts for creating website mockups. Download up to 50 fonts every 30 days.
More fonts
We’ve expanded our selection of Web fonts to more than 7,500. The original 2,200+ fonts available during beta are still available for use to all subscribers, including users of our free plan.
Broader language support
More than 50 percent of Internet users don’t speak English. Corporations need to communicate globally. With over 600 non-Latin fonts, we offer support for more than 40 languages.
Dynamic subsetting
East Asian languages require a large number of characters. A font supporting the Simplified Chinese writing system can contain more than 28,000 characters and have a file size in excess of 10 MB. To reduce the download time, our patent-pending technology serves a font containing only the characters needed to render the page.
Non-JavaScript publishing method
This publishing method uses a CSS file link and reduces potential conflicts with other JavaScript code that could be running on a Web page.
Private fonts
If you already own or have licensed fonts for Web use, we can upload the fonts and serve them to your site visitors. Please contact us for more details on this service.
Wildcard subdomain support
You can enter “*.” before your root domain to cover any subdomains you may use. This feature is great for sites that have many subdomains or those that dynamically generate subdomains.
SSL support
SSL support is free for all subscribers including our free plan users. To use Web Fonts with Transport Layer Security, simply change “http” to “https” in your Web Fonts code snippet.
iPhone, iPad and iPod support
We’re happy to unveil support for iPhone®, iPad® and iPod® Touch mobile digital devices that’s stable and looks great, too.
This is just the beginning of our journey. As we build upon our solution, we want to make it easier to use and even more accessible. While our current service is already addressing the demands of Web designers and content creators, we’re looking ahead at how to best serve user interface designers, application developers and others. We hope you’re as excited as we are to be on the edge of this emerging and empowering technology.

by Johnathan Zsittnik

The Web Font Awards
Today Monotype Imaging announced the Web Font Awards – a design competition for websites using Web fonts. When the competition opens up next month, Web designers will be able to submit their creations for feedback, self-promotion and prizes. Visitors to the site will be able to rate and discuss the contributions. The Web Font Awards will aim to promote and aid the adoption of Web fonts. In that spirit, the competition has been opened to users of any Web font technology (as long as the site uses real fonts).

What excites me about the Web Font Awards is the opportunity to see some of the best design that’s being done using this new tool. A competition like this provides a level playing field – allowing the best designs and designers rise to the top no matter how recognizable their brand may be or how much traffic their site receives. In the few short months since the start of our Web Fonts beta, we’ve had thousands of users pour in to help test our service. We’ve received much feedback which has helped us to improve the service and line up many more enhancements to come. The beta has also provided some of our first glimpses of Web fonts in use. As you might expect, implementations by our heaviest users and closest customers have been the most visible. We expect that the Web Font Awards will shine a light on some great work that may have otherwise not received its due.

I hope this encourages those that are already using Web fonts reason and opportunity to share their creations with a greater audience, while providing those who haven’t started designing with Web fonts, one more reason to give it a shot.

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 Chris Roberts

Seems like all of the sudden the term “HTML5” is everywhere. It must be incredibly irritating to highly technical people when civilians hijack and misuse their terms. HTML5 seems like it’s well on the way to “Web 2.0″ land. At the risk of further contributing to its over exposure, I’d like to hear and share some views concerning what HTML5 might mean for fonts and the people who love them.

First, a baseline definition from Wikipedia (where else?):

HTML5 is currently being developed as the next major revision of HTML (HyperText Markup Language), the core markup language of the World Wide Web. HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary rich internet application (RIA) technologies such as Adobe Flash and Microsoft Silverlight. In common usage, HTML5 may also refer to the additional use of CSS3, as both technologies are under development in parallel. source:

That last line does a few things for me: 1) supports my observations that the term “HTML5” has already achieved “common usage” (be very afraid), and 2) ropes in CSS3, which gives me my lead-in concerning font usage prospects. I’ll make a basic assumption here, which may be completely wrong (I’m sure someone out there will set me straight), that “Web fonts” will work where HTML5 is supported. CSS3 supports @font-face, which has now been adopted in every major browser, enabling foundries (like my employer, Monotype Imaging) to offer new services like Web Fonts. Combine my “HTML5 supports web fonts” assumption with the support being thrown behind the HTML5 movement by the likes of Apple and Google, and I am hopeful that the further extension of “real fonts” into rich media is set to accelerate. The reference to “real fonts” here is meaningful. I’m contrasting font formats like TTF, EOT, OTF and WOFF, which maintain the full typographic features of a font, to “derivative” formats like SVG and/or SWF. Conversion into “derivative” formats can represent a stumbling block for creative professionals who want to exercise the full capabilities of real fonts within rich media applications. When a real font is converted into one of these derivative formats, many valuable typographic features of the original font file are lost. For example, coded instruction that make the font look more legible at various point sizes when it is scaled up and down are lost (hinting). So, just how far can HTML5 be pushed as a replacement for proprietary rich media formats like Adobe Flash? Check out this demo from Sports Illustrated (Nice call out for “sophisticated typography” at 1:46.)

Last week, Jon von Tetzchner, Opera co-founder, suggested that HTML5 may represent a unified development environment for mobile applications. Considering that there are now reportedly over 4 billion mobile subscribers out there, I’m thinking this should be a good thing for creative professional who want to use “real fonts” in their mobile applications. What do you think?

Great type makes sites stand out