A good, clean design has good typography. The right font choices indicate important call outs, readability and set the style of a website. In print design, playing with abstract letterforms is more accepted because there is more flexibility. In web design, consistency with type is key to having a site that is easy to maintain, timeless and legible. Follow the guidelines below about key ways web designers make typographical decisions and solutions.
Style/Web Safe
When choosing a typeface, it’s important that it matches the look and feel of the brand. If your business is without brand guidelines, choose fonts that are consistent with the logo. If the logo is an icon alone with no text or you feel that the font is dated, go with a standard web safe font such as: Open Sans, Roboto, Lato, Helvetica … etc. The great thing about web safe fonts is the simplicity of them. With the right font, type can dictate the style of the design. For example, Augs.org is a simple design with limited imagery. The font sets the tone: professional, medical, and current.
Laws of Serif
In book design, serifs are in command. However, the use of serif fonts in web design is the opposite. Serif fonts have extra accents on letterforms which can appear busy and less legible on a website. When using serif fonts for web, it’s important to not use them alone and instead pair it with a sans-serif font. Sans-serif fonts can be used alone or with a serif and other font types.
Micro-typography
Many of us have experienced running our pointer finger along the base line of a sentence trying not to lose the text. By using leading and tracking, reading is easier. Leading is the consistent spacing between all letterforms, controlling the width horizontally. Tracking is the vertical spacing between lines of text.
Test
The best test for ensuring good use of type is to read it! It sounds simple, but when designing a site it can be easy to focus on the composition alone, with attention to imagery, colors, graphics and type frequently being overlooked. Take the time to read headers, subtitles, and body copy. The idea is that if it’s a struggle to read it, a few errors might be occurring: the text may not be big enough, lack of spacing between lines of text (leading), a poor font for web or bad color choices.
Color
Contrast between colors for fonts and backgrounds is especially important for readability. Colors that are ADA compliant equal more users being able to use a site by recognizing links, buttons, and text legibility.
Type Play
Type doesn’t have to be boring! A great area to play with type is the slideshow. This area of a website is what users first see and needs to demand attention. Similar to having an accent color in a color pallet, having an accent typeface creates emphasis and importance. Pick fonts that are bold and unique –just keep in mind the legibility and use this font extremely sparingly.
Hierarchy
Through a variety of font weights and sizes type shows the different levels of importance on a site. This is why title fonts are bigger and bolder. A good rule of thumb for font weights when creating hierarchy is to skip font weights. For instance, when the body copy is regular when choosing the title font, do not select one font weight size up to semi-bold, skip to bold instead. This will generate additional emphasis on the title and creates contrasts for the eye between body copy and headers, therefore creating easier legibility.
Avoid Lorem Ipsum
During the web design process the content is not often ready, so Latin text is typically used as a sub. Latin text does make a good placeholder, but since it’s not the real representation it can cause a variety of design issues:
- It can cause islands, which is when one word ends up on its own line at the bottom of a paragraph.
- A second common scenario could be a catchy title that needs to read as one line across and fails to have same effect if brought to two lines.
- If three buckets of paragraphs are lined up next each other and one has significantly more text than the other, it creates dead space that constructs unwanted asymmetry.
Having content ready goes a long way in ensuring a smooth transition to the live site.
To the Left, to the Left
When in doubt, left align text. This rule can be simply explained by how we naturally read – left to right. Avoid right aligning text unless it’s for promotional space or an advertisement. With paragraphs, the title above it can be centered or left aligned but if uncertainty occurs move it to the left.
