• Skip to primary navigation
  • Skip to main content
  • Skip to footer
TechLila

TechLila

Bleeding Edge, Always

  • Home
  • About
  • Contact
  • Advertise
  • Deals and Offers
Techlila
Share
Tweet
Share
Pin
4 Shares
WYSIWYG HTML Editors
Up Next

Are You Making Use of the Powerful WYSIWYG HTML Editors?

Web Typography in Website Design is More Important than what you Assumed!

TechLila Web Design and Development

Web Typography in Website Design is More Important than what you Assumed!

Avatar for Guest Author Guest Author
Last updated on: March 26, 2017

Web typography refers to the fonts incorporated in web pages. It is a critical aspect of website design because it has a direct impact on readability of the site. Many people think that responsibilities of a affordable website design professional do not include paying attention to web typography. However, this is a wrong concept.

Web Typography

Apart from investing time for creating designs, one should also be attentive towards web typography. Remember that if your web typography is poor, visitors will not bother to observe your designs. We provide you with few tips that will help you to deal with web typography in a hassle-free manner.

  • Use Three Typefaces per Design
    Using three typefaces (at the most) will allow readers to observe your website clearly. Arranging content with various typefaces can create a messed up look of the site. Additionally, it may convince visitors that various parts of the content, such as different paragraphs are unrelated.
    Of course, while reading, visitors may not be able to pick out the exact source of discomfort. Still, they will not be comfortable in reading information that contains various typefaces.
  • Distinguish the Headline
    Title of an article draws attraction of visitors initially. If they find the title catchy, they will move on to rest of the article. This means that you have to highlight the title, so that it grabs attention of the readers at any cost. Increasing size of the headline is the easiest way to highlight it.
  • Set Size of the Body Copy at 14 Pixels
    For best results, try to make sure that visitors can read your body copy comfortably. It is true that apart from size, other factors can also influence readability of the website. Still, size is the most important determining factor. Setting size of your body copy at 14 pixels can be a great idea.
  • Avoid using Underlines and Italics Unnecessarily
    Do not confuse your readers by using italics and underlines unnecessarily. Italics and underlines attach greater importance to a line. If you use italics and underlines in every sentence, your visitors may feel confused.
    Rather, use underlies and italics, only when necessary.
  • Do not Use Full Capitals for Large Blocks of Text
    Using full capitals for huge blocks of text is a bad idea. This is because of the fact that as compared to text written in lower and upper cases, information set only in capitals are harder to interpret.
    If you set information lower and upper cases, as required, it will be comparatively easier on the eyes. Furthermore, it will allow visitors to interpret information more easily.
  • Avoid Cramming Large Information in a Limited Space
    To increase readability of your site, do not force huge information to fit into a limited space. Rather, provide it with enough space, so that it assumes a neat look. At the same time, do not incorporate excessive space, so that the whole text appears disjointed and unrelated.
  • Pay attention to Background Contrast
    You may have opted for a larger font size for increasing readability of the text. However, if the contrast between information and its background is poor, it will hamper readability and legibility of the site. Common practice is to place light text against a dark background or vice-versa. Avoid using clashing colors at any cost.
  • Opt for Fonts that are perfect for Screen Use
    You can avail various types of fonts in the Internet. Unfortunately, many of these fonts are not fit for using in websites. For this reason, carefully selecting the fonts is important. Additionally, you can take help of hinting tables and check appearance of fonts at smaller sizes on various browsers.
  • Avoid Using Comic Sans
    Comic sans has become a much hated font and we are no exception. We strongly believe that using this font provides your site with a childish and immature appeal, which majority of visitors will not appreciate. Try to avoid it.

Enjoy creating an accessible website!

Share
Tweet
Share
Pin
4 Shares

Sharing is Caring

Share
Tweet
Share
Pin
4 Shares
Avatar for Guest Author

Guest Author

This guest post was written by a guest contributor.

Category

  • Web Design and Development

Tags

Web Typography, Website Design

Reader Interactions

What people are saying

  1. Avatar for Aiden RuseAiden Ruse

    Hi Diane.

    Thanks for sharing excellent guide. I wish every designer should understand the importance of typography. Improper typography could also be a mistake of the failure of a website design. I would like to put typography at first priority when it comes to design a website and save web design from being a failure. The advice you have given here is really fantastic and contains many useful information.

    Reply
  2. Avatar for AmberAmber

    Thanks for sharing. Surely a lot of people will be benefited with this points.

    Reply
  3. Avatar for SarahSarah

    Very useful. I’m looking at a re-design of one of our websites right now and realised that we were using about 5-6 different fonts on the old site which just doesn’t look great.

    Reply
  4. Avatar for SajeshSajesh

    I agreed to you that web typography is a critical aspect of web design and every designer should keep this aspect in their mind while designing the website.

    Reply
  5. Avatar for NishadhaNishadha

    All I can say is wow. I know that font styles and font sized matter but never knew so much detail about why they matter. Forwarding this to design team and thanks for the awesome article.

    Reply
  6. Avatar for DavidDavid

    Putting clear, readable and effective typography in your website increases not only your visitors, but it also increases professionalism.

    Reply
  7. Avatar for NatashaNatasha

    Set Size of the Body Copy at 14 Pixels? Isnt it better we should use 16-18px or better we go for 150%.

    Reply
    • Avatar for Rajesh NamaseRajesh Namase

      It depends, just change and check if it looks nice and readable or not.

      Reply
  8. Avatar for JeetenJeeten

    Yeah I agree with you Diane, web typography is must required. keeping typography in mind i had designed my site.

    Reply
  9. Avatar for StephenStephen

    font-family: ‘franklin_gothic_medium_condRg’; font is being used by myself on my various websites. and Body Font size kept .9em. and on some websites 1em.
    H1 = 3em
    H2 = 2.5em
    H3 = 2em
    H4 = 1.6em
    H5 = 1.2em

    Reply
  10. Avatar for Vishnu SharmaVishnu Sharma

    Yeah I agree with you Diane, web typography is must required. Keeping typography in mind I had designed my site.

    Reply
  11. Avatar for Mansoor BhanpurawalaMansoor Bhanpurawala

    Very useful. I’m looking at a re-design of one of our websites right now and realized that we were using about 5-6 different fonts on the old site which just doesn’t look great.

    Reply
  12. Avatar for AlexAlex

    Thanks, Admin. Very use full blog. Thanks for the post because this post is useful for me.

    Reply

Add Your Comment Cancel reply

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

Footer Logo Footer Text Logo

Footer

About

Hello and welcome to TechLila, the famous technology blog where you can find resourceful articles for mastering the basics and beyond.

At TechLila, our main goal is to provide unique information, such as quality tips and tricks, tutorials, how-to guides on Windows, Macintosh, Linux, Android, iPhone, Security and a few miscellaneous sub-topics such as reviews.

Links

  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms

Follow

Custom Theme Using Genesis Framework

Cloud hosting by Cloudways

© Copyright  2012–2021 TechLila. All Rights Reserved.