The same words can convey a different feeling, depending on the way they’ve been designed. Imagine, for example, the ornate typeface of a wedding invitation plastered onto a road sign. It doesn’t quite have the desired impact.
This is why typography is an essential part of any design. But the word is often used incorrectly, and typography has a deep history many people overlook.
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 Wix Studio website. 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. We can also adjust the size and the spacing between letters and words.
A history of typography
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. There are many typography tools available and typography trends to keep your eye on.
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. For example, take a look at these professional fonts. Read more about typefaces vs fonts here.
Why is typography important?
Typography is an essential part of design because it affects how content is perceived and understood. Several reasons why typography is so important:
Readability and legibility: Well-chosen typography makes text easier to read, so that your client's message is accessible to a wide audience.
Branding: Typography plays a key role in shaping first impressions. The style of your text communicates your brand’s tone, whether it’s modern, traditional, formal or casual.
Visual hierarchy: Effective typography helps guide the reader through the content. By adjusting font sizes, weights and styles, designers can emphasize important points, making it easier for the reader to focus on the most critical info first.
Consistency: Consistency is crucial for establishing a professional look and reinforcing your client’s brand identity across platforms.
Emotional impact: Different fonts and styles can evoke distinct emotions. For example, a playful font might create a sense of fun, while a serif font might feel more formal.
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
Again, 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 five typography tips to take into account when designing a website:
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.
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.
04. Stick to two or three fonts
Setting limitations can be an invaluable practice when it comes to creativity. The same goes for the best 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, whereas you can get a little more expressive with the headers, choosing a typeface that really speaks your brand.
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.
Typography FAQ
Is typography a type of design?
Yes, typography is a fundamental aspect of design. It involves the art and technique of arranging type to enhance the visual and aesthetic appeal of written language. Effective typography considers factors such as font choice, size, spacing and layout to convey a message or evoke a specific mood. In graphic design, web design and various visual communication mediums, typography plays a crucial role in creating a cohesive and impactful design.
What is typography vs graphic design?
Typography is a subset of graphic design, focusing specifically on the arrangement and styling of type. Graphic design encompasses a broader scope, including the use of imagery, color, layout and typography to create visually compelling and communicative designs. Typography is a key element within the broader discipline of graphic design.
How is good typography defined?
Good typography is defined by legibility, readability and aesthetic harmony. Consistent type choices across a design create a cohesive look which makes for more effective and attractive design. Effective use of hierarchy guides the reader through information, while mindful alignment and balance contribute to a visually pleasing and accessible reading experience.
Sign up for Wix Studio and create your next great website today.
