Try to think of the most attractive website you’ve recently visited. Now, try to recall the characteristics that made it so appealing. Perhaps it’s the content, or maybe it’s the stunning photography. Whatever your reason, it’s likely that typography has in some way influenced your opinion.
Words can harness the artistic power of thought, and typography provides the visual component to this art. Typography is the process of displaying and setting different typefaces, and it plays an important role in WordPress website design.
Font selection and style can create personality, change connotation, and set the mood for your website or blog. It can even cultivate brand recognition, by becoming one of your company’s defining attributes—think Coca Cola, Google, and Facebook. A font can be as vocal as the words themselves.
Selecting a typography for your website can be a mystifying and (potentially) complex process. With a seemingly endless amount of different fonts to choose from, you must maintain a degree of objectivity, patience, and intent.
So before you jump into selecting a typography for your WordPress site, here are some things to keep in mind to help make it a fun and easy process.
Serif and Sans Serif
Distinguishing whether you should select a Serif or Sans Serif typeface can be difficult, but it’s the most fundamental (and arguably most important) part of selecting a typography for your website.
First, you should understand the difference between Serif and Sans Serif.
Quite simply, Serif typefaces can be defined by the small lines tailing from the text. Conversely, Sans Serif literally means without Serif (or without tailing lines). Both can be very useful, but for different uses.
The signature tailing lines make Serif fonts very distinctive, creating a horizontal guide for reading. While their use is advisable for text that requires increased readability—their need for high resolution make this viable for printed text only. However, Serif fonts can be considered for online use when the size is larger. So, if you’re deciding on a header, title, and more—Serif fonts might be the right fit for you.
If you’re dead set on a Serif font for the main content on your blog or website, just make sure that the style fits the message. Serif fonts create a more traditional, book-like vibe. It’s likely that if you’re flipping through a novel or a magazine that the main content will be written in a Serif typeface. Among the most popular Serif fonts are Times New Romans, Adobe Garamond, Rockwell, and Bodoni.
This type of font appears modern and sleek—and it’s the most common font type used across the internet. It’s the simplistic forms of Sans Serif fonts that make them easily identifiable ( and preferable) on the screen.
Consider this: Printed text typically has a resolution of at least 1,000 dots per inch; whereas, computers only offer around 100 per inch—with even the most advanced displays only reaching around 300 dots per inch. This is why the distinctive Serif fonts are better for printed text, while the straight-shaped Sans Serif fonts are preferable online.
Differentiating where to use Serif v. Sans Serif can be as easily understood by this simple rule: Use Serif for printed work and Sans Serif for online work.
Alternatively, it can be more complex and vary depending on the tone, style, and intent of your website (Maybe you like the look of Serif fonts and don’t care if they’re difficult to read).
Degrees of Readability
Readability is probably the most important element to keep in mind when selecting a typography.
You should select a font based on the function of the words. If the ability to quickly read and understand content is essential for your website, then you should consider a font with increased legibility. Alternatively, if the text is merely decorative then a more elaborate font may be appropriate—even if the legibility is poor.
This point may seem pretty basic but I assure you that it’s very important. Just imagine if The New York Times printed stories in Lucida Blackletter:
To ensure readability, you should also be mindful of the size and color used to “style” the font. If your font is yellow and your background is white, the visibility of your content will be compromised.
Setting the Mood
Typography can help set the tone for your entire website. For that reason, your selection should reflect the personality of your company. If the font isn’t a cultural fit, it could misrepresent your company, or worse—deter your audience.
For example, notice how the government website uses a simple and clean typography. Take note of the conservative colors and practical pairing of Serif and Sans Serif fonts.
Now, take a look at the headline for this online cupcake shop. The typography is fun—the color contrast and goofy font choice set a playful tone.
Now, imagine if you reverse the typography. It would be wildly inappropriate.
Typography can create continuity throughout a website. Conversely, inconsistent use of it can make your website look unprofessional or disorganized.
When choosing a typography for your website, you should keep in mind that each font is dynamic. A single font contains a range of weights, tracking, kerning, colors, sizes, and scaling—which (when used appropriately) can create the perfect balance of contrast and continuity.
Helvetica Neue and Garamond
Alternatively, pairing fonts can also result in a professional and aesthetically pleasing website. But beware—using more than two fonts can appear overwhelming or chaotic.
In typography, maintaining stability in your stylistic choices is fundamental. So if you choose one (or two) fonts, don’t consistently change them—use them to compliment each other. Use them to establish a style and voice for your website.
This goes for font colors as well. Be consistent in their use and don’t overwhelm readers by using too many different colors. Instead, stick with one or two and use them consistently.
Selecting a typography that adequately reflects the sentiment of your company, while maintaining a professional and appropriate demeanor may seem difficult. But once you determine the characteristics you’re looking for (fonttype, readability, tone, and continuity) the selection process can actually become quite fun.
The impact typography has on a website is undeniable. Next time you visit a website, pay close attention to how it impacts your opinion about the company!
What’s the best example of classy typography that you’ve seen lately?
Marie Dodson is an editorial assistant at Torque. She graduated from Cornell University with a degree in Biology and Society. She enjoys wine, good books, and travel.