Font Anti-aliases Makes Fonts Hard to Read

• xv min read
• Graphics, Typography, Fonts, Design, Photoshop

Quick summary ↬ Every bit printed typography enjoys the fruits of high-DPI glory, proudly displaying its cute curves and subtleties, its on-screen counterpart remains stifled past beefy pixels, living in a world of jagged edges, distorted letterforms and trimmed serifs. Until display manufacturers produce affordable 200 or 300 PPI monitors, we'll take to rely on software advances to fix these issues.

Enter anti-aliasing: the next best thing to a world of college-resolution monitors. The concept of anti-aliasing is fairly simple: add semi-transparent pixels along the edges of letterforms to smooth the appearance of the "stair-footstep" outcome.

More after jump! Continue reading beneath ↓

However, many factors and technologies determine the actual effectiveness of the process: hinting, subpixel rendering, software capabilities and operating organisation specifications, to name a few. Hither, we'll look at what you as a designer tin can do to improve the results of anti-aliasing with Photoshop, Flash and CSS. Plus, we'll explain the constraints of hardware, browsers and operating systems.

Technologies

Aliased vs. Anti-Aliased

It takes but a quick glance to realize that anti-aliasing is extremely of import to making text legible. With few exceptions, anti-aliased text can dramatically reduce eye strain, not to mention that it renders glyphs much closer to their intended design. Because of this, designers must decide how, not if, anti-aliasing should exist used. This decision is based on a number of factors that one has to consider in the process from design to delivery.

42pt "Goudy Oldstyle Bold": aliased and anti-aliased versions

Font Hinting

Most text rendering engines rely heavily on hinting to determine exactly which areas of a glyph should be smoothed. Font hinting, or instructing, uses tables of mathematical instructions to align letterforms to the pixel filigree and to determine which pixels should be grayscaled. Though most software provides car-hinting using standardized algorithms, ideally the process would be washed manually by the type designer and embedded in the file.

Put only, these instructions work by modifying the position of structurally important points, such equally those constitute forth splines or at the base of operations of stems, and aligning them at pixel boundaries. Intermediate points are and so repositioned based on their relationship to the primary points. Using an open-source font editor, such equally FontForge, allows you to view and edit a font's hinting information. Encounter how much work goes into producing a clear glyph; your appreciation of type designers and font engineers volition certainly increase.

Hinted and unhinted type both have their pros and cons, leaving the designer to choose between legibility and typeface integrity.

Viewing the hints for Goudy Oldstyle's "H" using FontForge.

Subpixel Rendering

Every pixel on a standard monitor consists of three components: a red, a green and a bluish. The brightness of each of these sub-pixels is controlled independently, and because of their minor size, our eyes blend the 3 into one solid-colored pixel. Typical anti-aliasing sets even values for each of these subpixels, resulting in full grayscale pixels. Subpixel rendering exploits the individuality of each unmarried-colored component and uses it to increase the perceived resolution of the monitor. This allows a pixel to take on visual weight from neighboring pixels, thereby allowing blazon to be smoothed in smaller increments. Rendering the blazon in this manner can produce subtle color shifts visible along the edges of glyphs.

Subpixel rendering relies on a perfectly aligned grid of pixels, which makes LCD apartment panels the only type of monitor on which this technique works consistently. CRT monitors endure from inaccuracies and oddly distributed pixels, making subpixel rendering extremely difficult to pull off. Even LCD monitors have variations in their subpixel organisation that must be deemed for; some monitors are arranged in the club of RGB, while others are ordered BGR.

Subpixel rendering triples the perceived resolution past setting each color component separately.

Subpixel rendering produces more desireable results than standard rendering, but adopts color fringes.

Input

As designers and developers, nosotros have express command over how type is ultimately seen past the end user, but by using the proper delivery method, we tin can ensure an optimized presentation. That said, we'll look here at the iii most mutual means in which text is sent to the user: HTML, images and sIFR. Each of these methods has an ideal use that, when properly implemented, can dramatically increase legibility and thus the overall user experience.

