Lets try it instead of the font smoothing approach. Arial, Verdana, Helvetica and others do not support other weights than 400 (normal) and 600 (bold).įont-weight: lighter | normal | bold | bolder /* standard named weights */įont-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 /* 400 is the same as normal, 600 is the same as bold */
But on Mac we have to specify the thickness of the font and besides, this only works with font that support weight like Gill Sans (3 weights:300, 400, 600), Helvetica Neue (4 weights:100,300, 400, 600) and others.
On Windows we set two values: normal (400) and bold (>600). Well it seems to solve things on webkit based browser, but what about Firefox? Well, if you really have to, you can accomplish these using a standard and nice property that we use almost never on Windows: font-weight. Example 2 Google Chrome Example 2 Mozilla Firefox Option two for Firefox See the difference? Looks thinner on Safari and Chrome. 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: However, now it appears to have reverted back to this loud, bold looking.
Upon that first launch since, it seemed fine and went back to normal. I removed Helvetica Neue (as Im aware that is a font that often conflicts with Chrome) and other fonts I had recently installed and restarted my computer. The reality is turning subpixels off just makes text less readable at smaller sizes. Im trying to revert this font back to normal. 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.
The full version of this font is for commercial use, buy it HERE. Make sure to use it just for your personal use. So click on the download button and keep it on your device.
That’s why the text seems bolder, even if it is not set. Here at Fontspace.io, we are providing this Helvetica Neue LT STD font and the whole font family for free and you can download it for free. Mac uses subpixel rendering to increase the apparent resolution of the display, which helps render crispier, sharper text.