HOW TO : Make Your Web Typography Better

Typography is the heart of design. It makes your website look tremendously better, be it graphic typography or type typography all can make the looks better.

Visitors don’t care about the colors, images and sounds, there main focus is always on text. How does it look, and does it solve there purpose by reading what they are looking for?

But how to make your web typography better? We are here to discuss some of the key points which you should keep in mind before setting up your website typography. To make it more interesting we have used few images to elaborate further.

1. The paragraph should be short and sweet : Its always advisable to write short sentences or paragraphs. Visitors tend to get bored very quickly if the lines are too long.

2. Use colors that match and visible with your light or bright backgrounds : The easiest fix for this situation is to make sure that the color of your type is very different from that of your background. Black and white work so well because they are as drastically different as you can get, but there are some color combos that work well.

Combination’s like Dark blue on light Pink, Light blue on Deep Blue, Black and Green etc work very well with each other

3. Fancy Heading, Simple Content : Make your headings attractive or fancy but keep the text in content simpler. Fonts like Arial, Helvetica, or Times Roman works well with content. Keep the headings larger and of different size and colors.

4. Use Appropriate Font Size to keep it more attractive : By making the Font Sizes different with suitable scaling techniques the readability improves.

5. Use White Space : With white space it means wide-space to breath. It doesn’t matter if its white or black. But the room should be having enough space, so it should not look cluttered.

6. Text Decoration : Do not underline text that is not a link. It creates confusion. Although we can make the link colors different, but it makes the visitor wonder if the underline text is linked to some place or not.

Bold and italics can be used in different ways to create a more visually appealing content.

7. Proper Typography with Grids : With Grids, Typography can be rhythmic, it shows coherence and is often used by designers to better anticipate where information should be placed. The best example is the blueprint CSS framework example page.

8. Use Text as User Interface : Word choices in interface is extremely important and it can set the tone. The representation of words, unstyled letterforms gives no indication.

Finally, typography is a powerful medium and it can interact with user very effectively. The content can be enhanced making it more vibrant and elegant.

Grids, vertical rhythms gives us a powerful framework for creative majestic layouts in which typography can breathe and serve its purpose. I hope you have liked the post and will provide your comments below and provide us more valuable insight about typography.

Don’t forget to Subscribe to our RSS-feed subscribe to our RSS-feed and Follow us on Twitter follow us on Twitter for recent updates.

This entry was posted in Design and tagged . Bookmark the permalink.

17 Responses to HOW TO : Make Your Web Typography Better

  1. Claudia says:

    Great article! Thanks for the tips!

  2. Pingback: HOW TO : Make Your Web Typography Better

  3. Pingback: HOW TO : Make Your Web Typography Better » Web Design

  4. Pingback: HOW TO : Make Your Web Typography Better « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

  5. Pingback: === popurls.com === popular today

  6. Pingback: HOW TO : Make Your Web Typography Better : Popular Links : eConsultant

  7. Pingback: HOW TO : Make Your Web Typography Better | The New Drop

  8. Blogartz says:

    Very nice article! Thanks for sharing some good article.

  9. aziq says:

    Nice post.Great typography+minimalist design=power.

  10. Fuad says:

    great article thanks, typography is important since less people pay attention for it

  11. Pingback: HOW TO : Make Your Web Typography Better : Navigator Mobile

  12. Pingback: Typography « Marvelous Things

  13. Pingback: CSS Typography And How To Use It « Gabrielle's Words

  14. Subhamoy Ray says:

    It,s awesome article. very thankful to you.

  15. nice article, like the part where you explain the pixel size for headlines -

  16. nice article, like the part where you specify the pixel sizes

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>