We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you agree to our cookie-policy

SEO ENQUIRY

First, we need your contact details…

SEO ENQUIRY

Which SEO services are you interested in?

SEO ENQUIRY

Anything you’d like to share with us at this stage?
A brief, technical scope, supporting documents or anything else?

SEO ENQUIRY

How soon are you looking to kick off this project?

SEO ENQUIRY

What budget guidance are you working on this project?

SEO ENQUIRY

What budget guidance are you working on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE
YELLOWBALL LITE

Unfortunately, you don’t qualify for a bespoke project, but there is good news!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

VISIT YELLOWBALL LITE

Step 1

of 6

WEB DESIGN ENQUIRY

First, we need your contact details…

WEB DESIGN ENQUIRY

Which web design services are you interested in?

WEB DESIGN ENQUIRY

Anything you’d like to share with us at this stage?
A brief, technical scope, supporting documents or anything else?

SEO ENQUIRY

How soon are you looking to kick off this project?

WEB DESIGN ENQUIRY

What budget guidance are you working on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE
YELLOWBALL LITE

The end-to-end delivery of bespoke web project akin to the style and quality of our portfolio typically start from £25,000.

Based on your budget guidance, we’d recommend exploring Yellowball Lite – our flexible WordPress theme that is perfect for small businesses, startups, consultancies and charities. Learn more about Yellowball Lite and speak to one of our specialists on this dedicated site. It’s all the best from Yellowball, now fast, affordable and available anyone, anywhere.

VISIT YELLOWBALL LITE

Step 1

of 5

GRAPHIC DESIGN ENQUIRY

First, we need your contact details…

GRAPHIC DESIGN ENQUIRY

Which design services are you interested in?

GRAPHIC DESIGN ENQUIRY

Anything you’d like to share with us at this stage?
A brief, technical scope, supporting documents or anything else?

GRAPHIC DESIGN ENQUIRY

How soon are you looking to kick off this project?

GRAPHIC DESIGN ENQUIRY

What budget guidance are you working to on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE
GRAPHIC DESIGN ENQUIRY

Most design projects at Yellowball are typically more than £500 and our agency-wide hourly rate is £145 plus VAT.

We’re probably not a good strategic fit for this project but you could try the freelancer networks at Fivver.com or upwork.com.

Step 1

of 5

PPC ENQUIRY

First, we need your contact details…

PPC ENQUIRY

Which PPC services are you interested in?

PPC ENQUIRY

Anything you’d like to share with us at this stage?
A brief, technical scope, supporting documents or anything else?

PPC ENQUIRY

How soon are you looking to kick off this project?

PPC ENQUIRY

What budget guidance are you working on this project?

PPC ENQUIRY

What budget guidance are you working on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE
YELLOWBALL LITE

Unfortunately, you don’t qualify for a bespoke project, but there is good news!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

VISIT YELLOWBALL LITE

Step 1

of 6

Mobile Menu
Mobile Menu

Award-winning work, focussed on results

Web Design

Faith Ibiza

Web Design

Forj

Web Design

Adara

Web Design

Tomatin

SEE All PROJECTS
Sep 2019
3 MIN READ

Fixing Font Rendering Inconsistencies Across Browsers

admin

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:
‘The distortion of a reproduced image so that curved or inclined lines appear inappropriately jagged, caused by the mapping of a number of points to the same pixel.’
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.
BACK TO ALL POSTS

Let's work together

Ready to start your next project? Call, live chat or send us a message today. We're here 9am to 6pm Monday to Friday






    I would like to receive news and information from Yellowball