This is part of our ongoing “Design Tips for Clients” series. Whether you’re one of our clients or you’re looking to learn about design, we’ll give you an introduction to color, typography, industry jargon and much more.
Like color, your typeface and font choices can have a large impact on the success of your website. Some typefaces are more legible in traditional print mediums, while others are better for screens. Some are also more versatile than others. In addition, different typefaces add their own personalities to a website. For example, script typefaces (typefaces that resemble handwriting) give either an elegant or fun tone depending on their design.
- First let’s go over a couple of vocabulary terms: typeface and font.
- Typeface is generally used to refer to the overall font family name, such as Times New Roman.
- Font usually refers to the different variations of a typeface, such as Times New Roman Bold or Times New Roman Italic.
Serif typefaces have a decorative line (a serif) added to the ends of a letter or character (numbers, symbols, punctuation). Serif fonts are commonly used in printed materials, such as books, magazines, and newspapers. In general, serifs are easier to read in print because printed products have a higher resolution than screens. In addition, the serifs add a distinctive look to each letter or character, making it easier for our brains to process content.
Because serif typefaces are most legible when printed or displayed at high resolutions, they are not often used on the web. As screen resolution has improved, legibility has become less of an issue regarding serif typefaces. While they are still used for small amounts of text, such as headlines or buttons, sans serif typefaces are used for most online text.
Serif Typefaces Examples: Times New Roman, Palatino, Baskerville, Georgia, Garamond
SANS SERIF TYPEFACES
Sans serif typefaces don’t have a decorative line added to the ends of letters or characters, and tend to have a unified thickness. In print products, sans serifs were regulated to headline or photo caption use because it is difficult to read large amounts of printed text in sans serif as the letters aren’t as distinctive (as serif typefaces) and take our brains longer to process. The opposite is true for sans serif typefaces online. When viewed on a screen, san serif typefaces are much easier for people to read and display well at lower resolutions.
Both serif and sans serif typefaces tend to be versatile in that they tend to have many different fonts. For example, Helvetica, which is a commonly used font online, has several different fonts such as Helvetica Light (the thickness of the letters and characters are very thin), Helvetica Light Oblique, Helvetica Regular, Helvetica Oblique (Italic), Helvetica Bold, and Helvetica Bold Oblique. Other font variations can include condensed (there is little space between letters), ultralight (even thinner than light), thin, medium, semi-bold, and ultra bold.
Typefaces with many font variations are helpful in creating a consistent look and tone while allowing for differentiation in design to keep users from being bored or missing important content.
Sans Serif Typefaces Examples: Helvetica, Arial, Geneva, Gill Sans, Lucida Grande
SLAB SERIF TYPEFACES
Slab serifs are similar to serif typefaces, but have squared-off ends and have a unified thickness or thinness in the letter and character strokes. Letters and characters also tend to have a larger width than regular serif fonts, meaning they take up more space than regular serif fonts.
Though fairly legible in print and online, they tend to make a strong or serious statement when used. It is important to make sure the tone of the font matches the tone (brand) of your business.
Slab Serif Typefaces Examples: American Typewriter, Courier, Superclarendon, Copperplate, Courier New
Script typefaces often resemble handwriting, both cursive and print, and the letters tend to connect to one another. Legibility can be an issue in print and online, especially if the typeface is used at a small size or for a large amount of text. It is best to use these typefaces as accents in any medium, and always test their use and legibility before settling on a typeface.
In addition, make sure the chosen script type fits your brand. Script typefaces like Noteworthy or Sugar Candy give a fun, relaxed, and casual tone. If you want to a script typeface that’s more elegant or sophisticated, you would use something like Apple Chancery or SignPainter.
Script Typefaces Examples: Geneva, Sugar Candy, Noteworthy, Apple Chancery, SignPainter
In monospaced typefaces, letters and characters take up the same amount of horizontal space, meaning their widths (or x-widths) are equal. These fonts are commonly used in text editors for programmers because they are easy to read in large code blocks and display well at low resolutions.
However, they are used sparingly online and often in the role of adding emphasis to text or character to a design, such as with block quotes or breakout text. Unlike script typefaces, monospaced typefaces tend to have more font variations like serif and san serif fonts.
Monospaced Typefaces Examples: Andale Mono, PT Mono, Monaco, Menlo, Courier
Display typefaces, also called modern typefaces, tend to be more creative and unusual. The thickness of character strokes can vary greatly, and they often incorporate defining elements of the other typeface categories into their design.
Because of how varied these fonts are, they cannot be classified as easily legible or not. Their legibility depends on the situation in which they are used. These typefaces tend to have a strong personality and reputation. Display typefaces are best suited to be accent fonts, but make sure you test your chosen typeface with other people to ensure it matches the brand, is legible, and sends the right message.
Display Typefaces Examples: Chalkduster, Phosphate, Herculanum, Papyrus, Maker Felt
Reference Source: “Serif vs. Sans: the Final Battle” by Stacey Kole.
Is there a design topic you want to know more about? Let us know in the comments or contact us through email.