Typography is an important aspect of web designing.It is always said, “Type is the most powerful weapon - use it wisely”. A beautiful typography goes much further than just finding the right font. It plays a dual role as both verbal and visual communication. It helps the reader to understand the form and absorb the substance of the page content.
Following are some web typography tricks which can make your typography designing skills launch to the next level:
- Leading
Leading is one of the most common elements of typography. Leading means the space between lines of text that plays a big role in readability. It greatly affects the readability of the text content. Correctly spaced lines make it easier for a reader to follow the text and also improve the overall appearance of the text content. There are number of factors that affect leading such as type size, typeface, case, weight, measure, word spacing etc. To set the leading to 2-5pt larger than the type size is a good rule. Your leading should be wider than word spacing.
- Measure
The measure is nothing but the length of a line of type. Long or short lines can be tiring and distracting to the reader’s eye, because if it’s too wide, it disrupts the rhythm. It becomes difficult for a reader to visually move from one line to another one. A narrow measure is acceptable with a small amount of text. If the measure is much wider than the guideline for optimal legibility, then you should increase the leading. The simple but effective rule is “The longer the measure, the more leading is needed”. For optimum readability your measure should be between 40-80 characters, including spaces.
- Text Alignment
To use justified text alignment is not a good idea on the web which will make the text more complicated to read as it spaces out the words awkwardly. Though, the left and right side will be flush, the readability is the most important concern here. Therefore, you have to choose correct text alignment amongst them for the purpose of readability.
- Hanging Quotes
Instead of straight and boring quotation and apostrophe marks, you can use the styled, hanging quotation marks. Hanging quotes keeps the left alignment intact and balanced which increases readability. This can be done with CSS by using the blockquote elements.
- Font
The fonts make up your headlines and body copy. Size, emphasis, color and alignment are several ways to manipulate a font. Some fonts are more legible on screen than others. Traditional fonts like Times New Roman may be easily read on printed paper but because of screen resolution it may be distorted. Fonts such as Georgia and Verdana are more popular and suits screen display because they are larger than Times. Along with the font type, font size also holds the key. Don’t set body text below 10 or 12px and, if possible, make it bigger which will increase readability.
- Whitespace
To use whitespace in website elements is a helpful task in creating a well balanced design. Whitespace is a space between elements like bodies of text, column on a page and other attributes. It makes the text much easier for reading and gives the viewer a visual break between thoughts and ideas. It creates balance and sets the mood of stylishness and sophistication. But do not overdo it because too much whitespaces are as bad as too little.
- Emphasis
Giving emphasis to a particular word without interrupting the reader is the most important thing in typography. It is used to attract the viewer to a specific topic or area of text. Italic is considered as an ideal form of emphasis because it contrasts with the shape of the surrounding text. Bold, caps, small caps, font size, underline, color, different typefaces are some other common forms of emphasis. The limitation being the usage of only one otherwise it will be disruptive and look clumsy.
- Hierarchy
Varying the type size is the best way to differentiate the content. It is nothing but the hierarchy. Visual and Verbal hierarchy using typography depends on size, color and spacing. It helps the readers to quickly go through the most important content to least one. Because of this they can find specific content they’re looking for in a less time. It also gives a logical flow of presented information and design structure as well. Hierarchy can be achieved in many ways such as using different type sizes, different styles like all caps, italic for sub headings and so on.
