{"id":26280,"date":"2017-03-06T19:05:36","date_gmt":"2017-03-06T23:05:36","guid":{"rendered":"http:\/\/www.andysowards.com\/blog\/?p=26280"},"modified":"2023-04-21T02:23:25","modified_gmt":"2023-04-21T06:23:25","slug":"typography-mistakes-in-web-design","status":"publish","type":"post","link":"https:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/","title":{"rendered":"5 Common Typography Mistakes in Web Design"},"content":{"rendered":"

Typography is an extremely important part of web design, but unfortunately many new designers often fail to appreciate just how crucial a role it can play. As such it is all too common for mistakes to occur that could even have a longstanding effect on the websites appearance.<\/p>\n

While typography is far from simple and will require a great deal of effort, knowing the most common types of typography mistakes could go a long way to helping you avoid them in your web design:<\/p>\n

Insufficient typeface variety<\/h3>\n

\"typography<\/a>
\nOne More Time: Typography Is The Foundation Of Web Design<\/em><\/p>\n

Changing up the font and typeface that is being used can help to establish a hierarchy of elements on your site. On the other hand too much variety will just make a website look messy and cluttered \u2013 which is bad too. As a rule of thumb try to use no more than 3 types of fonts on your website at any given point of time \u2013 with a clearly defined role for each in the hierarchy of elements.<\/p>\n

Forgetting about contrast<\/h3>\n

\"typography<\/a>
\n20 Common Typography Mistakes That Designers Make<\/em><\/p>\n

In order for your typography to be clear and readable it needs to contrast against the background of the webpage. While designers take this into account in some cases, they often forget about it in others \u2013 such as in specific areas where the background may be a different color, or in certain cases such as hyperlinks (both clicked and unclicked).<\/p>\n

Using absolute sizes<\/h3>\n

\"typography<\/a>
\nWEB DESIGN IS 95% TYPOGRAPHY<\/em><\/p>\n

Many designers still use pixels to size their font \u2013 mostly because it is the system that they\u2019re familiar with. However on a website using pixels as an absolute size is far from ideal, especially because on smaller screen sizes (such as mobile devices) it will shrink to the point of obscurity. Instead of using pixels it is far better to get into the practice of using ems \u2013 which are a relative size.<\/p>\n

No fallback fonts<\/h3>\n

\"typography<\/a>
\nWeb Design Tips: 7 Common Web Typography Mistakes<\/em><\/p>\n

Although you may take great care picking out your fonts so that they are absolutely perfect for your web design \u2013 it is important to pick out at least two others that may be less-than-perfect but are still good enough. Using fallback fonts is a common practice in web design because they may need to be called upon if the main font choice can\u2019t be loaded, isn\u2019t supported by the browser, or any other issues crop up.<\/p>\n

Cramped leading and tracking<\/h3>\n

\"typography<\/a>
\n20 Common Typography Mistakes That Designers Make<\/em><\/p>\n

Both leading and tracking are important to the readability of your typography because they affect its spacing. Essentially leading is the space between lines, while tracking is the space between individual letters. Unfortunately there is no one-size-fits-all value to use for either, as it will vary depending on the font in use as well as the desired effect that you\u2019re creating in your web design.<\/p>\n

Try to avoid all 5 of these mistakes in your web design and you should see a marked improvement in its typography. If you\u2019re hiring a web developer then be sure to talk to them about your typography choices too, and maybe get their take on the best approach to use.<\/p>\n","protected":false},"excerpt":{"rendered":"

Typography is an extremely important part of web design, but unfortunately many new designers often fail to appreciate just how crucial a role it can play. As such it is<\/p>\n","protected":false},"author":1,"featured_media":26283,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[109,24,1],"tags":[571,922,5885,6202,247,2278,540,6204,686,5887,6203,6205,162,115,420,159,5227,848,113],"yoast_head":"\n5 Common Typography Mistakes in Web Design<\/title>\n<meta name=\"description\" content=\"Typography is an extremely important part of web design, but unfortunately many new designers often fail to appreciate just how crucial a role it can\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 Common Typography Mistakes in Web Design\" \/>\n<meta property=\"og:description\" content=\"Typography is an extremely important part of web design, but unfortunately many new designers often fail to appreciate just how crucial a role it can\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/andysowardsfan\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-06T23:05:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-21T06:23:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.andysowards.com\/blog\/assets\/typography-mistakes-4.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"628\" \/>\n\t<meta property=\"og:image:height\" content=\"269\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andy Sowards\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andysowards\" \/>\n<meta name=\"twitter:site\" content=\"@andysowards\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andy Sowards\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/\",\"url\":\"https:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/\",\"name\":\"5 Common Typography Mistakes in Web Design\",\"isPartOf\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/typography-mistakes-4.jpg\",\"datePublished\":\"2017-03-06T23:05:36+00:00\",\"dateModified\":\"2023-04-21T06:23:25+00:00\",\"author\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415\"},\"description\":\"Typography is an extremely important part of web design, but unfortunately many new designers often fail to appreciate just how crucial a role it can\",\"breadcrumb\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/#primaryimage\",\"url\":\"https:\/\/www.andysowards.com\/blog\/assets\/typography-mistakes-4.jpg\",\"contentUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/typography-mistakes-4.jpg\",\"width\":628,\"height\":269},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.andysowards.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 Common Typography Mistakes in Web Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\",\"url\":\"https:\/\/www.andysowards.com\/blog\/\",\"name\":\"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards\",\"description\":\"Design Inspiration & Business Resources for Creatives\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.andysowards.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415\",\"name\":\"Andy Sowards\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg\",\"caption\":\"Andy Sowards\"},\"description\":\"Im a professional Freelancer specializing in Web Developer, Design, Programming web applications. Im an Avid member of the Design\/Development community and a Serial Blogger. follow me on Twitter @AndySowards\",\"sameAs\":[\"https:\/\/www.andysowards.com\"],\"url\":\"https:\/\/www.andysowards.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"5 Common Typography Mistakes in Web Design","description":"Typography is an extremely important part of web design, but unfortunately many new designers often fail to appreciate just how crucial a role it can","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:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/","og_locale":"en_US","og_type":"article","og_title":"5 Common Typography Mistakes in Web Design","og_description":"Typography is an extremely important part of web design, but unfortunately many new designers often fail to appreciate just how crucial a role it can","og_url":"https:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/","og_site_name":"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards","article_publisher":"http:\/\/facebook.com\/andysowardsfan","article_published_time":"2017-03-06T23:05:36+00:00","article_modified_time":"2023-04-21T06:23:25+00:00","og_image":[{"width":628,"height":269,"url":"https:\/\/www.andysowards.com\/blog\/assets\/typography-mistakes-4.jpg","type":"image\/jpeg"}],"author":"Andy Sowards","twitter_card":"summary_large_image","twitter_creator":"@andysowards","twitter_site":"@andysowards","twitter_misc":{"Written by":"Andy Sowards","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/","url":"https:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/","name":"5 Common Typography Mistakes in Web Design","isPartOf":{"@id":"https:\/\/www.andysowards.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/#primaryimage"},"image":{"@id":"https:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andysowards.com\/blog\/assets\/typography-mistakes-4.jpg","datePublished":"2017-03-06T23:05:36+00:00","dateModified":"2023-04-21T06:23:25+00:00","author":{"@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415"},"description":"Typography is an extremely important part of web design, but unfortunately many new designers often fail to appreciate just how crucial a role it can","breadcrumb":{"@id":"https:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/#primaryimage","url":"https:\/\/www.andysowards.com\/blog\/assets\/typography-mistakes-4.jpg","contentUrl":"https:\/\/www.andysowards.com\/blog\/assets\/typography-mistakes-4.jpg","width":628,"height":269},{"@type":"BreadcrumbList","@id":"https:\/\/www.andysowards.com\/blog\/2017\/typography-mistakes-in-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.andysowards.com\/blog\/"},{"@type":"ListItem","position":2,"name":"5 Common Typography Mistakes in Web Design"}]},{"@type":"WebSite","@id":"https:\/\/www.andysowards.com\/blog\/#website","url":"https:\/\/www.andysowards.com\/blog\/","name":"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards","description":"Design Inspiration & Business Resources for Creatives","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.andysowards.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415","name":"Andy Sowards","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg","caption":"Andy Sowards"},"description":"Im a professional Freelancer specializing in Web Developer, Design, Programming web applications. Im an Avid member of the Design\/Development community and a Serial Blogger. follow me on Twitter @AndySowards","sameAs":["https:\/\/www.andysowards.com"],"url":"https:\/\/www.andysowards.com\/blog\/author\/admin\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/26280"}],"collection":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/comments?post=26280"}],"version-history":[{"count":2,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/26280\/revisions"}],"predecessor-version":[{"id":46098,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/26280\/revisions\/46098"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media\/26283"}],"wp:attachment":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media?parent=26280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/categories?post=26280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/tags?post=26280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}