7 Tips Summarizing Type Rendering

Based on more than one year of groundbreaking research, user input and expert interviews, Typekit has compiled a comprehensive, seven-part series designed to help designers navigate the ins and outs of text rendering on web platforms. This article summarizes the content included in each part of the series with tips to maximize hinting, antialiasing, layout and type settings for spectacular rendering results.

1. Understanding Text Rendering Engines
The way text is displayed and perceived on the web is affected by a number of variables and user settings. Beginning with the font file, rasterization and display is affected by smoothing settings, rendering engine algorithms, web browsers, monitors and operating systems. The hinting or tweaking of pixel alignment is also responsible for some of the good effects, bad effects and rendering anomalies that are just plain ugly. For ease of use, Typekit’s web renderings and browser samples show fonts with standardized renderings from five of the most common browser configurations.

2. Key Rendering Differences between Operating Systems
In the second installment, Typekit uncovered important rendering differences between mainstream operating systems. In keeping with the ongoing philosophical battle between Microsoft and Apple, the companies’ text rendering engines vary drastically in their basic concepts.

The sleek text rending engine from Macintosh known as Core Text, which is used by the Mac OS X and iOS platforms is responsible in part for the clean aesthetic beloved by Mac users. Core Text renderings show strong sub-pixel antialiasing as well as y-direction antialiasing. The detail-specific nature of Mac’s Core Text rendering engine causes a slight blurriness and a faint color fringe in paragraph text while preserving strong crisp lines in large-point fonts. Users with CRT monitors or XP operating systems see text rendered by Microsoft’s GDI or GDI+ engine with standard grayscale antialiasing. Microsoft also has a setting that allows users to see text with ClearType sub-pixel antialiasing for LCD monitors or no antialiasing at all. DirectWrite is Microsoft’s newest text rendering engine included with Widows 7 and Vista operating systems. Like Mac’s Core Text engine, DirectWrite includes a y-direction antialiasing algorithm. However, Microsoft’s version also removes the faint smudges that occur beneath the baseline in Mac’s true outline version.

Sub-pixel antialiasing, which takes advantage of the LCD’s red, green, and blue colors, is integral to the rendering of clear, crisp curves because it effectively triples the resolution in Core Text, Direct Write and GDI engines with ClearType enabled. However, sub-pixel antialiasing can also be responsible for the color fringe seen in some text renderings.

3. Tips for Testing Browser Interaction with Rendering Engines
As discussed in the third part of the series, the rendering inconsistencies between different browsers and OS combinations are notorious among web designers. Fortunately, the layout engines that browsers rely on to accurately render web fonts and style pages are becoming more streamlined.

Layout engines used by web browsers fall into two groups: those that defer to OS defaults and those that use their own rendering engine, such as Mac’s Core Text or Microsoft DirectWrite with ClearType antialiasing. Web designers can simplify things by testing web layouts in all five major browsers and layout engines. Users with Chrome, Safari, Opera, IE6 or early versions of Firefox typically view text with standard antialiasing settings from their OS enabled. Upgrades in IE8 cause ClearType antialising to be enabled platform-wide, which also affects display settings in Firefox and other browsers. Both Firefox 4 and IE9 use DirectWrite settings for increased display consistency. With these platforms, all IE9 and Firefox 4 users see the same text rendering because browser settings bypass the OS defaults.

4. Effective Font Design
The fourth post in the series on type rendering discusses the importance of font design in the on-screen appearance of web fonts. In the world of digital typesetting, designers face a new set of challenges. The ability to resize fonts from paragraph-sized text to oversized headline fonts also creates drawbacks in the smoothing and resolution of fonts in size-specific situations. When applied to fonts, the one size fits all approach results in poor quality text renderings. Rather than choose one size fits all fonts, designers are better served by using application-specific and size-specific fonts, such as low-resolution paragraph fonts or updated headline fonts with tweaks to enhance on-screen renderings.

5. Tips for Understanding Font Formats
Fonts are either designed for the web or adapted to conform to standard on-screen display formats (
Read about Font Types and Formats). Because there is no exclusive standard for display fonts, vector graphics are frequently converted and adapted for rendering on screen in WOFF (Web Open Font Format), Embedded OpenType (EOT) and raw OpenType (OTF) or raw TrueType Format (TTF) in most other platforms. In most cases fonts begin life in cubic PostScript (PS) format before they are converted to their quadratic TrueType (TT) form. In addition to pixel hinting, the font’s outline is the single most important factor affecting on-screen rendering. Typekit hints each font manually to maintain the original design along with precise stem thickness, controlled height and proportionate negative space for consistent renderings in all formats.

6. How to Create Effective Text with Hinted Fonts
In the sixth post, London-based font designer Tim Ahrens from Just Another Foundry studio, who is also the newest member of the Typekit team, shared insights on hinted fonts and how this tedious pixel-manipulating process performed by detailed-obsessed designers is responsible for creating fonts that display consistently on screen. Without manual hinting also known as instructions, fonts will be displayed with missing pixels or extraneous pixels that compromise a character’s appearance and readability. Once a vector-based outline has been established for an individual character, pixels are placed inside the vector glyph. The relationship between the ppem or pixels per em grid and the glyph affects where the pixels fall. To avoid inconstancies in the stem thickness due to pixel distribution, each pixel is manually hinted or manipulated by a font designer. Boldface fonts, uppercase fonts and asymmetric characters with descenders or other irregularities must be manually hinted by bending vector contours ever so slightly to conform to the ppem grid. Once instructions are established by general hinting or finely-detailed delta hinting, the high-quality fonts can be resized and rendered with great consistency.

7. Final Thoughts and Tips
Although there are no rights and wrongs in digital typesetting, users and designers typically prefer familiar text renderings, which they find easy to read and interpret. Despite subtle differences between browsers and operating systems, web designers can maximize the effectiveness of text by choosing specially-designed headline fonts and low-resolution type faces for paragraph text. Typekit is constantly working to upgrade fonts and implement tweaks that improve onscreen renderings as well as the user experience. Based on the past year and a half of research, we have manually hinted paragraph and headline fonts in our library for ideal rendering with a variety of platforms. These fonts have been marked with individual paragraph tags and manually hinted for correct contours and consistent stem thickness in a range of size-specific renderings.

The information in this seven-part series includes a number of complex concepts, so feel free to review the first, second, third, fourth, fifth, sixth, and final posts for a full look at all aspects of font rendering.

Be Sociable, Share!

    Tags: ,

    Leave a Reply