Typography as an aspect of graphic designing has undergone a multitude of changes since its inception. Back when Internet Explorer 1.0 was all the rage, web typography – quality web typography, at that – was sort of an enigma. Today, it’s a completely different story. We have come a long way since the days that browsers couldn’t support image files, and now, web typography has become an integral part of the long-drawn process behind designing a great web page.
Typography, as the common misconception goes, is not all about simply choosing fonts or distinguishing between typefaces. Typography is an art, and like any art form, has a certain structure that goes into its making. Besides the very obvious choosing of typefaces, typography, as we know it today, has four basic elements to it:
People browsing through a web page do not want to squint to read the text on the screen. Simply put, font size can make or break a web page. Too small a font size can put off the reader, so you need to remember that the bigger the font size is – and the more legible – the better.
Body text set at 10px and body text set at 12px – although they don’t look all that distinct – can make a huge difference. Generally, 12px is the standard, but by no means should you go below 10px. Always keep in mind, what looks legible on your 65 inch Plasma screen may not come across as that legible on a 15 inch monitor. The text size has to be such that the average reader on all platforms can read it without having to furrow a brow.
Place pale yellow text on a pale green background, and you have a perfect recipe for disaster. Managing contrast is a crucial part of typography, as text that cannot be read fails to serve its purpose. The text has to have a background that provides enough contrast to make easy reading possible.
A quick tip to checking if your contrast is sufficient is to take a screen shot of your page, open it up in any image editing software (a basic one will do), and set the image to monochrome mode. You will be able to see very easily if the contrast is appropriate.
The importance of white space can never be stressed enough. White space forms the negative space around your text which helps in drawing focus to the text, and since the text is screaming to be read, don’t ignore the white space rule.
Too much text clustered together can very easily get unsettling, and makes for very tough reading. Line spacing has to be perfect, as lines kept too close together can be difficult to read without trying hard. Give space to your type to breathe.
How would a page look if the headline, sub-headline and body text all had the same type size? The word “headline” would lose its very meaning! Differentiating content by using different type sizes is one rule you simply cannot afford to ignore. How is a reader expected to distinguish between an important headline and a not-so-important part of the body text if the entire text is of the same size?
The importance of different elements of your page is conveyed through demarking type sizes, and this is what hierarchy is all about. However, hierarchy can be achieved using other styles too, for example, italicizing content in order of importance, or even using a mix of serif and sans-serif typefaces.
These guidelines, if used effectively, can go a long way in lending a special flair of class to your designing skills, especially in the area of typography.