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

TechLila

Bleeding Edge, Always

  • Home
  • About
  • Contact
  • Deals and Offers
Techlila Logo
FacebookTweetLinkedInPin
WYSIWYG HTML Editors
Up Next

Are You Making Use of the Powerful WYSIWYG HTML Editors?

Web Typography

TechLila Web Design and Development

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

Avatar of 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!

Disclosure: Content published on TechLila is reader-supported. We may receive a commission for purchases made through our affiliate links at no extra cost to you. Read our Disclaimer page to know more about our funding, editorial policies, and ways to support us.

Sharing is Caring

FacebookTweetLinkedInPin
Avatar of 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. Aiden 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. Amber

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

      Reply
    3. Sarah

      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. Sajesh

      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. Nishadha

      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. David

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

      Reply
    7. Natasha

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

      Reply
      • Rajesh Namase

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

        Reply
    8. Jeeten

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

      Reply
    9. Stephen

      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. Vishnu Sharma

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

      Reply
    11. Mansoor 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. Alex

      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

    Language

    © Copyright  2012–2023 TechLila. All Rights Reserved.

    x
    x