Optimizing typography through CSS

Typography is the cornerstone of the web. If you think about what the vast majority of your interaction with a website consists of, it's reading content. To that end, making sure that the type on your website is optimized for legibility should be one of the most important considerations of development.

There are a few rules to abide by and a few CSS properties that will ensure that your type is dressed for success.

Line Length: KISS (Keep It Simple Short Stupid!)

Ok, so this first one isn't really a CSS font property, but it is a good rule to keep in mind. The main idea is that the line length of your content should hit a relative sweet spot of around 45-75 characters (with spaces) per line. The reasoning behind this rule is that if the line length is either too wide or too narrow, it can become much harder for the human eye to efficiently parse the information quickly.

If your line length is too long, it creates eye fatigue by the time the reader reaches the end of the line. Even worse is what happens after they reach the end of the text line. Have you ever found yourself reading a book and upon reaching the end of one line and starting to read the next one, you find that you're reading the same line you just finished? Or maybe you find that you accidentally skipped down an extra line. This is the result of poor line height and line length which is why you should try to keep line length between 45-75 characters and to give each line some breathing room of about 1.3-1.5, (don't you dare use absolute values like pixels), in your line-height property.

CSS to the rescue

As CSS has become more powerful over the years, so too has our ability to manipulate type in a way that brings us closer to parity with print design. In doing so, Open Type features have allowed us to access font properties such as kerning and anti-aliasing. Features like these help us to deliver a much more readable version of our type to the masses.

Anti-Alias

If you were to take a magnifying glass to the type on your site, you're bound to see a lot of jagged edges where letters curve. In order to enable font smoothing, we have to add the following code to our CSS file.

-webkit-font-smoothing: antialiased;

Kerning

Finally, to make sure that the default font styles aren't pushing our letters unnecessarily apart from each other due to poor kerning support, you can add the following snippet to help alleviate that issue.

text-rendering: optimizeLegibility;

Some extras

For some final tweaking, the following code can also enhance the legibility of your site's font.

-moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: "liga" on;

That's it, just a few extra lines of code applied to the body and your text is already looking much better than the default browser styles. I hope this was useful and informative.