fonts.com blog
Posts Tagged ‘hinting’

by Bill Davis

Not all fonts are created equal. Some are designed specifically for headline sizes while others are meticulously crafted for use at smaller sizes for reading paragraphs of text. So when building websites, what is the best way to find fonts to meet your particular needs?

At Fonts.com, we’re pleased to provide new tools to let you discover fonts based on their on-screen quality attributes and usage. “Web Font Quality” and “Recommended Use” are two new classifications available to you as part of a font search.

WEB FONT QUALITY
The first thing to understand is that fonts are rendered differently across operating systems (Mac OS X, Windows, Android, etc.) and across versions of browsers (IE, Firefox, Chrome, Safari).

Web font rendering in Mac OS X and Windows
The above illustration shows that fonts can look different across browsers and operating systems.

As a Web designer, it’s important to proof your work in different browsers and platforms, to ensure the fonts you select will meet your quality needs. We have created two categories to designate the quality of Fonts.com Web fonts:

  • Screen Optimized
  • Hand Tuned

“Screen Optimized” fonts are those that have been processed by Monotype Imaging’s font development team through a set of proprietary tools to ‘hint’ the fonts for optimal rendering in Windows browsers. Windows uses two common methods of rendering fonts: ClearType and ClearType with DirectWrite. Both of these use special ‘hints’ programmed into the font to adjust the pixels used to display fonts. Our propriety hinting tools allow us to generate enhanced quality Web fonts that can be superior to the standard tools commonly used by type designers.

“Hand Tuned” fonts represent the crème de la crème of Web fonts. Our font experts manually program each of these fonts to improve their display on screen, especially at small sizes. We spend hours on each font, hand tuning their appearance by focusing on the finer details of each character in a font. Hand Tuned Web fonts will have a level of quality that is expected of fonts used at small text sizes.

Web Fonts on Fonts.com - Browser preview and quality/usage options
For each Web font, we provide a variety of ‘browser shots’ that captures how a particular font looks in various systems and browsers.

RECOMMENDED USE
Another new sort classification is “Recommended Use.” We have created this to help you select fonts that will work best in these general size settings:

  • Paragraph
  • Headline

“Paragraph” fonts can be confidently used at sizes from 12 to 24 pixels on screen. Paragraph fonts typically have a family with multiple weights and styles available. For example, regular, italic, bold and bold italic. Many families include weights like light and medium as well. Paragraph fonts all feature Hand Tuned Web font quality and have been tested for use at reading sizes on screen.

“Headline” fonts are for use at 24, 36, 48 pixels and higher. These are fonts that are best used at the larger sizes associated with headlines and include script and display font styles. Headline fonts also have extreme weights including ultra light and heavy or black. Care should be taken when using Headline fonts at smaller sizes than the recommended minimum.

The new Fonts.com includes great features for searching and discovering fonts, especially our high quality Web fonts!

Using the "refine" option in Font Search

In the search window, you can refine your search by adding additional criteria. In the above example, we have added “Web Font Quality” to refine the search, and you can instantly see the result of fonts that are Hand Tuned and Screen Optimized.

We hope you enjoy these new features on Fonts.com to discover the best quality Web fonts available for you to use in your next project.

 


by Bill Davis

Monotype Imaging is pleased to have two of its type specialists speaking at the Reading Digital Symposium on April 27–28, 2012 at the Rochester Institute of Technology.

Web fonts and e-publishing tools bring a vast array of typographic choices. But how do you effectively harness type and typographic controls that were once the domain of book designers and print publishers?

Meet experts who will help you make the right choices. Monotype Imaging’s Steve Matteson and Tom Rickner go “under the hood” with type for the screen:

Steve’s presentation, titled “Type, Tech, and Tools to Change the Way We Read” will cover business, technology and design issues that impact typography in the new and exciting medium of e-books. As creative type director for Monotype Imaging, Steve is a designer of typefaces for brands such as the Microsoft Xbox video game console and the Google Android operating system, for which Steve designed the Droid fonts. Steve will discuss why type is important, what goes into the type design process and what the challenges can be when creating typefaces for electronic media.

Tom’s presentation, titled “Hints about Hinting — the Achille’s Heel of Type on Screen” will equip the attendee with an overview of the concerns impacting the functionality and the perceived aesthetic quality of the final font product used in delivering e-book content. Tom is a technology expert for type on screen and has hinted custom typefaces for such companies as Apple and Microsoft.

E-books represent a different set of challenges and opportunities compared to the design, production and distribution of printed books. Factors that particularly influence the success of e-books include e-book format, screen size, display technology and the impact of typeface selection in regard to legibility on small screens. During the symposium, Steve and Tom will explore the various technologies and emerging standards that are shaping the evolution of e-books.