HTML Text

HTML text undoubtedly accounts for the majority of text found on the Web. Until recently, designers had absolutely no control over anti-aliasing with client-side technologies. CSS 3 introduces two new means to control how HTML text is delivered: font-smooth and @font-confront.

font-smooth
Font-smoothen allows you to control when smoothing is used but not how it's used; the anti-aliasing method is still controlled by the user'southward environment. This setting is not widely supported withal merely may bear witness useful by allowing us to turn anti-aliasing off at pocket-size indicate sizes — where type often becomes blurry. It may go doubly useful when more than complex and non-browser-condom fonts are embedded with the new @font-face rule.

@font-face up The @font-face rule is an exciting new feature of CSS 3 that designers have been waiting years for. Although we've been able to add obscure typefaces to font stacks for quite some time, a big majority of users don't have high-end fonts on their local machines and end up with a typical Spider web-safe font (east.k. Times New Roman substituted for Adobe Garamond Pro). Past allowing the browser to import a font file from a URL, we can now serve the user any font nosotros'd similar without relying on their font library. This means that we can serve not only more unique fonts but as well those that are improve hinted and more legible.

Despite the promise this feature holds to create a more than beautiful globe of online typography, we may still see designers opt for fonts like Verdana, which have been designed and hinted specifically for on-screen viewing. Some of our favorite fonts from the print world just look bad when rendered on the screen, specially at smaller text sizes. Surely nosotros'll see new manufacture segments arise every bit a outcome of the support of @font-face up, including an influx of browser-hinted typefaces made bachelor through services such as typekit.

Bickham Script Pro embedded using @font-face and rendered in Safari 4 and Firefox three. Notice the OpenType swashes and ligatures supported in Firefox 3!

Text equally Image

Serving text as an prototype may have express uses, but information technology allows you to fine-tune every letter if necessary. Photoshop provides five pre-set anti-alias settings, which determine pixel values using different algorithms in conjunction with the document'south pixel filigree. Unfortunately, none of these settings let for subpixel rendering, only by using the Free Transform option to nudge the layer's position, you can effectively strength the algorithms into rendering cleaner. Each setting allows a different amount of origins, and some simply produce variations when translated along the 10-centrality. Beneath is a table of available transformations.

None
Aliased text, created using the None setting, has a very limited use and typically looks all-time between point sizes of ix and 18. Sizes lower than this range volition result in unidentifiable characters, and larger sizes will lead to increased character weight and overly jagged edges. Depending on the font, sometimes two dissimilar signal sizes will render at the same top, causing a shift in letter spacing, width and 10-peak. For example, 14pt Arial renders ten pixels high with an x-elevation of eight pixels. Arial at 13pts also sits x pixels high but has an x-superlative of just 7 pixels — a slight but very perceivable departure. When tightly tracked, this setting may besides crave manual kerning, because some letters will sit pixel to pixel against each other.

13pt and 14pt Arial return with the aforementioned cap height but different x-heights.

Sharp
The Abrupt setting uses very tight filigree-fitting and produces sharp, if non too sharp, type. The plotting of pixels with this setting is very similar to how the None setting plots them merely allows for a certain caste of smoothing. In fact, if pixels are fix atop ane some other, you can really encounter that a majority of solid pixels acquit over from None to Sharp. While the cap height and x-height typically remain the same, yous might see an increment in character weight and width. Sharp has a trend to completely cut subtle shape variations from rendering and sometimes causes inconsistent letterforms, then if typeface integrity is important to you lot, you lot may want to endeavor a different setting.

Well-baked
The Crisp setting maintains much of the font'due south original weight and curvature but cleans upwardly some of the awkward pixels created by light serifs and thin strokes — which is especially useful for larger point sizes. With the Crisp setting, notwithstanding, yous sacrifice the ability to nudge the layer on the y-axis.

