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

TechLila

Bleeding Edge, Always

  • Home
  • About
  • Contact
  • Deals and Offers
Techlila Logo
Share
Tweet
Share
Pin
4 Shares
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!

Share
Tweet
Share
Pin
4 Shares

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

Share
Tweet
Share
Pin
4 Shares
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. Avatar of 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 of AmberAmber

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

      Reply
    3. Avatar of 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 of 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 of 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 of DavidDavid

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

      Reply
    7. Avatar of 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 of Rajesh NamaseRajesh Namase

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

        Reply
    8. Avatar of JeetenJeeten

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

      Reply
    9. Avatar of 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 of 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 of 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 of 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 *

    Primary Sidebar

    Popular

    How to Increase Broadband Speed on Windows

    10 Best Android Launchers of 2021

    Things to Do After Installing Windows 10 – Windows 10 Tips and Tricks

    Top 10 Search Engines You Can Use to Search the Web Privately

    55 Interesting Computer Facts That Will Blow Your Mind

    What to Look for When Buying a Laptop – A Laptop Buying Guide

    Fusion Drive Vs SSD – Things Nobody Tells you About Fusion vs SSD Storage

    Useful Tools

    • Grammarly – Free Grammar Checker
    • SEMrush – The Best SEO Tool Trusted by Experts
    • Setapp – One-stop subscription for Mac and iOS

    Trending Topics

    • Android
    • Internet
    • iPhone
    • Linux
    • Macintosh
    • Security
    • Social Media
    • Technology
    • Windows

    Worth Checking

    10 Best Sound Equalizer for Windows 10 (2022 Edition!)

    14 Best VLC Skins that are Highly Recommended and Free

    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

    en English
    bg Българскиzh-CN 简体中文nl Nederlandsen Englishtl Filipinofr Françaisde Deutschid Bahasa Indonesiait Italianoja 日本語pl Polskipt Portuguêsro Românăru Русскийsr Српски језикes Españolsv Svenskatr Türkçeuk Українськаvi Tiếng Việt

    © Copyright  2012–2023 TechLila. All Rights Reserved.