{"id":1784,"date":"2018-06-01T13:39:00","date_gmt":"2018-06-01T13:39:00","guid":{"rendered":"https:\/\/www.vocso.com\/blog\/?p=1784"},"modified":"2024-07-09T09:45:36","modified_gmt":"2024-07-09T09:45:36","slug":"typography-in-web-design","status":"publish","type":"post","link":"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/","title":{"rendered":"Typography in Web Design &#8211; A Guide to Web Typography"},"content":{"rendered":"<div style=\"margin-top: 0px; margin-bottom: 0px;\" class=\"sharethis-inline-share-buttons\" ><\/div>\n<p>Since the advent of internet and online reading facilities, the requirement of web content has increased enormously. Further, it has become the key to build up your target audience. With this expanding content market, creating a constant audience base is a difficult task. This is mainly because though anyone can attempt writing stories, articles and blogs, not everyone has the ability to engage readers for long. For every writer, creating an engaging content is one the most daunting task. In an already crowded online marketplace, creating content full of web design is the way to stand out and be remarkable. However, one doesn\u2019t need to write similar to that of William Shakespeare to engage readers. Earlier, content only used to mean communicating through text. With the evolving generation of audience, the definition seems to be changing. Content now essentially means effective communication through not only text but enhanced pictures and graphics. Still, typography plays a major role in creating a brand value for your website.<\/p>\n\n\n\n<p>There are various smaller but really valuable points which one has to take care of to provide high quality typography in web design. Some of these include the need to have proper font size, shape, color, width of text, spacing between lines and the amount of blank spaces spread over a worksheet among many other parameters. To help web designers create an remarkable design, we provide you with some of the major pointers.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#key-pointers-to-craft-good-quality-typography-in-web-design\" >Key Pointers to Craft GOOD Quality Typography in Web Design<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#tip-1-standardised-font-type-for-continued-engagement\" >Tip 1: Standardised Font Type For Continued Engagement<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#audimat-font\" >AUdimat Font<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#chunkfive-font\" >ChunkFive Font<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#delicious-font\" >Delicious Font<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#droid-sans-font\" >Droid Sans Font<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#fontin-font\" >Fontin Font<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#josefin-slab-font\" >Josefin Slab Font<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#lato-font\" >Lato Font<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#open-sans-font\" >Open Sans Font<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#pt-sans-and-pt-serif\" >PT Sans and PT Serif<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#ubuntu-font\" >Ubuntu Font<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#tip-2-font-size-matters-a-lot\" >Tip 2: Font Size Matters A Lot<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#tip-3-too-many-fonts-%e2%80%93-a-big-no\" >Tip 3: Too Many Fonts &#8211; A Big No!<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#tip-4-line-limit\" >Tip 4: Line Limit<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#tip-5-consider-the-x-height-factor\" >Tip 5: Consider the X-height factor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#tip-6-distinguishable-glyphs\" >Tip 6: Distinguishable Glyphs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#tip-7-visual-hierarchy-with-typography\" >Tip 7: Visual hierarchy with Typography<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#tip-8-correct-alignment\" >Tip 8: Correct Alignment<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#tip-9-white-space-between-header-and-body\" >Tip 9: White Space Between Header and Body<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/www.vocso.com\/blog\/typography-in-web-design\/#final-thought\" >Final Thought<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"key-pointers-to-craft-good-quality-typography-in-web-design\"><\/span>Key Pointers to Craft GOOD Quality Typography in Web Design<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For any brand, creating designs and typography in web design which are visually appealing to customers is the prerequisite for their reputation. This is mainly because users are drawn toward that content which is pleasing to eye, easy to ready and does not have any distraction. Besides, website which are typographically more perfect helps in creating an emotional connect with the users. To attain the same, below pointers needs to be carefully adhered to.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"tip-1-standardised-font-type-for-continued-engagement\"><\/span>Tip 1: Standardised Font Type For Continued Engagement<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>While writing and web designing, it is advisable to use standardized text with an appropriate font size. The reason behind this is that readers are familiar reading some standard type of font like Arial, Calibri, Times New Roman. These fonts are utilitarian and has the power to engage readers for a long time. By using fonts which are not conventional might dissuade the audience from reading. Moreover, it will draw more attention towards the formatting rather than the content. Unless otherwise specifically mentioned, a web designer can avoid using a different and unknown font as this will do more harm than a badly written article. See some of the best fonts below:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"audimat-font\"><\/span>AUdimat Font<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"360\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Audimat.jpeg\" alt=\"fonts types\" class=\"wp-image-1786\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Audimat.jpeg 840w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Audimat-300x129.jpeg 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Audimat-768x329.jpeg 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Audimat-624x267.jpeg 624w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"chunkfive-font\"><\/span>ChunkFive Font<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"360\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Chunkfive.jpeg\" alt=\"\" class=\"wp-image-1787\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Chunkfive.jpeg 840w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Chunkfive-300x129.jpeg 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Chunkfive-768x329.jpeg 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Chunkfive-624x267.jpeg 624w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"delicious-font\"><\/span>Delicious Font<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"360\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Delicious.jpeg\" alt=\"\" class=\"wp-image-1788\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Delicious.jpeg 840w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Delicious-300x129.jpeg 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Delicious-768x329.jpeg 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Delicious-624x267.jpeg 624w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"droid-sans-font\"><\/span>Droid Sans Font<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"360\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Droid-Sans.jpg\" alt=\"\" class=\"wp-image-1789\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Droid-Sans.jpg 840w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Droid-Sans-300x129.jpg 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Droid-Sans-768x329.jpg 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Droid-Sans-624x267.jpg 624w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"fontin-font\"><\/span>Fontin Font<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"360\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Fontin.jpeg\" alt=\"\" class=\"wp-image-1790\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Fontin.jpeg 840w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Fontin-300x129.jpeg 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Fontin-768x329.jpeg 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Fontin-624x267.jpeg 624w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"josefin-slab-font\"><\/span>Josefin Slab Font<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"360\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Josefin-Slab.jpg\" alt=\"\" class=\"wp-image-1791\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Josefin-Slab.jpg 840w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Josefin-Slab-300x129.jpg 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Josefin-Slab-768x329.jpg 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Josefin-Slab-624x267.jpg 624w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"lato-font\"><\/span>Lato Font<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"360\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Lato.jpg\" alt=\"\" class=\"wp-image-1792\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Lato.jpg 840w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Lato-300x129.jpg 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Lato-768x329.jpg 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Lato-624x267.jpg 624w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"open-sans-font\"><\/span>Open Sans Font<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"360\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Open-Sans.jpg\" alt=\"\" class=\"wp-image-1793\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Open-Sans.jpg 840w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Open-Sans-300x129.jpg 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Open-Sans-768x329.jpg 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Open-Sans-624x267.jpg 624w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"pt-sans-and-pt-serif\"><\/span>PT Sans and PT Serif<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"360\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/PT-Sans-PT-Serif.jpg\" alt=\"\" class=\"wp-image-1794\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/PT-Sans-PT-Serif.jpg 840w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/PT-Sans-PT-Serif-300x129.jpg 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/PT-Sans-PT-Serif-768x329.jpg 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/PT-Sans-PT-Serif-624x267.jpg 624w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"ubuntu-font\"><\/span>Ubuntu Font<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"360\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Ubuntu.jpg\" alt=\"\" class=\"wp-image-1795\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Ubuntu.jpg 840w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Ubuntu-300x129.jpg 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Ubuntu-768x329.jpg 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Ubuntu-624x267.jpg 624w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"tip-2-font-size-matters-a-lot\"><\/span>Tip 2: Font Size Matters A Lot<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Another key point to note is that, size of the font conveys a particular feeling. Sizing does make a difference to readability. For instance, writing in capital letters signifies that the person is shouting and wants to emphasis something. Then again, too Short and too large a text font leads to frustration. For a web designer, the ideal size to choose can be;<\/p>\n\n\n\n<p><b>Body Text: Minimum 10<br>pt \u2013 Maximum 12 pt\u00b7<br>Chapter Heading:<br>Minimum 14 pt \u2013 Maximum 16 pt\u00b7<br>Subtitles: Minimum 12<br>pt \u2013 Maximum 14 pt<\/b><\/p>\n\n\n\n<p>Despite these ideal figures, some genres of writing go together with a particular font. For instance, a smaller font is mostly preferable for intellectual books thereby conveying seriousness and concentration. Nonetheless, an even smaller size will go in tandem with a classic novel.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Font-Size-Matters-A-Lot.png\" alt=\"Font Size Matters A Lot\" class=\"wp-image-1796\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Font-Size-Matters-A-Lot.png 1920w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Font-Size-Matters-A-Lot-300x169.png 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Font-Size-Matters-A-Lot-768x432.png 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Font-Size-Matters-A-Lot-1024x576.png 1024w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Font-Size-Matters-A-Lot-624x351.png 624w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure><\/div>\n\n\n\n<p>Age of the reader is also other criteria to decide about the font size. Young children often prefer reading books and texts with bigger fonts. Therefore, it is always advisable to consider the readership before choosing a particular font.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"tip-3-too-many-fonts-%e2%80%93-a-big-no\"><\/span>Tip 3: Too Many Fonts &#8211; A Big No!<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Step up your design game by using fewer typefaces. But how many fonts actually count for too many. A major point to watch out for here is that using too many types of font in a single paragraph or page creates confusion and distract the readers. Moreover, it makes the text look messy and scattered all over the place. We always recommend to choose only two kinds of fonts, one for the body and one for the heading. This will give the required consistency to the text. However, this doesn\u2019t mean that you can\u2019t use many typefaces unless you are too sure where and how to use them. Choosing typefaces that blend well such as fonts from the same font family gives a great impression about multiple long page texts.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"333\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Too-Many-Fonts.jpg\" alt=\"Too Many Fonts\" class=\"wp-image-1797\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Too-Many-Fonts.jpg 1000w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Too-Many-Fonts-300x100.jpg 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Too-Many-Fonts-768x256.jpg 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Too-Many-Fonts-624x208.jpg 624w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure><\/div>\n\n\n\n<p>Many newspaper publications stick to Times New Roman font which is softer to look at and very professional. Had they used too many fonts, this might come across as playful.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"tip-4-line-limit\"><\/span>Tip 4: Line Limit<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Limiting the length of a sentence or line, improves its readability and makes more sense. Even if we look at code style guideline for a language, one can find the rule of not exceeding the line length to more than 60 characters.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"2396\" height=\"1856\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Line-Limit.png\" alt=\"Line Limit\" class=\"wp-image-1798\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Line-Limit.png 2396w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Line-Limit-300x232.png 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Line-Limit-768x595.png 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Line-Limit-1024x793.png 1024w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Line-Limit-624x483.png 624w\" sizes=\"auto, (max-width: 2396px) 100vw, 2396px\" \/><\/figure><\/div>\n\n\n\n<p>So, what happens if the line length is too long, the readers will have a hard time focusing on the text. If we use shorter sentences, our subconscious mind is energized and fresh to read the next line. Sometime, reading larger sentences often misconstrue the meaning of the sentence. This is also one of the bigger concerns. Besides, the readers will have to go back and forth too often which will break the rhythm.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"tip-5-consider-the-x-height-factor\"><\/span>Tip 5: Consider the X-height factor<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>To make the content appealing to eyes, a web designer needs to wary of the fact that x-height factor between different fonts needs to be optimum. As users might access the websites through various mediums having different screen size like mobile phones or desktops or tablets.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"444\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Consider-the-X-height-factor.png\" alt=\"Consider the X-height factor\" class=\"wp-image-1804\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Consider-the-X-height-factor.png 540w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Consider-the-X-height-factor-300x247.png 300w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><\/figure><\/div>\n\n\n\n<p>So, it is important for the web designer to choose the font that will blend well with any type of screen. By ensuring that the font we choose will be compatible for a smaller screen will be easier to read. Fonts which are curved or too much italicized are difficult to understand and read. One cannot make out the difference between the individual letters.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"tip-6-distinguishable-glyphs\"><\/span>Tip 6: Distinguishable Glyphs<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>There is always a query about the serifs or sans serif which can be used to make the text look appealing and letters are distinguishable. This decision is based on several key points regarding the project at hand. Once the decision is made, the typeface search will be narrowed down considerably. Though, serifs are historically considered decorative, they might be used for a higher purpose.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"721\" height=\"541\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Distinguishable-Glyphs.png\" alt=\"Distinguishable Glyphs\" class=\"wp-image-1800\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Distinguishable-Glyphs.png 721w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Distinguishable-Glyphs-300x225.png 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Distinguishable-Glyphs-624x468.png 624w\" sizes=\"auto, (max-width: 721px) 100vw, 721px\" \/><\/figure><\/div>\n\n\n\n<p>They help increase readability of long texts and passages as the eye gets accustomed to the line that these serif letters make. Moreover, some fonts create illusions and make two letters look similar. For instance, in particular font, a looks like o and I looks like l. Therefore, proper distinction between letter is helpful in reading the words accurately and this would not distort the meaning.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"tip-7-visual-hierarchy-with-typography\"><\/span>Tip 7: Visual hierarchy with Typography<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Scales can be used to show hierarchy on the body. Visual hierarchy is an important part of a web design. This informs the reader about important parts of the text and where to gauge the needed information. This can majorly be seen in magazines where some text is smaller while the other bigger with bigger pictures. Hierarchy is important because it will help the designer determine which text he wants the reader to read first. Creating hierarchy is equally important to readers as it will help them know which part is important, thus making reading much easier.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"700\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/visual-hierarchy.png\" alt=\"visual hierarchy\" class=\"wp-image-1801\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/visual-hierarchy.png 960w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/visual-hierarchy-300x219.png 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/visual-hierarchy-768x560.png 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/visual-hierarchy-624x455.png 624w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"tip-8-correct-alignment\"><\/span>Tip 8: Correct Alignment<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Alignment of the text also play a key role in presenting your web page. Based on the type of content, alignment has to be changed accordingly. For instance, while writing a letter, we start from the left-hand margin and avoid using the middle alignment. The middle alignments can be used for subjects and headings of paragraphs which are not interconnected.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"724\" height=\"541\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Text-Within-Margins.png\" alt=\"Correct Alignment\" class=\"wp-image-1802\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Text-Within-Margins.png 724w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Text-Within-Margins-300x224.png 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/Text-Within-Margins-624x466.png 624w\" sizes=\"auto, (max-width: 724px) 100vw, 724px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"tip-9-white-space-between-header-and-body\"><\/span>Tip 9: White Space Between Header and Body<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>To signal a clear relationship between body and header, generous line spacing has to be ensured. Too tight spacing of body and header might create congestion and the reader loses his or her interest. Whereas, too much white spaces are also not a good practice. Significant amount of blank space might come across and missing text and occupy more space. Text will seem uneven and left out. This is not a good typography practice and one should be careful about the amount of space to be given.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"961\" height=\"185\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/White-space.png\" alt=\"White space\" class=\"wp-image-1803\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/White-space.png 961w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/White-space-300x58.png 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/White-space-768x148.png 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/06\/White-space-624x120.png 624w\" sizes=\"auto, (max-width: 961px) 100vw, 961px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"final-thought\"><\/span>Final Thought<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Optimising typography is the key to enhancing reader interest. This essentially means that user interface with the website will improve at an significant rate. This is one element that can\u2019t be overlooked as it would cause more harm to the website, then any badly written article. By saying this, I am not promoting the use of bad content, but specifying the important of optimized typography in web design. While designing a website, if you are in any doubt, do test all the features to make sure that the one you are using will enhance the legibility of the website.<\/p>\n\n\n\n<p>Besides the above factors, a web designer has to be aware about the need of the customer and target audience. Some people are adamant on using animations, However, these are some of the obsolete ways to design website. A proper typography will ensure that your website looks clean, crisp and polished.<br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Since the advent of internet and online reading facilities, the requirement of web content has increased enormously. Further, it has become the key to build up your target audience. With this expanding content market, creating a constant audience base is a difficult task. This is mainly because though anyone can attempt writing stories, articles and <\/p>\n","protected":false},"author":23,"featured_media":28466,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[58,171],"tags":[414,418,415,421,412,419,417,416,413,420],"class_list":["post-1784","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience","category-web","tag-font-selection","tag-font-size-matters","tag-typography-best-practices","tag-typography-for-beginners","tag-typography-in-web-design","tag-typography-techniques","tag-visual-hierarchy","tag-web-design-tips","tag-web-typography-tips","tag-web-typography-trends"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/posts\/1784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/comments?post=1784"}],"version-history":[{"count":0,"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/posts\/1784\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/media\/28466"}],"wp:attachment":[{"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/media?parent=1784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/categories?post=1784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/tags?post=1784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}