It’s possible that a picture is worth a thousand words. However, in graphic design, text is just as important as the images it is paired with. It takes skill to incorporate words into a design without making them stand out or clash with the other visual elements. The significance of typography in graphic design cannot be overstated. What is typography?
Graphic design is frequently viewed as a computer-based invention. But there have been books, newspapers, and broadsides for centuries, and the search for tools and methods that make printing easier dates back just as far. Enter typography, the art of creating and arranging text to ensure content is readable and appealing. Typography has been around since at least the middle of the 15th century, when Johannes Gutenberg created a movable printing press that brought the Gutenberg Bible to the Western world in mass production. For a quick example of typography in action, compare the readability of these two images:
Both images bear the same Albert Einstein quote: “Creativity is intelligence having fun.” However, one uses a combination of three different fonts: Comic Sans, a controversial font, an illegible script with inconsistent spacing that splits a key word into two lines, an awkwardly kerned serif font that doesn’t work well with the script, and Comic Sans. The quote is even more difficult to read due to the font pairing choice of a background that is too bright and text that is a pale gray color. The other image keeps things simple. The evenly spaced serif font is highly legible, and the text’s black font color contrasts well against the slightly textured off-white background.
These pictures show what typography is all about: how to make a text enjoyable to read by using things like color, font, layout, line spacing, letter spacing (also called tracking), and kerning, which is the space that is often customized between individual characters. But good typography isn’t as clear-cut as using consistent spacing and plain black fonts. As long as you use them wisely, adding color or sans-serif typefaces is not out of the question. Why is typography so essential? Graphic designers are visual communicators who use images, colors, text, and illustrations to convey a message. In graphic design, typography is what makes written messages sing. Examples of how typography can do more than just convey information through text are provided here.
1. Makes it easier to access Your designs
Will be more accessible to a much wider audience if you deliberately use the following typographic features: Line and letter spacing: People with visual impairments may have an easier time distinguishing between letters and words if the lines and letters are spaced appropriately. Contrast: Low-contrast color combinations like gray text on a light-gray background will be difficult for most people to read, especially those with visual disabilities or dyslexia. Instead, choose contrasting colors, such as black text on white background (or the other way around). Style of font: In web design, clear, simple fonts are easier for people with dyslexia or cognitive disabilities to read. When compared to serif fonts like Times New Roman or Georgia, sans serif fonts like Arial, Helvetica, and Verdana typically perform better. Text formatting: Bolding, italicizing, or underlining can help emphasize important words or phrases, making it easier for people with cognitive disabilities to process large amounts of text.
2. Catches attention
Imagine if every poster, book cover, product label, and website relied on 12-point Times New Roman to convey the design’s message. It wouldn’t work — you would gloss over every piece of text in a graphic design because it all looked the same.
One of the best ways to draw a viewer’s attention in design is through typography. Additionally, when competing with other visual elements for attention in a design, typography makes it possible for essential information to stand out. To achieve the desired effect, designers employ a number of typographic elements, including: Font size: Using different font sizes within a typographic design draws attention to the most important words on the page.
Contrast: Using fonts that contrast one another helps certain elements stand out and creates visual interest. Color: Using bright or bold colors lets critical information stand out.
Placement: Putting important information at the top or center of the page naturally draws the reader’s attention to the most important text. Whitespace: In order to draw attention to the text within the negative space, whitespace—the space around an element that has been left intentionally empty—is used.
3. creates a hierarchy
Typography allows graphic designers to create a clear visual hierarchy of information, guiding a viewer’s eye to the most vital textual elements on a page, whether it’s a heading, subheading, or body text.
You’ll see what we mean on the homepage for Vlow, a Dutch events company. Design agency Mediaploeg designed the site with a bright, in-your-face pop culture theme. On the left side of the split screen, a similarly vibrant video showcasing the event space loops, but strong typography choices ensure that the text on the right side draws the viewer’s attention. The first piece of information that visitors require is the identity of the business, which is displayed in a bold yellow heading. The eye naturally travels down from the heading to the body text, which offers a few more details about the services offered. In addition, in contrast to the video’s busyness, a comic-style call-to-action button can be found on the left, ready for viewers to take the next step after gaining an understanding of what Vlow has to offer.
4. conveys personality
The design elements that make up a brand’s identity are heavily influenced by its personality. The colors and typefaces of the words on Vlow’s website communicate the brand’s fun, hip personality.
But that sort of typography wouldn’t suit a brand like Wabimento, a funeral services provider catering to people grieving the loss of a loved one. To give visitors a sense of Wabimento’s gentle, comforting personality, Webflow designer Roem chose a delicate typeface that communicates its message softly, perfectly complementing the website’s soothing images.
5. Sets the tone
Typography sets the tone for a campaign, using visual elements to create a sense of urgency, excitement, calmness, or whatever emotion will help the content resonate with viewers. James Wood, the designer of the HR and training app SkillsNow, used color to contrast the drab, monochromatic status quo of “skills management” with the future. He used a bright gradient for the word “re-imagined” to set a hopeful tone that encourages visitors to imagine what is possible. 6. Promotes brand recognition
Brand recognition aids businesses in distinguishing themselves from rivals and establishing a solid market presence. Many factors come together to influence brand recognition, like customer service and product quality. However, a company’s brand design has a significant impact on how well it is remembered by customers. Words are often unnecessary when a business uses the same visual elements across all marketing channels and touch points. Consistent color schemes and packaging are all that are needed to convey the recognition that instills consumer confidence in the brand. Typography makes it possible to align words with the other visual elements of the brand identity when they are necessary. Take a look at Vlow’s logo, a wordmark or logotype consisting solely of the company’s name: The brightly colored logo’s bubbly shape and rough edges resemble a graffiti font, making Vlow’s playful, edgy identity clear. A different typeface is used for the primary heading on the homepage: But by mirroring the shadows and colors of the logo, the webpage heading serves as a recognizable piece of Vlow’s larger brand identity.
Everything typography and more
At Webflow, we offer the tools to make websites and the tutorials you need to master them. Learn about the latest typography trends in web design, the best typography tools for designers (including Webflow’s free font generator), and more with guidance from our blog and lessons from Webflow University. You’ll find all the information you need to master typography, plus a collection of templates and websites to inspire your best design yet.
