The words on your website communicate a message, but how they’re laid out makes an impression on readers as well. Web designers often look for the flashiest new trends to differentiate their sites, but simple design principles can give your site an instant face lift. Typography has been the foundation of design since the printing press, and it remains the pillar of image for websites. The science of typography goes deeper than you could imagine. Line spacing, scaling, alignment and hierarchy blend together to create a unique typographical style.
If you’re still stuck with a textbook mindset toward typography, you’re missing out on the chance to set your website apart without sacrificing simplicity.
Diversity and Clarity
Unlike tangible publications, web pages have unlimited space to express a message, but doesn’t mean it’s okay to make visitors scroll down until their fingers hurt. However, it does open the door for creative typographic layouts. Your message is the most important part of your website, so readers shouldn’t need to strain to find it. App developer, Tapmates, puts typography to good use to inform visitors what it’s all about. “We handcraft apps,” it says in big blue letters against a white backdrop on Tapmates.com. It’s simple without being uninteresting. Above all, it’s clear. Scroll down and you’ll find pictures of Tapmates-designed apps. The landing page, however, is all text. More prominent sites are also catching on to the power of typography. Social platform Google+ uses a variety of fonts and accents to differentiate text. If you take a look at digital agency iAcquire’s G+ page, you’ll see bold fonts to create hierarchy, light gray fonts to denote less important information, and an overall consistent design.
Negative Space
The best examples of typography are usually mounted on large canvases of negative space, or space in between the focal points of a display. Canadian designer Bruce Mau works on a variety of platforms from billboards to books, but his work usually features a combination of interesting typography and negative space, according to his site, BruceMauDesigns.com. Many web designers seem eager to pack as much visual stimulation as they can on their websites, but the result is cluttered, unprofessional-looking pages.
Consider a quick test to determine if your page is too cluttered. Reload your website and close your eyes. When you open your eyes, identify what draws your attention immediately. If it’s not the focal point you desire visitors to see, you might want to clear some space and better prioritize your layout.
Terminology
Font and size are just the tip of the iceberg. A number of typographic intricacies offer complete control over the look of your text. Learn the terminology to brainstorm what might work for your website.
- Line spacing: Used to either condense a paragraph or spread it out, line spacing is self explanatory. It’s the amount of space in between a line of text. Word processors and content management systems come equipped with a stock line spacing, but your website doesn’t need to abide by conventional rules.
- Alignment: We read left to right, so it’s natural to revert to a classic alignment when we design websites. In terms of design, however, the Internet is related more closely to magazines than books. Visitors can handle, and in many cases expect, unusual alignments on websites.
- Hierarchy: Readers need to know the difference between headlines, body copy and buttons, so designers use hierarchy to make those distinctions. Whether it’s font, size, or color, a consistent hierarchy will make your website more palatable.
Inspiration
Websites are getting creative with the way they use typography. You don’t to look far for inspiration.
Blink
UK-based printing solutions provider Blink proves that color isn’t the only way to make your font stand out. Large block letters demand your focus off the bat, while a clean, sans-serif font navigates visitors around the site. Blink uses hierarchy to show what’s important and what’s not (the social feed).
Squarespace
It can be difficult to combine photos and text, but Website services firm Squarespace uses negative space to pull it off in spades. Three italicized words lead into the focal point, “SPACE.” It’s capitalized, emboldened and large, so it’s easy to see that Squarespace is trying to draw your attention to the second part of its name. This clean design looks professional and fits perfectly with the rustic picture.
GDC
The red background is somewhat alarming, but the Society of Graphic Designers of Canada pulls it off with large, clear font. The line height is slightly thicker than usual, giving readers more room to see the somewhat thin font. Best practice when you type on a colored background is to use black or white font. This website uses both to great effect.
