One of the main goals with my blog is to bring value and education to my audience. Today, we take a look at the key elements of typography and why it matters for your site. You can have all the slick graphics and great design but if your site is not readable, it will not matter. Typography matters. Designers take great pains to select a great palette of colors and graphics. With all their precision in these areas, they can make a careless mistake in forgetting the words. Without taking care with the typography, the words will not be readable. It is with that in mind, that designers must make it a priority to choose fonts to compliment their design and ensure that they have clean details in every element.
There are five key elements you need to know to help create clean typography – hyphens, alignment, spacing, headlines and hierarchy.
1. Take out the hyphens
Aside from maybe books or newspapers, there’s no need for these marks” — “– unless you are doing it intentionally. It is possible you can get away with using hyphens in large blocks of small type if there are not too many of them. The use of hyphens should be avoided in logos and large type i.e. headlines, navigational tools.
2. Check Your Alignment
There are four options in typesetting: Left, right, center and justified.
The most common typesetting is left-aligned. Left-align is the easiest to reader when it comes and easiest to read when it comes to large blocks of text. Left-aligned text can work for almost anything.
Right-aligned text is considered the most difficult to read in large blocks, however, it’s a popular option for smaller applications. Right-aligned text is idea for accents – block quotes are a common and practical use of this style.
Another popular option is centered text. Centered text is a popular option for big words such as headlines or banners and logos. Consider centered text for instances of minimal text. However, keep in mind that centered text has some readability issues for users.
Justified text can be difficult. Generally text aligns to both left and right margins. When using justified text the designer needs to be very particular because it can leave loose gaps which can give the impression of an incredibly tight in the next line.
The point to remember with alignment is the flow of reading. Your text has to give the user ease of readability. The starts and stops should be logical and easy so the user doesn’t get lost or stop reading.
3. Watch your spacing
Spacing comes down to term key terms – leading and kerning.
Leading refers to the space from baseline to baseline between lines of text. Leading is also referred to line spacing. The standard leading specifications are typically based on the point size used to type but can be changed based on use. Leading specifications vary greatly by type style and project. The blocks of text leading is typically greater than the point size. For print, that range is typically 100 to 120 percent of the type size; that range increases to 140 to 160 percent for digital applications. Keep in mind is consistency: Lines of equal size and weight should be spaced equally.
Kerning is the horizontal space between a pair of letters (kerning pair) and change of that space is. The pairs are kerned to add or remove space so that letters look evenly spaced despite their shapes. “AV” is a common kerning pair. Properly kerned type will not have large or unusual gaps between letters and will be even spacing throughout. Kerning is universally important and it is the most vital in the creation of big lettering – i.e. logos. You can generally see when text is not kerned properly when it is in large type face. To ensure you are kerned properly, make sure the letterforms fit together by kerning pairs and creating a defined set of kerning specs for specific text items in your logo and website banners. If you have too much or too little spacing in your letters this can wreak havoc on your reader’s eyes.
4. Headlines need to fill in the lines
When it comes to website design, there is no excuse that text should not fill the lines. Big type needs to visually flow from one line to the next and make everything easier to read. Keep in mind when writing for the web keep this in mind if the site has a fixed pixel width, write to fill lines completely. Writing headlines for responsively designed sites is much more difficult. To accomplish this, test text in a variety of popular environments to see how it will look and read. If something is harsh or hard to comprehend, keep trying to find the right text.
The way text breaks has an impact on the comprehension. As a designer, consider natural pauses as places to break lines of big type.
5. Institute your hierarchy
Your readers should know what you consider to be important on a page by looking at it.
By establishing your hierarchy with the size and weight of type, you set the stage for what you want your user to consider important. Ensure type styles include plenty of variance from one item to the next. For example, setting the type fonts in 24, 22, 20 and 18 point type won’t make an impact; consider 60, 45, 30 and 15.
The bottom line: Today’s users are very busy and they want to get their information quickly. Making the text readable, the user can make a decision to keep reading or keep moving on. Typography cannot be overlooked and is a key design element to your site.