{"id":6297,"date":"2021-02-10T01:43:10","date_gmt":"2021-02-10T00:43:10","guid":{"rendered":"https:\/\/moxieglobal.co.uk\/?p=6297"},"modified":"2022-10-20T10:53:17","modified_gmt":"2022-10-20T09:53:17","slug":"7-ways-to-improve-website-readability-in-2022","status":"publish","type":"post","link":"https:\/\/moxieglobal.co.uk\/zh\/7-ways-to-improve-website-readability-in-2022","title":{"rendered":"7 Ways To Improve Website Readability In 2022"},"content":{"rendered":"<div id=\"toc\" style=\"background: #f9f9f9;border: 1px solid #aaa;display: table;margin-bottom: 1em;padding: 1em;width: 350px;\">\n<p class=\"toctitle\" style=\"font-weight: 700;text-align: center;\">\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/p>\n<ul class=\"toc_list\">\n<li><a href=\"#toc-0\">Provide Text Alternatives For All Images, Video, And Audio<\/a><\/li>\n<li><a href=\"#toc-1\">Typefaces And Fonts<\/a><\/li>\n<li><a href=\"#toc-2\">Display Content Clearly On The Page<\/a><\/li>\n<li><a href=\"#toc-3\">Your Checklist For Clear, Readable Website Text<\/a><\/li>\n<li><a href=\"#toc-4\">Website Accessibility Best Practices<\/a><\/li>\n<li><a href=\"#toc-5\">Accessibility Checklist<\/a><\/li>\n<li><a href=\"#toc-6\">Opens Sans<\/a><\/li>\n<li><a href=\"#toc-7\">Link Colors<\/a><\/li>\n<\/ul>\n<\/div>\n<p>Density of content has a major impact on your content\u2019s readability. Density is affected by spacing options such as line height, letter spacing and text size. If you find a balance between all of these so that the content is neither too compact nor too widely spaced, you will have perfect density that is both readable and scannable. Hopefully, this guide has equipped you with the necessary information to effectively drive users to your site through the best fonts for website.<\/p>\n<p>Steer clear of center- or right-alignment for body text. While centered text can work well for titles and headings, it\u2019s tough to read more than a few lines of it. That\u2019s because the starting place of each line of text changes with every line, meaning that readers have to search to find the beginning of each line.<\/p>\n<p><img decoding=\"async\" class='aligncenter' style='display: block;margin-left:auto;margin-right:auto;' src=\"https:\/\/globalcloudteam.com\/wp-content\/uploads\/2021\/02\/image-hqlzHdYE0TFXURmW.png\" width=\"302px%\" alt=\"Website readability best practices\"\/><\/p>\n<p>Not having a big, clear CTA button on your page is a massive design and marketing flaw. All your webpages\u2014including interior pages\u2014need to have a compelling CTA button to streamline the process for potential customers. Use shorter, information-filled paragraphs that add to prospective clients\u2019 knowledge about your brand on these webpages. Each new section should have fresh, relevant information. This way, you can eliminate unnecessary textual clutter and emphasize your call-to-action in a better way. While you\u2019ll need to provide prospective clients relevant, in-depth information through your blog posts, your web pages must use as little text as possible.<\/p>\n<h2 id=\"toc-0\">Provide Text Alternatives For All Images, Video, And Audio<\/h2>\n<p>Keep it stylish but simple, and make sure CTA buttons stand out with constructive use of text. Actually, the easy-to-read font is an essential part of most popular brands worldwide. From BMW to Airbnb and even Nokia, they have invested heavily in the websites\u2019 best fonts. 87% of smartphone users utilize their devices to perform at least one Internet search a day. Over half of all searches on Google are carried out using mobile devices. Google\u2019s studies have found that visitors tend to find simple websites more appealing than complex ones.<\/p>\n<p>Allysa is always eager to learn something new whenever she got some free time and that includes SEO and inbound marketing. She also has a passion for traveling and discovering the unknown. Both the \u2018Important\u2019 and \u2018Alert\u2019 tab shows errors that have impacted your search rankings. Start fixing the errors in the \u2018Important\u2019 tab because it needs your attention more than the \u2018Alert\u2019. You will see a list of errors and the actions you need to take to fix them. They\u2019re a lifesaver if you want a quick insight into how your content is performing.<\/p>\n<p>By 2023, e-commerce purchases are expected to account for 22% of the global goods market. It\u2019s up to you to give them relevant content that encourages them to perform conversions. Uber uses a straightforward design with minimal text and makes the CTA extremely obvious. The homepage highlights UberEats and makes it easy for visitors to order food with a click of the \u201cOrder now\u201d CTA button. Uber\u2019s website uses the same horizontal menu that Internet users have come to expect. Visitors will also find that all their options are highlighted in front of them in the most streamlined manner, thereby helping Uber\u2019s conversion rates.<\/p>\n<p>Just make sure that after you settle on a font, try doing some user testing to assess how users respond to your font. Identifying the best fonts for a website can be challenging. What\u2019s more, with more and more people using mobile devices for browsing, today\u2019s best practices for web font continue to evolve, making the process even more daunting. So, use the same fonts you use for the website across all your other digital channels and hard copy materials to give your customers a uniform and steady picture of your brand.<\/p>\n<p>Just make sure that you don\u2019t sacrifice readability for creativity. There\u2019s a reason books have been printed since time immemorial with black ink on white paper. If black and white seem too unexciting, you can always try gray, navy, brown, or another dark color. Emphasis of Important ElementsAnother key factor is emphasis of certain elements within the body content.<\/p>\n<p>The readability of a particular text depends on content and typography . It is no secret that relevant images serve the purpose of storytelling and emotional appeal. We discussed both these elements in the six principles that make users stick to your copy. Also, you must avoid smaller fonts as larger fonts are easier to read.<\/p>\n<p>In this guide, we will cover 15 of the most common practices that improve website accessibility. Style, font selection, hierarchy, and how text blocks are divided to assist reading are all important aspects of good website typography. When used in books and written materials, it\u2019s OK, but it may become messy online. Without hyphenation, text block spacing may be a sign that your lines are too long or too short.<\/p>\n<h2 id=\"toc-1\">Typefaces And Fonts<\/h2>\n<p>If you use Jimdo\u2019s Style Editor to choose a color scheme, it\u2019s a safe bet that you\u2019ll start with a color combination that works well. You can also use online web accessibility tools that measure the contrast for you and tell you if you\u2019re in an acceptable range. By providing these focus points,, you make the body text extremely scannable. Bolding key lines of text immediately attracts the user\u2019s eye and is therefore a very important element in presenting important information.<\/p>\n<p>Occasionally, though, the text layout will need some styling and decoration. This may be a header or typography used in the overall design of the website . No matter what the form, it is important to always stay within the limits of readability. Yes, it is essential to be creative and use decorative styling, but the typography must be legible or else it becomes almost useless. Text boxes are excellent for separating unrelated content on a single page. They help move the user\u2019s eyes through a complex layout.<\/p>\n<p><img decoding=\"async\" class='aligncenter' style='display: block;margin-left:auto;margin-right:auto;' src=\"https:\/\/globalcloudteam.com\/wp-content\/uploads\/2021\/10\/shutterstock_144281596-min.jpg\" width=\"302px%\" alt=\"Website readability best practices\"\/><\/p>\n<p>Just because someone is a good designer doesn\u2019t mean they know how to design for the web. And just because someone designs websites doesn\u2019t mean they know how to design a site that will convert. Pay close attention to the principles presented in this post, and use them if necessary to make sure your designer designs a site that\u2019s optimized to get the results you need. In its survey of screen reader users, WebAIM found that 26% of screen reader users frequently or always use these landmarks when navigating a page. Given the vital importance of forms to eCommerce sites, it\u2019s astonishing how many inaccessible forms there are. Often this is because old browsers didn\u2019t allow much in the way of styling form elements, so developers faked them with other HTML elements.<\/p>\n<p>Notice how the boxes are defined by their background instead of a border. Use of SeparatorsSeparators are a simple and easy way to divide text into sections in a clean and organized manner. They can be used to divide hierarchy elements, such as headers and body text. Density of TextDensity of text refers to the amount of words you place in one area.<\/p>\n<h2 id=\"toc-2\">Display Content Clearly On The Page<\/h2>\n<p>It\u2019s best to put your CTA where it\u2019s likely to benefit you through more conversions. For instance, blog posts on your website should have CTAs at the top and bottom, so users can see the button before and after reading the piece. It\u2019s usually fine to use longer paragraphs for your blog posts and in-depth content.<\/p>\n<p>In tablet and mobile view, icon images should become larger for the user, making it easier for them to identify and click. Space should also be available for the user to easily scroll through the page without accidentally clicking on an active element on the page. A reasonable starting point for line-height for most fonts is 1.5 times the font size.<\/p>\n<p>As such, you should use it only for parts of your site that don\u2019t require as much reading and aren\u2019t as important. Overall, you\u2019d be smart to think twice before using reverse type. Make sure body fonts are large enough to read so readers don\u2019t give up because they\u2019re tired of squinting. People also started to realize that you have only a limited amount of time to get visitors\u2019 attention and let them know they\u2019re in the right place.<\/p>\n<ul>\n<li>Make sure that the contrast between your background and your text is strong enough that text is easy to read.<\/li>\n<li>The following examples show creative uses of typography.<\/li>\n<li>Clickable images that are too close together become difficult to use for mobile device users as well.<\/li>\n<li>The best way to test the accessibility of your site is to test with real people with a range of disabilities.<\/li>\n<\/ul>\n<p>However, you have to be looking to do so, since it\u2019s not going to happen by default. However, not all the examples are good; despite what the guidance says, don\u2019t use ARIA menu roes for site nav, and don\u2019t use ARIA grid unless you\u2019re trying to recreate Excel. A common theme in this article has been using the correct HTML elements. The Guide To Writing Good HTML introduces the necessary concepts. This makes focusing an input much easier for someone with motor control difficulties \u2013 or maybe for you, trying to check a tiny checkbox on a small screen on a bumpy train.<\/p>\n<h2 id=\"toc-3\">Your Checklist For Clear, Readable Website Text<\/h2>\n<p>Limiting yourself to two typefaces usually works well to create a clear hierarchy within a type system. In our previous article, we discussed things like color, links, and forms. In this article, we&#8217;ll be discussing best practices around spacing, imagery, and typography. It takes a coordinated team effort in making sure a site is accessible. To create a readable type design, you must choose and be loyal to a specific font palette. Web designers should use one to three font families on a website.<\/p>\n<h2 id=\"toc-4\">Website Accessibility Best Practices<\/h2>\n<p>White space helps to offset large amounts of text and helps the user\u2019s eyes flow through the text. It also provides separation between elements in the layout, including graphics and text. Also, the color contrasts, font weights, and the number of times the fonts change determine whether users will slow down to look at what you have or move to another page.<\/p>\n<h2 id=\"toc-5\">Accessibility Checklist<\/h2>\n<p>Luckily, the W3C has a standard on how to make websites accessible. There are three conformance levels with \u2018A\u2019 being the lowest level of accessibility. When creating a website, there\u2019s a lot <a href=\"https:\/\/forexbitcoin.info\/the-benefits-of-forex-trading\/\">website readability<\/a> of factors to consider. For example, it\u2019s especially important to ensure your site is user-friendly for all people equally. This is where website accessibility practices come into action.<\/p>\n<p>This veers into issues beyond the scope of this article but is still very important. Focus points are certain elements or objects within the layout that attract, or are supposed to attract, the user\u2019s attention. This could be a header, a graphical element, a button, etc. Readability is the ease with which a reader can understand a written text.<\/p>\n<p>Tutorial9 Pay attention to how this article on Tutorial9 provides a good amount of spacing and a nice border around images. The text flows, and the image doesn\u2019t detract from the text. PSD.TUTSPLUS and every Envato blog have very readable content.<\/p>\n<h2 id=\"toc-6\">Opens Sans<\/h2>\n<p>Plenty of people alter their browser settings and zoom in, and your website should be able to react to these changes. You can mix and max fonts, even handwritten or experimental typefaces. There is a lot more to typography than just picking an attractive font. When it comes to text organization, too much or too little leading might be unpleasant to read, therefore creating a bad example of typography in web design. A typeface consists of a collection of alphabetic and numeric characters that have been given a special appearance and feel.<\/p>\n<p>For most languages, the language tag is pretty easy to determine. We\u2019ve dealt with low contrast, links, and form inputs above. Now let\u2019s look at how we can avoid the other very common errors.<\/p>","protected":false},"excerpt":{"rendered":"<p>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 Provide Text Alternatives For All Images, Video, And Audio Typefaces And Fonts Display Content Clearly On The Page Your Checklist For Clear, Readable Website Text Website Accessibility Best Practices Accessibility Checklist Opens Sans Link Colors Density of content has a major impact on your content\u2019s readability. Density is affected by spacing options such as&hellip;&nbsp;<a href=\"https:\/\/moxieglobal.co.uk\/zh\/7-ways-to-improve-website-readability-in-2022\" rel=\"bookmark\">\u9605\u8bfb\u66f4\u591a &raquo;<span class=\"screen-reader-text\">7 Ways To Improve Website Readability In 2022<\/span><\/a><\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[82],"tags":[],"_links":{"self":[{"href":"https:\/\/moxieglobal.co.uk\/zh\/wp-json\/wp\/v2\/posts\/6297"}],"collection":[{"href":"https:\/\/moxieglobal.co.uk\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/moxieglobal.co.uk\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/moxieglobal.co.uk\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/moxieglobal.co.uk\/zh\/wp-json\/wp\/v2\/comments?post=6297"}],"version-history":[{"count":1,"href":"https:\/\/moxieglobal.co.uk\/zh\/wp-json\/wp\/v2\/posts\/6297\/revisions"}],"predecessor-version":[{"id":6298,"href":"https:\/\/moxieglobal.co.uk\/zh\/wp-json\/wp\/v2\/posts\/6297\/revisions\/6298"}],"wp:attachment":[{"href":"https:\/\/moxieglobal.co.uk\/zh\/wp-json\/wp\/v2\/media?parent=6297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/moxieglobal.co.uk\/zh\/wp-json\/wp\/v2\/categories?post=6297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/moxieglobal.co.uk\/zh\/wp-json\/wp\/v2\/tags?post=6297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}