Typography is one of the most important aspects of a functional and well-designed website. DO NOT USE overused, cliché, or decorative fonts to dress up your website. Less is more. Make sure your audience can read the information on your webpage!
- Typography: the design technique of arranging typefaces to communicate a message.
- Typeface: Family of fonts (such as Gill Sans)
- Font: One member of a family (such as Gill Sans Bold)
- Category: A large group or type of fonts (such as Sans Serif)
- Serif: a small glyph extension added on the ends of characters in a serif typeface. Serif vs. Sans Serif
- Body Copy: the small reading type of a document.
- Tracking: the general spacing between letters and words.
- Kerning: the spacing between two adjacent characters.
- Leading: the spacing between lines of text (think of 2.0 line spacing)
- Oldstyle-Lora, Times New Roman
- Oldstyle typefaces are readable and are excellent to use for body copy. The serifs are usually slanted, and the thick-to-thin transition is moderate.
- Modern-Abril Fatface, Elephant
- Modern typefaces should be used for titles, not body copy, because the thinness of the lines will disappear when the set is small. The serifs are thin and horizontal, and the thick-to-thin transition is radical.
- Slab Serif-Roboto Slab, Rockwell
- Slab serif typefaces are versatile and can be used for body copy. The thick serifs are horizontal and the letter has the same weight throughout.
Sans Serif Fonts
- Sans Serif-Lato, Gill Sans
- Sans Serif typefaces are simple, legible, usable, and work for many different applications. Sans means “without”, so Sans Serif typefaces simply have no serifs. There is little or no thick-to-thin transition.
Decorative and Script Fonts
- Decorative-Black Ops One, Old English Text MT
- DO NOT overuse decorative typefaces. These should never be used for body copy. These are usually trendy, themed, quickly outdated, and generally overused.
- Script-Oleo Script Swash Caps, Edwardian Script
- If you must use script typefaces, use them SPARINGLY. These fonts are designed to resemble handwriting and will lose any definition when used for body copy.
Rules of Typography
- Using proximity in typography helps to show which content belongs together.
- Make sure your title is a font that is readable.
- It is best to stay within the range of 10-12 pt. for body copy, depending on the font.
- Avoid using a modern font for body copy because of the thin serifs.
- When using more than one typeface, choose from contrasting categories.
- Pay attention to the alignment of text and if it’s consistent throughout your design.
- Avoid using the program’s default bullets when designing.
- The width of the text columns shouldn’t be too narrow or too long.
- Remember to not make your paragraphs be too long.
- Adding subtitles in your design helps to organize content.
- Stacked vertical text is hard and uncomfortable to read.
- It is better to increase tracking of all caps text rather than lowercase lines of text.
- Avoid tracking out letters too far.
- Pay attention to the leading in between lines of text as well as paragraphs.
- Poor paragraph styling can have a negative effect on a good design.
THE FORBIDDEN FONTS
Under NO CIRCUMSTANCES are you to use any of the following fonts for your website.
- Comic Sans
- Curlz MT
These fonts are overused, cliché, and will destroy any credibility you have. A good rule of thumb is that if it comes as a default decorative font in Microsoft Word, DO NOT USE IT! There will always be alternatives to these fonts.
Sources for Fonts
Some recommended sources for fonts are:
ALL MATERIAL TAKEN FROM Visual FOCUS http://visualfocus.org/visual-focus-the-five-step-design-process/
Fonts taken from Google Fonts
- Abril Fatface
- Roboto Slab
- Black Ops One
- Oleo Script Swash Caps