By Jeff Kline

Blog

6 Typography Tips: Improving the Look of Your Web Text

Thursday, April 4, 2013

typography of different brandsWriters and designers both deal with website text, but they have two very different perspectives.

Writers use text to put their stories into words and communicate a message to readers.

Designers also view text as a way to convey a message – not by what the text says, but by how the text looks.

WHAT IS TYPOGRAPHY?

Typography refers to the design of your text – the typeface, font size and color of your text, and how it is laid out within your web design.

This post includes six tips for improving the look of your web text. For the first three steps, you’ll probably need to work with your web developer, but the last three can be done on your own if you’re using a content management system.

6 TYPOGRAPHY TIPS TO IMPROVE THE LOOK OF YOUR WEB TEXT

***Work with your web developer to make sure the following typography design components are applied to your website’s CSS.***

1) Choosing Fonts

A typeface can make or break your web design. Different typefaces (fonts) convey different messages and emotions. They key is to find a couple of fonts - one for body text and one for headlines - that convey your organization’s personality and are easy for visitors to read.

Typefaces fall into two categories:

  • Sans serif fonts are simplistic and easy on the eyes, so they are a popular choice for body text. Some of the top sans serif fonts in 2013 are Myriad Pro, Futura and Lato. 
  • Serif fonts can also be used for body copy – just be sure to use a simplistic serif font like Adobe Garamond Pro or Adelle.

serif and sans serif typefaces

Because headline text is larger, you can choose a more complex typeface (although that doesn’t necessarily mean you always should – remember, it’s all about the message you want to send to your visitors). Check out WebDesignFact.com’s article on 20 Fresh and Free Professional Fonts for Headline.

When pairing body text with headline text, be sure the fonts are complementary to one another. Visit my past post on typeface combinations for a refresher.

2) Font Size

Font size should be consistent across your website. All body text should be the same on every page – the common size is between 12 and 14 pixels. 

Each level of headline text (main headline, sub headline, etc.) should also be consistent on each page. 

HTML heading sizes

3) Font Color

For the most part, text should be a neutral shade – usually black or dark gray. If you do use brighter font colors, use them sparingly, and only to draw attention to headlines or calls to action.

Make sure the text on your website contrasts with its background. If your website has a light colored background, your text should be dark.

The Latino Student Fund makes good use of neutral, contrast colors for body text and image captions. The color red is used only on clickable text.

 Latino Student Fund website

***You can implement these next three tips on your own! As you are inputting website text through your content management system, these are some things to keep in mind.***

4) Alignment

Alignment refers to where in a text box your lines of text begin. Text that is left aligned is easiest to read – which makes sense, since we read left to right.

Large blocks of text should always be left aligned for a professional appearance and optimum readability. The only time you should use centered or right alignment is with very large headline text. Full justification is never appropriate for the Web.

text alignment examples

5) Formatting Text

Visitors to your website will often scan a page rather than read it word-for-word. Use the right formatting options to optimize your web text for scanning:

  • Bold a specific word or phrase to help it stand out from surrounding text. 
  • Bullets are used to present a list of key points and give the reader a break from long paragraphs. 
  • Italicizing emphasizes text in a more subtle way. Italicized text is more difficult to read, so it forces the reader to slow down. From a design standpoint, italicizing helps distinguish a block of text from your “main” text, making it perfect for side notes – things like image captions and citations.
  • Underlining should be used sparingly within web text. Underlining reduces whitespace between rows of text, which impairs readability.

6) Fit and Finish

After you input text into your WYSIWYG editor and click the Preview button to see how your content looks, pay attention to how your text fits. Does your headline fit snugly on a single line, or does the last word drop down to a new line? Is there a ton of whitespace left below your body text? Without compromising the value and meaning of your text, make sure it fits snugly within your website design. 

before and after blog headline

***

Text on a website has dual responsibilities - to tell your organization's story with words AND to evoke the right emotion through typographic design. It’s important that writer and designer work together and both understand the ultimate message that must be communicated.

UP NEXT: WEB DESIGN WRAP-UP

Come back next week for the final blog post on web design for nonprofits, where we’ll explore the relationship between web design and content writing, and determine once and for all if one is greater than the other.

 

Comments

comments powered by Disqus

Need Support?

Submit a Ticket
Back to top
Ready to Get Started? Contact Us for Pricing