The Secrets Of Good Design
This is the second piece in our new series entitled: The Secrets Of Good Design. In each article we will cover one of the following topics:
- Tips & Tricks
If you missed the previous one discussing Layout, click here. This one is all about Typography. Let's get into it!
Typeface vs Font
A typeface is a particular alphabet and its corresponding accessories (such as numerals and punctuation) that share a common design.
For example, Helvetica is a well-known typeface. A font is a particular set of characters within a typeface. So, 12-point Helvetica is a font, and 10-point Helvetica is a separate font. The same goes for different weights – a 14-point Helvetica Bold is a different font than a 14-point Helvetica Light. They are different fonts, but the same typeface.
Each typeface has a personality. Some are fun and playful. some are strict and blunt, and some feel light and fancy. Choosing the correct personality of a typeface is as important as choosing the right outfit for the right occasion. ("Sorry I wore my Spongebob pajamas to your wedding Uncle Frank.")
There are different classifications that each typeface falls under. There are four major typeface categories:
- Sans Serif
A serif is a decorative stroke that finishes off the end of a letter's stem (sometimes also called the “feet” of the letters). There are three styles within this category: Old Style, Modern, and Slab.
Old Style is the most popular in serif fonts. It is a classic, traditional typeface that dates back to the late 15th century. Their relation to calligraphy can be seen in the curved strokes and letters with thick to thin transitions, looking somewhat like letters drawn with a pen and ink.
Despite its name, the “Modern” Typeface, also known as Didone, is not new. In the eighteenth century improvements in paper quality combined with more advanced printing methods brought about changes in how typefaces were created.
Modern is the term used to categorize fonts created at that time, or in the style of that time.
Modern fonts are recognizable by their thin, long horizontal serifs, and clear-cut thick/thin transitions in the strokes. The stress is vertical, i.e. there is no slant on the letters.
You can’t go far, typographically speaking, without seeing a slab serif. Whether in a magazine article or an advertisement, on a book cover or signage, slab serif (often called square serif or Egyptian) designs, with their geometric, block-like shapes, project solidity, style, and confidence.
With the abundant availability of slab serif typeface families in digital form, it can be daunting to select just the right one.
Slab Serifs work extremely well when mixed and matched with lighter typefaces. Big, bold headings and logos used alongside “web-safe” body copy. Slab Serif typefaces offer a huge amount of variety and can be great for providing contrast and drawing attention in both graphic design and on the web.
Sans means "without" in French, hence Sans Serif means "without serif" which (as we mentioned earlier) are those little "feet" at the end of the characters. Sans Serif is the most versatile of the four main categories, it can fit a design with a wide range of personalities.
Display fonts are designed to be used at large scale to convey a specific feeling. We see them in custom logos and beautifully laid-out editorial stories. The best display fonts can create an atmosphere in an instant and are great elements to include in your design.
Many display fonts don’t include a text size version because they are meant to be used sparingly and at a large point size in headlines and advertising. Display fonts may incorporate graphic elements and details that make them illegible when scaled down. A good rule of thumb is to use display fonts only as accents in your design and not for full blocks of text. If you are using a display font in a layout, try using it as an initial cap at the beginning of a text. It’ll add a nice touch and will look elegant.
Often, you’ll see logos using customized display fonts that are unique and stylized. These aim to convey a specific personality that fits a brand.
Script fonts are generally a lot fancier than their serif counterparts. They’re intended to provoke ideas of elegance and creativity, thanks to their hand-written nature. If you want to make your company feel more personal, and improve your chances of earning that all-important customer affinity, then script typefaces could be the perfect option.
When it comes to the psychology of typography, script fonts are probably the ones most likely to inspire emotional and creative feelings. They’re perfect for when you want to convey a certain feeling or experience, and can be particularly useful for “visual” brands who want to show off their creative side.
The key is to use script fonts with caution. While they look artful and fancy, they can also be difficult to read in certain contexts so it’s important to make sure that the script you choose is legible.
A few script font examples from Google Fonts:
A very simple way to determine if the font you are considering is the right one for the job, is by reading the creator's description of the font. It will tell you exactly what they intended when they created the font which will give you an insight into what it was designed for and therefore how it should best be used.
Typography plays a critical role on any website by ensuring we can comfortably read and process all its text-based content. If a website’s typography works, we won’t notice. If it fails, chances are we’ll bounce off the page.
Every website has text, and where there is text there is either good or bad typography. So, as a website owner, you need to invest time into the typography of your own site. By focusing on the look and readability of your words, you ensure your readers won’t be challenged by your text. And for the few who do appreciate good typography, your attention to detail will convey professionalism, empathy, and design smarts.