We’ve all done it: spent excessive amounts of time scrutinizing a text message or email in an attempt to pinpoint the exact intention of the sender. Analyzing the meaning behind words, or deliberating over which word fits better in a certain context is something we do regularly. But how often do we consider the way in which the text can visually reflect the tone of the written phrase?
Part of a grawebphic designer’s role is to express the emotion, message or atmosphere of the words through their appearance. Imagine, for example, the ornate typeface of a wedding invitation plastered onto a road sign. It doesn’t quite have the desired impact.
In this guide, we’ll examine the power of typography. You’ll find the definition of typography, a rundown of the key elements of typography, and tips on how to choose the right typeface for your website design or website redesign. You can skip ahead to any of the sections below:
What is typography?
Typography is defined as the visual aspect of type. It’s the practice of arranging text in a way that is legible and aesthetic. Beyond that, it can be used to exude a certain mood or strengthen a message. To do so, we can use different typefaces and font styles, as well as adjust the size, spacing between letters and words, and more.
Typography is essentially the arranging type to make written language legible and appealing when displayed and read. Its history dates back to the ancient civilizations of Greece and Rome, where letter forms were inscribed on stone, metal, and papyrus.
During the medieval period, illuminated manuscripts were created with carefully crafted lettering. Then in the 15th century, the invention of the printing press revolutionized typography making books more widely available. The industrial revolution (19th century) brought about new technological advancements in printing, leading to the creation of sans-serif typefaces and the development of modern typography. Today, digital technology continues to shape and expand the field of typography.
One of the key classic design terms, typography is an essential part of any design. The same words can convey a different feeling, depending on the way they’ve been designed. Whether you’re updating your web design, writing a children’s book or creating a logo, consider how your copy can visually set the tone of your brand’s personality or core message.
The main elements of typography
In order to venture into the world of typography, you’ll need to know which variables are available to play around with. While there’s an extensive list of typography terms, the following elements are the ones you’ll need to get started:
Fonts and typefaces
It’s time to clear the confusion over the definition of typefaces and fonts, as there is a distinct difference between them.
A typeface is the collective name of a family of fonts (for example Helvetica, Times New Roman or the infamous Comic Sans), whereas a font refers to a specific style within that typeface, such as bold, italic or condensed. Notice how this blog post is all written in one typeface, but includes multiple fonts.
Legibility
While there’s plenty of opportunity for getting creative with typography, remember that text is ultimately there to be read. On top of picking a typeface that’s clear and legible, there are additional factors to pay attention to.
Take note of the size of your text, and the spacing between letters and lines (or ‘kerning’ and ‘leading’ in professional terms). Also, ensure enough contrast between the text and the background color. This will also help improve your website’s user experience and accessibility.
Serif and sans serif
When discussing typography, you’re likely to hear these terms a lot. A serif typeface includes small decorative lines or “tails” on the ends of letter strokes, whereas sans serif literally means “without serif.” Hence, sans serif typefaces (like the one used on this very blog post) are generally made up of cleaner lines, without any embellishment on the tips of the letters.
Hierarchy
As one of the basic principles of design, hierarchy is essential in typography. It can be used to create a distinction between bits of copy, helping readers instantly understand which information is most important. Hierarchy is achieved using anything from size (large or small), to width (thick or thin) to element placement (text at the bottom of the screen tends to seem less important than text at the top fold).
For example, the header on a newspaper article is generally larger or more prominent than the body text, enabling readers to get the gist of the article by skimming the header. This also helps form a clear and digestible layout.
White space
White space, or in other words “negative space,” simply refers to the empty areas surrounding text or images. Adding a healthy amount of space between graphic elements helps avoid clutter and ensures clarity. Including margins or empty space around text will also bring more attention to it and help differentiate between sections or blocks of information.
Alignment
Typographical alignment refers to the setting of text flow on a page. There are four basic settings:
Flush left: Text is aligned along the left margin.
Flush right: Text is aligned along the right margin. Take note that in languages that read from left to right, flush right is generally not recommended as it is anti-intuitive.
Justified: Text is aligned along the left margin and the spacing is automatically adjusted so that the text is flush with both the left and right margins.
Centered: Text is centered, which means it is not aligned to any margin. This is more suitable for titles than for large amounts of text. As the edges are jagged and the reader needs to look for the start of the next line each time, it can be hard to read in long-form text.
Consistency
When working with typography it's important to be consistent with how you use all of its elements including, font, spacing, and alignment in order to create a cohesive and professional-looking design.
Context
When choosing which typography to use it's important to understand what it's being used for and why. Think about the intended audience, the type of content and how it will be distributed. Genre, tone and medium should all be taken into account.
Typography tips for your website
Writing website content is one thing, but deciding how best to present it on your site is quite another. The following principles are tailored specifically to website creation, but can also be implemented in other contexts, such as poster or newsletter design.
Here are six typography tips to take into account:
01. Reflect your brand identity
Before embarking on any creative venture for your business, make sure you’ve clearly defined your brand identity. Are you fun and energetic? Or do you have a more traditional approach?
Whatever it is, search for a typeface that expresses your unique personality. In order to choose the best font for your website, start off by collecting a few that feel right to you, then narrow it down once you have a better understanding of what you’re looking for.
02. Be consistent throughout your interface
Part of building a solid brand identity involves consistency. This is required in everything from your website color schemes to your typography choices. Across the wide range of copy on your website, from the small bits of text that make up your microcopy, to the labels on your website menu and the headers on your homepage, consistency is key.
Craft a holistic experience by using the same fonts and typefaces throughout your website. While you can merge up to two or three typefaces in the same site (more on that below), use the same ones in the same contexts. For example, if the title on one page is written in Helvetica Bold in 40px, make sure the other titles are the same. To make your life a little easier, you can customize and save text themes to use them repeatedly throughout your site.
Notice how the template below, created for a fitness website, maintains consistency throughout its various sections of copy.
03. Make it easily readable
Text is there to serve a purpose. Sure, it can be decorative or add to the overall design, but no matter if you’re crafting the typography for your call-to-action button or choosing a font for to design a logo, it has to be legible. There’s nothing worse than having to squint to read a blog post, or clicking the wrong button because you misunderstood what was written on it.
Check that your copy is large enough to read both on desktop and mobile. The typeface you choose should also work well in the font size you’ve chosen. Some typefaces may look great as headers, but are less legible in smaller sizes. Here are some inspiring website typography examples.
04. Stick to two or three fonts
Setting limitations can be an invaluable practice when it comes to creativity. The same goes for typography. A website made up of multiple typefaces can appear messy and incoherent. Instead, opt for no more than two or three typefaces and use them consistently throughout each page.
A good practice is to pick one typeface that will be used mainly for titles or headers, and one for the longer blocks of text, like descriptions and blog posts. If you want to add some variety, use a third typeface for calls-to-action and other microcopy.
05. Explore font pairings
When finding the best font pairings for your site, keep your brand identity at the forefront of your decision-making. Make a mental note of which font will be used for titles and which for long-form text. The latter should be particularly clean and easy to read (see easiest fonts to read), whereas you can get a little more expressive with the headers, choosing a typeface that really speaks your brand.
06. Pick web safe fonts
In order to make sure your website appears the same on all devices, use web-safe fonts. As each device has its own built-in set of fonts, if your site includes a font that is not web safe, the text could show up in a different font than the original. Not exactly the look you’re going for after all your meticulous design work.
However, you can easily avoid this when creating a Wix website, by using any of the professional pre-installed fonts. Additionally, you can download web safe fonts from one of the online resources (like Google Fonts) and then upload your own font to the Wix Editor.
Typography and UI/UX
Typography plays a crucial role in both UI (User Interface) and UX (User Experience) design. In UI design, it's used to communicate information, guide the user through the interface, and establish the overall visual style of the product. Good typography in UI design enhances the usability and accessibility of the product by making text legible, readable, and scannable.
In UX design, typography affects how users perceive and engage with the content, as well as how easily they can find and understand the information they are looking for. This can influence how users process the tone and personality of a brand, as well as its credibility and trustworthiness from the information it provides.
Overall, typography is an essential aspect of both UI and UX design that can have a significant impact on the success of a design by making it more usable, accessible and appealing.
Learn more about how to make a website with our extensive guide.
Typography FAQ
What is typography vs fonts?
Typography is the art and technique of arranging type to make written language legible, readable and visually appealing. It includes various elements like typefaces, line spacing and alignment. Fonts, on the other hand, refer to the specific styles, weights, and sizes of typefaces. A typeface is a family of fonts with a consistent design, while a font is a specific instance within that family, representing a particular style and size within the typeface.