Bernskiold Media

Web Typography Matters A Great Deal!

Below the ground shell of the raw web design, there is something more to every website. The thing that makes it all happen is the content and a very often forgotten part of the design process is the website typography, a vital part!

Why is it so important?

As is always said, the content is the most important part of a website and you need to display it accordingly. Reading websites nowadays is equal to be reading a book. The difference is that when you think of a book you immediately think of typography in a way you don’t do online.

If you don’t have enough line spacing, your readers will have a great deal of trouble to read your site, and will probably not read it – let alone visit it again. If your headings look out of place, it is going to bring down the design experience a great deal and scare off readers from your great content. All the same, if your fonts and their colors don’t match with the rest of the design in an appropriate way, readers will not read what you have to say which definitely isn’t what you want.

Web Typography Basics

First, let us start with the basics on typography online – the selection of font types for your text. It is a common and widespread misconception that all fonts used on the internet must be sans-serif fonts. This is hardly a true and good statement. Something more appropriate would read that your body text is best suited to be in sans-serif fonts. This is due to the way text is rendered on your screen and without going into too much detail, it is the far most pleasant for your eyes to read, when it comes to longer blocks. However, there are exceptions. A preamble text and similar might look even better in a serif font at a large enough size. The heading might look cooler in a serif font as well. Experiment that way!

Another common thing that many do miss is to add enough line-spacing for the body text on their sites. In order for the text to be inviting for our eyes to read, we need not only to write is using clear paragraph breaks but make sure it is styled spaciously. If we have a font that has a height of 12px, a line height of at least 16px is probably going to work the best, or even closer to 19px. This will make the text easier to get through.

Don’t use default CSS styling!

Many like to think that the design process ends at making the design look good and work as well as style the body content and links, at most perhaps one or two heading tags. In order to really make a full-fledged website, make sure to style all the possible typographic elements and make it look as awesome as the design! Adding blockquote styles, a complete set of heading styles and styles for the unordered and ordered lists is just a very good practice and will make sure your client will be able to just use the available formatting in the way he or she imagines! Also, make sure to do a couple of styles like “notes” and “errors” or similar depending on the site. An easy way to feature a paragraph or two.