Potent
The Strong setting is notorious for adding unnecessary weight to a typeface, only information technology provides the most freedom with translating the origin, with 32 x-axis variations and 16 on the y-axis. The variety of origins with this setting tin come in very handy when working with complex letterforms. Strong may also be useful when working with a typeface that has very thin strokes.

Subtle animation showing the 32 anti-aliasing origins at 36pt, 18pt and 12pt.

Smoothen
The Smooth setting is the closest to unhinted anti-aliasing and therefore remains truest to the original glyph shape. This algorithm is best used on medium-sized to large type, because it tends to render very calorie-free and frequently blurry at smaller point sizes. If used with an appropriate typeface at a proper size and if the origin is properly adapted, this setting can produce a beautiful balance between crispness and letterform fidelity.

Shape Layer If Photoshop's hinted algorithms all produce undesirable results, yous may want to attempt using unhinted anti-aliasing past way of converting the type to a shape layer. This allows you admission to the original outlines of the font, which draw values based on the percentage of the pixel enclosed in the shape. What you sacrifice in editable type, you lot make upward for in origin transformations: 32 on both the x- and y-axes. Though unremarkably a terminal resort, don't rule out the possibility of using a Shape Layer; it tin can often produce much better results than Photoshop'south algorithms.

Fractional Widths Another, more than veiled, setting that sometimes helps with anti-aliasing type at small point sizes is the Partial Widths selection located in the Grapheme palette's wing-out menu. With this setting turned on, the character spacing is set to varying fractions of pixels. This is ideal for auto-kerned blazon at large sizes but tends to bump the type either likewise close together or too far apart at smaller sizes. Turning this option off will circular all character spacing to whole pixel values, which may help better space the problematic blazon. This is a hit-or-miss option, so use it wisely.

Decimal Point Sizes Typophiles might cringe at the idea of using a decimal indicate size, but when designing for digital media, standard point sizes don't always conform to the pixel filigree. By using decimal point sizes and either the Smoothen or Strong anti-alias setting, you can commonly bring a blurry typeface back into focus. Please note that I am not condoning the use of vertical or horizontal scale!

Using decimal values can dramatically improve anti-aliasing results, as seen above. Top: 16pt Goudy Oldstyle with Potent Anti-Aliasing. Lesser: xvi.5pt Goudy Oldstyle with Stiff Anti-Aliasing.

sIFR Text

Using sIFR to replace headers with a block of Wink brings benefits beyond the obvious. Yes, it solves the problem of having to utilize CSS prototype replacement techniques to provide a wider array of fonts, simply information technology also allows incredible control over how the type is anti-aliased. Peculiarly useful are the sharpness and thickness settings, which control the edges of glyphs. (If only Photoshop had these settings!) You tin set and tweak a number of settings to fit your implementation; and they can be controlled by passing keyword arguments inside the sifr-config.js file. These settings include:

sharpness (number)

A value betwixt -400 and 400, which determines how sharp (positive number) or soft (negative number) the edges of the glyphs will be.

thickness (number)

A value betwixt -200 and 200, which sets the thickness of the glyph edges.

gridFitType (cord)

Possible values are: "none," "pixel" and "subpixel." This specifies how prominently the horizontal and vertical lines are fit to the monitor'due south pixel filigree. "Pixel" and "subpixel" unremarkably produce the all-time results.

antiAliasType (string)

This is set by default to "advanced," which allows the anti-alias settings above to be applied. Information technology can likewise be set up to "normal," simply this option limits sIFR's rendering capabilites to accommodate earlier versions of Flash Player and overrides any of the properties above.

sIFR allows y'all to precisely customize your anti-alias settings. Notice that the custom setting is slightly thinner and crisper.

Output

Displays

Because very few people have monitors with resolutions college than 100 pixels per inch (PPI), nosotros take to rely on software to trick our optics into thinking that the resolution is greater than it really is. Some advances are beingness made by display manufacturers, but they are still beyond the average Web surfer's budget.

