Skip to Main Content

Why Typographic Design Elements Deserve Your Attention

Posted on 5.28.2014

:: By John Siebert, Tranquil Blue ::


The 21st century human is an information junkie. We consume information almost every minute of our waking hours. On the Internet, through newspapers, magazines, billboards, on television; the list is endless.

At least 90 percent of all information that we consume is in the form of words. And how do we access these words? Through typography.

Typography is the art of making words do their job of conveying information in the most efficient way possible. 

Typography consists of 5 basic elements:

1. Fonts or type used

2. Size, weight, color, variety of fonts

3. Layout of text – hierarchies and flow

4. Spacing of text 

5. Interaction between text and the images

For the sake of simplicity, I shall not delve into leading, kerning, counters and other such technicalities here. 

We spend hours of research and design time trying to perfect the layout of a Web page, the color of each button, the number of fields in a form or the navigation from one page to another in order to maximize conversions on our website. 

Typography is an integral part of design. Why then, do we not spend any time on understanding how typography affects a user? Do we realize the impact typography can have on website conversions? Do we even think there is a causal relationship between typography and conversions? 

Why Should You Care About Typography?

Typography is the nice suit that you wear to your job interview. You do not get hired based on how nice a suit you wore, but wearing a shabby un-ironed suit definitely makes a bad first impression and reduces your chances of landing that dream job. 

Going back to the earlier definition of ‘typography’, you’ll notice that the operative words here are, ‘convey information’ and ‘efficiently’. 

Like that nice suit of yours, good typography makes your site look attractive and the information on it easy to read and understand. It casts a good first impression and makes a user want to stay and read on. 

A user typically lands on your website to fulfill some need of theirs – to get information, to shop, to compare prices and so on. Users on a website typically view your page as a whole. We all do.

We scan for things that jump out at us first and then follow the visual hierarchy of text, images and white space to understand the information being conveyed. 

As a designer / marketer, your job is to make life easier for the user. 

Use good typography to help your user understand and agree with what your site is trying to convey. That is the first step to turning a visitor to your site into a paying customer. 

(Image Source: Quicksprout)

So how do we ensure that our typography helps in conversions? Let’s find out.

Practical Tips on Typography for Conversions

1. With Fonts, Variety is NOT the Spice of Life

Imagine a pretty girl wearing a bikini, Uggs, chunky gold jewelry, a trench coat and sunglasses all at the same time. Overkill, right?& That is what you do to your Web page when you pick a whole bunch of fonts to go on the same page. A Web page needs coherence in design. Pick two, at the most four different fonts for a page and stick to them. Consistency is key.

2. Make Sure It’s Easily Readable 

Bad typography forces users to put in extra effort just to read what you have to say. And who wants to put in more work than absolutely necessary, right? 

Readability of text on a Web page is affected by various factors:

a. Font type

The fonts you choose need to be legible and should not strain the eye while reading. A good option to enhance readability is to pick a font that has large counters (the areas of the letters that are entirely or partially enclosed). 

b. Font size

Studies show that 16 pixels is the optimum font size for Web copy. This may sound very large to you, but once you factor in the distance that we maintain between our eyes and the computer screen, you’ll realize that text in 16 pixels on the Web seems the same size as text in 11-12 pixels in print. 

This is because most people tend to sit about 20 to 23 inches away from their computer screens – a much larger distance than that between a printed page and your eyes. 

When your fonts are too small, users are forced to strain their eyes to read the text and eventually the frustration of squinting leads them to leave your page altogether. Keep you font size large enough to comfortably read on screens.

c. Spacing 

Letters that are crowded together look cluttered and illegible. Lines of text that are smashed together make reading difficult and eventually frustrating. 

On the other hand too much spacing seems like you don’t have much to say and are trying hard to fill up blank space.

A general thumb rule for line spacing is to keep it at 100-120 percent of your font size in case of print applications. In the case of digital applications, this number increases to 140-160 percent. 

d. Colors

The colors you choose for your fonts depends on the background of your Web page, the context of the message and the colors of other design elements like images that are located close to the text. 

Color theory that deals with the emotions that specific colors evoke in the user is another important reference in choosing font colors. Thomas Cannon gives some great insights into the fundamentals and applications of color theory in this article

The focus here should be on maximizing contrast to enable readability. Usually dark text against light backgrounds scores best on readability tests, especially in a Web scenario. 

3. Fonts Reflect Your Brand’s Personality. Choose Wisely.

Apple swears by ‘Myriad’ and its font family. Microsoft’s much appreciated Metro redesign made it switch its loyalties to the Segoe UI font family. 

Like it or not, your choice of fonts has a huge bearing on the personality that your brand reflects. A font like Baskerville or Georgia gives a page a very formal look, while Helvetica or Gill Sans is more casual. 

Choose fonts based on the message and the environment – formal, casual, playful whatever. The font you choose needs to complement the text, not overpower it.

Before you make a final decision on which font to go with and at what size and spacing check how your fonts will appear in real-time online using this cool tool.

4. Create a Clear Visual Hierarchy

This article has a clear large title in text that is larger than the rest of the copy, there are sections and subsections, bullet points and paragraphs – each of these perform a distinct function. 

Each element tells you the relative importance of the content and guides you from one part of the article to the next. For impatient readers among you, the bulleted list with bold headings is a great way to skim through the article and gather its gist. This is visual hierarchy. 

Visual hierarchy is the way a designer leads the user’s eye across a Web page according to the order of importance of the content. 

Various elements of typography contribute to creating strong visual hierarchies. 

A large text size with more weight than accompanying text automatically captures attention. Text that is in a different color or in an unusual position also draws the user’s eye toward it and establishes a sense of hierarchy among the different elements on the page. 

The visual hierarchies in the page below are extremely clear.

5. Let Your Content Guide Your Typography Choices 

Sometimes, designers just get lucky (or creative). The text on a Web page can sometimes lend itself to some really mind-blowing typography – something that might look totally out of place in any other piece of text can sometimes strike gold with the right copy. 

Here are a few examples.

(Image: Notice how the title fonts perfectly reflect the look of a creepy forest?)

(Image: The colors and typography together give a very ‘outer space’ look on this Web page.)

Read through the text and get creative with fonts based on the context and the content of the message. 

6. Let CSS Be Your Friend

Learn and master the intricacies of CSS to design effectively on Web 2.0. Proper application of CSS rules provides a consistent and professional look and feel across the site. It eliminates the chances of errors in sizing, font types, spacing and more. 

Use options like @font-face to inject freshness into your typography and use fonts that go beyond the built-in boring system fonts. Unfortunately, adding extra font files to your CSS add extra requests to your site and slow down page load time. When you opt to use a non-system font, make sure you really need it to prevent slowing things down unnecessarily. 

Good typography is like salt in a recipe. You don’t notice it when it’s doing its job, but when it is missing, everyone sits up and takes notice. Give typography the respect it deserves and ensure your dish is palatable, nay; enjoyable for the consumer. 

Further reading:

A more modern scale for Web typography 

10 popular Google Web fonts 

Pick the right font


Author Bio:

John Siebert is the President and CEO of Tranquil Blue – A Web Design Tampa Company that focuses on all kind of website design, mobile app development and search engine marketing.


 SUBSCRIBE FREE to Website Magazine - 12 Issues 


Website Magazine Logo

Leave Your Comment

Login to Comment

Become a Member

Not already a part of our community?
Sign up to participate in the discussion. It's free and quick.

Sign Up

 

Leave a comment
    Load more comments
    New code
  •    
      

    The Ultimate Guide to Personalization

    Kibo