Have you ever designed an interface or website and spent hours selecting the perfect font for your UI to find that as soon as your XD or Sketch designs are developed into a coded website, your ever so carefully selected font now looks a lot different on a web browser? Often the main issue as web designers we find is the font increases in weight. This can be a very frustrating realisation and can result in a website that you’re not completely happy with or more time spent finding a compatible font.
Why do fonts render differently inside a browser?
How can a font pulled from exactly the same source look so different on a web browser than on your prototype? If a site is designed within Adobe XD or Photoshop the font is synced from Adobe fonts on the prototype. On the coded website, the font is taken from exactly the same source but somehow looks a lot thicker when rendered.
The culprit is Aliasing, but what is aliasing? The definition with relation to on-screen visuals is:
Which put simply is the way that pixels are rendered on a screen. The reason this effects typography more obviously than some imagery is because text can be very fine and delicate with lots of curved edges and small details. Computer screens work by displaying colour through pixels. Apple’s retina displays, have high numbers of PPI (Pixels Per Inch) as compared to screens produced 5 years ago making text appear almost print perfect. However if you look very closely you will still be able to see the individual pixels on the screen (although neither us or your optician would recommend spending too much time nose-to-nose with your computer screen). Because of the square nature of pixels, it can make rendering fine lines and curves to a perfect standard a challenge for screens.
To gain a better understanding of Aliasing and Antialiasing, see the below example of our brandmark aliased and antialiased.
So why does the font look different on your design prototype? This is because design software like Photoshop, XD and Sketch render all of your fonts as vectors and apply anti-aliasing as standard so that the fonts look the best they can on your screen, and yes this is nice to look at but it causes issues when translating the design to code. Without CSS tweaks, applied fonts often appear thicker than you thought.
How can I fix my font rendering via the CSS?
Thankfully there are a few little tricks that can be applied via CSS for fonts. Whilst it’s not possible to change the way in which fonts are rendered by browsers, there are a few workarounds for the rendering issue. It’s important to note from the get-go that these properties will only work on browsers when used inside Mac OS, mobile or compatible versions of browsers. Unfortunately, this fix is not yet compatible with Windows. It’s also important to bear in mind that browsers are updating the way in which they render fonts all the time, so you’ll need to keep an eye on any new updates across all browsers on an ongoing basis.
In WebKit, use the -webkit-font-smoothing property, and in Firefox use the -moz-osx-font-smoothing property. These properties can be applied to your header tags, or even the entire body text on the page.
You may be finding that the way your text is rendering in WebKit browsers is a little too thin or blurred. The main way around this is to add -webkit-text-stroke in a value less than half a pixel i.e. anywhere around the 0.15-0.45px mark. If this still isn’t giving you the results that you’re looking for, you could try adding a text-shadow to the copy to give it some added depth and cause the text to look thicker and more legible.
A final common fix to this specific font rendering issue is to use the antialiased property, however you might find that this fix may be a little too thick and over-facing to the user – an alternative to the antialiased fix would be to try the subpixel-antialiased css.
-webkit-text-stroke: 0.45px;
// or
-webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.1);
// or
text-shadow: #fff 0px 1px 1px;
The fix for Windows
As a general rule of thumb, Windows doesn’t apply antialiasing to text across their browsers, however the font rendering on Windows browsers is in general better than that of Chrome and Firefox. This doesn’t mean that there aren’t any issues with the font rendering though. The work around for your Windows antialiasing woes is to use an SVG font in the place of an EOT, WOFF or TTF font. SVG fonts are antialiased on both Mac OS and Windows as default.
The workaround involves forcing windows to prioritise the SVG font in the font-face declaration (FFD). Here is a sample of what the FFD looks like in the first instance:
@font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’);
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘webfont.woff’) format(‘woff’),
url(‘webfont.ttf’) format(‘truetype’),
url(‘webfont.svg#svgFontName’) format(‘svg’);
}
The main downside to using SVG is their hefty file size – sometimes reaching up to 200kb/file meaning an increase in page load speed, especially when used for body copy. This is a key consideration when weighing up the best fix to use for your copy as an increase in page load speed could have a negative effect on your SEO and therefore SERP rankings. So when is this fix most appropriate?
This fix is most appropriate for statement headers or shorter sections of copy. It’s also an ideal fix if risking page load speed isn’t a priority for you and you’re just looking to make your site look as good as possible across as many browsers as possible. As an SEO agency Yellowball would, in this case, value page load speed over a small improvement in the quality of font rendering.
How to prevent the problem in the first place
It is important to note that although the above ‘fixes’ are very handy it is always better to design with a font that works from the get go. There are multiple ways you can avoid these discrepancies from happening. Visual design softwares often want their typography to look as good as possible on screen which does make sense but when you want to ensure your website looks as close to your designs as possible this is where that issue occurs.
Very few platforms apart from Photoshop allow you to adjust the Anti-Aliasing of a font. So what we advise is if you are using a web font you haven’t used before and want to ensure it looks perfect across devices without font smoothing applied, get your developer to generate a sample.