A typical LCD monitor (which yous're probably reading this on) has a dot pitch of around .20 or .30 millimeters. New technologies, such as the Ferro Liquid Crystal display are touted to reduce that number to .012 millimeters. Bringing this engineering science to the mainstream would bring tremendous advantages to the earth of blueprint and on-screen reading. Even so, until they become affordable for the boilerplate consumer, we'll be relying on software advances.

Operating System

Microsoft and Apple tree have both delivered technological advances in the world of anti-aliasing, but they have somewhat unlike approaches. The current versions of both operating systems employ anti-aliasing and subpixel rendering. Both vendors take dramatically increased legibility inside their operating systems, just controversy has arisen over the aesthetics and legibilty of each. Microsoft'due south entry in the contest — which is characterized by tight grid-fitting — is aptly named ClearType. Past forcing characters tightly into the pixel grid, ClearType increases contrast forth the edges of glyphs and renders more crisply.

Distinctly unlike is Apple's Quartz 2D, which puts emphasis on maintaining the shape and integrity of the typeface. This certainly makes sense, given the high proportion of designers who piece of work on Macs. But Quartz rendered type often appears blurry, which tin can cause middle strain with extended reading.

Windows Vista and Window XP both apply Microsoft's ClearType rendered either by Windows Presentation Foundation or Graphics Device Interface; both handle text in a very similar mode, though WPF doesn't snap horizontally to the pixel filigree. Windows XP actually comes defaulted to monochromatic anti-aliasing.

Simply ClearType can be turned on past going to Command Panel → Appearance and Themes → Display, clicking on the "Appearance" tab, selecting "Effects…" and changing the drop-downward from "Standard" to "ClearType." The operating system itself allows for very lilliputian customization of ClearType; you basically choose between on and off. Microsoft's ClearType Tuner PowerToy, though, allows some control over how it renders. Windows 7 brings a new rendering platform, named DirectWrite, that introduces subpixel positioning and y-management anti-aliasing. Equally seen in this presentation, the advances fabricated with DirectWrite are quite impressive and sure to exist adopted by other vendors.

Apple'due south Quartz 2D now renders type using Core Text, which has recently replaced Apple Blazon Services. The Quartz 2D displays type much closer to the typeface'due south original design, which is similar to how you might expect to encounter information technology in print form. While this seems similar a good idea from a design perspective, it doesn't concord up with legibility, at least not on common LCD screens. Quartz text could conceivably appear much better if we were using higher-resolution monitors. Because Apple has complete control over both the operating system and the hardware that it runs on, maybe a 200 PPI iMac is just around the corner. We can hope!

Browsers

The nearly electric current browsers today all inherit the anti-alias settings of the operating system. Only with i anomaly. Firefox 3 in Mac OS X seems to inherit the operating arrangement's settings only also seems to apply more precise grid-fitting and kerning. Maybe Mozilla is attempting to meliorate on Quartz's blurry rendering.

Unfortunately, nosotros take no way to control or fifty-fifty tell how the user's browser will return text. What we can do is understand the nuances of each browser and make sure that we deliver a suitable presentation across all viewing platforms. Below is a listing of browser capabilites and blazon samples to help you lot gain some insight into how they handle anti-aliasing.

Windows XP and Vista:

Mac:

Conclusion

Though many advances have been made in rendering on-screen typography, most have been aimed at treating the symptoms and not the disease. Until everyone has a 200 PPI monitor sitting on their desk, it will be upward to designers and developers to use the proper technologies to ensure legibility without degrading the design of the typeface.

Further Reading

• Mastering Photoshop With Paths
• Pixel Perfection When Rotating, Pasting And Nudging In Photoshop
• The @Font-Confront Rule And Useful Web Font Tricks

(al)

taylorsmill1968.blogspot.com

Source: https://www.smashingmagazine.com/2009/11/the-ails-of-typographic-anti-aliasing/

Share this post