DFW - Typography for the Web [LESSON]
Typography for the Web
Typography
What is typography? Typography is the typefaces and fonts that are used to convey information in print or through digital media. Typeface is the choice of style of lettering and font is the way that lettering is expressed, such as bold, italic, etc. However, for our purposes, we are going to use the word font to refer to the typeface, as that is how it is typically used day-to-day, and the typeface is referred to as font in web design -- especially in coding.
Typography is very important in web design, as it expresses to the viewer the feel of the website and is also used to help organize the web page as well as direct the viewer’s eye. There are a few “rules” for using typography, but before we get there we need to have a good understanding of some basics of typography.
Serif vs. Sans Serif
In the past, most font/type that was used was serif, which means that the letters had little projections on the edges. There was a reason for this; the serifs tended to lead the viewer’s eye to follow and more easily read the font. Newspapers almost always used serif fonts. See the image below to see the serifs, the items in red are serifs.
CC BY-SA
The most used serif font is Times New Roman, and it is the default font in web coding – HTML. Serif fonts, however, have been found to not be as digital friendly as the other main types of font, sans serif. Sans Serif literally means without serifs. Sans serif fonts are clean and simple. Arial is a very common sans serif font. Research has discovered that on printed documents, people read with more fluency (ease) when they read with a serif font. However, when reading from a screen, people read with more fluency with the sans serif fonts. See below to see the difference between the two types of fonts.
Decorative Fonts
Decorative fonts are not necessarily serif or sans serif, they are decorative and used sparingly to add emphasis or for a particular reason. See the image below for an example of a decorative font.
Image of Happy Halloween courtesy of pxhere.com
Script fonts are also considered decorative in web design; they mimic handwriting and are harder to read than plain fonts such as serif and sans serif fonts. You should not use decorative fonts for the content text of your site; any information you want the audience to understand needs to be in a plain font.
Kerning
Kerning is the amount of space between letters/characters in a font. Not all letters/characters have the same amount of space between them; this varies with the font and the characters. For instance, the letter “T” would take more space than the letter “I”.
Tracking
Tracking is also the amount of space between letters, but it is the overall space between an entire block of text, not just two letters. You don’t want your letters spaced too far apart, but not too close either.
Leading (pronounced like the metal lead, not like a leader)
Leading is the amount of vertical space between the lines of text. In web design, we don’t want our text lines too close to each other as that makes it more difficult to read. The right amount of leading is important, as too much or too little makes it more awkward to read.
Be a Type Geek image courtesy of sketchplanations.com
Hierarchy
To make your web page easier to read, it is important to use typography to indicate to your viewers what is important and the relative importance of the content. You create hierarchy by using headings, font sizes, font weights, font styles, and sometimes even different fonts; with hierarchy, you can help your reader understand your content. Heading 1 (h1) is typically used for words you want to stand out the most, like your titles. Then you go down in size based on the visual prominence – heading 2 (h2), heading 3 (h3), etc. Then your text is typically not bold and smaller in size than the headings. The minimum font size (used for the body text) is usually 16 px fonts. You may choose larger, but you shouldn’t use smaller except for the “small print” as in the footer.
Heading image courtesy of seobility.net
Guidelines for Typography in Web Design
-
- Limit fonts to 2-3 per website.
- User sans serif fonts for your body text.
- Size your text appropriately (body text minimum 16 px and use hierarchy with headings).
- Don’t use all caps – this should be reserved for headings.
- Use colors carefully and intentionally – make sure you go by Web Content Accessibility Guidelines (WCAG).
- Stay between 40 and 80 characters per line.
- Provide sufficient white space between lines – usually 1.5 line spacing.
- Don’t use text animations – they are annoying and difficult to read.
Guidelines for Topography in Design courtesy of blog.hubspot.com
[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION