Many people think that typography consists of only picking a typeface, choosing a font size and it should be regular or bold. However, there is more to achieving good typography and it is in the details that the designers often neglect.
Here are 8 tips that designers should consider using.
- Measure: A measure can be defined as the length of a line of type. To the eyes of the reader, lines that are too long or short can be distracting. A long measure interrupts the rhythm as the reader has a tough time searching for the next line of type. The only time a narrow measure is good to go is with small amount of text. In order to have an optimum readability, you should have the measure between forty to eighty characters, which includes spaces. For one column design, sixty five characters are considered ideal. One simple way of calculating the measure is by using Robert Bringhurst’s method that multiples the type size by thirty. In case the type size is ten pixels, then multiplying it by thirty gives us a measure of three hundred pixels per line.
- Leading Method: Leading is basically the space between the lines of type in a body of copy, which plays a great role in readability. A spaced line makes it easy for a reader to follow the type and also improves the appearance of the text. Leading also changes typographic color, which can be the density or also the tone of a composition. A lot of factors affect leading like the typeface, weight, type size, word spacing measure and so on. If the measure is longer, you will need more leading. If the type size is large, the leading required is less. A nice rule is to set the leading between 2 and 5pt, which is larger than the type size based on the typeface.
- Hanging Quotes: Hang the quotes in the margin of the body of text. If you do not do that, a quotation mark will disrupt the left margin and spoil the rhythm of the reader. Hanging quotes help in keeping the left alignment intact and balanced, thereby increasing the readability.
- Vertical Rhythm: A baseline grid is a basic for consistent typographic rhythm on a page. This allows the readers to follow the flow of the text easily, which in turn increases readability. A continuous rhythm in the vertical space helps in keeping all the text on a consistent grid so that balance and proportion are retained throughout the page, irrespective of the type size, measure or leading. For keeping a vertical rhythm in CSS, you need the spacing between elements and the line spacing to equal the size of the baseline grid.
- Orphans and Widows: A widow is basically a short line or single word that can be seen at the end of a paragraph. An orphan, on the other side, is a word or short line at the beginning or end of a column, which is separated from the rest of the paragraph. Both Widows and Orphans create bad rags that interrupt the reader’s eye and also affect the readability. These can be avoided by adjusting the type size, measure, leading, word spacing, letter spacing or you can also add line breaks manually. The bad part is that there is no easy fix to prevent typographic widows and orphans with CSS. One of the ways to remove them has been given above; however, there is also a jQuery plug, which places a non breaking space between the last two words of an element.
- Emphasis: It is important to emphasize a word without interrupting the reader. Italic is mostly considered to be the ideal form of emphasis. There are many other common forms of emphasis like the bold, small caps, caps, color, type size, or underline. It doesn’t matter which you choose; try and limit yourself to using just one. Combinations like caps bold italic are disruptive and look bad.
- Scale: It is good to always consider composing with a scale, whether it is the traditional scale developed in the previous century that we are all familiar with, or the one that you create on your own. A scale is vital because it establishes a typographic hierarchy, which improves readability and also creates harmony within the text.
- Clean Rags: While setting up a block of text unjustified with left or right alignment, make sure to keep the rag balanced without any awkward shapes. A bad rag can be disruptive to the eye and distract the reader. A good rag will have unevenness without any lines, which are too long or too short. Sadly, there is no quick fix to control this in CSS, so for achieving a good rag one must make manual adjustments to the block of text.
These are some of the tips that designers can consider. Most of them ignore the basics; however, getting the basics right is very crucial when it comes to typography.