web
analytics
≡ Menu

4 Ways to Dress your Web Content for Success

Typography: the art of controlling the written form. While it is given considerable respect in the world of print, typography on the web is often given little consideration, with content shamelessly copied-and-pasted over dummy text with only the most basic formatting. Why is this a problem? Ask any web conversion specialist, and you will lsearn that compelling copy is a crucial ingredient to any profitable website;  according to Marketing Experiments, good sales copy can easily increase a webpage’s conversion rate by 200%. Copy that effective almost always comes at a premium, and you are doing your client disservice if you are taking platinum copy and dressing it in cheap copper formatting. So, without further ado, here are four essential ways to keep your web typography looking classy:

Break the font barrier

“Web safe fonts” have officially joined the ranks of “web safe colors” in the army of outdated web design rules. While you shouldn’t automatically rule out time-honored staples like Trebuchet and Verdana in your web font arsenal, an array of new possibilities are now possible through resources like Google Webfonts. This site provides a plethora of free quality fonts that can be embedded right in your website. Just choose any font from their collection and they provide code and instructions for how to integrate it into your CSS. The only catch is that these fonts could potentially impact your page load time. To avoid this, Google recommends against using too many font styles at once (it’s also a typography rule of thumb not to use more than 2-3 different fonts in a design), plus you can use the handy Page Load meter that shows the impact each font may have on load time. Remember, keep body text simple and legible, and save the fancy fonts for headlines.

Use color to your advantage

As we discussed earlier, web safe fonts are a thing of the past; so use color flexibility to your advantage! Most users begin by skimming over the web page, and if nothing catches their attention, they quickly move on. Using pops of color in headlines can tastefully draw a user’s attention to your various points. When your main points are easy to find, odds are better that they will stop to read your content. Just using color isn’t enough, however—the color should tie in to the rest of your theme to give your page a cohesive look. Choose a rich color that will contrast against the background while remaining legible for users that may have different monitor calibrations (yellow-on-white is a big offender). Finally, always keep your body text a simple, neutral color; the goal here isn’t to draw attention, but to be easy to read.

Leading: it’s not just for print anymore!

In the print world, one of the tell-tale signs of a rookie designer is the use of automatic leading. Typically, automatic leading puts the lines of text too close together for body text, while setting the body text too far from the headline after a double return. Why is leading important, you ask? Body text with increased leading will appear more open, inviting, and legible, while headers will seem more unified with their corresponding body text when there isn’t a huge gap between them.  With CSS, designers on the web don’t have any excuses for using rookie leading. Use the line-height property to add space between lines of body text, and utilize the ever-useful top and bottom margin properties to adjust the space between header and text.  With the web’s impatient user base, it is incredibly important to hold attention by making the text as legible as possible.

dress web content

Center sparingly

If you even consider centering significant amounts of text, let me remind you of the “A” from the Design 101 principles of CRAP: Contrast, Repetition, and what? Alignment. The eye automatically searches for straight lines in design, and good design has elements that are aligned with one another. Since it is nearly impossible to align anything with the jagged right and left edges of centered text, keep the text-align:center property in your toolbox for limited use—think headers and special graphic elements only.

Chris Turberville-TullyAuthor Bio:- Chris Turberville-Tully is a marketing strategist for Inspiration Inc, a UK-based digital marketing agency. Inspiration Inc’s services include web design, SEO, copywriting, PPC Birmingham, social media and email marketing. Follow Inspiration Inc at http://www.facebook.com/InspirationIncSEO

{ 4 comments… add one }
  • Ileane

    August 8, 2011, 9:30 pm

    I love the tip about “leading” not many folks know what that means anymore! One of the WordPress themes I used needed more leading after a H1 heading. I asked the theme developer to fix the leading and he had no idea what I was talking about.
    Needless to say, I no longer use that theme…

    Great post Chris!

    Reply
    • Chris

      August 18, 2011, 10:12 pm

      Thanks for the feedback! Sounds like you made a good decision. 🙂

      Reply
  • Down Or Just Me

    August 13, 2011, 3:39 am

    Interesting – I’m always looking for the newest trends in web design, so thanks for these tips! Very helpful.

    ~Laurie

    Reply
  • Chris

    August 18, 2011, 10:13 pm

    Laurie, thanks for stopping by and reading my post. I’m glad it was helpful to you!

    Reply

Leave a Comment