How to improve font legibility through custom CSS

No matter what people say about design the first and foremost component of any web design is the typography. Beautiful typography is like nature. When it’s perfect and present you barely notice it but the lack of it makes you feel some thing is missing! We at Inspire2rise too keep playing with our design and fonts on a regular basis in order to find that perfect mix of readability and legible fonts. Through experimentation we have stumbled upon few techniques that can make the overall rendering of your fonts really good across all browsers. Read on our Inspire2rise guide on how to improve font legibility through custom CSS.

Table of Contents

How to improve font legibility through custom CSS: The methods.

why you no use good fonts - inspire2rise — How to improve font legibility through custom CSS!

The topmost tricks to improve readability through css involve one or a combination of the following methods:

1.) Using custom shadow in fonts through CSS and proper line height and font size. By having a 0.5 or 1 px shadow in your fonts you can improve the readability to a great extent and it’s one of the CSS tricks we use at Inspire2rise too.

This can be simply implemented by following the given code examples:

h1 { /* Your selector */
      	font-family:"Any Custom Font", serif;
        text-shadow:0 0 1px transparent;
        
        /* Or, If you need/want to apply a 0 px hard shadow, 
         * you can use multiple text shadows */
        text-shadow:0 0 0 #f00, 0 0 1px transparent;
      }

Both of the above solutions work fine and can be easily setup on any existing website to see the change in readability of the fonts.

2.) Using ligatures. Simply put ligatures are formed when two letters which are more readable when combined are made so in order to make it easier for the eyes to read the content. Ligatures make kerning pairs of fonts so that the letters which look awkward when shown with normal spacing are shown correctly. An example of this would be the letter combinations like ‘ff, fi, fl’ which are combined in ligatures to give better looking fonts! The letter “W and A” which when shown together without proper kerning looks really awkward and misplaced and so proper kerning too plays a really vital role in overall font design experience!

custom css font ligature example inspire2rise — Text showing automatic ligature causing substitution in the font, look how the f & i in the second case come together to give a more readable font.

3.) Using text-rendering property in CSS. This property in CSS allows any user to choose what they would want the default preference for rendering fonts in the web browser should be. Normally browsers have the “text-rendering” set to the “auto” option which is the default value and in this case the browser itself decides depending upon various parameters whether to optimize the fonts for speed or for legibility.

Using the optimize legibility parameter activates the font ligatures and pairing by default. It is already present in all fonts and we only need to enable it using custom CSS.

body { text-rendering: optimizeLegibility; }

This option enables all ligatures but not all browsers support everything to the full extent and some modern webkit browsers like Safari and Chrome might mess up the rendering sometimes so to just be on the safer side you can enable only the commonly used ligatures. The CSS code to do this is as follows:

p { font-variant-ligatures: common-ligatures; }

NOTE OF CAUTION: If you use the “Optimize legibility” it can be unsafe for mobile devices as they have limited number of CPU cycles and in some cases may not possess the required horsepower to deliver optimized fonts. So kindly use these feature with discretion. And we would suggest that in case you have major traffic from mobile devices then you should leave this option.

You can also use the following code to enable support in older browsers when you have forced the “optimizeLegibility” option.

p {
text-rendering: optimizeLegibility; /* optional: This is for older browsers */
-webkit-font-variant-ligatures: common-ligatures; /* for iOS and Safari 6 */
font-variant-ligatures: common-ligatures; /* for up-to-date browsers, including IE10 and Opera 21 */
}

CSS code for defining Kerning in browsers.

p {
text-rendering: optimizeLegibility; /* optional code for older browsers */
-moz-font-feature-settings: "kern=1"; /* pre-Firefox 14+ */
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern"; /* Firefox 14+ */
font-feature-settings: "kern"; /* standard */
font-kerning: normal; /* Safari 7+, Firefox 24+, Chrome 33(?)+, Opera 21+*/
}

See more: How to pin a post to homepage in WordPress

Though we told you that many tablets or mobiles may not support the full ligature option and ‘optimizeLegibility’ feature. But you can use a CSS media query to use different rules for mobiles and devices with less than 480p resolution. Use these media query to disable the ligatures on mobile devices.

@media and (max-device-width : 480px) {
body { text-rendering: optimizeSpeed; }
}

The text rendering property has four different options and by default it’s set to “auto” which determines automatically how to render the fonts. You can read about them in more detail below.

auto: This is the default option and we have already told about it above as it makes logical assumptions regarding how to render the text.
optimizeSpeed: This option allows the font to be displayed with fast speed without worrying much about legibility or geometric precision of font rendering.
optimizeLegibility: As explained earlier this option enables the best kerning and ligatures by calculations and costs more CPU cycles to render than the “auto” or “optimizeSpeed” option.
geometricprecision: When this option is selected the browser is instructed to focus on geometric precision and accurate display of fonts rather than focusing on legibility or loading speed.

bad luck brian css issues - inspire2rise — How to improve font legibility through custom CSS!

So this was all in our CSS guide for beautiful fonts on your blog or website. In order to learn something new you must keep on experimenting, this is and always has been the spirit on Inspire2rise.com and we wish that you too develop an inquisitive spirit for finding new things and never stop this quest for being better.

We wish you an awesome blogging journey. Stay Inspired to rise folks!

Keep visiting for more awesome how to guides, gadget reviews, tech news and remember we cover,
“Everything under the Sun!”