{"id":1084,"date":"2025-12-09T06:54:15","date_gmt":"2025-12-09T14:54:15","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/calverta\/?p=1084"},"modified":"2025-12-09T06:54:16","modified_gmt":"2025-12-09T14:54:16","slug":"line-width-in-digital-typography-for-accessibility-and-comprehension","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/","title":{"rendered":"Line Width in Digital Typography for Accessibility and Comprehension"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">The measure<\/h2>\n\n\n\n<p>Choosing the right line width (called the &#8220;measure&#8221;) for a website is a balance. It involves how our eyes work, how our brains process information, and specific accessibility rules.<\/p>\n\n\n\n<p>Research shows that the best line width for reading is between 50 and 75 characters per line (CPL). The &#8220;sweet spot&#8221; is often considered to be 66 characters.<sup>1<\/sup><\/p>\n\n\n\n<p>There are also strict limits for accessibility. The Web Content Accessibility Guidelines (WCAG) state you should not exceed 80 characters for English and other Latin scripts. For Chinese, Japanese, and Korean (CJK) text, the limit is 40 characters.<sup>2<\/sup><\/p>\n\n\n\n<p>If lines are too long, readers lose their place and get tired. If lines are too short, the eyes have to jump back and forth too often.<\/p>\n\n\n\n<p>This post explains the science behind these numbers and how to code them correctly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How our eyes read<\/h2>\n\n\n\n<p>To design a good reading experience, we need to understand how eyes move.<\/p>\n\n\n\n<p>Reading is not a smooth process. It is a series of quick jumps and pauses.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Jumps and pauses<\/h3>\n\n\n\n<p>Our eyes do not glide across text. They make rapid jumps called <strong>saccades<\/strong> (lasts 20\u201350 milliseconds). Between jumps, they pause to focus. This pause is called a <strong>fixation<\/strong> (lasts about 200\u2013250 milliseconds).<sup>3<\/sup><\/p>\n\n\n\n<p>When you focus on a word, you can clearly see about 3\u20134 characters to the left and 14\u201315 characters to the right.4 If a line is too long (over 80 characters), your eyes have to jump too far. This makes it hard for your brain to predict the next words, leading to errors and backtracking.<sup>6<\/sup><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Moving to the next line<\/h3>\n\n\n\n<p>The hardest part of reading is the &#8220;return sweep.&#8221; This is when your eyes jump from the end of one line back to the start of the next line.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Short Lines (&lt;45 characters): The jump is small and accurate.<\/li>\n\n\n\n<li>Optimal Lines (50\u201375 characters): The jump is comfortable. The eyes might land slightly off, but they correct it quickly.<\/li>\n\n\n\n<li>Long Lines (&gt;80 characters): The jump is too long. The eyes often miss the start of the next line. Readers may skip a line or read the same line twice.<sup>8<\/sup><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Going &#8220;blind&#8221; briefly<\/h3>\n\n\n\n<p>During a return sweep, your brain blocks your vision so you don&#8217;t see a blur. This is called <strong>saccadic masking<\/strong>.<sup>10<\/sup><\/p>\n\n\n\n<p>For a split second, the reader is essentially blind. Long lines mean longer &#8220;blackouts.&#8221; This forces the brain to work harder to remember where it was. This is why reading wide text on a large monitor feels tiring.<sup>8<\/sup><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Brain power and mental effort<\/h2>\n\n\n\n<p>Line width affects &#8220;cognitive load,&#8221; which is the amount of mental effort used to understand text.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Wasted brain power<\/h3>\n\n\n\n<p>Bad design forces readers to use brain power just to follow the text, instead of understanding the content.<sup>12<\/sup><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Too Wide<\/strong>: Readers must concentrate hard just to keep their eyes on the right horizontal line. <\/li>\n\n\n\n<li><strong>Too Narrow<\/strong>: Sentences get broken up into small, choppy pieces. The brain has to hold these pieces in memory until the next line completes the thought.<sup>14<\/sup><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Speed vs. understanding<\/h3>\n\n\n\n<p>Some studies show that people might read faster with long lines because they make fewer eye movements.<\/p>\n\n\n\n<p>However, <strong>speed does not mean understanding<\/strong>.<\/p>\n\n\n\n<p>When lines are long, people tend to skim. They scan the text in an &#8220;F-pattern&#8221; and miss details. The 50\u201375 character range is the best balance. It allows for a comfortable speed where users actually remember what they read.<sup>1<\/sup><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The &#8220;River Effect&#8221;<\/h3>\n\n\n\n<p>For people with dyslexia, bad spacing can create &#8220;rivers.&#8221; These are distracting white gaps that run vertically down the paragraph. This happens often with &#8220;justified&#8221; text (text aligned to both left and right edges).<\/p>\n\n\n\n<p>Shorter lines (60\u201370 characters) with left-aligned text prevent this. The uneven right edge helps readers keep their place.<sup>16<\/sup><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Accessibility rules (WCAG)<\/h2>\n\n\n\n<p>The Web Content Accessibility Guidelines (WCAG) are the global standard for web accessibility. Following them helps people with disabilities and improves the experience for everyone.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The 80-Character Rule<\/h3>\n\n\n\n<p>WCAG Guideline 1.4.8 (Level AAA) recommends:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Latin Scripts (English, etc.):<\/strong> No more than 80 characters wide.<\/li>\n\n\n\n<li><strong>CJK Scripts (Chinese, Japanese, Korean)<\/strong>: No more than 40 characters wide.<sup>2<\/sup><\/li>\n<\/ul>\n\n\n\n<p>This rule protects users with low vision and cognitive disabilities who struggle with long lines.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mobile and zooming<\/h3>\n\n\n\n<p>Guideline 1.4.10 (Reflow) says users must be able to view content at a width of 320 pixels without scrolling sideways.<sup>19<\/sup><\/p>\n\n\n\n<p>This means your design must be responsive.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>On Mobile<\/strong>: Lines will naturally be short (30\u201350 characters). This is okay.<\/li>\n\n\n\n<li><strong>On Desktop<\/strong>: You must stop the line from getting too wide. Never let text stretch to fill a huge screen.<sup>20<\/sup><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Chinese, Japanese, and Korean (CJK) Text<\/h2>\n\n\n\n<p>There is a big difference between alphabetic text (like English) and logographic text (like Chinese). The limit for CJK text is <strong>40 characters<\/strong>, which is half the limit for English.<sup>2<\/sup><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">More information per character<\/h3>\n\n\n\n<p>Chinese characters contain more meaning than English letters.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>English:<\/strong> &#8220;The quick brown fox&#8221; (19 characters).<\/li>\n\n\n\n<li><strong>Chinese:<\/strong> &#8220;\u5feb\u901f\u7684\u68d5\u8272\u72d0\u72f8&#8221; (7 characters).<\/li>\n<\/ul>\n\n\n\n<p>A line of 40 Chinese characters holds roughly the same amount of information as 80 English characters. If you allow 80 Chinese characters, the line becomes too dense and exhausting to read.<sup>18<\/sup><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Visual complexity<\/h3>\n\n\n\n<p>CJK characters are complex and square-shaped. They all look similar in shape compared to the varied shapes of English words. This makes it harder for the eye to scan quickly. The 40-character limit helps keep the reading rhythm steady.<sup>23<\/sup><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Font size and line height<\/h2>\n\n\n\n<p>You cannot choose line width in isolation. It works in a triangle with Font Size and Line Height (leading).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The math<\/h3>\n\n\n\n<p>A good rule of thumb for finding the right width is: Font Size x 30.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If your font is 16px: $16 \\times 30 = 480px$.<\/li>\n\n\n\n<li>This usually fits about 60 characters.<sup>25<\/sup><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Adjusting line height<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Short Lines<\/strong>: Use tighter spacing (1.2 \u2013 1.35). If the spacing is too big, the text block falls apart.<\/li>\n\n\n\n<li><strong>Long Lines<\/strong>: Use more spacing (1.5 \u2013 1.8). The eyes need a clear lane of white space to guide them back to the start of the next line.<sup>26<\/sup><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to code it (CSS)<\/h2>\n\n\n\n<p>Modern web design uses &#8220;fluid&#8221; coding to handle these rules across different screen sizes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The ch unit<\/h3>\n\n\n\n<p>CSS has a unit called ch. It equals the width of the &#8220;0&#8221; character in your font.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Code<\/strong>: max-width: 65ch;<\/li>\n\n\n\n<li><strong>Note<\/strong>: In many fonts, the &#8220;0&#8221; is wider than an average letter. So, 65ch might actually hold 70 or 75 letters. This is usually fine, but you should check it visually.<sup>28<\/sup><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">The best CSS snippet<\/h3>\n\n\n\n<p>The best way to handle line width is to set a maximum limit but allow it to shrink for mobile screens.<\/p>\n\n\n\n<pre class=\"wp-block-code has-bucktooth-white-color has-star-canvas-background-color has-text-color has-background has-link-color wp-elements-f15ef3de12127b22ec64c0786b2deca7\"><code>article {\n&nbsp; width: 100%; &nbsp; &nbsp; &nbsp; \/* Fits small screens <em>\/ &nbsp; max-width: 65ch; &nbsp; \/<\/em> Stops growing on large screens <em>\/ &nbsp; margin-inline: auto; \/<\/em> Centers the text *\/\n}<\/code><\/pre>\n\n\n\n<p>For CJK text, use em units instead of ch for better stability: max-width: 40em;.<sup>18<\/sup><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How users act<\/h2>\n\n\n\n<p>We know how users behave from testing thousands of websites.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Avoiding Long Lines<\/strong>: Users often ignore text that stretches across the whole screen. It looks like too much work.<\/li>\n\n\n\n<li><strong>Scanning<\/strong>: Users rarely read every word. They scan in patterns. Optimal line widths encourage a &#8220;Z-pattern&#8221; (reading left to right), which is better for understanding than the &#8220;F-pattern&#8221; (skipping the ends of lines).<sup>8<\/sup><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Final recommendations<\/h2>\n\n\n\n<p>To make your website readable and accessible, follow these simple rules:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Ideal Width<\/strong>: Aim for 65 characters per line for English\/Latin text.<\/li>\n\n\n\n<li><strong>The Range<\/strong>: Anything between 50 and 75 characters is safe.<\/li>\n\n\n\n<li><strong>The Hard Limit<\/strong>: Never exceed 80 characters (or 40 characters for CJK).<\/li>\n\n\n\n<li><strong>Use Left Alignment<\/strong>: Avoid &#8220;Justified&#8221; text to prevent visual rivers.<\/li>\n\n\n\n<li><strong>Code It<\/strong>: Use max-width: 65ch for the main text container.<\/li>\n\n\n\n<li><strong>Adjust Spacing<\/strong>: Use a line-height of 1.5 for standard text.<\/li>\n<\/ol>\n\n\n\n<p>By sticking to these limits, you ensure that your content is physically comfortable to read and accessible to everyone.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Works cited<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/optimal-line-length-for-readability\/\">Optimal Line Length for Readability <\/a>&#8211; UXPin, accessed December 8, 2025, <\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/visual-presentation.html\">Understanding Success Criterion 1.4.8: Visual Presentation<\/a> | WAI &#8211; W3C, accessed December 8, 2025,<\/li>\n\n\n\n<li><\/li>\n<\/ol>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The measure Choosing the right line width (called the &#8220;measure&#8221;) for a website is a balance. It involves how our eyes work, how our brains process information, and specific accessibility rules. Research shows that the best line width for reading is between 50 and 75 characters per line (CPL). The &#8220;sweet spot&#8221; is often considered [&hellip;]<\/p>\n","protected":false},"author":1766,"featured_media":1085,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"[{\"id\":\"638f4961-2fb5-4dcc-af11-47e51ac38c27\",\"content\":\"<a href=\\\"https:\\\/\\\/readabilitymatters.org\\\/articles\\\/increase-readability-reduce-cognitive-load\\\">Increase Readability, Reduce Cognitive Load: Freeing Working Memory for Processing Meaning<\\\/a>, accessed December 8, 2025,\"}]"},"categories":[1],"tags":[],"class_list":["post-1084","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Line Width in Digital Typography for Accessibility and Comprehension | Bad Advice Alan<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Line Width in Digital Typography for Accessibility and Comprehension | Bad Advice Alan\" \/>\n<meta property=\"og:description\" content=\"The measure Choosing the right line width (called the &#8220;measure&#8221;) for a website is a balance. It involves how our eyes work, how our brains process information, and specific accessibility rules. Research shows that the best line width for reading is between 50 and 75 characters per line (CPL). The &#8220;sweet spot&#8221; is often considered [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/\" \/>\n<meta property=\"og:site_name\" content=\"Bad Advice Alan\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-09T14:54:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-09T14:54:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@AlanCalvert\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/\"},\"author\":{\"name\":\"Alan\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/#\/schema\/person\/b4e02e8d5dd36413742b99a2c292fcde\"},\"headline\":\"Line Width in Digital Typography for Accessibility and Comprehension\",\"datePublished\":\"2025-12-09T14:54:15+00:00\",\"dateModified\":\"2025-12-09T14:54:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/\"},\"wordCount\":1250,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg?fit=1200%2C630&ssl=1\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/\",\"url\":\"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/\",\"name\":\"Line Width in Digital Typography for Accessibility and Comprehension | Bad Advice Alan\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg?fit=1200%2C630&ssl=1\",\"datePublished\":\"2025-12-09T14:54:15+00:00\",\"dateModified\":\"2025-12-09T14:54:16+00:00\",\"author\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/#\/schema\/person\/b4e02e8d5dd36413742b99a2c292fcde\"},\"breadcrumb\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg?fit=1200%2C630&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg?fit=1200%2C630&ssl=1\",\"width\":1200,\"height\":630,\"caption\":\"Visual guide on line width. Lines that are too long (>80 CPL) cause eye strain and missed returns, while lines that are too short (\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blogs.oregonstate.edu\/calverta\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Line Width in Digital Typography for Accessibility and Comprehension\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/#website\",\"url\":\"https:\/\/blogs.oregonstate.edu\/calverta\/\",\"name\":\"Bad Advice Alan\",\"description\":\"How and why I do the things I do in OSU Drupal\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blogs.oregonstate.edu\/calverta\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/#\/schema\/person\/b4e02e8d5dd36413742b99a2c292fcde\",\"name\":\"Alan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/d810a700fe21ae9d716b83f97d7c81bec935e082cf975f7237b0249368c322e9?s=96&r=pg\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d810a700fe21ae9d716b83f97d7c81bec935e082cf975f7237b0249368c322e9?s=96&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d810a700fe21ae9d716b83f97d7c81bec935e082cf975f7237b0249368c322e9?s=96&r=pg\",\"caption\":\"Alan\"},\"description\":\"I'm the web coordinator for the College of Health at Oregon State University... I take the occasional photo here and there too. Enjoying the challenge of bringing social and semantic web to a college website while pruning the excess cruft.\",\"sameAs\":[\"https:\/\/alancalvert.carrd.co\/\",\"https:\/\/instagram.com\/alancalvert\",\"https:\/\/x.com\/AlanCalvert\"],\"url\":\"https:\/\/blogs.oregonstate.edu\/calverta\/author\/calverta\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Line Width in Digital Typography for Accessibility and Comprehension | Bad Advice Alan","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:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/","og_locale":"en_US","og_type":"article","og_title":"Line Width in Digital Typography for Accessibility and Comprehension | Bad Advice Alan","og_description":"The measure Choosing the right line width (called the &#8220;measure&#8221;) for a website is a balance. It involves how our eyes work, how our brains process information, and specific accessibility rules. Research shows that the best line width for reading is between 50 and 75 characters per line (CPL). The &#8220;sweet spot&#8221; is often considered [&hellip;]","og_url":"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/","og_site_name":"Bad Advice Alan","article_published_time":"2025-12-09T14:54:15+00:00","article_modified_time":"2025-12-09T14:54:16+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg","type":"image\/jpeg"}],"author":"Alan","twitter_card":"summary_large_image","twitter_creator":"@AlanCalvert","twitter_misc":{"Written by":"Alan","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/#article","isPartOf":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/"},"author":{"name":"Alan","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/#\/schema\/person\/b4e02e8d5dd36413742b99a2c292fcde"},"headline":"Line Width in Digital Typography for Accessibility and Comprehension","datePublished":"2025-12-09T14:54:15+00:00","dateModified":"2025-12-09T14:54:16+00:00","mainEntityOfPage":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/"},"wordCount":1250,"commentCount":0,"image":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg?fit=1200%2C630&ssl=1","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/","url":"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/","name":"Line Width in Digital Typography for Accessibility and Comprehension | Bad Advice Alan","isPartOf":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/#primaryimage"},"image":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg?fit=1200%2C630&ssl=1","datePublished":"2025-12-09T14:54:15+00:00","dateModified":"2025-12-09T14:54:16+00:00","author":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/#\/schema\/person\/b4e02e8d5dd36413742b99a2c292fcde"},"breadcrumb":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/#primaryimage","url":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg?fit=1200%2C630&ssl=1","contentUrl":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg?fit=1200%2C630&ssl=1","width":1200,"height":630,"caption":"Visual guide on line width. Lines that are too long (>80 CPL) cause eye strain and missed returns, while lines that are too short ("},{"@type":"BreadcrumbList","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogs.oregonstate.edu\/calverta\/"},{"@type":"ListItem","position":2,"name":"Line Width in Digital Typography for Accessibility and Comprehension"}]},{"@type":"WebSite","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/#website","url":"https:\/\/blogs.oregonstate.edu\/calverta\/","name":"Bad Advice Alan","description":"How and why I do the things I do in OSU Drupal","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.oregonstate.edu\/calverta\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/#\/schema\/person\/b4e02e8d5dd36413742b99a2c292fcde","name":"Alan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/d810a700fe21ae9d716b83f97d7c81bec935e082cf975f7237b0249368c322e9?s=96&r=pg","url":"https:\/\/secure.gravatar.com\/avatar\/d810a700fe21ae9d716b83f97d7c81bec935e082cf975f7237b0249368c322e9?s=96&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d810a700fe21ae9d716b83f97d7c81bec935e082cf975f7237b0249368c322e9?s=96&r=pg","caption":"Alan"},"description":"I'm the web coordinator for the College of Health at Oregon State University... I take the occasional photo here and there too. Enjoying the challenge of bringing social and semantic web to a college website while pruning the excess cruft.","sameAs":["https:\/\/alancalvert.carrd.co\/","https:\/\/instagram.com\/alancalvert","https:\/\/x.com\/AlanCalvert"],"url":"https:\/\/blogs.oregonstate.edu\/calverta\/author\/calverta\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg?fit=1200%2C630&ssl=1","jetpack-related-posts":[{"id":1030,"url":"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/","url_meta":{"origin":1084,"position":0},"title":"Add a little call out box in OSU Drupal 10 with CSS classes","author":"Alan","date":"2024\/04\/10","format":false,"excerpt":"Sometimes it\u2019s nice to give a visual little call out in the middle of some block of text. Perhaps it\u2019s a notification or you really just want to make a small section of stuff semantically stay together.","rel":"","context":"In &quot;Howto&quot;","block_context":{"text":"Howto","link":"https:\/\/blogs.oregonstate.edu\/calverta\/howto\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1033,"url":"https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-circle-images-in-osu-drupal-10\/","url_meta":{"origin":1084,"position":1},"title":"How to make circle images in OSU Drupal 10","author":"Alan","date":"2024\/04\/10","format":false,"excerpt":"Making square images into circles is relatively easy with regular html and css. But due to the way OSU Drupal 10's media module creates image code, there are a couple of extra steps to take with both your css classes and the on page html.","rel":"","context":"In &quot;Howto&quot;","block_context":{"text":"Howto","link":"https:\/\/blogs.oregonstate.edu\/calverta\/howto\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/round-images-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/round-images-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/round-images-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/round-images-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/round-images-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":205,"url":"https:\/\/blogs.oregonstate.edu\/calverta\/howto-post-moore-family-center-blog\/","url_meta":{"origin":1084,"position":2},"title":"Howto: Post to the Moore Family Center Blog","author":"Alan","date":"2014\/09\/16","format":false,"excerpt":"This post will show the steps OSUDI's need to take to set up their accounts on the MFC Blog as well as their avatar\/profile image through the use of Gravatar, and finally the process of how to send posts to the CPHHS's web coordinator for final posting to the MFC\u2026","rel":"","context":"In &quot;Howto&quot;","block_context":{"text":"Howto","link":"https:\/\/blogs.oregonstate.edu\/calverta\/howto\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2020\/11\/nutrition-club-opengraph-1.jpg?fit=1200%2C630&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2020\/11\/nutrition-club-opengraph-1.jpg?fit=1200%2C630&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2020\/11\/nutrition-club-opengraph-1.jpg?fit=1200%2C630&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2020\/11\/nutrition-club-opengraph-1.jpg?fit=1200%2C630&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2020\/11\/nutrition-club-opengraph-1.jpg?fit=1200%2C630&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":891,"url":"https:\/\/blogs.oregonstate.edu\/calverta\/how-i-archive-raw-photo-files\/","url_meta":{"origin":1084,"position":3},"title":"How I archive RAW photo files","author":"Alan","date":"2023\/02\/17","format":false,"excerpt":"RAW files are important to keep in order to retain full editing potential. Here's how I back mine up to protect them and save space on my computer.","rel":"","context":"In &quot;Howto&quot;","block_context":{"text":"Howto","link":"https:\/\/blogs.oregonstate.edu\/calverta\/howto\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2023\/02\/how-to-archive-RAW-files-1200px.jpg?fit=1200%2C630&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2023\/02\/how-to-archive-RAW-files-1200px.jpg?fit=1200%2C630&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2023\/02\/how-to-archive-RAW-files-1200px.jpg?fit=1200%2C630&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2023\/02\/how-to-archive-RAW-files-1200px.jpg?fit=1200%2C630&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2023\/02\/how-to-archive-RAW-files-1200px.jpg?fit=1200%2C630&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/posts\/1084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/users\/1766"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/comments?post=1084"}],"version-history":[{"count":5,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/posts\/1084\/revisions"}],"predecessor-version":[{"id":1090,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/posts\/1084\/revisions\/1090"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/media\/1085"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/media?parent=1084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/categories?post=1084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/tags?post=1084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}