• X

    What is Typography And How To Select Best Font?

    By in Uncategorized

    Bluehost hosting

    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?

    $49 worth WordPress Guide

    Discover more awesome articles

    Article by

    Saorabh has written 3 articles.

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

    { 7 comments… read them below or 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

    Previous post:

    Next post:

    `