Correcting Subpixel on Web
Most typefaces fail on web after the design hits production. The browser loads your font and then makes its own rendering decisions, and those automatic decisions are almost always the wrong ones.
Most typefaces fail on web after the design hits production. The browser loads your font and then makes its own rendering decisions, and those automatic decisions are almost always the wrong ones.
By default, browsers use subpixel antialiasing. This makes text render heavier than intended, slightly blurry, and inconsistent with what you designed in Figma. But it is fixable with just four lines of CSS.
By default, browsers use subpixel antialiasing. This makes text render heavier than intended, slightly blurry, and inconsistent with what you designed in Figma. But it is fixable with just four lines of CSS.
CSS
CSS
* {
* {
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
}
}
Figma Lies
Figma Lies
The way a typeface renders on screen has nothing to do with which typeface you chose. It has to do with how the browser rasterizes the letterforms onto the pixel grid.
The way a typeface renders on screen has nothing to do with which typeface you chose. It has to do with how the browser rasterizes the letterforms onto the pixel grid.
The same font at the same size and weight can look noticeably different depending on the OS and display, because each platform has its own rendering pipeline and antialiasing method.
The same font at the same size and weight can look noticeably different depending on the OS and display, because each platform has its own rendering pipeline and antialiasing method.
Figma has none of this. It uses its own renderer which is consistent across every machine you open it on, which means what you see in the design file is not what ships.
Figma has none of this. It uses its own renderer which is consistent across every machine you open it on, which means what you see in the design file is not what ships.
You...