Understanding Font Rendering

Reprint: http://blog.jobbole.com/50061/

Screenshot The Web page on your Mac OS system and open the image to zoom in and out. You will find that the black text is not entirely pure black. (This phenomenon can also be seen in Windows 7 under IE9 using Microsoft Jas font). It's not scientific. After reading this article, you will understand.

Why the same font on Mac OS appears to look better than on Windows. I've never been able to figure this out, but yesterday I saw an article about font rendering: "A Closer looks at font Rendering" and finally got some idea of font rendering. This article is my summary of the knowledge of font rendering, only focus on writing.

an ideal and three implementations (rendering strategy, Rendering strategies)

the ideal shape

Ideal text refers to shapes that are depicted using vector graphics. Vector graphics is the use of mathematical equations in computer graphics to express the geometric shapes (points, lines and polygons, etc.) to draw the image. Such abstract description may be difficult to understand, it can be understood that vector graphics is "e the shape of the letter is the number 9 flipped over the graph" This description of the mathematical version. "

How do you translate this abstract shape description into a font that is displayed on the display? This requires the introduction of a new term, rasterization (rasterization), which refers to the process of converting an ideal shape into a single pixel. Our displays and mobile screens are actually made up of countless glowing pixel dots that are more dense in the unit area, with finer results (PPI, pixel density). You may have noticed that the letter E in the ideal shape diagram does not correspond to the gray grid (which can be understood as pixels), especially the edge of the curve, which is only part of the grid. Since the smallest unit we can control is the pixel, which creates the difference between ideal and reality, how to make the pixel-based screen better to express our ideal text shape, the predecessors of Ox X invented three kinds of font rendering strategy, the back one by one.

first generation: Black and white rendering (black-and-white rendering)

Black-and-white rendering is the first rendering technique used by people, which uses only black and white colors to express the shape of the text. Remember the text display on Windows Blue sky and White cloud interface? As well as DOS and PC machine startup prompt text, all use this method of rendering. On the display screen, a small number of pixels does not convey the subtle shape change of the font well, and we will find jagged edges on the edge of the circle. The font rendering technique is still in its infancy.

second generation: Grayscale rendering (grayscale rendering)

In the middle of the 90 's, our predecessors began to use a very ingenious method, which could be said to be an optimized version of black-and-white rendering. Grayscale rendering controls the shading of each pixel, making the glyph boundary appear smooth. The brightness of the pixels at the glyph boundary depends on the area ratio that is covered by the desired shape. This way, the font outline looks smoother and the details of the font design are reproduced. Fonts look not only clear on the screen-they can also reflect the character and style of the font itself. Our human eyes and brains interpret the information in gray pixels, converting it to the contour of the shape, so we feel that the rendered effect is closer to the original shape.

Three generations: subpixel rendering (subpixel rendering)

Introducing sub-pixel rendering, third-generation rendering technology, an important feature is the introduction of color pixels. If we enlarge the screen screenshot and find that the font edge is red and blue, then we can see that it is using sub-pixel rendering technology. Interestingly, the development of this rendering technology and display technology is closely related, on the LCD display (LCD), a pixel is composed of red, green, blue three sub-pixel (sub) pixels, LCD can be independently controlled each sub-pixel switch. How the LCD screen pixels look under the microscope:

Because these sub-pixels are so small that the human eye cannot perceive that they are separate color points. Compared to pure grayscale rendering, the horizontal direction of the resolution doubled three times times. The position and thickness of the vertical pen can be more precise, and the appearance of the text will be clearer.

By observing, I also found that subpixel rendering always put warm colors on the left side (as shown above), cool (like the blue above) on the right, according to my own guess this is probably related to left-to-right reading order. Such a design will visually feel the light source is entered from the left, increasing the three-dimensional font, so that reading more comfortable. (This is just my personal guess, how someone can explain this from the color principle, please tell me)

The following image is a screenshot of my finder sidebar on Mac OS zoomed in, looking closely at the second half of the text to reflect this subtle feeling:

applications in a variety of operating systems

Having learned about the three font rendering strategies, let's look at the selection of rendering methods for various operating systems.

Windows System

