Design:Typography
Toolkit > Design and Graphics > Typography
What is Typography?
Show
Hide
"Typography is the balance and interplay of letterforms on the page, a verbal and visual equation that helps the reader understand the form and absorb the substance of the page content."
Typography deals with the text on your webpage, such as the text font, the text size, the line spacing etc. More often than not, web designers utilize text to convey their message. When it comes to text, it is all about readability. If the text is difficult to read, that will be a major turnoff.
Typography plays an extremely important role in making sure that text is displayed in the best possible way – to grab your reader's attention.
TOP
Typeface
Show
Hide
Using default fonts
Have you tried using a fanciful font in your webpage, uploaded the page, but your browser is unable to display the font correctly, especially on another computer without the font installed? Similarly, viewers of your site would not be able to view the font as you wanted them to.
As such, when selecting a font for your website, you should always choose a default font available in most operating systems.
An introduction to typefaces
There are two categories of typefaces – serif and sans serif. What is the difference?
Let's have a look:
What do you notice about the two different typefaces?
Well, if you examine the two different typefaces carefully, you will realize that the serif typeface seems to have additional 'strokes' in the characters. Sans serif typeface appears to have straighter edges, as compared to the serif typeface.
These additional 'strokes' are known are serifs. From the above diagram, the serifs are highlighted in orange. The main purpose of serifs is to guide the viewer's eye along the lines in large blocks of text, helping them read easier.
As such, typefaces with serifs, are known as serif typefaces, while typefaces without serifs are known as sans serif typefaces (sans meaning without).
Common serif typefaces include Times New Roman and Georgia. Common san serif typefaces include Arial, Verdana and Trebuchet.
TOP
Choosing a Typeface
Show
Hide
When to use what?
Conventionally for print, serif typeface is used in body text. Body text forms the bulk of the text, and serif fonts are useful in guiding the user through the lengthy content.
However, content on the web presents a different challenge. This is due to the disparity in resolution between print and screen. Screen resolution at typically about 100 dpi is much lower than print resolution at at least 300 dpi. This makes reading on the screen more tiring especially after prolonged viewing. It is mainly for this reason that most websites adopt sans serif fonts for their body text as these provides excellent legibility with a cleaner look and feel and are hence less straining on the eyes. Most winning entries for ThinkQuest adopt this approach.
However, there exists exceptions to the norm. Sites such as Wordpress deviate from this norm as they aim to simulate text on paper (note the black text and white background contrast). Readability is further improved by increasing line spacing and placing content in a columnar layout.
An example of a ThinkQuest winning site which uses serif typeface in their body text is
AI: Manufactured Minds.
In headers, serif typefaces are commonly used. This contrasts with the sans serif typeface in the text, allowing the header to be distinguished clearly from the body text. However, some sites also
In sum, there is no hard and fast rule to whether you should use sans-serif for headings and serif typeface for body text. If you have little text, and your site contains mostly photographs, you may consider using sans-serif typeface. Even if your site is text-heavy, you may still use sans-serif typefaces if you think that readability is maintained.
Lastly, avoid using different typefaces for different paragraphs. Stick to the same typeface scheme throughout your site. This would make your site look more consistent and organized.
TOP
Text Size
Show
Hide
Text size is another subjective issue. What might appear to you as an appropriate size might be too small for a more senior viewer. However, given that most browsers have the in-built ability to reduce/increase the size of the text; this is not a major concern.
You should however ensure that your text size is of suitable size in the first place, to avoid the hassle. A text size too small would have your reader squirming to make out your content, while a text size too large would be rather intimidating.
TOP
White Spaces
Show
Hide
Leading refers to the vertical space in a text block. Adjust the leading (also known as line spacing) of your body text so that there is sufficient white space. White space is an important element which prevents your text from being too overwhelming, thus allowing your readers' eyes to rest.
Above is an example of poor leading. There is virtually no space at all between the lines. The text appears messy and unorganized.
Above is an example of good leading. There is sufficient white space between the lines for the reader. This enhances the appearance of the text, and makes it much easier to read.
One general rule is to set the leading of text blocks at about 2-4 points above the size of the typeface. The leading of size 12 text, should be set at 14 to 16.
TOP
Alignment
Show
Hide
It is recommended that you justify your text. This helps to contribute to the overall aesthetics of the site, as your text appears neater and more organized. Without justification, the body text would end at different lengths, making it an eyesore to readers.
TOP
