By

Latest Web Design Techniques: Typographic Contrast!

When I was creating my first ever website, I ended up beating my head against the wall over the issues of typography. I had already gotten a killer theme from Gavick, but there were still fine-tuning questions to be made with regards to fonts. Should I use Verdana or Times News Roman as the font for my website? What size font should I be using?  You get the idea.

Web Design Techniques

I looked up several typography guidelines and then it hit me.  I decided to go with what my site visitors would be interested in.  I looked at sites I would love spending time on and came to the conclusion that creating a readable and interesting web page makes all the difference for the success of the website.

The statement that a “huge percentage of the Web is typography” is pretty accurate. We visit websites mostly for information and with the intention of reading. Millions of users come online looking for information each day. So, that makes “typography” the most important aspect of web design. You have to pay attention to this when designing your own business website.

You don’t need flash that slows down the loading of your website or loud graphics to make your site attractive, all you need to keep your website simple yet elegant, is good typography.  It’s one of the visual elements that lead the reader across the page based on the level of importance of the different text. The way the text connects with the relevant images and the headlines connect with the content, offers a pleasing visual punctuation to readers.

I may not be a web designer myself and don’t do that as a profession. However, as a webmaster and Internet marketer, I find web designing interesting and I often take several aspects of designing practices into consideration when working on my own websites.

Photo by Linhchilicious

There are very few websites who show an interest in ensuring that all typographic details are taken care of, as most web designers are indifferent.  It’s really a shame because when someone spends time writing useful content for their visitors, wonder why they don’t put in the extra effort of making it look good and pleasing to the eyes.

Techniques in Web Typography

There are several creative decisions one makes when designing a website, including the type of face to use, the mood that should be created by the type, and the tone it should have.

Apart from that, there are several web typography techniques which consist of rules and practices that are proven to work and have the capacity to take your type to the next level. It’s important to understand and treat “type” with the respect it deserves, and I’ll be the first to admit this is easier said than done. But with good understanding of type, it’s possible to work wonders with typography on the web.

Photo by arnoKath

These techniques can be implemented with ease and even beginners can use them and improve the quality of their text from the regular blog/website standard to something tidier and far more attractive.  I suggest you take this opportunity to make your web pages come to life.

Applying Contrast

Some color combinations just don’t read well, although they may look perfect on the clothes we wear. Text on Web is meant to be read; make sure that it forms enough contrast against the background to look interesting and readable. Contrast becomes important because not every piece of content on a web page has the same significance.  Creating contrast allows you to divert the readers’ attention to the more important messages as well as increase the visual appeal.

Photo by by arnoKath

Typographic contrast can use anything from the color, case, size, typeface, style, space and weight.  For example, you can create a contrast between headings and body text, by using sans-serif font for the headings and serif for the body or the other way round.

According to Robert Bringhurst, the famous typographer, typography exists to honor content. Are you honoring your content enough?

Good Size

Photo by arnoKath

Most web designers end up using small type. It can be quite annoying to a reader, even if the information is on the site is good.  Nobody has the patience to sit through reading something without enjoying it, they will move on to the next site.  So, never make the mistake of thinking that as long as the content is good, people will hang on, no matter what.  They just don’t!

Verdana 10pt.

Aren’t you finding it difficult to read this? You may not if you’re young, but surely older people would prefer it bigger, like the one next to this.Verdana 12pt.

Isn’t this more readable?  This size on your web pages allows all your readers to read your content easily.

Tiny font is a big NO. Don’t set the font on your web pages less than 10 or 12.  Depending on the amount of content you have, you can even make it bigger.

Forming a Hierarchy

Photo by arnoKath

Using different sizes of type on a page makes it more attractive to the eyes. Use a hierarchy of different type sizes as well as boxes to highlight important elements on the page. Even if your visitors just glance through the content, they will find the important info, which means you’re luring them to stay longer.

This is the Title

This is the sub-heading

This is the body textThis is the Title

This is the sub-heading

This is the body text

Which of the two looks catches the eye; for sure it’s the right side font that uses different sizes for different areas of the web page.  Here, we’ve just shown you the sizes as examples, but you can use different font styles too, mixing them to effect.

Leaving Enough Space

Don’t shy away from leaving blank spaces in your web pages. Leaving white space appropriately helps focus attention on the content. Don’t cramp your pages with content everywhere.  Give a good shape to blocks of text with white space. Increase the CSS line-height if you wish to, as usually it’s pretty close and not readable.  Make sure your content is in short bursts.

There has been a big change in recent years, of amazing web typography and with creativity and use of different techniques; many websites out there are differentiating themselves.

Get Some New Fonts

For years, people have used the common fonts that are also called “web safe” fonts; which include the popular ones like Arial, Helvetica and others.  The reason people tend to use them the most is because they are available on most systems for free.  Unfortunately, the list of web safe fonts available is limited, and if you’re creative and would like your pages to stand out, you can find techniques to circumvent this limitation and embed different fonts in the web pages.

Now when looking into ecommerce development, there are many additional factors that need to be considered, such as taxonomy, product images, descriptions, and the shopping cart layout.

That calls for an entirely new discussion. Meanwhile, you would do well to concentrate on the points we made here to make sure you create not just informative web pages but also ones that are attractive to the eye.

Tags: , , , , ,

Written by

Usha is currently a freelance writer and internet marketer. She has worked as a freelance writer for many years and has been an active internet marketer for six years. Having worked in the health-field for ten years in a senior management position, her interests are varied. She writes on a variety of topics, which include business, management, health, tech and a host of others. She is also the author of an e-book on internet marketing, which will be launched soon. Her future plans include publishing a non-fiction novel.

Discussion 1 Comment

  1. WordPress › Error

    There has been a critical error on this website.

    Learn more about troubleshooting WordPress.