Under Windows systems, what rendering technology to use depends on what font is used and the settings of the application. The Windows system has two sets of graphical text rendering interfaces, one is GDI and the other is the directwrite introduced after Windows Vista to replace the old GDI. Strictly speaking, Microsoft's own sub-pixel rendering technology has another name--cleartype, a technique that is included with two sets of graphical text rendering interfaces.

ClearType support in Microsoft's own systems and programs is as follows:

Windows XP (off by default)
Windows Vista (on by default)
Windows 7 (on by default)
Microsoft Office $ and later (on by default)
Internet Explorer 7 and later (on by default)
Windows Live Messenger (on by default)
The relationship between the font rendering policy and the browser and font format:

Ps-webfonts refers to PostScript fonts, where TrueType and PostScript differ in that all mathematical methods are different when drawing curves, and only font designers need to understand the difference. Interested in wanting to learn more about your own Google profile.

Windows systems provide a lot of choice to applications and systems for compatibility, and the end result is that the text-reading experience on Windows systems is not uniform, that some places look good and some are not. This is closely related to the ecosystem of the Windows system as a whole, it needs to support a variety of screens and resolutions, plus the sub-pixel rendering technology we mentioned earlier is a technology that is closely related to the physical zodiac of the LCD screen, and the different LCD pixel configurations need to be adapted accordingly. Increase Microsoft's cost of perfecting this experience.

Mac OS System

On Mac OS systems, all browsers use the quartz rendering engine, which is said to be very reliable. TrueType and PostScript fonts are rendered in the same way, using sub-pixel rendering techniques, rendering hints (hinting) are deliberately ignored, which is the most conceptual difference between the two types of fonts, and Mac OS treats PS and TrueType fonts equally, Regardless of their different characteristics. Font rendering techniques for MAC OS do not attempt to understand the strokes and features that make up a font. The letter shape is not interpreted, so there is no distortion. Apple also seems to be using some ingenious automated measures to enhance rendering, but this self-reinforcing technology has no documentation, and we have no way of knowing the details behind it. Another hard-to-control phenomenon on your Mac is that the fonts will render more heavily. This difference is particularly noticeable in the text font size. The same fonts look a bit thicker on Mac OS, but on windows they look lighter.

Mac OS system only runs on its own Mac, Apple makes it easier to give users a unified experience in font rendering, once again showing the benefits of a soft and hard combination.

Summary

"mac on the font looks better than Windows" is actually a stereotype of the Windows XP era a few years ago. It should be said that the differences between font rendering techniques are shrinking on different operating systems, and with the popularity of Microsoft Directwirte, the difference between Windows and Mac OS in font rendering is only their understanding and preference for font display. Joel Spolsky's "Font smoothing, anti-aliasing, and sub-pixel rendering" explains the difference.

Apple generally believes that the goal of the (font rendering) algorithm is to restore the design of the font as much as possible, even if the cost is somewhat blurred.
Microsoft believes that the shape of the character should be aligned with pixels to prevent blurring and improve readability, even if the font is distorted.

Even more amazing is that the Subpixel rendering technology for LCD optimization was invented in the 1977 Apple II graphic display, 22 years earlier than Microsoft announced ClearType technology. The designers of Steve Wozniak,apple II and the owner of the patent have responded to who invented the technology first:

"Back in 1976, my design of the Apple II's high resolution graphics system utilized a characteristic of the NTSC color vid EO signal (called the ' color subcarrier ') that creates a left-to-right horizontal distribution of available colors. By coincidence, this was exactly analogous to the r-g-b distribution of colored sub-pixels used by modern LCD display panel S. So and than twenty years ago, Apple II Graphics programmers were using this ' sub-pixel ' technology to effectively incr Ease the horizontal resolution of their Apple II displays. "

Detailed details of the controversy can be gossip sub-pixel Font Rendering technology–who Di It first.

Although the technology was used in the NTSC signal at the time, the technical thinking is consistent. Amid at that time there is a multi-ox x technical Team, the fear of the master has a bit more.

Finally, for everyone to leave a suspense, on the iphone or Android phone to find a page to open the screenshot, the picture to the computer to zoom in, you will find that the font rendering on the phone does not use sub-pixel rendering, this is why. ^_^ answer is left to you to find it.