About Steve Matteson
Steve Matteson Steve Matteson is the creative type director for Monotype Imaging. A 1988 graduate of the School of Printing at Rochester Institute of Technology, Steve found his passion for type and typography among the historic collections of books, metal type, type-casting equipment and printing presses. In 1990, Steve was hired by Monotype Typography as a contractor to aid in the production of Microsoft’s first TrueType fonts. Having already spent more than two years mastering the hinting algorithms of a similar technology for another company, TrueType was an easy transition. He produced fonts for customers such as Apple, Hewlett-Packard and Microsoft. Working on the technical aspects of type has helped Steve fuel his ambition to design new typefaces. One of his early projects was a revival of Frederic Goudy’s Truesdell design, completed in 1993. These were quickly followed by the Andalé screen font design for mainframe terminal emulation, in addition to the Blueprint, Fineprint and Goudy Ornate typefaces, as well as user interface fonts for the original Xbox, the Windows Vista platform and Android OS. Some of Steve’s more recent creations include Endurance, Miramonte and Bertham designs.

About Tom Rickner
Tom RicknerTom Rickner has developed font software for over 20 years, producing custom font solutions for companies such as Adobe Systems, Apple Computer, Hewlett-Packard, IBM, Lexmark, Lotus, Microsoft and Nokia for implementation in nearly every imaging environment. A graduate of School of Printing at the Rochester Institute of Technology, he is recognized for the highly regarded TrueType production and hinting of Matthew Carter’s Georgia, Verdana, Tahoma and Nina typeface families, commissioned by Microsoft. His experience with non-Latin scripts is broad, having designed fonts for Greek, Cyrillic, Hebrew, Thai, Thaana and Cherokee scripts. His original type designs include Amanda, Buffalo Gal, and Hamilton, and his newest typeface, Rebekah Pro, is a wonderful revival and expansion of Morris Fuller Benton’s Piranesi Italic.


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  http://www.slideshare.net/Monotype_Imaging/new-web-typography.

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 Bill@Fonts.com 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 Fonts.com 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 Fonts.com 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 Bill Davis

This week our Web font development team achieved another impressive milestone. We now have over 20,000 fonts available through Fonts.com Web Fonts!

20,000 Web fonts from Fonts.comAll our Web font releases go through an exhaustive process to ensure that all Web fonts render properly in all browsers on different platforms. We manually review every font, and use a series of proprietary hinting tools to make sure the on-screen rendering meets our quality standards.

This newest release features a wide range of type styles from over 20 different foundries:

This newest release provides Fonts.com Web fonts customers with a broad array of display, script and ornamental fonts, in addition to symbol and picture fonts. You can view all our new Web fonts at http://webfonts.fonts.com.


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

PDF Catalog of Hand-Hinted Web Fonts

If you’ve been following the developments regarding “Web fonts”, you’ve probably heard someone complain about the way some Web fonts look in the Windows® operating system. You may have even heard that the problem is more specifically to do with Windows XP. If you really dug deep, you may have read that the most egregious cases are centered on a scenario where a Windows XP user is surfing with a browser that does not have default ClearType® support. And if you are a total Web fonts junky with way too much time on your hands, you may have looked up operating system and browser market share figures and arrived at the conclusion that over 30% of your visitors may fall into this category. Then, you may have been overcome with feelings of nausea, dread and hopelessness.

All is not lost. First of all, time is on your side. XP won’t be around forever. Every day Windows 7 is gaining ground on XP. Someday this will all be nothing more than a poorly rendered memory. Better still, you don’t have to wait for “someday”. There is something you can do today to cure those XP induced Web font blues. Fonts.com Web Fonts now offers over 600 “hand-hinted” Web fonts to help address this specific situation. Among them you will find several classics like Avenir®, Bookman Old Style™, Century Gothic™, Eurostile® Next, Frutiger®, Helvetica®, Trade Gothic® and Univers®.

What does hand-hinted mean? Basically, it means that a real person sat in front of a computer monitor and studied each character at different point sizes, making painstaking adjustments until they were satisfied with the result. But we are not talking about just any person. Hand-hinters are to fonts what sommeliers are to wine. It takes many years to learn to do it well. Every font is different in design and characteristic. It takes a rare and highly skilled expert to get it right.

Monotype Imaging has been in the hinting business since the beginning. Over the years we have accumulated a great deal of font hinting knowledge and talent. We’ve also produced a very large number of expertly hand-hinted fonts. Today, it’s our pleasure to share them with you.

Here’s a link to our hand hinted Web fonts now available on Fonts.com Web Fonts:
Click here

Here’s a link to a PDF catalog of our hand-hinted Web fonts:
Click here

Great type makes sites stand out