fonts.com blog
Archive for March, 2011

by Johnathan Zsittnik

Perhaps you’ve wanted to try out Web fonts on your website but haven’t found time to create an account. Or maybe you’d like a better preview of a particular Web font than can be provided by a simple character sample. Either way, we’ve got a tool that can help.

WebFontsPreview.com provides an easy means of testing Web fonts out on the website of your choice. To get started, visit WebFontPreview.com. Next, enter the URL of the site or page on which you would like to preview Web fonts. When the website loads, a toolbar will also appear that allows you to pick the Web fonts you want to display in the site’s headlines and body copy. We’ve stocked the utility with an assortment of favorites to choose from including fonts from our Frutiger® and Trade Gothic® families as well as many others from our catalog of hand-hinted fonts. Click the toggle link to quickly go back and forth between the Web font-enabled and original versions of the site.

WebFontsPreview.com employs some techniques that will work on most, but not all sites, to enable you to preview, experiment and most of all, have fun with Web fonts. Still, there’s no substitute for the real thing. So, if you like what you see, try a free Fonts.com Web Fonts plan to see exactly what Web fonts can add to your site.

We’re already working on some enhancements to the tool that we think you’ll really like. In the meantime, if you have feedback on WebFontsPreview.com or if there are other fonts you’d like us to add, let us know!

WebFontsPreview.com

WebFontsPreview.com Toolbar

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 Allan Haley

ITC was hitting its stride in the late 1970s. It was releasing a wide range of distinctive typefaces and U&lc had grown into a significantly influential journal – and not just about type and typography.

By the late 1970s, U&lc had a circulation of over 250,00 subscribers. ITC liked to think that there was also a significant “pass-along” readership, but most people tended to horde their issues – fearing that, if they got outside of their sight, they would be gone forever.

Graphic designers and art directors were the journal’s target audience. (This was before there were creative directors.) While graphic designers and art directors specified what typefaces were to be used in their projects, they also determined what photographs and illustrations might be used in those same projects.

As a result, illustrators and photographers were eager to have their work displayed in the pages of U&lc. And the editors of the journal obliged. The four issues of Volume Six showcased the work of no less than a dozen different illustrators and photographers. Some, like Jim Spanfeller and William Bramhall, became regulars in the journal. Others like, Frances Jetter and Janet Beller, received their first major exposure – while others, like Joan Hall and Richard Haas, were seasoned professionals.

Four diverse new ITC® typeface families were also announced in the pages of Volume Six. The ITC Clearface® family, a revival of an early American Type Founders design, was announced in the first issue. This was followed by the ITC Zapf Chancery® design, which went on to become one of the first commercial typefaces in the Apple operating system. The distinctive ITC Benguiat Gothic™ family was announced in the September issue and the ITC Novarese™ series by Italian designer Aldo Novarese (who also designed the Eurostile® family) finished out the year.

Click the PDFs below to download Volume Six of U&lc.

Low Resolution:

Volume 6–1 (Low Res).pdf (15.4 MB)

Volume 6–2 (Low Res).pdf (14.8 MB)

Volume 6–3 (Low Res).pdf (14.5 MB)

Volume 6–4 (Low Res).pdf (17.4 MB)

High Resolution:

Volume 6–1.pdf (75.1 MB)

Volume 6–2.pdf (71.5 MB)

Volume 6–3.pdf (72.9 MB)

Volume 6–4.pdf (78.9 MB)

Allan Haley
Allan Haley is Director of Words & Letters at Monotype Imaging. Here he is responsible for strategic planning and creative implementation of just about everything related to typeface designs.

 


by Bill Davis

Web fonts have quickly moved from concept to reality this past year, and now over 96 percent of all desktop Web browsers have support for Web fonts.

1. Updates/Changes to Browsers
Recent advancements and introductions of new browsers on desktops and mobile devices highlight one of the key benefits of a hosted Web font service: Changes are automatically applied – you do not need to worry about new versions of Web browsers!

The Fonts.com Web Fonts service is continuously being updated to address changes in browsers and Web font formats. All of this happens behind the scenes. Our development team performs extensive browser testing with Web fonts so our customers don’t have to.

For example, the Blackberry® 6 OS found in the newest model Blackberry smartphones includes a new Web browser that supports Fonts.com Web Fonts. And the new Internet Explorer® version 9 RC includes support for both EOT and WOFF Web font formats. It also added a feature to change the browser mode from IE9 to the older IE8 and IE7 modes. Each of these changes can cause problems for users who self-host Web fonts if their CSS font stack is not properly constructed.

2. Worldwide Delivery Platform
Another key benefit of a hosted Web fonts service is performance. The Fonts.com Web Fonts service uses a world-class CDN (Content Delivery Network) to ensure consistently fast download speeds of Web font files, no matter where in the world a user is located. We are supporting very large websites with huge traffic demands. Our service has proved to be robust enough to satisfy some very discerning clients.

3. Flexibility to Change Your Website
Lastly, websites themselves change often. Our hosted Web fonts service provides a powerful set of tools to make it easy for Web designers and developer to work collaboratively and to quickly change their Web fonts as their site typography evolves.

We built the Fonts.com Web Fonts service to provide automatic, seamless updates to customers using our hosting service. While we do offer extended licenses to customers who require a self-host option, we are finding that the vast majority of our customers are very happy with the benefits that come with the hosting service.


by Johnathan Zsittnik

Once again, we’ll be at the Web 2.0 Expo. The four day conference and exhibition will be held next week, March 28 – 31 at Moscone West in San Francisco. The show is for the builders of the next-generation Web: designers, developers, entrepreneurs, marketers, and business strategists. If you haven’t yet registered, you can do so here.

