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;

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:

Why this one is looking not more readable?


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

A Good Example of this:

Reasons You can find in the given picture example:

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:


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.


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?

Subscribe on YouTube

Authored By
I'm a Wordpress Developer and Work for rtCamp...

11 thoughts on “What is Typography And How To Select Best Font?”

  1. But how can we add the fonts… Coudl you please share the link for that post. I am able to see paragraph and heading option by default

Leave a Comment

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

Scroll to Top
Share via
Copy link