ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu

What is Typography And How To Select Best Font?

What is Typography And How To Select Best Font?

What is Typography?

Typography the art and a technique of printing with movable type. The composition of printed material from movable type. We can also say this is the arrangement and appearance of printed matter.

Everyone knows about basic of typography, but one need to take care of lots of factor while designing a website or wordpress theme. People often forget about web safe fonts, they haven’t idea which font is supported by all browsers.

Typography is not just about selecting a font, or even distinguishing one typeface from another.

Typography also consists of:

  1. Selecting a Web safe font.
  2. Its Color/contrast.
  3. Its Size.
  4. White Spacing.
  5. Its Line height/Latter Spacing.

Today, I want to take time to analyze how to select correct text typography design in different cases. This tutorial will help at the moment of selecting a text type. In any case, it depends on what do you want to convey with this type, because many times legibility is as important as the character of the type.

How to Select a Font?

Most important factor in Website typography is font. We should always try to select web safe fonts. Web safe fonts means that they are generic fonts, that work through most web browsers and all operating systems.

10 web safe fonts are: -

These Lists are based on popularity.

  1. Font-Family: “Georgia”, serif;
  2. Font-Family: “Arial”, Helvetica, sans-serif;
  3. Font-Family: “Courier New”, Courier, monospace;
  4. Font-Family: “Trebuchet MS”, Helvetica, sans-serif;
  5. Font-Family: “Lucida Console”, Monaco, monospace;
  6. Font-Family: “Verdana”, Geneva, sans-serif;
  7. Font-Family: “Times New Roman”, Times, serif;
  8. Font-Family: “Lucida Sans Unicode”, Lucida Grande, sans-serif;
  9. Font-Family: “Tahoma”, Geneva, sans-serif;
  10. Font-Family: “Impact”, Charcoal, sans-serif;

410201045023PM thumb

Its Color/contrast: –

The foreground color should be comparable with the background color, It’s easy to read could not stress on eyes.

A bad Example of this:

badtypo thumb

Why this one is looking not more readable?

Reasons:

  1. Due to his font-family
  2. Due to his text color

A Good Example of this:

GoodExample thumb Reasons You can find in the given picture example:

GoodReasExample thumb

Its Size: –

It’s a major factor while designing the page, Size would be constraint for all pages. We have to set a different sizes for different tags.

Bad Example:

SizeofP thumb Reason:

Its good for bigger screen but what abut smaller screen.size should be for all resolutions

Possible and units of measurements are:

  1. em
  2. percentage (%)
  3. pixels (px).

Always try to use one of them.

Its White Spaces: –

White spaces plays major role in the typography of a web site, for the good readability point of view if there is needed give some white spaces.

Its Line height/Latter Spacing: -

While designing if we consider line height in our mind we can offer more readable text to the user.

<Credit>

Other Web Resources Related to Typography:

  1. Typography Sizes
  2. Browser Safe fonts
  3. 15 excellent design to web typography
  4. Font Tester
  5. Type Tester

I hope you enjoyed this tutorials  at typography in web design.

I will love to know, do you take care of typography on your blog? Do you take care of fonts, white spaces and other parameters which offers readable content to your readers?

  • Author Bio

  • Latest Post

Article by saorabh

Saorabh has written 3 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.


{ 7 comments… add one }

  • SmashinGeeks

    I think Georgia Font is also Web Safe Font. What do you think ?

    Reply
    • saorabh

      Yup.. Georgia is a web safe font having 97% support of web safe…:-)

      Reply
  • Shivendu Madhava

    Typography is the most valuable part of web design and it always matters.

    Reply
    • NpXp

      For the theme designers, yes :p

      Reply
    • saorabh

      Yup..I agree with you..Thanks for your comment..-:)

      Reply
  • Avinash Singh

    nice work buddy

    Reply
    • saorabh

      Thanks Avinash.. :-)

      Reply

Leave a Comment