Stop by the Fonts.com space, booth number 520, where you can meet the team, talk type and take a tour of our Fonts.com Web Fonts service. We’ve got some new tools and features and thousands of new Web fonts to show off. I’ve also heard rumblings of a pretty sweet series of typeface shirts being on hand. Well, the guy in this pic seems to like his anyway.  See you there!

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

Fonts.com 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: http://code.google.com/apis/webfonts/docs/webfont_loader.html

Fonts.com Web Fonts offers over 10,000 premium quality fonts from leading type designers and foundries for license as Web fonts. Fonts.com 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 Fonts.com Web Fonts projects.

To get started, you can check out this sample page we’ve created using example code: http://thewebfonts.com/googleapi/googlemti.html You’ll also need your Fonts.com 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 Fonts.com Web Fonts.

 


by Johnathan Zsittnik

Hyundaiusa.com is the online home to Hyundai Motor America. The site features an interactive carousel that allows visitors to page through a selection of Hyundai automobiles or take a peek at a few of the company’s technological advancements. The site also features a variety of finance utilities, research tools and Web fonts.

While the company may best be known for its compacts, Hyundai also knows a thing or two about condensed designs, opting to use the Neue Helvetica® Condensed typeface throughout its website. Looking as stylish as ever, the classic Swiss typeface chauffeurs text across headlines and navigation elements.

Hyundai chooses Fonts.com 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

Earlier this week Microsoft announced the much anticipated release of Windows® Internet Explorer® 9. Today, I’m happy to announce Fonts.com 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, Fonts.com Web Fonts look great in IE9. Enjoy!


by Ed Platz

This is the first in a series of articles about using Fonts.com Web Fonts in popular web authoring sites. I’ll start with blogger.com.

There are two ways to specify fonts on your web site. One way is to create a style sheet on the Fonts.com Web Fonts portal. The other way is to specify them directly using font-family. You can use one or the other — or both at the same time.

Start by navigating to your Fonts.com Web Fonts account at www.webfonts.fonts.com.  If you haven’t done it already, create a project for your blog, add your blog’s domain (i.e. http://yourblog.blogspot.com/ and choose the fonts you’ll use.  If you are planning to use the style sheet method, assign them to selectors. You can use the handy ‘CSS Sucker’ tool to extract your selectors if needed (for more detail, see our blog post entitled “Fonts.com Web Fonts Adds CSS Sucker and Import/Export Features”). If you’re not sure about which selectors affect which pieces of your text, use (for example) the ‘Inspect Element’ feature of the Firebug plug-in for Firefox. Once your style sheet is all set (and even if you are not using the style sheet method), save it by pressing “save changes and update style sheet”. Now head over to the ‘Publish’  tab. Choose your publishing option, click on ‘Select code’, and copy your code.

Log in to Blogger.com and click on ‘Design’ to get to your blog’s design page. Choose ‘Edit HTML’. You’ll want to save a copy of your template in case you mess things up. Now, in the ‘Edit Template’ box, locate the string “</head>”. Paste the code before the </head> statement. Save it away, refresh and you should see the effects of your style sheet changes. If not, give it a couple minutes – sometimes the CDN needs some time to propagate your changes.

You can now use the font-family property as you ‘Edit HTML’ on Blogger.com. The Fonts.com Web Fonts ‘Publishing’ page tells you the font-family names to use:


by Lorenz Schirmer

Type designers create wonderful, nice curved outlines for each single glyph in a font. In the testing process, the fonts are printed several times at a high resolution (300, 600 or 1200 dpi). Everything looks great after lots of hours of work. Each glyph is modified and improved several times. Finally, the Gestalt of each glyph is perfect.

When a font is displayed on a screen, there is always a component – the rasterizer or rendering engine – that translates the outlines into pixels in the grid. Simply described, the rasterizer turns on a black pixel when the center of the pixel is within the outlines; otherwise, it stays white. This works fine in a high-resolution environment.

Today‘s screens have a standard (low) resolution of 72 dpi. In text sizes used for body copy, a tiny grid is available to render a glyph on screen, sometimes just six or eight pixels in the y-direction. See image below of the unhinted “g” and the hinted “g.” The “hinter” – a highly trained specialist that makes aesthetic changes within each glyph so they look good at different sizes within the constraints of the screen – has modified the outline of the glyph in the respective point size.

The image of the glyph “s” below shows the outline before and after the hinting process.

This needs to be done with all glyphs in several sizes until we reach a size where there are enough pixels available. At that point, the result of the rasterizer works without applying these manual “hints.” As you can see in the example with the series of “m,” it takes a reasonable amount of pixels until the shape and characteristics of the glyph become visible. All these examples are based on black and white hinting. If you were to print a hinted glyph in large scale in a high-res environment, it might look weird.

So, the hinter “destroyed” the nice Gestalt of the glyphs to make them look good on screen. It is a constructive destruction of what had been created. This is the “art of hinting.” A highly specialized skill, hinting is one of the “unknown” professions of design.

In future posts of this series, I will talk about greyscale, subpixel rendering and other challenges of displaying fonts on various kinds of screens.


by Chris Roberts

We’ve been busy. Over the last several weeks we have added thousands of new web fonts to our Standard and Professional tier offerings. Included are over 600 “hand-hinted” web fonts. Among them you will find several classics like Avenir®, Bookman Old Style™, Century Gothic™, Eurostile® Next, Frutiger®, Helvetica®, Trade Gothic® and Univers®. We have also released over 1,800 Hebrew fonts from MasterFont. Add to that a handful of great new typeface family releases like Camphor and Carter Sans and you are there. We have thousands more in the pipeline, so stay tuned!

Great type makes sites stand out