typography

A Complete Web Typography Guide

Share on Facebook0Share on LinkedIn0Tweet about this on Twitter0Share on TumblrShare on Google+0Share on StumbleUpon0

Most of the information you find on the internet are in the written form, and even after the popularity of the visual content (videos, images), textual content has its own significance. I am sure it will never lose its importance regardless of how technology will advance in the future.

According to ia.net, 95% of the total information on the internet is in the text form. Therefore, web designers must know the art to arranging and styling the written content to make them more readable and appealing. These include selecting font family, font size, font colour, line spacing, letter spacing etc. Technically this art of styling and arranging the written text is called Typography.

6 Rules for great typography

1. Use real Content while working on the web typography

The very first thing you should do is to dump the Lorel Ipsum [Dummy Text] text while working on the typography design. The reason I am keeping this rule because there is a huge difference in the dummy text and real content.

You may not experience the actual look of the content when you are having dummy text thus using real content should be preferred so that you can see what will display actually to the audience.

So you should ask your client to provide actual content before proceeding with typography design.

2. Take Care of Kerning

Kerning is the space between the pair of letters. Many newbie designers don’t care of kerning so much, but it’s an important thing to consider specifically in case of writing Headings.

All the letters must have a uniform space with their consecutive letters.

kerning

  • Image credit: thedesigncubicle

When you use web fonts like Google fonts then the kerning issue gets more complicated but they are easy to fix. In the body copy where comparatively smaller font size is used, kerning issue doesn’t get visible but when you write bigger text like headings or sub-headings, kerning issue gets prominently visible and it spoils the whole aesthetic of the content.

3. Don’t Mix so many Typefaces and Weights

so many fonts

Never use so many typefaces and weights in a website copy. It is very distracting and the audience won’t like your site if you use so many styles. You should restrict to maximum 2 typefaces for a website project. When it comes to weight, don’t overdo it. Do it when it is required. Making the text bolder or italic come into use when you have to highlight something so that it could grab reader’s attention. However, use it if it’s really very important.

Therefore, always use one typeface for Page Titles and other for the body copy. It makes the content look professional and uniform.

4. Choosing the Typefaces

While selecting typefaces for your project, I would advise to use san serif for larger texts such as headlines or page titles, and use serif for the smaller text usually the body copy which is normally longer.

Serifs are well known to make the reading lengthy text material and thus they should be used for the text blocks which are lengthy.

I am taking an example of alistapart.com, in which you may notice that they use San Serif for headlines (bigger text) and serif for the content part which is comparatively lengthy and small.

serif vs san serif

This is the perfect balance of typefaces and not just me, but experts also suggest the use of Serifs and San Serifs in this way.

To make you understand what actually the Serif and San Serif (without Serif) are. Please look at the below screenshot:

serif and san serif explained

– Image credit: gngcreative

5. Font Size Matters a lot

Font size matters a lot, you have to make sure that the font of the headings and body copy are of standard size. They should not either too big or too small. However, headings should be bigger as compared to body copy so that they can look distinguished.

Though bigger fonts are easier to read, smaller fonts look more professional. I recommend using font size in the range of 12-15px for body copy, as this size range is neither too big nor too small.

Sometimes different fonts may differ even you set same size for them so you should make sure that the font you are using looks professional at the specified size.

6. Avoid Using Center Alignment for Text

To be honest, I don’t like centered aligned text when it comes to lengthy content because it becomes hard to read the copy.

alignment

Look at the above screenshot, which one looks better to read? Of course the one which is left aligned. Therefore, get rid of center aligned text and use left alignment for the body copy. Even if you have a requirement of using center aligned, then try not to overdo it.

These are the 6 rules for great web typography that you should not ignore if you are working on a professional project.

10 Widely used fonts on the web

1. Open Sans

open sans font - Web Typography

2. Josefin Slab

Josefin Slab font - Web Typography

3. Arvo

Arvo font - Web Typography

4. Lato

Lato font - Web Typography

5. Vollkorn

vollkorn font - Web Typography

6. Abril fatface

Abril fatface font - Web Typography

7. Ubuntu

ubuntu font - Web Typography

8. PT Sans

PT sans font - Web Typography

9. Droid Sans

Droid sans font - Web Typography

10. Old Standard TT

