While typography may seem like a design afterthought, it is actually a crucial element of your brand. There are eight basic, universal typographical design elements:
- Typeface
- Hierarchy
- Contrast
- Consistency
- Alignment
- White space
- Colour
Having a basic understanding of each of these elements can transform any design project. Typographical principles are techniques used to help present ideas in visual form. We are often unaware of how influential typography is to an underlying message. Good written communication is the transmission of an idea to another person via text, such as a website, blog post, magazine ad, billboard, newspaper and various other forms of print. How that message is interpreted is often dependant on smaller elements, such as font, style and colours; elements of typography.
Typeface
There are three basic kinds of typefaces: serif, sans-serif, and decorative.
Serif
The small embellishments that form the end of a stroke (circled in red) are called “serifs”, giving the letterform its name. Popular serif fonts include Garamond, Times New Roman, and Bodoni.
Sans-Serif
“Sans” means “without,” which is why all fonts without serifs are called “sans-serif.” These fonts are often considered minimalist, and therefore more modern. Popular sans serif fonts include Arial, Helvetica, and Futura.
Decorative or Ornamental
Decorative fonts are often elaborate, creative fonts used for titles. Decorative fonts (aka Ornamental or Display fonts) are the most diverse category of typefaces. They became popular in the 19th century on posters and advertisements. With the Art Nouveau movement in Europe, the use of decorative fonts soared. Throughout the 20th and into the 21st centuries, they have commonly reflected an aspect of the culture. Many times, decorative fonts quickly fall out of fashion (psychedelic or grunge designs).
It is best practice to use a maximum of three fonts in a single design, such as a newspaper layout. Two is often even better. This helps keep your design uncluttered and simple.
If you pair serif fonts with sans-serif fonts, such as using serif for the body text and sans-serif for the header. Decorative fonts should be used sparingly, and avoided for body text as they are often difficult to read.
Design software helps you create font pairings that are readable and attractive. Once the domain of design professionals, font paring is made easy with software that guides you towards choices that suit various projects, such as newspaper publication, website content design and blog layout.
Hierarchy
A typographic hierarchy is a system that uses typography – the size, font and layout of different pieces of text – to create a hierarchical division that can show readers where to look for specific kinds of information. It is a system for establishing order in a set of data. A website is a typical example, with the title at the top of the page in a large header, while main navigation pages within the website are listed below the header in a smaller font. This is a visual cue, that helps readers identify the context of the text without having to consciously think about it.
A poor design choice for a website has all of the text is in the same:
- Size
- Font
- Weight
All of the text appears equal and nothing is distinguished. It lacks hierarchy.
Hierarchy also helps to make your text “scannable.” Social media means that writers and designers must know how to be concise and how to design text layouts that is scannable.
For example, if someone is reading a brochure for your business but they are only interested in key points, such as your contact information, you want to make that information easily accessible. Instead of making the viewer read through blocks of body text, organising the information with bold headers to guide the reader quickly to the relevant information makes design easier to consume.
Contrast
Contrast makes text interesting and can help communicate an idea that might be considered more important. Varying size, typeface, weight, colour, and style can give your designs emphasis as well as organise your ideas. Contrast helps give text an interesting, attention-grabbing, and more meaningful appearance.
Below, the word “small” is black, aligned right, lightweight, in an italic serif typeface with increased space between letters.
“Large” is red, heavyweight, in a regular sans-serif typeface, and is about 10x bigger than the word “Small.”
Elements of contrast make the first design stand out much more than the second design, however, both words have the same styling.
Consistency
Consistency is a key principle for all typography. Consistent fonts are especially important. Using too many fonts can create confusion for the reader and it looks messy. By deciding on a hierarchy of styles you can still include many levels of hierarchy, but you create an overall theme for the design.
The “Chapter One” page below has a pleasing design with only:
- two font faces
- two colours
- three font sizes
Even though only two font faces are used, hierarchy is achieved by using size and colour. All of the text is left-aligned (except the page number) providing clean, consistent lines.
However, the second design uses too many elements and creates a messy design.
Alignment
Alignment refers to the “line,” that the text orients towards. It can apply to a whole body of text, individual words, or even images. Alignment should be consistent. Every element of your design should align with one of the other elements to create equal sizes and distances between objects. For example, you may want the logo to align in size with your header, and you may want your body text to align with the same margins the header falls in.
Many amateur designers make the mistake of overusing centre alignment, which can look messy and unbalanced. Left alignment is usually the best choice, while right alignment can create an interesting format but should not be used for body text.
Whitespace
Whitespace is the empty space around objects or text. It can take the form of margins, padding, or just an uncluttered area. It creates a pleasing visual experience and can even draw attention to the text.
White space is one of the best ways of drawing attention to text and is often used in newspapers and magazines in place of bright colours or graphics.
Colour
Colour can really help to set the mood for design and getting it right can make text stand out. There are three main components of colour:
- Hue: the shade of colour
- Saturation: the brilliance of a colour
- Value: the lightness or darkness of a colour
Good design contrasts hue, saturation, and value in a way that makes the text easy to read. To test design, it can be viewed in grayscale to determine its visibility. If it comes almost invisible in grayscale the values need adjusting.
Using light text on a dark background should be used sparingly, as many people find this contrast difficult to read.
Overall, there are three main things that should be considered when choosing typography.
- Is the text readable?
- Is the styling consistent?
- Is contrast used?
These basic design elements should be incorporated into any business design decisions, from publishing a business plan to designing a website. When elements are consistent and well designed, you strengthen your brand awareness and create a polished and professional appeal.
Welcome to Our Blog
We want to share our expert knowledge with you, and that is why we want you to know that all of our blogs are written by our in-house writing team.
Our writers do the research, discuss the topics and form their own opinions. They do not write for a commission from any sites, products or services mentioned, and we do not publish advertorials or paid reviews.
We enjoy writing for you and will continue to be transparent about our blogs, which are only opinion pieces.
