{"id":1106,"date":"2022-02-19T06:51:56","date_gmt":"2022-02-19T06:51:56","guid":{"rendered":"https:\/\/appliedartand.design\/lj\/?p=1106"},"modified":"2022-02-19T06:51:56","modified_gmt":"2022-02-19T06:51:56","slug":"typography-guidelines-for-website-usability","status":"publish","type":"post","link":"https:\/\/appliedartand.design\/lj\/2022\/02\/19\/typography-guidelines-for-website-usability\/","title":{"rendered":"Typography Guidelines For Website Usability"},"content":{"rendered":"\n

Typography is the detail and the presentation of a story. It represents the voice of an atmosphere, or historical setting of some kind. It can do a lot of things<\/strong><\/em>. (Cyrus Highsmith)<\/p>\n\n\n\n\n\n\n\n

Typography plays a key role in improving the\u00a0usability\u00a0<\/em>of web projects. typography\u00a0<\/em>is about giving better styling to how this information appears, the legibility, and readability definitions about the website\u00a0usability\u00a0<\/em>domain. A usable website is dictated by the extent to which it can be used by specified users to achieve specified goals with efficiency.<\/p>\n\n\n\n

The following is practical\u00a0typography\u00a0<\/em>guidelines which will help you improve the overall\u00a0usability\u00a0<\/em>of your website:<\/p>\n\n\n\n

  1. Keep the number of fonts used at a minimum:<\/strong>\u00a0Using a lot of fonts (more than 3 different fonts) makes a web site look unstructured and unprofessional<\/li>
  2. Use sans serif fonts instead of serif for content:<\/strong>\u00a0Sans serif fonts are more suited for the screen than serif fonts which are better suited for headings and print<\/li>
  3. Ensure that proper text and text size is used:<\/strong>\u00a0It is recommended that Arial Trebuchet and Georgia are at 10pts+, Times New Roman at 12pts+ whilst Comic Sans and Impact fonts are not used<\/li>
  4. Content must make use of mixed capitalization:<\/strong>\u00a0Having all text in caps or small caps makes it difficult for the user to read and scan it. All caps text makes a web site look unprofessional and untrustworthy<\/li>
  5. Use standard fonts for web site fonts:<\/strong>\u00a0Users are more familiar with standard fonts and can thus read them faster<\/li>
  6. Character spacing should not be minimized:<\/strong>\u00a0Altering the character spacing to fit in more text, makes it more dense and difficult to scan<\/li>
  7. Limit the use of different colors for fonts:<\/strong>\u00a0When text is over-designed, it affects its meaning. Additionally, users may mistake over-designed text for adverts. Thus it is recommended that 4 different colors or less are used to color text<\/li>
  8. Do not use blue for content:<\/strong>\u00a0Users associate blue text with links and can thus try and click on it<\/li>
  9. Avoid coloring text in red or green:<\/strong>\u00a0Since color blindness is a common condition, especially amongst men (8% of men are color blind), it is advisable to always use other cues in addition to color to distinguish important text. It is also advisable to avoid the use of red and green since red and green color blindness is the most common form of color blindness<\/li>
  10. Do not use the same or similar colors for text and background:<\/strong>\u00a0The more visible the text, the faster users are able to scan and read it<\/li>
  11. Numbers having 5 digits or more should have a thousand separator:<\/strong>\u00a0The thousands separator makes it easier for users to quickly scan and interpret numbers<\/li>
  12. Do not use moving or blinking text:<\/strong>\u00a0Although the technologies with which they are implemented has changed, these techniques that have been with us since the early days of the web are still found in some web sites. Their objective is still the same \u2013 to draw the users\u2019 attention. However, they convey an unprofessional image and may lead to users leaving the website.<\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"

    Typography is the detail and the presentation of a story. It represents the voice of an atmosphere, or historical setting of some kind. It can do a lot of things. (Cyrus Highsmith)<\/p>\n","protected":false},"author":47,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[178],"tags":[15,18],"class_list":["post-1106","post","type-post","status-publish","format-standard","hentry","category-aad-086-sp22","tag-typography","tag-web-design"],"_links":{"self":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/users\/47"}],"replies":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/comments?post=1106"}],"version-history":[{"count":1,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1106\/revisions"}],"predecessor-version":[{"id":1109,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1106\/revisions\/1109"}],"wp:attachment":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/media?parent=1106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/categories?post=1106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/tags?post=1106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}