When it comes to the design of your website a big part of the look and feel is down to the appearance and overall style of your text.
I’ve lost count of the number of times I have seen a beautifully designed site which could be improved ten fold by a small amount of time styling the fonts. I cannot stress enough how much difference it can make to the finished product when the typeface fits in with the rest of your website design. Let me share a few important aspects of how to use typefaces in web design.
One Very Important Rule – Font Hosts
When a user loads up a web page the fonts are loaded up from the fonts on their computer by default, as you probably know these are minimal and can vary depending on their system. If your website is using a super cool and unique font then the user’s machine will just kick in one of their default fonts making their experience less than pleasing.
The most efficient way around this is to host your fonts with a ‘Font Host’. Many people think its OK to host the font files on your own server; the problem with this, however, is that most font licenses don’t allow you to make the file available on the public domain. To work around this issue you must make use of a ‘Font Host’ which takes care of public domain licensing issues and makes sure all of your users get the intended typeface. Google has a comprehensive catalogue of web fonts that are ideal for any web designer, especially beginners.
For further reading on font hosts, this in-depth post by Richard Fink on A List Apart is highly recommended.
Recommendations for Designing Typefaces
Use Sans-Serif– As a general rule of thumb stick to using sans serif fonts, serif fonts can often be very difficult to read and can even become pixelated and blurry. From my experience a sans-serif font is much more computer screen friendly than its counterpart. This is however not a topic I’m the only one considering and there is a lot of Sans-Serif vs. Serif articles you can pick to get more details.
In this example we can see how the use of serif can look messy(this page as example where stylesheet has been edited on the fly using Firebug inspect. http://www.tripwiremagazine.com/2011/08/5-tools-every-entrepreneur-should-know-about.html).
Now compare that with this example of a site using sans serif typeface throughout:
Adapting to increase in size – Think about the type of users whom you are designing for, if your website is likely to be visited by the older generation then you will need to take into account the possibilities of your text been increased in size. Make sure your typeface not only looks great at 10 point but also at 12, 14 and 16 point etc.
Make good use of CSS properties to eliminate any potential problems when increasing the font size such as using em’s instead of pixels. Using em’s to define your font sizes ensures it scales properly with the rest of the text on the page.
Take note of symbol styling – Remember that designing your typeface doesn’t just mean making numbers and letter look great but also making sure commonly used symbols look great too. If you want to make sure all your symbols fit in with the rest of your typeface and design make the most of your html entities.
Colour Care – No, I don’t mean take care when washing your coloured clothes! How many times have you been reading a websites content, then had to stop half way through and look away because your eyes start hurting? Probably more times than you can count on both hands, right? A typical example of this, and one of my pet hates is white text on a black background, my eyes and my brain simply say “this is very wrong”!
In my experience dark fonts on lighter backgrounds cause less of a problem and receive fewer complaints than light fonts on dark backgrounds. It’s always worth doing a quick test yourself or asking a colleague to read over a page a couple of times, chances are if they are comfortable reading it the majority of your readers will be happy.
Take into account your colour wheel and most importantly make sure the text colour is drastically different to the background colour.
Here is a classic example of too much colour combination (whether the site was designed ironically can be left to the readers own discretion). There is no consistency in this site’s layout and it goes against all the standard rules of thumb listed above. Notice the vast use of colours and various fonts, different text sizes, mixture of italic and non-italic/standard type setting, the use of both light text on dark background, and dark text on light background.
Now here’s an example of how a limited use of colours and overall consistency can be easier on the eyes.
For further reading, check out this super comprehensive guide on how to design your own typeface, using Illustartor and FontLab.
The typeface for your design is just as important as the rest of the design. Make sure you make use of Font Hosts if you’re using a font that isn’t included with windows or Mac OS. Pay particular attention to detail, such as what your font looks like in larger sizes and make sure the commonly used symbols such as ampersands and quotes look right with your chosen typeface using html entities where necessary.
The most important part of the typeface design process is to make sure the users are comfortable reading it; Test, tweak and get feedback from other friends and colleagues to make your users experience a pleasurable one.