What is typography, and why is it important? How do I choose the right typeface for my website? In this blog post, we provide you with a comprehensive guide.
In this article, we’ll lift the lid on everything you need to know about typography. We’ll start with the definition of typography, including a brief history of its origins. We’ll then address the benefits of good typography and the impact it can have on your users. Finally, we’ll look into the different elements that comprise typography, and what they all mean.
Here’s what we’ll cover:
- What is typography?
- Why is typography important?
- The different elements of typography
- How to choose the correct typeface for your website?
- Conclusion.
1. What is typography?
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), and adjusting the space between pairs of letters (kerning[1]). The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process. Type design is a closely related craft, sometimes considered part of typography; most typographers do not design typefaces, and some type designers do not consider themselves typographers. Typography also may be used as a decorative device, unrelated to communication of information.
Typography is the work of typesetters (also known as compositors), typographers, graphic designers, art directors, manga artists, comic book artists, graffiti artists, and, now, anyone who arranges words, letters, numbers, and symbols for publication, display, or distribution, from clerical workers and newsletter writers to anyone self-publishing materials. Until the Digital Age, typography was a specialized occupation. Digitization opened up typography to new generations of previously unrelated designers and lay users. As the capability to create typography has become ubiquitous, the application of principles and best practices developed over generations of skilled workers and professionals has diminished. So at a time when scientific techniques can support the proven traditions (e.g., greater legibility with the use of serifs, upper and lower case, contrast, etc.) through understanding the limitations of human vision, typography as often encountered may fail to achieve its principal objective: effective communication.
Typography may be defined as the theory and practice of letter and typeface design. In other words, it is an art concerned with design elements that can be applied to the letters and text (as opposed to, say, images, tables, or other visual enhancements) on a printed page. In essence, typography is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing to the reader. Typography involves font style, appearance, and structure, which aims to elicit certain emotions and convey specific messages. In short, typography is what brings the text to life.
History
Although typically applied to printed, published, broadcast, and reproduced materials in contemporary times, all words, letters, symbols, and numbers written alongside the earliest naturalistic drawings by humans may be called typography. The word, typography, is derived from the Greek words τύπος typos “form” or “impression” and γράφειν graphein “to write”, traces its origins to the first punches and dies used to make seals and currency in ancient times, which ties the concept to printing. The uneven spacing of the impressions on brick stamps found in the Mesopotamian cities of Uruk and Larsa, dating from the second millennium B.C., may be evidence of type, wherein the reuse of identical characters was applied to create cuneiform text.[4] Babylonian cylinder seals were used to create an impression on a surface by rolling the seal on wet clay.[5] Typography also was implemented in the Phaistos Disc, an enigmatic Minoan printed item from Crete, which dates to between 1850 and 1600 B.C.[6][7][8] It has been proposed that Roman lead pipe inscriptions were created with movable type printing,[9][10][11] but German typographer Herbert Brekle recently dismissed this view.[12]
2. Why is typography important?
For designers, typography is a way to use text as a visual to convey a brand message. This design element is important for graphic designers not only to build personality, convey a message but also to grab the viewer’s attention, build a hierarchy, brand recognition, harmony and establish value and tone of a brand. Typography is so much more than just choosing beautiful fonts: it’s a vital component of user interface design. Good typography will establish a strong visual hierarchy, provide a graphic balance to the website, and set the product’s overall tone.
Typography builds brand recognition
Not only will good typography enhance the website’s personality, but your users will subliminally begin to associate the typeface featured on your site with your brand. Unique, consistent typography will help you establish a strong user following, build trust with your users, and help to carry your brand forward.
3. The different elements of typography
Typography is a fundamental principle of good design. Whether you’re designing for print or the web, good typography helps balance the visual structure of your design between the content and the visuals. Apply these eight elements of typography to make sure your viewer can navigate through your content the way you’ve intended.
1. Color Contrast
Good color contrast may seem like an elementary concept, but there are some easily overlooked things to note when selecting colors for your typography and overall design.
One of the most common mistakes (and the easiest to fix) is putting black text on a white background – this is too much contrast! If you look at most well-designed websites, you’ll notice the black text on the white background isn’t really black – it’s grey. This technique takes down the contrast and makes it easier for the viewer to read.
Contrast is not achieved simply by finding two very different colors. Just because two colors are different doesn’t mean they will provide good contrast if their value is the same.
A simple test to see if your design has enough contrast is to convert it to greyscale. This will allow you to easily see the value of the colors, which in the case of contrast, is much more important than color.
In some images, even though the colors are very different, once they are converted to grey scale, you can see that their values are so close the words become almost impossible to read. This tells you these colors are not a good pair.
If you design on a computer like most of us, it’s a bit more technical but just as easy. In Photoshop, after flattening your work, select Image>Adjustments>Desaturate. In Illustrator you do this by selecting your design, then select Edit>Edit Colors>Convert to Grayscale.
2. Font Size
Print design and web design differ here – mainly due their respective mediums.
In print design, 10pt font for body copy is generally accepted, but on the web, we deal in pixels. The equivalent of 10pt is 13px and this is a good size to stick with for body copy on the web. Anything smaller than these sizes will be too small for the average viewer to read.
Of course, keep your audience in mind. If you’re designing a website or brochure for a more mature audience, make your type bigger – your viewer will be happy you did.
3. Leading
Leading is the space between lines of text – what web designers refer to as line-height. The word leading originated when type was set by hand in printing presses. Lead strips were put between lines of type to add space.
Without space between lines of type, it becomes difficult for the viewer to read and follow from one line down to the next. Adding too much space makes large sections of text tedious to read.
In print design, standard leading is 120% the point size of the font (10 point type/12 point leading, 12 points type/14.4 point leading). In web design, a good line height is also about 120%. In both print and web design, this percentage can vary slightly based on the typeface used depending on the x-heights, ascenders and descenders of each letter form.
Many times, very tight or very open leading can yield beautiful typographic treatments but should be reserved for small amounts of text, not large blocks of copy. This example from neotokio.it demonstrates how tight leading can create a great typographic treatment for a header.
Typography influences decision making
Typography has a profound effect on the way that users digest and perceive the information conveyed by the text. Eye-catching type is much more persuasive than weak fonts that don’t reinforce the message of the text.
Typography holds the attention of the readers
Good typography could be the difference between someone staying on your website for one minute or half an hour. It’s important that your website is visually stimulating and memorable, and typography plays a huge role in this process.
Kerning has, until recently, been mostly reserved for print designers due to the difficulty of kerning for the web. There are now some easier ways to kern for the web. One great tool is kern.js.
5. Hierarchy
Web designers often establish a typographic hierarchy by using the tags <h1>, <h2>, and so on. Hierarchy isn’t size alone, but has more to do with the prominence of your typographic elements relative to each other.
This could be achieved by using a different typeface, a contrasting color, white space or size.
Achieving good hierarchy should generally start with a sketch where you layout what your most important visual element is down to your least important element.
The most important element doesn’t have to be larger, it just needs to take more prominence over the other elements. Ask yourself what you want the viewer to read first. This doesn’t have to be what is actually first in your layout – it just needs to be the focal point.
In this example, the home page of thisisdare.com, what is the focal point? “DARE” right? In this case, the focal point is achieved with size and color, but where does your eye go next? I’d say it goes to the bottom to find out what DARE is. The hierarchy here is achieved by color and contrast despite its order in the composition.
What if the about us text were black rather than orange? The color isn’t being used just for its aesthetic quality or to match the word DARE, it’s being used intentionally to create hierarchy and lead the viewer’s eye to where it should go next.
6. Whitespace
White space, or negative space, is the space between elements in a composition.
If your typography and other design elements are dense and too close together, your content will become difficult to read. This is where whitespace comes in.
I hear a lot of my clients telling me to fill in those empty spaces or to not waste the space, but white space is a very intentional component of good design. In 1930, Jan Tschichold wrote,
“White space is to be regarded as an active element, not a passive background.”
Whitespace can be used to create balance or lead the viewers eye from one part of the composition to the next. It can invoke a feeling of elegance or add a level of communication to a typographic treatment.
The FedEx logo uses the whitespace between the uppercase E and the x to create a counter form – an arrow. This adds a secondary level of communication to the word.
Milton Glaser’s newly designed website employs white space to add a feeling of simplicity and elegance, as well as create positive and negative forms that lead your eye around the content.
7. Serif vs. Sans Serif
Print designers have always debated which font is easier to read – serif or sans serif.
The truth is, there is no evidence to support that either one is more legible than the other in print. Some say sans serif fonts should be reserved for titles and headers and serif fonts should be used for body copy, while just as many others say the exact opposite.
However, when dealing with web design or any kind of on-screen design, it is generally agreed upon that sans serif fonts are easier to read on-screen. They should be used for the majority of text on the screen while serif fonts should be primarily used for small sections of copy such as titles and headers.
Typetester.org is a great tool to compare typefaces you’re considering for your website.
8. Using Webfonts
In the recent past, typography on the web was limited to web safe or system fonts.
If you were to design a website using the typeface Akzidenz-Grotesk, hardly anyone would have it installed on their computer and as a result, your visitors would see your text in Helvetica or more likely, Arial – whichever typeface they had installed on their system. In a vain attempt to compensate for everyone on every system (even the Linux users) we would create fallback fonts on top of fallback fonts – a sort of Russian Roulette for typefaces.
Today typography on the web is evolving. There are several technologies that allow end-users to experience the fonts you intended them to see. Some use font-replacement, WOFF, javascript, or hosted fonts. The list of technologies can get dizzying but it all boils down to this: you can use non-system fonts and trust that your users will see them. Usually, all you need to do is add a link in your <head> and you are off and feeling free to code with confidence. You no longer need fallback fonts in a webfont enabled world.
You can buy professional fonts with web-licenses from many online font distributors including myfonts.com, fontspring.com, typekit.com, and typotheque.com. Most sites have licensing options that allow for print and web use, and they all allow for some sort of free trial period. If you’re just starting out or don’t want to commit to a font financially, you can give Google Webfonts a try – it’s free. They have some decent fonts and simple installation instructions. If you want to see your (or any) site with a font facelift, try out the font-swapper from webtype.com.
For a great example of web fonts in action, check out adamstoddard.com.
To find out what font is being used on a webpage, use the WhatFont bookmarklet/extension. WhatFont is easy to use – with just a click it tells you what fonts are used in a webpage along with what size, color and line-height are used.
Understanding these basic typographic elements and applying them skillfully to your print or web designs will enhance the readability for your viewer and the quality of your design. Keep in mind design is a creative process and treat these guidelines as a foundation for your designs – not a set of rules to follow.
4. How do you choose the right typeface for your website?
Here are seven key factors to consider when searching for an appropriate typeface:
1. Branding
A font you select should embody the character and spirit of your brand. Try to match the font style to your brand’s character.
2. Legibility
It’s evident that it’s better for a typeface to be clear and legible, rather than so unreadable. If people have to spend extra time to understand what have written, then they will disregard your design.
Avoid using fancy fonts or uppercase text in large bodies of text as it forces strain on the reader’s eye. It’s better to use decorative typefaces only for titles and headlines.
Also, it’s vital to choose a typeface that works well in multiple sizes and weights to maintain readability in every size (check that the typeface you choose is legible on smaller screens!)
While the decision can be based on several key points, one of the most important points is the length of your copy. Generally, serif typefaces are easier to read for lengthy copy than sans. Serif fonts help the eye travel across a line, especially if lines are long.
But it’s also important to consider your target audience. Sans is preferable for young children, or anyone just learning to read. Sans is also good for readers with certain visual impairments.
Also, it’s a safe bet to use “web safe fonts” — fonts that are supported by all major web browsers by default. Here are some safe sans typefaces you might start with:
- Arial
- Tahoma
- Verdana
And here are some safe serif typefaces:
- Georgia
- Lucida
- Times New Roman
4. Font Family
Some fonts are members of ‘superfamilies’ — they come along with a selection of different styles and weights that give designers more creative freedom.
When choosing a font for your designs, you need to know how large a font family needs to be to meet your project typographic requirements. For many projects it’s enough to have two weights with italics, while others might require additional versions to create good visual hierarchy.
Much of the time one typeface is all you will need to use in your designs. However, there are certain occasions where you’ll want to use multiple typefaces (i.e. one for body text and another for a title).
Here are a few tips for font pairing:
5. Limit the total number of fonts
Avoid using more than 2–3 fonts in your design. Each time when you think you need a new font, play with different font sizes for existing fonts.
6. Avoid using too similar fonts
The whole idea of using multiple fonts in design is creating a visual diversity. That’s why there’s no point choosing two fonts that look identical. In fact, the more similar fonts are, the more likely they will clash.
7. When selecting two fonts, use decisive contrast
When you choose to use multiple typefaces, make sure the typefaces you’re using have substantial contrasting differences. But remember that the contrast is not the same as conflict. The ideal combination of fonts should create harmony.
Follow a simple rule of thumb —find the two typefaces that have one thing in common but are otherwise vastly different. Combining serif with sans serif is a classic move.
The key thing when combining two very different fonts is establishing a clear hierarchy between the two — one font should be more prominent than the other. And this can be achieved by varying the size and weight of each typeface.
Tools for finding and pairing fonts
Here is a collection of tools that will help you find and pair the fonts for your design project:
5. Conclusion
Typography is often overlooked, but it’s a crucial component of user interface design. Mastering typography will see you well on your way to becoming a fantastic UI designer! If you’re not sure where to start, why not head to your favorite websites and start making a note of what typefaces they’ve gone for.