Typography: An Essential Element of Modern Website Design
Typography (from the Greek words τύπος(typos) = form and γραφή(graphy) = writing) is the art and technique of arranging type in order to make language visible.
wikipedia
Typography is an under-appreciated art form which is used most often and probably understood the least. Typography is of high importance for printing and screening, as well as for websites. Some of you are probably wondering just why I am making such a big deal about typography and why should folks in the web industry, like us, care about typography. Let me tell you this: “web design is 95% typography“.
Some may disagree with this statement, like this post that comments: “Type is only 90%!!“. So it is either 90 or 95 percent, I am not here to quibble. But I believe that you would agree with me that typography plays a major role in web design.
Good typography not only helps readers go through the site content with ease, but also provides visual elements to the design of the website. The following websites in my opinion make outstanding use of typography:
http://www.mcfarlanechangemanagement.com.au/home.php
Now that you have seen how beautiful typography can enhance a website, I bet you would like to try it on your sites, too. But before we go running off putting together a great new design, let’s take a closer look at some of the techniques involved in arranging types.
Typeface Selection
Since we are talking about typography, it is only natural that we should include the selection of the font.
Each typeface conveys a different message and is suitable for different purpose. Some are better for hard-copy printing while others are better for online reading. It is important that you consider how you want to portray your website to the readers. Then, you should choose the typeface that enables you to do so.
Today, I am only touching on the surface of each aspect of typographic elements so I do not go on at length to explain the difference between serif and san serif. However, you may want to have a look at this article which gives further explanation on type selection: http://ilovetypography.com/2008/04/04/on-choosing-type/
Before CSS3 came into the picture, the choices of typeface available for the web were very limited. Now, we can use @font-face to implement a number of different typefaces on our website. Personally, I like to use the Google web font service; although the choice maybe limited, it is free of charge.
Before we go on to the next technique, here are some more tools that can be handy when choosing typefaces for your web:
Sizing
Next we have to think about the appropriate font size for our purpose. When choosing the font size, you need to keep in mind that the words must be legible. I would recommend keeping the size at the minimum of 10pt. Anything below that would be tough to read, especially, for older readers.
Apart from the legibility issue, we should also consider the overall hierarchy as well. For example, If your site has a main header, you would want to use a bigger size text for the main header ( header tag <h1>../<h1> ) in order to grab the user’s attention, while your footer fonts should be smaller as the footnotes are less important. However, you may get creative and tweak some of these rules around if you are after a modern feel. This website Coudal Partners is a good example of this.
Leading
Leading is the space between lines of text. I am sure you have heard of “single-space” or “double-space” when working on MS word document report. It is pretty much the same thing. The word, leading, in this particular case has its origin in the old days when lead strips were used in arranging letter blocks on the printing press to add a vertical space between each line of text.
In CSS, we use the line-height property to control the leading of the text. Most browsers set a default value between 1.0-1.2 for line-height. This can be overridden to adjust the leading to suit your purpose.
Tracking
Tracking is oftentimes confused with kerning; I have to admit that I used to get these two words mixed up. Tracking refers to the spacing of a group of letters. In CSS, tracking is also known as letter-spacing. The amount of letter-spacing can affect the legibility and readability of the text. A tight letter-spacing can be very hard to read and make the reader feel tense.
Kerning
Unlike tracking, kerning refers to the process of adjusting the spacing between two individual characters. Most fonts have their default kerning value but, in some cases, there is still a need for adjustment.
Here is a little game that can help you appreciate the importance of kerning: http://type.method.ac/
Since kerning involves a particular pair of characters, there is no specific CSS rules that directly handle kerning. However, there is a kerning.js , that enables you to set your own CSS rules and makes kerning a little easier.
I have covered only a tiny area of typography. For further reading, there are many typography articles online. The following is a list of some of the best typography blogs.
- http://ilovetypography.com/
- http://www.alistapart.com/topics/topic/typography/
- http://nicewebtype.com/
- http://fontfeed.com/
Remember, “never stop learning“, and “practice makes perfect“.
3 Comments