Navigation

How to make your type more appealing on the web

Typography, Web Design | Feb 2, 2012

It’s not uncommon for a designer in today’s world to pay little attention to how type is laid out, especially with the ever-so-convenient default settings of heading tags and web safe fonts found universally on the web.

If we as interactive designers we’re able to take a little more time when it came to typography, than the results would show a unique, well thought of design as oppose to a “run of the mill” creation.

There is a good chance that the majority of designers and designs you admire showcase good examples of typography.

I’ll show you a few steps I take in tweaking set type to be more appealing than those default scenarios of 24px H1 tags along with 13px set in Times New Roman.

 

Don’t settle for default settings, everyone is doing it.

Here we have the ever- so- common look of a heading along with a chunk of body copy to follow. This doesn’t exactly pull you in or set itself apart from all the other samples just like it, right? So to make the text sample more visually appealing, first, we’re going to make a few changes with our font selection.

 

Choose a font that will have more visual weight with your headline

Although font selection is not exactly “typography,” it is in fact a quintessential component to help the type on a page distinguish itself from other elements. With the onset of @font-face, massive amounts of choices are available to designers anywhere.

Here I’ve used an Extra Condensed Gothic Style font that can easily be found on a free font site like FontSquirrel.com. If we stop and think about it, the name “Condensed” should mean something, because it is in fact more dense than it’s normal book style family member, which is exactly what we want out of a headline:, something that pulls the user in and truly sets itself apart from the body copy. It certainly succeeds in grabbing your attention better than the original but there are a few things we could do to further improve the text.

 

Make it more appealing with two lines of CSS

The immediate change is in the letters; they’re all capitalized now but they also now have negative kerning between each of the letters (a technique carried over from newspaper design).

Both of these characteristics can easily be accomplished through CSS, {text-transform:uppercase; and letter-spacing:-Xpx;}. By making these two lines worth of coding changes, it results in a major improvement in visual weight, especially over the original .

 

Work out any last little tweaks

In the next step, the font used in the body paragraph has in fact changed to a cleaner sans-serif, which better compliments the headline text. We’re getting closer to a much more visually appealing design, but there are a few changes we can make to clean it up even more.

As the green indicators show, there are unequal margins and what typographers like to call an “orphan.” Which is a single word that falls to the last line of the paragraph. It creates a very unequal weight visually as compared to the rest of the text, and this issue can be solved easily by rewording the text slightly.

When it comes to margins, there is no rule that all must be equal. However, if you are starting a young web design career, it’s good practice to have equal margins throughout until you experience and learn techniques that allow you to extend beyond the guidelines of typesetting and still accomplish your goal visually.

After creating a more balanced visual canvas by removing the orphan and adjusting the margins you can see the end result, a well set type sample that’s comfortable where it lays.


Dallas is an Interactive Designer at 352 Media Group, a digital marketing and web design company.

What are your best tips for web typography? Let us know in the comments!

Share this post
Comments (no login required)
  • http://twitter.com/heydonworks Heydon Pickering

    A great little demo. Not considered negative kerning before.

  • Anonymous

    Nice and basic, but quite relevant to modern web design. Typography has been too long ignored on the web, and I’m really excited to see it come into the mainstream.

  • Allen Bayless

    Yes typography is becoming a major player in web design layouts now a days since most are able to use various font kits for a website. Good article.

  • http://twitter.com/sikeane Simon Keane

    some very good tips that are often overlooked. 

  • http://hallidaywebsites.com/ Charles Halliday

    Excellent tips. I’m a big fan of the sans-serif for reading. Never tried “letter-spacing:-Xpx;” but will on my next project. Thanks!

  • Anonymous

    It’s so refreshing to find such great, informative articles. Excellent tips. Thanks for the share. :)

  • http://pulse.yahoo.com/_GKUIHOJ66TO5GOLOLADRADQP7Q duncan

    You could re-title this article “How to make perfectly elegant type look absolutely god awful and clunky on the web”

  • http://www.aspiredesigns.com.sg/ website design firm

    I like your design technique and tips, thanks, It will help me to build my own

  • http://www.aspiredesigns.com.sg/ website design firm

    what the hell is doing here

  • Juan
  • http://niallm1.com/ Niall

    I didn’t know CSS accepts negative values either!

  • http://webhosting.gen.nz/ Web Hosting

    Proper selection and execution of typography does contribute to the feel and beauty of a website design. Thanks! :)

  • http://aigendigitalmarketing.com Abel Pardo

    It’s incredible how with three simple steps a post can improve so much. Thank you for share this amazing post for people that really don’t understood the power of typo.

  • http://eelsecreto.com/category/ley-de-atraccion/ Ley de Atracción

    thanks a lot for this great Types Expamples..
    Vey vey Nic Work.. All the Best !!!!

  • http://waihekeaccommodation.org.nz/ Waiheke Accommodation

    Not so many web designer pay attention to fonts, types , and spacing but these are really important aspects of a good design. thanks for this nice and helpful post! 

  • Anonymous

    Thanks for the share! Really nice and very informative post!