Web Typography Best Practices and Style Guide Tutorial

Web designers often use hit and trial methods to get beautiful typography for their websites. Understanding typography and its techniques will help you to build your website faster and make it look more professional. I this post I will am writing all about creating beautiful and readable typography.

What is Typography?

Understanding the meaning of typography is very important:

Typography is the art and technique of arranging letters to make the language more readable, beautiful and reflect the content. The arrangement of letters involves the selection of typefaces, point size, line length, line spacing and adjusting the spaces between groups of letters.

A typeface(or font family) is a group of letters(or fonts) which share the common design features. Each font has its weight, style and size.

Classification of Typefaces

Typefaces are divided into mainly three types: Serif, Sans-serif and Script. Each of this kind is further classified.

Serif
In serif typeface a small line is attached to the end of the letter. The stroke of the letter is made up of think and thin lines.

Georgia, Times New Roman etc are examples of serif typefaces.

Humanist Serif
In humanist serif the contrast(or difference) between the think and thin line is minimal.

This typeface is suitable for journalism and historical websites. Adobe Jenson, Arno, Berkeley Old Style etc are examples of humanist serif.

Transitional Serif
In transitional serif the stroke is sharper and the contrast between the think and thin lines is bit more than humanist serif.

This typeface is suitable for real-state websites. Borgia Pro, Times New Roman etc are example of transitional serif.

Modern Serif
In modern serif the contrast between the think and thin lines is very high.

This typeface is suitable for arts and culture website. Abril Fatface is a example modern serif.

Slab Serif
In slab serif there is no contrast between the think and thin lines.

This typeface is suitable for marketing and promotional websites. Arvo, Clarendon, Rockwell , Courier etc are example of slab serif.

Sans-Serif
In sans-serif typeface there is no small line attached to the end of the letter. The stroke of the letter is made up of think and thin lines.

Arial, Verdana etc are examples of sans-serif.

Sans-Serif Humanist
In humanist sans-serif the contrast between the think and thin line is minimal.

This typeface is suitable for education and goverment sites. Alegreya, Verdana etc is an example of humanist sans-serif.

Sans-Serif Transitional
In transitional sans-serif the contrast between the think and thin line is higher.

This typeface is suitable for technology and transportation websites. Akzidenz Grotesk, Franklin Gothic etc are examples of sans-serif transitional.

Sans-Serif Geometric
In geometric sans-serif there is no contrast between the think and thin lines. geometric shapes form the backbone of letters.

This typeface is suitable for science and architecture websites. Kabel, Nobel etc are examples of sans-serif geometric.

Script
Script fonts mimic handwriting and calligraphy. They are difficult to read.

Selecting Typeface

Select typeface that is more readable and reflects the content of your website. Selecting a single typeface for your website is enough, use it it different areas of your website by changing its size, weight and color.

If you want to use different typefaces in your website then keep these points in mind:

1. Don’t use typeface of same style(humanist, transitional etc) nearer to each other. For example: Don’t make the heading and content which are attached together to belong to same style.
2. Don’t use fonts of same class(serif or sens-serif) nearer to each other.

Remember the simple trick, keep same typeface or change a lot.

These mentioned points will make the typography look awesome.

Font Size

Different places of our website has different font sizes. Larger fonts are catched by our eyes before the smaller ones, therefore heading are larger then content font size.

Web designers first decide the font size of the page content. and then set font sizes of other components relative to that. Usually font size of page content is 16px, but its not compulsory to follow this measurement.

The font-size also depends on the viewport size to make the text more readable in different sized devices. Check out my article on responsive typography.

Headline(h1 tag) font size is around 200%-300% of the body content font size. h2 font size is 150% of the page content font size. Similarly you can decide the font size of other components according to the design and look of the website.

Text formatting tags reflect the same size as the content.

Line Height

Line height is the amount of space between the lines of text. Line height should be 150% of the font size of the text.

Italic and Bold Weights

Weights can be used to emphasize the importance of the text and also can be used for designing. Therefore headings are usually made bold to emphasize their importance. Bold and italic text are read by users before anything else, so make sure they reflect the importance of the text.

Conclusion

I covered all techniques I use to make typography of my website look professional and awesome. I will be adding more points in future to update this article. Thanks for reading.