{"id":4939,"date":"2017-02-20T03:00:07","date_gmt":"2017-02-20T09:00:07","guid":{"rendered":"https:\/\/weblizar.com\/?p=4939"},"modified":"2025-08-11T11:01:04","modified_gmt":"2025-08-11T05:31:04","slug":"give-site-fonts-facelift","status":"publish","type":"post","link":"https:\/\/weblizar.com\/blog\/give-site-fonts-facelift\/","title":{"rendered":"Give Your Site A Fonts Facelift"},"content":{"rendered":"<p>As we entered new year, we tried every possible thing to change our online presence in a better way so that it would look good for a newly visiting prospect. No doubt, our websites appearance affects our prospects purchasing decisions. Where we have tried and tested so many things, why not give a fonts facelift to out website so that it will drop that much needed impact onto your site visitor.<\/p>\n<p>Let&#8217;s talk about some possible revamps we can do to our site, my suggestion is to start with typography.<\/p>\n<h2>Step 1. How Your WordPress Website&#8217;s Current Typography Looks Like?<\/h2>\n<p>Before even starting any changes to your site, assess what you have currently and most importantly how things are going on in your niche industry. I&#8217;ll suggest to analyze\u00a0some top notch competitors of your\u00a0niche. Look at the way their site is performing depending on how they have arranged their fonts and typography.<\/p>\n<p>In order to evaluate a website\u2019s typography, ask yourself the following questions:<\/p>\n<h3>1. From where the current font(s) came?<\/h3>\n<p>Are you aware of how your site\u2019s current font selections came about? If your site uses the default fonts from your WordPress theme or they were chosen on a whim, that\u2019s usually a good sign that they need to be changed. While they probably look <em>good enough<\/em>, they were not hand-selected to fit with your brand\u2019s unique style. Consistency in design is key \u2013 from the images you use all the way down to the typography.<\/p>\n<p><a href=\"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/02\/google-fonts-new.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4940\" src=\"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/02\/google-fonts-new.png\" alt=\"google-fonts-new\" width=\"1291\" height=\"678\" \/><\/a><\/p>\n<h3>2. Is your fonts family complete?<\/h3>\n<p>Alright, so now after a lot of research and commitment we&#8217;ve finally found the best suited fonts those are meshing well with our site and giving a fresh new attractive look to our website. But is it complete? or just a shorter version of what&#8217;s going to be launched later. In short, the question that should come into your mind is whether the fonts you&#8217;ve selected is complete or not?<\/p>\n<p>If you\u2019re unsure of whether or not you have a complete typeface that includes all letters, numbers, and symbols, go back to the source of the font. There should be a preview field where you can enter custom text. Insert the following lines of text to ensure that all essential characters are present:<\/p>\n<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br \/>\nabcdefghijklmnopqrstuvwxyz<br \/>\n\u00e0\u00e8\u00e9\u00ef\u00f6\u00f9\u00fc\u00e7\u00fb\u00e6\u00c6\u0153\u0152<br \/>\n.,;:?!\/[]{}()*-\u2013 \u2014\u2026\u201c\u201d\u2018\u2019_<br \/>\n0123456789<br \/>\n\u2264\u2265\u00f7+=\u2248\u2260\u00b1-\u00b7\u221a\u00b0@\u20ac\u00a3$%&amp;*|\u00ab\u00bb\\&lt;&gt;\/~\u201d\u2018\u00a7\u00b6\u00a9\u00ae\u2122\/<\/p>\n<h3>3. Are there any readability issues?<\/h3>\n<p>Mac users, I&#8217;d suggest you to download\u00a0<a href=\"https:\/\/support.apple.com\/en-in\/guide\/font-book\/fntbk1000\/mac\" target=\"_blank\">Font Book<\/a>. Once you&#8217;ve digged up the font of your interest, install it in Font Book to test for readability issues. You can use this to:<\/p>\n<ul>\n<li>Check for a complete set (like with test #2 above).<\/li>\n<li>Preview the font digitally to get a sense for how it\u2019ll appear on your website.<\/li>\n<li>Print the full character set at different sizes and styles to determine which ones are the most reader-friendly.<\/li>\n<\/ul>\n<p>This also happens to be a great tool for storing your fonts and keeping them organized for the next time you want to give your typography a makeover.<\/p>\n<h3>4. How is it look on mobile?<\/h3>\n<p>There are some online free tools\u00a0like\u00a0Responsinator\u00a0which makes it much easier to check for responsive compatibility easy. These same responsive checkers can also be used to review your site\u2019s typography for mobile-friendliness.<\/p>\n<p>The standard recommendation for cross-platform font sizing is 16 points or more. That may not be the case if you choose a highly stylized or tightly-kerned font, so be sure to verify that on one of these tools before committing.<\/p>\n<p>You can also use this\u00a0<a href=\"http:\/\/www.usabilitynews.org\/misc\/a-comparison-of-popular-online-fonts-which-size-and-type-is-best\/\" target=\"_blank\">guide to popular font sizing<\/a> to give you an idea of where to start with fonts facelift.<\/p>\n<h3>5.\u00a0Is Your Font Color Reader-Friendly?<\/h3>\n<p>Revamping your site with the correct set of fonts and making the size ideal for reader isn&#8217;t the only thing to be done.<\/p>\n<p>Nope, it\u2019s also about finding the right color. If you haven\u2019t experimented with this\u00a0<a href=\"https:\/\/www.materialpalette.com\/\" target=\"_blank\">Material Design Palette<\/a> yet, take a moment to do so now. You\u2019ll see that regardless of which branding colors you select, the primary and secondary font color are always black or a shade of grey.<\/p>\n<p><a href=\"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/02\/material-design-color-palette-new.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4942\" src=\"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/02\/material-design-color-palette-new.png\" alt=\"material-design-color-palette-new\" width=\"1364\" height=\"731\" \/><\/a><\/p>\n<h3>6. How about accessibility?<\/h3>\n<p>Web developers know all about how to make websites\u00a0<a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\" target=\"_blank\">accessible<\/a>. However, if you\u2019re really looking to give your typography a universal-friendliness in this next iteration, pay closer attention to factors that may affect those who are visually impaired or color blind.<\/p>\n<p>Start by running your website through\u00a0<a href=\"https:\/\/colororacle.org\/\" target=\"_blank\">Color Oracle<\/a>. This tool will simulate how your website appears to those who are color blind.<\/p>\n<p>You never know who may come to your website, so it\u2019s important to consider these factors now while you\u2019re taking the time to give your typography a facelift.<\/p>\n<h2>Step 2: Learn Typography Best Practice<\/h2>\n<p>Font choice is a personal decision, much like everything else in web design. So while I cannot tell you which fonts to use, I still think it\u2019s important to lay out the best practices to follow while doing your research, testing, and implementation of new ones.<\/p>\n<p>Here are the basic rules to follow:<\/p>\n<ul>\n<li><b>Match your brand<\/b>: Select a font that follows the design rules you\u2019ve already established for your brand.<\/li>\n<li><b>Keep it simple<\/b>: Use no more than two or three typefaces across your website. That being said, it\u2019s okay to use a font face that\u2019s a little out of the ordinary, just make sure it\u2019s easy to read.<\/li>\n<li><b>Maintain consistency<\/b>: Use consistent font styling throughout the site. In other words, all headings should use the same font, size, color, and style. The same goes for all body text, navigational text, hyperlinked text, and any other types of text you use on the site.<\/li>\n<li><b>Create contrast<\/b>: While consistency across font type matters, there should be a contract between headings and basic body text. You can do this by pairing a sans serif font with a serif or a cursive font with a handwritten one. Just be sure the contrast is striking, though not to the point of being off-putting.<\/li>\n<li><b>Check the color<\/b>: As noted earlier, black or shades of dark gray\u00a0work best for readability. There\u2019s also the background color to take into consideration as well, so it\u2019s important to pair colors accordingly (i.e. light text on a dark background and dark text on a light background).<\/li>\n<li><b>USE ALL CAPS SPARINGLY<\/b>: All caps text can be very difficult to read. Either that or it may give off the <a href=\"https:\/\/uxmovement.com\/content\/all-caps-hard-for-users-to-read\/\" target=\"_blank\">wrong vibe<\/a>. So, if you feel you have to use it, do so sparingly.<\/li>\n<li><b>Establish hierarchy<\/b>: Just because the general rule is to use a font size of at least 16 points, that doesn\u2019t mean all your site\u2019s typefaces need to stick to that minimum limit. Headers, subheaders, and body text should be sized to establish a clear hierarchy in terms of what\u2019s most important.<\/li>\n<li><b>Don\u2019t forget about spacing<\/b>: Once you\u2019ve implemented the new typography on your site, you\u2019ll want to optimize its spacing. If there are issues with lines spaced too closely with one another, fix the leading. If there are issues with readability within a line of text, you\u2019ll need to adjust the kerning and maybe even the tracking. Ideally, each line of text should stretch no more than 15 words.<\/li>\n<li><b>A\/B test before making a commitment<\/b>: While you might be ecstatic about your new font choice, other people might not feel the same way. Do yourself a favor and make sure to <a href=\"https:\/\/wpmudev.com\/blog\/ab-testing\/\" target=\"_blank\">A\/B test<\/a> your new font choice before fully committing to it. Your website (and business) will thank you for it later.<\/li>\n<\/ul>\n<p>I hope these few fonts facelift tips and tricks will help you out in revamping your site to increase more visitors.<br \/>\nLeave your precious comments below if you are facing any challenges or if you want to add value to this blog post by sharing your experiences.<\/p>\n<p>And yes don&#8217;t forget to read\u00a0<a title=\"How To Use Social SEO To Increase Website Ranking\" href=\"https:\/\/weblizar.com\/social-seo-increase-website-ranking\" rel=\"bookmark\">How To Use Social SEO To Increase Website Ranking<\/a>\u00a0and,<\/p>\n<p><a title=\"How To Increase Your Facebook Page Post Reach\" href=\"https:\/\/weblizar.com\/how-to-increase-your-facebook-page-post-reach\" rel=\"bookmark\">How To Increase Your Facebook Page Post Reach<\/a>.<\/p>\n<p>If you are web design pro,\u00a0<a title=\"Top 10 Web Design Trends\" href=\"https:\/\/weblizar.com\/top-10-web-design-trends\" rel=\"bookmark\">Top 10 Web Design Trends<\/a>\u00a0is for you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As we entered new year, we tried every possible thing to change our online presence in a better way so that it would look good for a newly visiting prospect. No doubt, our websites appearance affects our prospects purchasing decisions. Where we have tried and tested so many things, why not give a fonts facelift<\/p>\n","protected":false},"author":5,"featured_media":4946,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[24],"tags":[377,378,379,380,381],"class_list":["post-4939","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-word-press","tag-best-fonts-for-my-website","tag-how-should-my-fonts-look-like","tag-how-to-use-fonts-for-website","tag-how-to-use-fonts","tag-typography-best-practice"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Fonts Facelift For Better Viewability Of Your Site - Weblizar<\/title>\n<meta name=\"description\" content=\"New year came with many changes that either we&#039;ve adapted or developed over the time. Lets discuss about a new change i.e fonts facelift for your website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/weblizar.com\/blog\/give-site-fonts-facelift\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fonts Facelift For Better Viewability Of Your Site - Weblizar\" \/>\n<meta property=\"og:description\" content=\"New year came with many changes that either we&#039;ve adapted or developed over the time. Lets discuss about a new change i.e fonts facelift for your website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/weblizar.com\/blog\/give-site-fonts-facelift\/\" \/>\n<meta property=\"og:site_name\" content=\"Weblizar Blog\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/www.facebook.com\/weblizarwp\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-20T09:00:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-11T05:31:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/weblizar.com\/blog\/wp-content\/uploads\/2017\/02\/Weblzar-Image.jpg?fit=1024%2C706&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"706\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Danish Ansari\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@weblizar\" \/>\n<meta name=\"twitter:site\" content=\"@weblizar\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Danish Ansari\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Fonts Facelift For Better Viewability Of Your Site - Weblizar","description":"New year came with many changes that either we've adapted or developed over the time. Lets discuss about a new change i.e fonts facelift for your website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/weblizar.com\/blog\/give-site-fonts-facelift\/","og_locale":"en_US","og_type":"article","og_title":"Fonts Facelift For Better Viewability Of Your Site - Weblizar","og_description":"New year came with many changes that either we've adapted or developed over the time. Lets discuss about a new change i.e fonts facelift for your website.","og_url":"https:\/\/weblizar.com\/blog\/give-site-fonts-facelift\/","og_site_name":"Weblizar Blog","article_publisher":"http:\/\/www.facebook.com\/weblizarwp","article_published_time":"2017-02-20T09:00:07+00:00","article_modified_time":"2025-08-11T05:31:04+00:00","og_image":[{"width":1024,"height":706,"url":"https:\/\/i0.wp.com\/weblizar.com\/blog\/wp-content\/uploads\/2017\/02\/Weblzar-Image.jpg?fit=1024%2C706&ssl=1","type":"image\/jpeg"}],"author":"Danish Ansari","twitter_card":"summary_large_image","twitter_creator":"@weblizar","twitter_site":"@weblizar","twitter_misc":{"Written by":"Danish Ansari","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/weblizar.com\/blog\/give-site-fonts-facelift\/#article","isPartOf":{"@id":"https:\/\/weblizar.com\/blog\/give-site-fonts-facelift\/"},"author":{"name":"Danish Ansari","@id":"https:\/\/weblizar.com\/blog\/#\/schema\/person\/d317218747ba5e5aa51886062ac0b628"},"headline":"Give Your Site A Fonts Facelift","datePublished":"2017-02-20T09:00:07+00:00","dateModified":"2025-08-11T05:31:04+00:00","mainEntityOfPage":{"@id":"https:\/\/weblizar.com\/blog\/give-site-fonts-facelift\/"},"wordCount":1358,"commentCount":0,"image":{"@id":"https:\/\/weblizar.com\/blog\/give-site-fonts-facelift\/#primaryimage"},"thumbnailUrl":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/02\/Weblzar-Image.jpg","keywords":["best fonts for my website","how should my fonts look like","how to use fonts for website","how to use fonts?","typography best practice"],"articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/weblizar.com\/blog\/give-site-fonts-facelift\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/weblizar.com\/blog\/give-site-fonts-facelift\/","url":"https:\/\/weblizar.com\/blog\/give-site-fonts-facelift\/","name":"Fonts Facelift For Better Viewability Of Your Site - Weblizar","isPartOf":{"@id":"https:\/\/weblizar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/weblizar.com\/blog\/give-site-fonts-facelift\/#primaryimage"},"image":{"@id":"https:\/\/weblizar.com\/blog\/give-site-fonts-facelift\/#primaryimage"},"thumbnailUrl":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/02\/Weblzar-Image.jpg","datePublished":"2017-02-20T09:00:07+00:00","dateModified":"2025-08-11T05:31:04+00:00","author":{"@id":"https:\/\/weblizar.com\/blog\/#\/schema\/person\/d317218747ba5e5aa51886062ac0b628"},"description":"New year came with many changes that either we've adapted or developed over the time. Lets discuss about a new change i.e fonts facelift for your website.","breadcrumb":{"@id":"https:\/\/weblizar.com\/blog\/give-site-fonts-facelift\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/weblizar.com\/blog\/give-site-fonts-facelift\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/weblizar.com\/blog\/give-site-fonts-facelift\/#primaryimage","url":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/02\/Weblzar-Image.jpg","contentUrl":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/02\/Weblzar-Image.jpg","width":1024,"height":706},{"@type":"BreadcrumbList","@id":"https:\/\/weblizar.com\/blog\/give-site-fonts-facelift\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/weblizar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Give Your Site A Fonts Facelift"}]},{"@type":"WebSite","@id":"https:\/\/weblizar.com\/blog\/#website","url":"https:\/\/weblizar.com\/blog\/","name":"Weblizar Blog","description":"Update yourself with all the latest tech news revolving around wordpress all at one place","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/weblizar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/weblizar.com\/blog\/#\/schema\/person\/d317218747ba5e5aa51886062ac0b628","name":"Danish Ansari","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/8578053f8112ac6a0c136fbc87a10af48375433622bcb3df612e573bd2513ef6?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8578053f8112ac6a0c136fbc87a10af48375433622bcb3df612e573bd2513ef6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8578053f8112ac6a0c136fbc87a10af48375433622bcb3df612e573bd2513ef6?s=96&d=mm&r=g","caption":"Danish Ansari"}}]}},"_links":{"self":[{"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/posts\/4939","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/comments?post=4939"}],"version-history":[{"count":0,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/posts\/4939\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/media\/4946"}],"wp:attachment":[{"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/media?parent=4939"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/categories?post=4939"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/tags?post=4939"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}