Old Standard TT font - Web Typography

5 top web typography resources

As we are talking about Typography, I would like to share few of great resources for our lovely readers so that they can take reference from them whenever required. Below is the list:

  1. typedia.com
  2. ilovetypography.com
  3. welovetypography.com
  4. typographica.org
  5. blog.8faces.com

5 inspirations for great typography

When it comes to design, every designer needs inspiration while working on various projects. Therefore, I have come up with 5 inspirations for great and beautiful typography.

1. Life Type

Life_type_by_Shinybinary

– Source: topdesignersgallery.com

2. A Tribute to Yulia Brodskaya

A-Tribute-to-Yulia-Brodskaya_inspiration1

– Source: behance.net

 

3. The person you love is 72.8% water

the-person-you-love-is-728-water

– Source: typographyserved.com

 

4. Hip hop live by Pooshtioo

hip_hop_live_by_pooshtioo

– Source: pooshtioo.deviantart.com

5. I’ve Got the Magic

Ive-got-the-magic

– Source: behance.net

Final Words

Typography is one of the most important parts of the web design. As textual content is the prominent part of almost every web page, it should be arranged and styled in a better way to make it look beautiful and professional.

I am sure this guide will help you get started with Typography. Share your views in comments. If you have any question, then also let us know, we will try to answer them as well.

That’s all for now!

Featured image credit: digitaltutors.com

Summary
Article Name
A Complete Web Typography Guide
Author
Description
The art of styling and arranging textual information to make them look readable, is called Typography. When it is done for web, its called Web Typography.
Share on Facebook0Share on LinkedIn0Tweet about this on Twitter0Share on TumblrShare on Google+0Share on StumbleUpon0

Atish Ranjan

Atish Ranjan is a blogger, SEO, writer, and an Internet Marketer. He is one of the persons behind the blog Techtricksworld.com where he shares his knowledge and expertise.

  • http://www.pvariel.com Philip Verghese Ariel

    Hi Atish,

    What a great information!
    Though i am not a web designer i could pick up something from it.
    Atish you presented it well about Typography, though i know the word i never knew this much information connected with it LOL.
    Thanks Atish for presenting such a lot of information with lot of illustrations and tutos.
    Keep up the good work.
    I am book marking this to go thru in detail.
    Have a great day
    Best Regards
    ~ Phil

    • http://www.techtricksworld.com/ Atish Ranjan

      Hey Philip,

      Thank you so much for coming and reading my post. I am glad that you liked the post. Keep visiting.

  • http://www.DigitalGYD.com Swadhin Agrawal

    Hi Atish bro this was amazing. thanks for this amazing researched post :)

    • http://www.techtricksworld.com/ Atish Ranjan

      Glad you liked it, Swadhin. Keep visiting.

  • Nirmala Santhakumar

    Atish,

    I loved reading this post as the content which you’ve crafted here is new to me. I have just heard the word “Typography” before, but I got a nice chance to grab its in-depth details through your guest post.

    As you said, font size matters a lot to have a good readability. Thanks for advising to use the “San Serif” typeface and listing the popular fonts on the internet.

    I always admire your work on multiple fields (SEO, Writing and Web Developing) and getting inspiration to work with more focus. Keep doing your good job, have a productive day ahead.

    • http://www.techtricksworld.com/ Atish Ranjan

      Thanks for coming by Nirmala. I am glad that you have learned something new today. Keep visiting.

  • http://www.stupidtechlife.com/ Shivkumar

    Hi,

    Typography guide… it’s a worth reading. A web designer can easily come up with the decision to select font type and size for the web. Since STANDARD always stand out and it good practice to follow STANDARD.

    Thanks for this useful guide. Atish bhai :)

    >SK Lohar

    • http://www.techtricksworld.com/ Atish Ranjan

      Thanks for Coming by Shiv! I am glad you liked the post.

  • http://www.websiteandtechnology.com/ Moumita Ghosh

    Hi Atish,

    Nice post indeed. I never heard this term “Typography” before. But from your article, I have got ideas about it. Thanks for sharing such an wonderful article.

    Regards,

    Moumita Ghosh

    • http://www.techtricksworld.com/ Atish Ranjan

      Great to know that Moumita. I am sure you will learn many new things on this blog. Keep visiting!