Develop font CSS for readability, optimisation and accessibility

Tags: , , , , , &


Once you have installed your custom fonts and they are ready to use, it’s time to fine tune them for readability, optimisation and accessibility. In this blog post, we will go over the best tweaks in CSS to make your content a better experience for your user.

Using rems ems and pixels

There’s a lot of information out there about the different types of units and which are the best to use for your site. Most will agree that using rems is the most popular and universal unit for font, due to the rem value staying relative to the root font size, rather than the parent element. However, a lot of our clients require the sites to still render well in IE8, where rem values are not recognised.

For the Foundation users out there, we have created a mixin that you can use that will take the pixel value and convert to the rem value. Avoiding the tedious task of having to calculate what the value would be in rems from pixels, and eliminating extra lines of code

@mixin rem-font($pixel-value, $line-height:false) {

 @if unitless($pixel-value) {
   $pixel-value: $pixel-value * 1px;

 // $legacy-support is set as global variable
 @if index($legacy-support, ie8) {
   font-size: $pixel-value;

 font-size: rem-calc($pixel-value);

 @if $line-height and 'px' == unit($line-height) {
   line-height: $line-height / $pixel-value;

Text weight and styles

There are plenty of blogs ( out there that talk about how bad it is to use CSS to create bold and italic styles for your text. Allowing the browser to render the weight and font-style of typography on your website had always been noted as a big no no, as the browser can distort the readability and overall look when adding bold or italics.

On the other end having every kind of weight with an italic version can hinder the speed in which the page loads.

Screen Shot 2014-11-27 at 12.31.25 pm

Over the years, browsers have improved the way that they render bold and italic on fonts and it can be hard to tell the difference:

The difference between the bold by google fonts and bold added at CSS is very minor

Screen Shot 2014-11-26 at 11.25.21 am
True Bold

Screen Shot 2014-11-26 at 11.24.49 am
Faux Bold

This shows regular and italic, on the bottom is the italic rendered by the browser. It is very slanted and almost pushed sideways

Screen Shot 2014-11-25 at 11.36.30 am
True Italic

Screen Shot 2014-11-25 at 11.36.36 am

Screen Shot 2014-11-25 at 11.36.47 am
Faux italic

Download your fonts that you are thinking of using, try out the way browsers will render the variations that you might use, and make a judgment call. Some may be very obvious, whereas others will be so slight you will easily be able to get away with it.


Readability is important to think about when styling your website. You want to make sure that your users don’t have to strain to read your content and find it a pleasing experience

Line lengths

Make sure that you lines of text aren’t too long. For desktop to tablet, that should be 45-75 characters per line. For mobile, 30-45. Making your lines of text too long will disrupt the natural eye flow, and on the other scale, if the lines are too short, this will sometimes allow your user to skip over things, potentially missing out on keywords or information.

Line height

Line height is another important aspect for readability. Making the lines too close together can cause your user to re-read lines over again, and a line height that is too big will make the text look disjointed. There is a great calculator tool that can help you calculate the most optimum line height based on the golden rule

Line height of 1.0. The lines are very close together, making it difficult to differentiate the lines

Screen Shot 2014-11-26 at 3.21.58 pm

Line height of 1.44. This is a prime line height, allowing the eye to flow from one line to the other comfortably

Screen Shot 2014-11-26 at 3.22.10 pm

Line height of 2.1. The lines are too far apart, loosing the flow of lines

Screen Shot 2014-11-26 at 3.22.21 pm


Text rendering is another option that can work to improve certain situations like how or what your user is viewing the site on. These options range from speed to legibility, it may be subtle or a big difference, and is worth looking into for fine tuning the text in your next project.

Here is the definitions of the text-rendering properties from MDN 


The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text.


The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.


The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures

Screen Shot 2014-11-26 at 10.53.31 am standard

Screen Shot 2014-11-26 at 10.53.41 am


The browser emphasizes geometric precision over rendering speed and legibility. Certain aspects of fonts—such as kerning—don’t scale linearly, so geometricPrecision can make text using those fonts look good.

In SVG, when text is scaled up or down, browsers calculate the final size of the text (which is the specified font size and the applied scale) and request a font of that computed size from the platform’s font system. But if you request a font size of, say, 9 with a scale of 140%, the resulting font size of 12.6 doesn’t explicitly exist in the font system, so the browser rounds the font size to 12 instead. This results in stair-step scaling of text.

When using text-rendering:

  • It might be tempting to add optimizeLegibility to the whole body of your text. However for large blocks of text, or text under 20px, it can drastically increase the load time of the page, so check it out on your browser, check to make sure it will make a difference before adding it.
  • Firefox currently uses optimizeLegibility as a default for any text over 20px
  • text-rendering is compatible with all browsers except IE and Opera

There are a lot of different ways that you can make subtle and noticeable changes to your text for all sorts of optimization. Remember that these little tweaks can make a visual impact and may be the difference between your user skimming over your content or reading it.

People who have viewed this post also viewed

Leave a comment

* Required fields


Please enter the CAPTCHA text