CINXE.COM
Legibility, Readability, and Comprehension: Making Users Read Your Words
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><title>Legibility, Readability, and Comprehension: Making Users Read Your Words</title><script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="721be388-83be-48ef-9882-002f0dc9dc4f"></script><script>(function(){ var FLAGS = { 'use_server_algolia_search_flag': false,'use_local_user_profile_cert_and_exam_meta_data_apis': false,'use_teamdesk_api_for_user_profile_override': false,'navigation_2024': true,'banner_sales': true,'use_new_homepage_template': true,'use_local_user_profile_attendance_api': true,'enable_user_auth_redesign': true,'can_generate_certificates': true }, SWITCHES = { 'stripe_invoice_auto_send': false,'exclude_bank_transfer_payment': false,'log_exam_access_at_event_records': false,'use_local_exam_data': true,'create_course_reminders': true,'use_teamdesk_message_etl': false,'slack-integration': false,'use_virtual_overview_redesign': false,'use_course_redesign': true,'allow_course_new_fields_editing': false,'send_sign_in_reminders': false }, SAMPLES = { }; window.waffle = { "flag_is_active": function waffle_flag(flag_name) { return !!FLAGS[flag_name]; }, "switch_is_active": function waffle_switch(switch_name) { return !!SWITCHES[switch_name]; }, "sample_is_active": function waffle_sample(sample_name) { return !!SAMPLES[sample_name]; }, "FLAGS": FLAGS, "SWITCHES": SWITCHES, "SAMPLES": SAMPLES }; })(); </script><!-- Google Consent Mode --><script data-cookieconsent="ignore"> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments) } gtag("consent", "default", { ad_personalization: "denied", ad_storage: "denied", ad_user_data: "denied", analytics_storage: "denied", functionality_storage: "denied", personalization_storage: "denied", security_storage: "granted", wait_for_update: 500 }); gtag("set", "ads_data_redaction", true); gtag("set", "url_passthrough", false); </script><!-- End Google Consent Mode--><!-- Google Tag Manager --><script type="text/plain" data-cookieconsent="statistics">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl+ '>m_auth=oQvLGCv6ryZLP7PJLlpI-g>m_preview=env-2>m_cookies_win=x';f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-THJDDHK');</script><!-- End Google Tag Manager --><link rel="preconnect" href="https://media.nngroup.com/"/><link rel="preconnect" href="https://consent.cookiebot.com/"/><link rel="preconnect" href="https://consentcdn.cookiebot.com/"/><link rel="preconnect" href="https://www.googletagmanager.com/"/><link rel="preconnect" href="https://dnn506yrbagrg.cloudfront.net/"/><script src="https://media.nngroup.com/static/js/output.2e14f0aaa8d0.js" async></script><link rel="stylesheet" href="https://media.nngroup.com/static/css/output.55aab3a9e87a.css" type="text/css"><meta name="description" content="Users won’t read web content unless the text is clear, the words and sentences are simple, and the information is easy to understand. You can test all of this."/><meta property="og:description" content="Users won’t read web content unless the text is clear, the words and sentences are simple, and the information is easy to understand. You can test all of this."/><meta name="keywords" content="copywriting, web copy, content usability, legibility, readability, comprehension, words, sentences, reading level, typography"/><meta name="robots" content="noarchive"/><meta name="twitter:dnt" content="on"/><meta property="og:title" content="Legibility, Readability, and Comprehension: Making Users Read Your Words"/><meta property="og:url" content="https://www.nngroup.com/articles/legibility-readability-comprehension/"/><meta property="og:site_name" content="Nielsen Norman Group"/><meta property="og:type" content="article"><meta property="og:image" content="https://media.nngroup.com/media/articles/opengraph_images/Slide005.png"><meta name="twitter:site" content="@nngroup"/><meta name="twitter:card" content="summary_large_image"><link rel="canonical" href="https://www.nngroup.com/articles/legibility-readability-comprehension/"><link rel="search" type="application/opensearchdescription+xml" title="NN/g Search" href="/opensearch.xml"/><link rel="shortcut icon" href="https://media.nngroup.com/static/img/favicon.ico"/><link rel="stylesheet" href="https://media.nngroup.com/static/css/output.9cae50358e22.css" type="text/css"> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "Legibility, Readability, and Comprehension: Making Users Read Your Words", "image": [ "https://media.nngroup.com/media/articles/opengraph_images/Slide005.png" ], "datePublished": "2015-11-15T17:00:00+0000", "dateModified": "2022-04-06T03:29:45+0000", "author": [ { "@type": "Person", "name": "Jakob Nielsen" ,"url": "https://www.nngroup.com/articles/author/jakob-nielsen/" } ] } </script> </head> <body class=" article-detail " > <div class="skip"><a href="#main">Skip to content</a></div> <div class="banner-sales hidden"> <p class="text"> <strong class="label-small"><span>Save up to 20% when you</span> <span>register for 2+ <a href="/course-calendar/"><span class="visually-hidden">upcoming</span> courses</a></span></strong> Until January 21 </p> <button aria-label="Close promotion banner"> <svg class="open-nav" aria-hidden width="16" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-close" /> </svg> </button> </div> <div class="svg-definitions"> <svg width="0" id="icon-error-svg" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 3C8.55228 3 9 3.44772 9 4V9C9 9.55228 8.55229 10 8 10C7.44772 10 7 9.55228 7 9V4C7 3.44772 7.44772 3 8 3ZM8 13.5833C8.55229 13.5833 9 13.1356 9 12.5833C9 12.031 8.55229 11.5833 8 11.5833C7.44772 11.5833 7 12.031 7 12.5833C7 13.1356 7.44772 13.5833 8 13.5833Z" fill="currentColor"/> </svg> <svg width="0" id="icon-error-svg-outlined" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" > <circle cx="12" cy="12" r="11" fill="currentColor" stroke="black" stroke-width="2"/> <circle cx="12" cy="18.625" r="1.5" fill="black"/> <path d="M12 6L12 13.5" stroke="black" stroke-width="2.5" stroke-linecap="round"/> </svg> <svg width="0" id="icon-confirm-svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M3.52197 18.3985L10.5027 25.3792C10.9079 25.7844 11.5699 25.767 11.9532 25.3411L28 7.50989L27.0315 6.63916L11.1992 24.2311L4.44338 17.4753L3.52197 18.3985Z" fill="currentColor" stroke="black"/> </svg> <svg width="0" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" > <g id="logo"> <path d="M0 26.8755V3.69629H4.93343L11.244 17.4356H11.3146V3.69629H15.4258V26.8755H11.1128L4.18181 11.9141H4.11623V26.8755H0Z" fill="currentColor"/> <path d="M23.2194 26.8755V3.69629H28.1579L34.4684 17.4356H34.534V3.69629H38.6503V26.8755H34.3373L27.4012 11.9141H27.3357V26.8755H23.2194Z" fill="currentColor"/> <path d="M65.1485 15.8523C65.1485 18.0045 64.1699 19.0682 62.2177 19.0682C60.1646 19.0682 59.0902 18.0094 59.0902 15.9513C59.0902 13.7348 60.1343 12.7057 62.1521 12.7057C64.301 12.7057 65.1485 13.6705 65.1485 15.8573V15.8523ZM67.1713 11.4738C65.1838 11.4738 64.6945 10.5684 62.2177 10.5684C58.6664 10.5684 56.2098 12.7651 56.2098 15.981C56.2098 18.1034 57.6828 19.9241 59.872 20.597C57.6525 21.2649 56.9311 22.0318 56.9311 23.3132C56.9311 24.7678 58.0813 25.6385 60.0032 25.6385C60.5228 25.6385 61.8595 25.6088 62.5103 25.6088C64.1043 25.6088 65.0829 25.7672 65.7034 26.1877C66.2885 26.5736 66.5811 27.2514 66.5811 28.1172C66.5811 30.1111 65.1485 30.9175 62.6414 30.9175C61.34 30.9175 60.1343 30.6306 59.3525 30.1754C58.7673 29.8241 58.4092 29.1463 58.4092 28.3102C58.4092 27.7956 58.6362 27.2168 58.8682 26.8606L56.1846 27.0882C55.9525 27.7313 55.8567 28.2162 55.8567 28.795C55.8567 31.0759 57.824 32.8619 62.9088 32.8619C66.8484 32.8619 69.3707 31.3034 69.3707 27.8303C69.3707 26.445 68.846 25.3169 67.5698 24.4462C66.5861 23.7684 65.547 23.5408 63.6553 23.5408H61.0524C60.2403 23.5408 59.751 23.2538 59.751 22.7739C59.751 22.2297 60.4975 21.6855 62.6818 20.9186C63.8521 20.9186 64.8963 20.7256 65.7084 20.221C67.2066 19.2958 68.1247 17.6285 68.1247 15.8276C68.1247 14.7985 67.7968 13.898 67.141 13.0965C67.4386 13.2252 67.8321 13.2895 68.2558 13.2895C69.2395 13.2895 69.9911 13.0322 71.005 12.3198L69.4362 10.7712C68.6493 11.2858 68.0288 11.4837 67.1763 11.4837L67.1713 11.4738Z" fill="currentColor"/> <path d="M44.1991 33.5001C44.1184 33.5001 44.0326 33.4852 43.9519 33.4605C43.5282 33.3269 43.2962 32.8767 43.4374 32.4611L53.8642 1.04428C54.0004 0.62869 54.4544 0.401103 54.8781 0.539634C55.3018 0.673217 55.5288 1.11849 55.3926 1.53409L44.9608 32.9509C44.8498 33.2824 44.5371 33.4951 44.1941 33.4951L44.1991 33.5001Z" fill="currentColor"/> </g> <g id="icon-burger"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.5C4.82824e-08 0.947715 0.447715 0.5 1 0.5L19 0.500002C19.5523 0.500002 20 0.947717 20 1.5C20 2.05229 19.5523 2.5 19 2.5L1 2.5C0.447715 2.5 -4.82821e-08 2.05228 0 1.5Z" fill="currentColor" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 17.5C4.82824e-08 16.9477 0.447715 16.5 1 16.5L19 16.5C19.5523 16.5 20 16.9477 20 17.5C20 18.0523 19.5523 18.5 19 18.5L1 18.5C0.447715 18.5 -4.82821e-08 18.0523 0 17.5Z" fill="currentColor" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 9.5C4.82824e-08 8.94772 0.447715 8.5 1 8.5L19 8.5C19.5523 8.5 20 8.94772 20 9.5C20 10.0523 19.5523 10.5 19 10.5L1 10.5C0.447715 10.5 -4.82821e-08 10.0523 0 9.5Z" fill="currentColor" /> </g> <path id="icon-search" d="M29.921 27.5861L22.1292 20.034C24.0015 17.8554 24.9351 15.061 24.7359 12.2322C24.5367 9.40331 23.2199 6.75782 21.0594 4.84601C18.899 2.9342 16.0613 1.90327 13.1366 1.96769C10.2119 2.03211 7.42541 3.1869 5.3568 5.19186C3.2882 7.19681 2.09674 9.89755 2.03028 12.7322C1.96382 15.5669 3.02747 18.3173 4.99997 20.4113C6.97248 22.5053 9.70196 23.7815 12.6206 23.9747C15.5393 24.1678 18.4224 23.2629 20.6702 21.4481L28.462 29.0002L29.921 27.5861ZM4.12735 13.0002C4.12735 11.2202 4.67195 9.48015 5.69228 8.0001C6.71261 6.52006 8.16284 5.36651 9.85958 4.68532C11.5563 4.00413 13.4234 3.8259 15.2246 4.17317C17.0259 4.52044 18.6804 5.3776 19.9791 6.63628C21.2777 7.89495 22.1621 9.49859 22.5204 11.2444C22.8787 12.9903 22.6948 14.7999 21.992 16.4444C21.2891 18.0889 20.099 19.4945 18.5719 20.4835C17.0449 21.4724 15.2496 22.0002 13.4131 22.0002C10.9512 21.9976 8.59091 21.0485 6.85009 19.3613C5.10928 17.674 4.13008 15.3864 4.12735 13.0002Z" fill="currentColor"/> <path id="icon-open-nav" fill-rule="evenodd" clip-rule="evenodd" d="M8.19398 11.5945C7.85227 11.9362 7.29825 11.9362 6.95654 11.5945L1.29969 5.93763L2.53712 4.7002L7.57526 9.73833L12.6134 4.7002L13.8508 5.93764L8.19398 11.5945Z" fill="currentColor"/> <g id="icon-cart"> <circle cx="11.3124" cy="22.5204" r="1.83485" fill="currentColor"/> <circle cx="25.5299" cy="22.5204" r="1.83485" fill="currentColor"/> <path d="M7.56201 3.11621H28.2498C28.8012 3.11621 29.2054 3.63495 29.0707 4.16965L27.1371 11.8434C27.0424 12.2195 26.7041 12.4832 26.3162 12.4832H10.6505" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/> <path d="M1.82202 1H5.3761C5.74546 1 6.07219 1.23947 6.1834 1.59169L11.2469 17.6284C11.3581 17.9806 11.6848 18.2201 12.0542 18.2201H25.8257" stroke="currentColor" stroke-width="1.75" stroke-linecap="square"/> </g> </svg> <svg id="icon-close-svg" viewbox="0 0 22 22" width="0" fill="none" xmlns="http://www.w3.org/2000/svg" > <g id="icon-close"> <path d="M1 1L20.5 20.5" stroke="currentColor" stroke-width="2" /> <path d="M20.5 1L1 20.5" stroke="currentColor" stroke-width="2" /> </g> </svg> </div> <header class="banner-image" > <nav class="nav-main desktop" aria-label="main"> <button class="burger-button"> <svg width="20" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Open main navigation</title> <use href="#icon-burger" /> </svg> </button> <a href="/" class="logo" aria-label="Nielsen Norman Group - Home"> <svg width="71" viewBox="0 0 71 34" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Nielsen Norman Group</title> <use href="#logo" /> </svg> </a> <ul> <li class=" has-subnav"> <button aria-controls="nav-live-courses" aria-expanded="false">Training & UX Certification <svg class="open-nav" aria-hidden width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-open-nav" /> </svg> </button> <ul id="nav-live-courses"> <li class=""> <a href="/courses/">All Courses</a> </li> <li class=""> <a href="/training/live-courses/">Live Online Courses</a> </li> <li class=""> <a href="/team-training/">Private Team Training</a> </li> <li class=""> <a href="/training/bulk-discounts/">Bulk Discounts</a> </li> <li class=""> <a href="/ux-certification/">UX Certification</a> </li> </ul> </li> <li class="selected "> <a aria-current="page" href="/articles/">Articles & Videos</a> </li> <li class=" "> <a href="/consulting/">Consulting</a> </li> <li class=" "> <a href="/reports/">Reports & Books</a> </li> <li class=" has-subnav"> <button aria-controls="nav-about-home" aria-expanded="false">About NN/g <svg class="open-nav" aria-hidden width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-open-nav" /> </svg> </button> <ul id="nav-about-home"> <li class=""> <a href="/about/">Overview</a> </li> <li class=""> <a href="/people/">People</a> </li> <li class=""> <a href="/about/about-client-list/">Clients</a> </li> <li class=""> <a href="/news/">News</a> </li> <li class=""> <a href="/about/contact/">Contact Us</a> </li> </ul> </li> </ul> <div class="cart empty" aria-hidden> <a href=/cart/> <svg width="30" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-cart" /> </svg> <span></span> </a> </div> <div class="profile has-subnav"> <button class="loading" aria-expanded="false">Profile <svg class="open-nav" aria-hidden width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-open-nav" /> </svg> </button> </div> <form role="search" action="/search/" method="get" data-algolia-app-id="ORI4VVAEA5" data-algolia-search-api-key="9f70340d433027a479c60e38395a089c" data-index="Document_production_query_suggestions" > <button class="search-button search-toggle-button" aria-controls="search-form-content" aria-expanded="false"> <svg title="Search" width="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Search</title> <use href="#icon-search"> </svg> </button> <div class="form-content" id="search-form-content"> <label class="visually-hidden" for="search">Search</label> <div id="search-autocomplete"><input id="search" name="q" type="search" /></div> <button type="reset" class="reset-button empty" disabled> <svg width="13" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Reset</title> <use href="#icon-close" /> </svg> </button> <button type="submit" class="search-button"> <svg title="Search" width="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Search</title> <use href="#icon-search"> </svg> </button> </div> </form> </nav> </header> <main id="main"> <section class="padded"> <div class="wrapper"> <article> <span id="gaDataLength" class="ga-data-layer" aria-hidden="true">6</span> <div class="article-header"> <h1 class="article-h1">Legibility, Readability, and Comprehension: Making Users Read Your Words</h1> <div class="article-authors"> <span id="gaDataAuthors" class="ga-data-layer" aria-hidden="true">Jakob Nielsen</span> <div class="author-tile multiple body-small"> <div class="author-photos"> <img height="64" width="64" class="author-photo fluid" src="https://media.nngroup.com/media/people/photos/Jakob-Nielsen-tie-800x800.jpg.256x256_q75_autocrop_crop-smart_upscale.jpg" alt=""> </div> <div class="author-meta"> <span class="authors-list"><a class="ga-article-author" href="/articles/author/jakob-nielsen/"> Jakob Nielsen</a></span> <p class="publication-date"> November 15, 2015 <span id="gaDataPubDate" class="ga-data-layer" aria-hidden="true">2015-11-15</span> </p> </div> </div> </div> <div class="article-share"> <a class="article-share-title ga-share" href="#"> <span class="article-share-icon"></span> <p class="article-share-label body-medium">Share</p> </a> <div class="share-links tooltip"> <div class="tip-arrow"></div> <ul> <li class="body-medium"> <a class="ga-share-email" target="_blank" href="mailto:?subject=NN/g Article: Legibility, Readability, and Comprehension: Making Users Read Your Words&body=https://www.nngroup.com/articles/legibility-readability-comprehension/" data-share-type="Email"> <span class="icon envelope"></span>Email article </a> </li> <li class="body-medium"> <a class="ga-share-linkedin" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.nngroup.com/articles/legibility-readability-comprehension/&title=Legibility, Readability, and Comprehension: Making Users Read Your Words&source=Nielsen%20Norman%20Group" data-share-type="LinkedIn"> <span class="icon linkedin"></span>Share on LinkedIn </a> </li> <li class="body-medium"> <a class="ga-share-twitter" target="_blank" href="https://twitter.com/intent/tweet?url=http://www.nngroup.com/articles/legibility-readability-comprehension/&text=Legibility, Readability, and Comprehension: Making Users Read Your Words&via=nngroup" data-share-type="Twitter"> <span class="icon twitter"></span>Share on Twitter </a> </li> </ul> </div> </div> </div> <div class="article-container"> <div class="article-content"> <div class="article-summary article-heading-small-light"> <span class="article-summary-label"> Summary: </span>Users won’t read web content unless the text is clear, the words and sentences are simple, and the information is easy to understand. You can test all of this. </div> <div class="article-body"> <p>While a website’s visual design is how your company <em>looks</em> online, the site’s writing is how your company <em>sounds</em> online. Tone of voice and great content are crucial for communicating on the Internet. Nevertheless, the best copywriting is for nothing if users don’t read the text.</p> <p>As with other areas of user experience, <strong>content has to survive a cost–benefit analysis</strong> on the part of users:</p> <ul> <li>Cost: how much hassle and pain do I have to suffer on this website?</li> <li>Benefits: What’s in it for me, what will I gain if I read this information?</li> </ul> <p>Definitely provide benefits to users. Why else have a website? But you also need to reduce the barriers to using it (i.e., lower the cost). For online copy, the barriers to use fall into 3 categories: legibility, readability, and comprehension, each of which is defined and discussed below.</p> <div class="table-of-contents"> <div class="content"> <div class="header"> <div class="toc-header"> <h2 class="toc-title article-heading-small"> In This Article: </h2> <span class="expand-icon"></span> </div> <a class="current-element" href="#"></a> </div> <ul class="toc-items"> <li class="article-table-of-content"> <a class="ga-article-toc-item" href="#toc-legibility-1">Legibility</a> </li> <li class="article-table-of-content"> <a class="ga-article-toc-item" href="#toc-readability-2">Readability</a> </li> <li class="article-table-of-content"> <a class="ga-article-toc-item" href="#toc-comprehension-3">Comprehension</a> </li> <li class="article-table-of-content"> <a class="ga-article-toc-item" href="#toc-content-usability-beyond-legibility-readability-and-comprehension-4">Content Usability: Beyond Legibility, Readability, and Comprehension</a> </li> </ul> </div> </div><h2 id="toc-legibility-1">Legibility</h2> <blockquote>Definition: <strong>Legibility</strong> is the lowest-level consideration in content usability: it’s whether people are able to see, distinguish, and recognize the characters and words in your text. Legibility is thus mainly determined by visual design, specifically typography.</blockquote> <p>The main guidelines to ensure legibility are:</p> <ul> <li>Use a reasonably <strong>large default font</strong> size and allow <a href="http://www.nngroup.com/articles/let-users-control-font-size/">users to change the font size</a>. Tiny text dooms legibility — and remember that what counts as “tiny” differs across people, depending on their visual acuity, which sadly declines with age. <a href="http://www.nngroup.com/articles/usability-for-senior-citizens/">Old users</a> need bigger text, but even <a href="http://www.nngroup.com/topic/young-users/">young users</a> appreciate not having to squint to read the text. (<a href="http://www.nngroup.com/articles/usability-of-websites-for-teenagers/">Teens</a>, in particular, often have ghastly posture and don’t sit straight in front of their computer.)</li> <li>Have <a href="http://www.nngroup.com/articles/low-contrast/">high contrast</a> between characters and background. Preferably, employ a <a href="http://www.nngroup.com/articles/text-over-images/">plain background</a> instead of a busy or textured one, since the latter interferes with the recognition of the fine details in the letterforms.</li> <li>Use a <strong>clean typeface</strong>. With today’s high-resolution monitors, <a href="http://www.nngroup.com/articles/serif-vs-sans-serif-fonts-hd-screens/">serif type</a> is fine, but strangely shaped fonts (e.g., emulating handwriting or gothic style) have reduced legibility.</li> </ul> <h3>Testing Legibility</h3> <p>If you follow the guidelines above, as well as other best practices for clean typography, you’ll be unlikely to need special tests for legibility. In regular user testing you can watch out for cases where users lean in toward the screen or say something like “it’s hard to make out the text here.” If you notice such behaviors or comments, you can worry and perform special legibility tests, but otherwise you’re probably safe.</p> <p>The main way to test legibility is to measure reading speed in words per minute for a sample of users, as they read some simple text. Because people read at drastically varying speeds, this is best done as a within-subjects test, where the <em>same</em> test participants test multiple systems. If users are, on average, say, 20% slower when reading from your design than when reading from a reference design, then you know that your site has poor legibility. (See our course on <a href="http://www.nngroup.com/courses/measuring-ux/">Measuring User Experience</a> for more on within-subjects vs. between-subjects study designs.)</p> <p>As an example, see the test we did in 2010 <a href="http://www.nngroup.com/articles/ipad-and-kindle-reading-speeds/">comparing reading speeds</a> on iPad, Kindle, and printed books. (But don’t use the old results to decide what tablet to buy today, since both products now have better screens and better legibility.)</p> <h2 id="toc-readability-2">Readability</h2> <blockquote>Definition: <strong>Readability</strong> measures the complexity of the words and sentence structure in a piece of content. The assumption behind this metric is that complex sentences are harder to parse and read than simpler ones. It’s usually reported as the <strong>reading level</strong> (stated as years of formal education) needed to easily read the text. For example, a 12<sup>th</sup> grade reading level means that somebody with a good high-school diploma will be able to read the text without difficulty.</blockquote> <p>The main guidelines to ensure readability are:</p> <ul> <li>Use <a href="http://www.nngroup.com/articles/web-writing-use-search-keywords/">plainspoken words</a>, the shorter the better. Avoid fancy words and <a href="http://www.nngroup.com/articles/category-names-suck/">made-up terms</a>.</li> <li>Use short sentences. Avoid convoluted sentence structures, especially compound sentences with many subordinate clauses and conjunctions that put a strain on users’ <a href="http://www.nngroup.com/articles/short-term-memory-and-web-usability/">short-term memory</a>, which is a notorioriously weak point. (That last sentence is already pushing it a little :-)</li> <li>Mainly write in the active voice. (<a href="http://www.nngroup.com/articles/passive-voice-is-redeemed-for-web/">Passive voice</a> can be used in rare circumstances when it allows frontloading of key terms.)</li> <li>Aim at an <a href="http://www.nngroup.com/articles/writing-for-lower-literacy-users/">8<sup>th</sup>-grade reading level</a> if targeting a broad consumer audience.</li> <li>If writing for an educated or specialized B2B audience, still target a reading level several steps below the audience’s formal-education level. A <strong>12<sup>th</sup>-grade reading level </strong>is often a good target to make text easy for readers with college degrees. (The article you’re reading right now has an 11<sup>th</sup>-grade reading level, and I hope you find it readable.)</li> <li>Remember that writing at an N<sup>th</sup>-grade reading level is a different matter than writing for students who’re currently attending school in that grade. There are special design guidelines for targeting <a href="http://www.nngroup.com/articles/childrens-websites-usability-issues/">young kids</a>, <a href="http://www.nngroup.com/articles/usability-of-websites-for-teenagers/">teenagers</a>, and <a href="http://www.nngroup.com/courses/designing-millennials/">millennials</a>, and that’s not what we want on a mainstream website for grownup users. We simply want words and sentences that correspond to that level of educational achievement, but written in a mature tone of voice.</li> </ul> <h3>Testing Readability</h3> <p>Readability is usually scored by computer. There are many readability calculators on the web and a common formula is built into Microsoft Word: in Word 2013, the Flesch-Kincaid reading level is available under <em>Review > Spelling & Grammar</em>. (In some versions of Word, readability statistics must first be turned on under <em>File > Options > Proofing</em>.)</p> <p>We actually have a slight preference for a different readability formula called the Fry score, but it doesn’t really matter which formula you use. While there are many readability formulas, they all focus mainly on the length of the words and the length of the sentences. Longer words are usually less common in a language, and longer sentences are usually harder to parse, so these types of metrics make sense. But remember that these counts are only an approximation of what really matters: how hard it is for your readers to make sense of the words and sentences that you use.</p> <p>Reporting the reading level in terms of years of education is also only an approximation. When we say that a reading level of 12 corresponds to a high-school diploma, that assumes that the high-school graduate was diligent enough to study and master all the grade-level materials and subjects. Many people get through high school despite having poor reading skills, and they would struggle with a text that scored at a 12<sup>th</sup>-grade reading level.</p> <h2 id="toc-comprehension-3">Comprehension</h2> <blockquote>Definition: <strong>Comprehension</strong> measures whether a user can understand the intended meaning of a text and can draw the correct conclusions from the text. In the case of instructional or action-oriented content, we also want users to be able to perform the intended actions after reading the text.</blockquote> <p>The main comprehension guidelines are:</p> <ul> <li>Use <a href="http://www.nngroup.com/articles/user-centric-language/">user-centric language</a>; terms familiar to your audience facilitate comprehension.</li> <li>If targeting a specialized audience (e.g., for a B2B, scientific, or enthusiast/fan/hobbyist site), <a href="http://www.nngroup.com/articles/specialized-words-specialized-audience/">use the specialized terminology of that field</a>, even if some of these words are difficult for a broad consumer audience, and thus lower your readability score.</li> <li>Use an <strong>inverted-pyramid writing style: </strong>start with the conclusion or an overview of the main point. People relate better to subsidiary points when they already know the basics.</li> <li><a href="http://www.nngroup.com/articles/minimize-cognitive-load/">Minimize cognitive load</a> by building on existing mental models and reducing the need for users to remember things from one part of text to another.</li> <li><strong>Pictures</strong> or conceptual diagrams can sometimes explain things better than reams of words.</li> <li>Be brief. If you say less, people are more likely to make the effort to understand what you do say.</li> <li>If mobile users are important to you, <a href="http://www.nngroup.com/articles/defer-secondary-content-for-mobile/">be even briefer and simplify even more</a>. The <a href="http://www.nngroup.com/articles/mobile-content-is-twice-as-difficult/">smaller viewport hurts comprehension</a> because users can see little context at a glance and can’t easily refer back to previously read information.</li> </ul> <h3>Testing Comprehension</h3> <p>The main way to test comprehension of web content is <a href="http://www.nngroup.com/courses/usability-testing/">standard user testing</a>, sometimes with small modifications for <a href="http://www.nngroup.com/articles/testing-content-websites/">content testing</a>. The only way we can tell whether people draw the right conclusions from our copy is to have them perform <a href="/articles/task-scenarios-usability-testing/">realistic tasks</a> with the site and observe how they interpret the site’s information as they encounter it.</p> <p>After study participants have performed their test tasks, we can further measure comprehension by giving them various forms of exams. These can range from a simple memory test to more complex questions that truly probe people’s understanding of the material. In one case study, we <a href="http://www.nngroup.com/articles/applying-writing-guidelines-web-pages/">rewrote web pages about a complex B2B product</a>, and after using the new version of the site, users remembered <strong>65%</strong> of the product characteristics we tested for — almost double the <strong>33%</strong> of the material similar test users remembered after using the original content.</p> <p>You can also run a <a href="http://www.nngroup.com/articles/cloze-test-reading-comprehension/">Cloze test</a> on individual pieces of content that are particularly important or which have caused problems in user testing. The Cloze test provides a nice score, so you can rerun the test after a rewrite to see if the text has improved enough.</p> <h2 id="toc-content-usability-beyond-legibility-readability-and-comprehension-4">Content Usability: Beyond Legibility, Readability, and Comprehension</h2> <p>You’d think that the 3 criteria discussed in this article would be enough to ensure great web content. Not so. They are <strong>necessary, but not sufficient</strong>.</p> <p>Just because people <em>can</em> read and understand your content doesn’t mean that they <em>will </em>do so. On the average web-page visit, users <a href="http://www.nngroup.com/articles/how-little-do-users-read/">read only 28% of the words</a>. There’s so enormously much information available on the web that people usually <a href="http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/">scan instead of read</a>.</p> <p>Still, users <a href="http://www.nngroup.com/articles/website-reading/">sometimes do read web content</a>, particularly when it includes <a href="http://www.nngroup.com/articles/write-interesting-facts/">information of interest</a> to them. The key point is to <a href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">grab users quickly</a>, and get them interested before they decide to leave, which they often do right away. <a href="http://www.nngroup.com/articles/headings-pickup-lines/">Headlines are particularly important</a> for fast communication, and the <a href="http://www.nngroup.com/articles/first-2-words-a-signal-for-scanning/">first few words</a> are even more important, given users’ tendency to scan.</p> <p>Thus, in addition to good legibility, readability, and comprehension, do the following:</p> <ul> <li>Write for how <a href="http://www.nngroup.com/articles/how-users-read-on-the-web/">users read on websites</a>: clear headlines, scannable layout.</li> <li>Focus on information of interest to users, not on the things you want to promote.</li> <li>Communicate immediately <a href="http://www.nngroup.com/articles/page-fold-manifesto/">at the top of the page</a> that your content is indeed interesting and useful to users.</li> </ul> <p>Our full-day course on <a href="http://www.nngroup.com/courses/writing/">Writing Compelling Digital Copy</a> has hands-on coverage of the issues raised here.</p> </div> </div> <div class="article-sidebar"> <div class="sidebar-wrapper"> <span id="gaDataAllTopics" class="ga-data-layer" aria-hidden="true">Writing for the Web,readability</span> <div class="sidebar-item related-topics"> <h2 class="article-heading-small">Related Topics</h2> <ul> <li> <span id="gaDataTopic" class="ga-data-layer" aria-hidden="true">Writing for the Web</span> <a class="ga-article-related-topic" href="/topic/writing-web/">Writing for the Web</a> </li> </ul> </div> </div> </div> </div> </article> </div> </section> <section class="learn-more"> <div class="wrapper"> <div class="related-content-container padded"> <h2 class="article-heading-small learn-more-title">Learn More:</h2> <div class="article-videos"> <div class="related-content related-videos"> <ul class="no-bullet three column grid"> <li> <div class="tile video"> <div class="media"> <a class="ga-article-related-video" data-video-title="4 Tips for Bulleted Lists in Digital Content" href="/videos/tips-bulleted-lists-digital-content/?lm=legibility-readability-comprehension&pt=article" tabindex="-1" aria-hidden="true"> <div class="thumbnail-image"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/4_Tips_for_Bulleted_Lists_in_Digital_Content_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/4_Tips_for_Bulleted_Lists_in_Digital_Content_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/4_Tips_for_Bulleted_Lists_in_Digital_Content_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </div> <div class="content"> <p class="related-content-title"> 4 Tips for Bulleted Lists in Digital Content </p> <p class="related-content-details"> <span class="related-content-authors body-small"> Kate Moran </span> · <span class="related-content-duration body-small">3 min</span> </p> </div> </a> </div> </div> </li> <li> <div class="tile video"> <div class="media"> <a class="ga-article-related-video" data-video-title="The Biggest Mistake in Writing for the Web" href="/videos/biggest-mistake-writing-web/?lm=legibility-readability-comprehension&pt=article" tabindex="-1" aria-hidden="true"> <div class="thumbnail-image"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/The_Biggest_Mistake_in_Writing_for_the_Web_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/The_Biggest_Mistake_in_Writing_for_the_Web_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/The_Biggest_Mistake_in_Writing_for_the_Web_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </div> <div class="content"> <p class="related-content-title"> The Biggest Mistake in Writing for the Web </p> <p class="related-content-details"> <span class="related-content-authors body-small"> Kate Moran </span> · <span class="related-content-duration body-small">3 min</span> </p> </div> </a> </div> </div> </li> <li> <div class="tile video"> <div class="media"> <a class="ga-article-related-video" data-video-title="Why Chunking Content is Important" href="/videos/chunking/?lm=legibility-readability-comprehension&pt=article" tabindex="-1" aria-hidden="true"> <div class="thumbnail-image"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Why_Chunking_Content_is_Important_Thumbnail_Kate_M.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Why_Chunking_Content_is_Important_Thumbnail_Kate_M.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Why_Chunking_Content_is_Important_Thumbnail_Kate_M.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </div> <div class="content"> <p class="related-content-title"> Why Chunking Content is Important </p> <p class="related-content-details"> <span class="related-content-authors body-small"> Kate Moran </span> · <span class="related-content-duration body-small">2 min</span> </p> </div> </a> </div> </div> </li> </ul> </div> </div> <div class="related-content related-articles"> <h2 class="article-heading-small related-articles-title">Related Articles:</h2> <ul class="no-bullet three column grid"> <li> <a class="tile ga-article-related-article" data-article-title="Reading Content on Mobile Devices" href="/articles/mobile-content/?lm=legibility-readability-comprehension&pt=article"> <p class="related-content-title">Reading Content on Mobile Devices</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Kate Moran </span> · <span class="related-content-duration body-small">8 min</span> </p> </a> </li> <li> <a class="tile ga-article-related-article" data-article-title="How People Read Online: New and Old Findings" href="/articles/how-people-read-online/?lm=legibility-readability-comprehension&pt=article"> <p class="related-content-title">How People Read Online: New and Old Findings</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Kate Moran </span> · <span class="related-content-duration body-small">9 min</span> </p> </a> </li> <li> <a class="tile ga-article-related-article" data-article-title="How to Present Scientific Findings Online" href="/articles/scientific-findings-online/?lm=legibility-readability-comprehension&pt=article"> <p class="related-content-title">How to Present Scientific Findings Online</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Kate Moran </span> · <span class="related-content-duration body-small">7 min</span> </p> </a> </li> <li> <a class="tile ga-article-related-article" data-article-title="5 Formatting Techniques for Long-Form Content" href="/articles/formatting-long-form-content/?lm=legibility-readability-comprehension&pt=article"> <p class="related-content-title">5 Formatting Techniques for Long-Form Content</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Huei-Hsin Wang and Megan Chan </span> · <span class="related-content-duration body-small">8 min</span> </p> </a> </li> <li> <a class="tile ga-article-related-article" data-article-title="The Layer-Cake Pattern of Scanning Content on the Web" href="/articles/layer-cake-pattern-scanning/?lm=legibility-readability-comprehension&pt=article"> <p class="related-content-title">The Layer-Cake Pattern of Scanning Content on the Web</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Kara Pernice </span> · <span class="related-content-duration body-small">8 min</span> </p> </a> </li> <li> <a class="tile ga-article-related-article" data-article-title="Dealing with Technical or Professional Jargon" href="/articles/technical-jargon/?lm=legibility-readability-comprehension&pt=article"> <p class="related-content-title">Dealing with Technical or Professional Jargon</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Kate Moran </span> · <span class="related-content-duration body-small">9 min</span> </p> </a> </li> </ul> </div> </div> </div> </section> </main> <footer class="footer"> <div class="wrapper row"> <div class="subscribe"> <h2 class="title-large">Subscribe to Our Newsletter</h2> <p class="body-medium">Get weekly UX articles, videos, and upcoming training events straight to your inbox.</p> <form class="form-validated" action="https://nngroup.us4.list-manage.com/subscribe/post?u=538d934a891681a5d850bb4e5&id=7f29a2b335" id="subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" > <div class="form-field"> <div class="outline"> <label for="newsletter-subscribe-email" class="label-medium">Email</label> <input class="body-small" id="newsletter-subscribe-email" placeholder="norman@gmail.com" name="EMAIL" type="email" value=""> </div> <div class="error-local"></div> </div> <input class="button-fill button-small" name="subscribe" type="submit" value="Subscribe"> </form> </div> <div class="follow"> <h2 class="title-large">Follow Us</h2> <ul> <li class="label-large"> <a href="https://www.linkedin.com/company/nielsen-norman-group"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-linkedin.svg" alt=""> LinkedIn </a> </li> <li class="label-large"> <a href="https://www.instagram.com/nngux"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-instagram.svg" alt=""> Instagram </a> </li> <li class="label-large"> <a href="https://www.youtube.com/channel/UC2oCugzU6W8-h95W7eBTUEg"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-youtube.svg" alt=""> Youtube </a> </li> <li class="label-large"> <a href="https://podcasters.spotify.com/pod/show/nngroup "> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-podcast.svg" alt=""> Podcast </a> </li> <li class="label-large"> <a href="https://twitter.com/nngroup"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-x.svg" alt=""> X (Twitter) </a> </li> <li class="label-large"> <a href="https://www.facebook.com/nngux"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-facebook.svg" alt=""> Facebook </a> </li> </ul> </div> </div> <section class="navigation"> <div class="wrapper"> <ul> <li><span class="title-small">Certification</span> <ul> <li class="body-large"> <a href="/ux-certification/">What is UX Certification?</a> </li> <li class="body-large"> <a href="/ux-certification/specialties/">Specialties</a> </li> <li class="body-large"> <a href="/ux-certification/exams/">Exams</a> </li> <li class="body-large"> <a href="/ux-certification/people/">UX Certified People</a> </li> </ul> </li> <li> <span class="title-small">UX Training</span> <ul> <li class="body-large"> <a href="/courses/">All Courses</a> </li> <li class="body-large"> <a href="/training/live-courses/">Live Online Courses</a> </li> <li class="body-large"> <a href="/team-training/">Private Team Training</a> </li> <li class="body-large"> <a href="/course-calendar/">Course Calendar</a> </li> </ul> </li> <li> <span class="title-small">Consulting</span> <ul> <li class="body-large"> <a href="/consulting/expert-review/">Expert Review</a> </li> <li class="body-large"> <a href="/consulting/user-testing/">User Testing</a> </li> <li class="body-large"> <a href="/consulting/user-research/">Customized Research</a> </li> <li class="body-large"> <a href="/consulting/applied-workshops/">Applied Workshops</a> </li> <li class="body-large"> <a href="/consulting/keynote-speaking/">Keynote Speaking</a> </li> </ul> </li> <li> <span class="title-small">Free Guidance</span> <ul> <li class="body-large"> <a href="/articles/">Articles & Videos</a> </li> <li class="body-large"> <a href="https://podcasters.spotify.com/pod/show/nngroup">The NN/g UX Podcast</a> </li> </ul> </li> <li> <span class="title-small">About</span> <ul> <li class="body-large" > <a href="/about/why-nng/">Why NN/g</a> </li> <li class="body-large" > <a href="/about/">About Us</a> </li> <li class="body-large" > <a href="/people/">People</a> </li> <li class="body-large" > <a href="/about/about-client-list/">Clients</a> </li> <li class="body-large" > <a href="/about/contact/">Contact</a> </li> <li class="body-large" > <a href="/return-policy/">Return Policy</a> </li> </ul> </li> </ul> </div> </section> <div class="copyright"> <div class="wrapper"> <p><a href="/copyright-and-reprint-info/">Copyright</a> © 1998-2024 Nielsen Norman Group, All Rights Reserved. </p> <ul> <li id ="cookie-preferences"><a href="javascript:Cookiebot.show();">Cookie Preferences</a></li> <li><a href="/cookie-declaration/">Cookie Declaration</a></li> <li><a href="/privacy-policy/">Privacy Policy</a></li> </ul> </div> </div> </footer> <button class="back-to-top" title="Back to top"><span class="text"><span class="fas fa-caret-up arrow" aria-hidden="true"></span><br>Top</span></button> <script src="https://media.nngroup.com/static/js/output.c386d66e942d.js" defer></script> <script src="https://media.nngroup.com/static/js/article-detail.7e820ce13132.js"></script> <script> window.addEventListener('CookiebotOnAccept', function (e) { Cookiebot.consent.preferences&&window.dataLayer.push({event:"cookieconsent_preferences"}); Cookiebot.consent.statistics&&window.dataLayer.push({event:"cookieconsent_statistics"}); Cookiebot.consent.marketing&&window.dataLayer.push({event:"cookieconsent_marketing"}); }); window.addEventListener('CookiebotOnDecline', function (e) {}); </script> </body> </html>