So grab a Mac and see these examples: Gill Sans Let’s try antialiased on the examples above and see what happens. webkit-font-smoothing: antialiased /* Looks pretty much the same than Windows */ webkit-font-smoothing: subpixel-antialiased /* It is the default and looks bolder */ webkit-font-smoothing: none /* Looks very thin and awful */ There are three different values we can use for it. Lets try this interesting property of CSS called «font-smoothing». ******* body rule of the Apple's home web site CSS on *****/īody The irony is that the Apple’s home web site, turns off subpixel in their own style sheet called base.css: The reality is turning subpixels off just makes text less readable at smaller sizes.
That’s why at larger font sizes, everything looks quite thicker and strong (at least compared to Windows). So instead of using all 3 simultaneously as one pixel, we use these subpixels individually to draw sharper shapes at very small sizes. Each of these subpixels can be turned to different intensities, which allows them to be used for extra detail. Each pixel on the screen isn´t one little square of light, it’s is actually three stripes colored red, green and blue. It is not a bug of Mac, in fact this is for a very good reason. So, on Safari and Chrome browsers, you can turn subpixel rendering off and instead uses the standard antialiasing technique to make fonts look smoother. That’s why the text seems bolder, even if it is not set. Mac uses subpixel rendering to increase the apparent resolution of the display, which helps render crispier, sharper text.
0 kommentar(er)
