QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Web Typography Best Practices and Style Guide Tutorial

Web Typography Best Practices and Style Guide Tutorial

typography-web-design

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.

typefaces-types

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.
define_serif
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.
348px-Garamond_sample.svg
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.
Times_New_Roman_sample.svg
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.
498px-Bodoni_sample.svg
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.
538px-Rockwell_sample.svg
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.
serif-san-serif
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.
Tahoma2.svg
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.
876px-FranklinGothic.svg
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.
904px-Futura.svg
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.
text

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.

Jul 9, 2014Narayan Prusty
Media Queries TutorialColor Selection Techniques For Websites
Comments: 0

    Leave a Reply Cancel reply

    To create code blocks or other preformatted text, indent by four spaces:

        This will be displayed in a monospaced font. The first four
        spaces will be stripped off, but all other whitespace
        will be preserved.
        
        Markdown is turned off in code blocks:
         [This is not a link](http://example.com)
    

    To create not a block, but an inline code span, use backticks:

    Here is some inline `code`.

    For more help see http://daringfireball.net/projects/markdown/syntax

    Narayan Prusty

    I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

    Image8 years ago 1 Comment Web Development
    Share this
    0
    GooglePlus
    0
    Facebook
    0
    Twitter
    0
    Linkedin
    • What is Typography?
    • Classification of Typefaces
    • Selecting Typeface
    • Font Size
    • Line Height
    • Italic and Bold Weights
    Related Articles
    • Responsive Typography Techniques
    • Using @font-face for Bold and Italic Style
    • Layout Concepts For Web Designers
    • Color Selection Techniques For Websites
    • CSS3 Multiple Columns Example
    Our Sponsor
    My Books

    2014 - 2015 © QNimate
    All tutorials MIT license