![helvetica neue light firefox helvetica neue light firefox](https://digitalsynopsis.com/wp-content/uploads/2018/04/fonts-of-famous-logos-youtube.jpg)
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 */
![helvetica neue light firefox helvetica neue light firefox](https://styleguide.drk.de/03_drk-styleguide/basiselemente/schrift/image-thumb__599__fitImage/Beispiel_Fließtextschrift@2x.jpg)
HELVETICA NEUE LIGHT FIREFOX MAC
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.
HELVETICA NEUE LIGHT FIREFOX WINDOWS
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.
![helvetica neue light firefox helvetica neue light firefox](https://digitalsynopsis.com/wp-content/uploads/2018/04/fonts-of-famous-logos-panasonic.jpg)
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. book are Linotype Birka, Adobe Helvetica Neue Condensed, and LucasFont's TheSans Mono Condensed. Each pixel on the screen isn´t one little square of light, it’s is actually three stripes colored red, green and blue. The tool on the cover of Firefox Hacks is a flashlight. 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.