Writing and designing text in a way that is easy to read.<\/h4>\n
Readability is a broad topic and covers numerous aspects of writing and design. Is the content understood? Can the content be read comfortably (is it legible)? Web content cannot be deemed \u201creadable\u201d unless both variables are true.<\/p>\n
If you’re currently facing numerous usability challenges, knock out readability first, then move onto the more difficult issues. Reading content\u00a0should always be easy.<\/p>\n
Based on\u00a0my 20-plus years of higher education, writing, usability testing, and research on the topic, here are the basics of readability best practices:<\/p>\n
Writing for Readability<\/strong><\/h2>\n4 readability tips for writers:<\/p>\n
Chunking<\/strong><\/h3>\nChunk text into small paragraphs\u00a0and\u00a0bullet points. Use headings to break up\u00a0multiple paragraphs.<\/p>\n
Learn more about chunking<\/a>, a previous UX word of the day.<\/p>\nReading Level<\/strong><\/h3>\nThe ideal reading level is grade 8, as most Americans read at that level or lower<\/strong>. Most newspapers are written at grade 11 and best-selling\u00a0novels are usually grade 6 or 7.<\/p>\nFor comparison, this blog post is Flesch-Kincaid reading grade level 7.<\/p>\n
Check your content\u2019s grade level in Microsoft Word or use similar online tools. To lower the reading level, use smaller sentences, one-or two-syllable words, and simple sentence structure (i.e., ditch the semi-colons).<\/p>\n
If you’d like to learn more, there are numerous academic journals on this topic.<\/p>\n
Word Count<\/strong><\/h3>\nShorter amounts of content are easier to read than long ones. Don’t be afraid of short sentences and paragraphs.<\/p>\n
I’m clearly not.<\/p>\n
Clarity<\/strong><\/h3>\nUse simple words in favor of multi-syllable words. Use layman\u2019s terms in lieu of jargon. Use straightforward language instead of a clever turn of phrase.<\/p>\n
Designing for Readability<\/strong><\/h2>\n11\u00a0readability tips for designers:<\/p>\n
Layout or Width of Text<\/strong><\/h3>\n![\"readability:](\"http:\/\/juneux.com\/blog\/wp-content\/uploads\/2016\/07\/width-1024x188.jpg\")
Very narrow\u00a0and very wide\u00a0columns of text are both difficult to read.<\/p>\n
When the text is too narrow, comprehension becomes more difficult. When text is too wide, eye strain increases, then eventually stops readers from continuing.<\/p>\n
Body text that spans the entire width of a computer screen\u00a0should be an arrestable offense. (Seriously!) Instead, use margins, photos, or\u00a0graphics to help decrease\u00a0the width to a more comfortable size.<\/p>\n
![\"white_space.PNG\"](\"http:\/\/juneux.com\/blog\/wp-content\/uploads\/2016\/07\/white_space.PNG-1024x354.jpg\")
<\/p>\n
In the example above, I used\u00a0negative space (margins) and images to “squish” the width of the text to a comfortable size.<\/p>\n
Fonts<\/strong><\/h3>\nSome fonts are easier to read than others. Serif fonts (fonts that have little embellishments on each letter) are preferred in print, and up until recently, sans serif fonts were preferred for web.<\/p>\n
Thankfully, screen resolution has significantly improved in recent years. Serif fonts no longer look blurry.<\/p>\n
Today, it doesn’t matter which one you choose, but script and other novelty<\/em> fonts should be used very sparingly.<\/p>\nCapitalization<\/strong><\/h3>\nAll capital letters (ALL CAPS) are more difficult to read than sentence case or title case. Lowercase letters help us recognize individual letters, and therefore, comprehend words more quickly. Plus, all caps just looks like you’re shouting.<\/p>\n
\n- Title case<\/strong> means that each word in a heading is capitalized, except prepositions usually. The headings and sub-headings in this blog post are all title case.<\/li>\n
- Sentence case<\/strong> means just the first word in the sentence is capitalized (except for proper nouns, of course).<\/li>\n<\/ul>\n
Bold +\u00a0Italics<\/strong><\/h3>\nBold and italics should be used rarely and only for emphasis. It’s more difficult to read an entire sentence or paragraph of bold or italicized text.<\/p>\n
Text Color<\/strong><\/h3>\nColored text is usually difficult to read in long blocks. Again, colored text should be used sparingly (e.g., links, headlines).<\/p>\n
Text Alignment<\/strong><\/h3>\n![\"readability:](\"http:\/\/juneux.com\/blog\/wp-content\/uploads\/2016\/07\/alignment-1-1024x231.jpg\")
Left-aligned text \u2014 headlines, copy, captions, bylines, or any text containing 2 or more words\u00a0\u2014\u00a0is\u00a0almost always best. The consistent \u201chard\u201d left edge makes reading smooth and effortless.<\/p>\n
Right-aligned text is useful when designing a layout with a fixed height and width (e.g., business cards, PowerPoint). But on the web, right-aligned text causes readability issues due to the jagged left edge. It quickly becomes taxing on the eyes to search for the beginning of each new row.<\/p>\n
Centered-text is OK for very small amounts of text \u2014 generally, no longer than 3 lines. Anything much longer and reader fatigue begins to set in due to that jagged left edge.<\/p>\n
Text Size<\/strong><\/h3>\nDepending on the font, a point size of 16pt is comfortable for most people. As the font size increases, so should the leading (the space between each row of text).<\/p>\n
Most designers recommend leading (or line height) 1.5 times the font point size. That is,\u00a020pt text\u00a0should have 30pt leading.<\/p>\n
Contrast<\/strong><\/h3>\nThe contrast between text color and background color should be as high as humanly possible. Black text on a white background\u00a0or\u00a0white on black (or another very dark color) is\u00a0ideal.<\/p>\n
Gray text is extremely popular right now and frequently complained about in my usability studies. It may look good, but…<\/p>\n
Eye Flow<\/strong><\/h3>\n![\"readability:](\"http:\/\/juneux.com\/blog\/wp-content\/uploads\/2016\/07\/eyeflow-1024x763.jpg\")
Keep related content grouped together, rather than separating it. Otherwise, eyes become fatigued bouncing up and down or side to side.<\/p>\n
In the example above, I moved the heading from above the image to below the image to eliminate the\u00a0jarring eye flow.<\/p>\n
Padding +\u00a0Negative Space<\/strong><\/h3>\n![\"readability:](\"http:\/\/juneux.com\/blog\/wp-content\/uploads\/2016\/07\/padding-1024x588.jpg\")
Adequate negative space around a block of text is needed to help our eyes focus and give the content breathing room.<\/p>\n
For example, using an extra line break between each paragraph in this blog post makes the content feel more light and airy.<\/p>\n
Alt Text<\/strong><\/h3>\nDon’t forget about readability for your customers who cannot see or who have low vision. Ensure images, tables, and other visual elements are translated\u00a0properly by screen readers.<\/p>\n
Talk to your in-house accessibility subject matter expert (or hire an accessibility consultant) to learn more.<\/p>\n\n\n
See also: UX Word of the Day Index<\/a><\/p>\n\n\n\nRelated Articles<\/h2>\n\n\n
Chunk text into small paragraphs\u00a0and\u00a0bullet points. Use headings to break up\u00a0multiple paragraphs.<\/p>\n
Learn more about chunking<\/a>, a previous UX word of the day.<\/p>\n The ideal reading level is grade 8, as most Americans read at that level or lower<\/strong>. Most newspapers are written at grade 11 and best-selling\u00a0novels are usually grade 6 or 7.<\/p>\n For comparison, this blog post is Flesch-Kincaid reading grade level 7.<\/p>\n Check your content\u2019s grade level in Microsoft Word or use similar online tools. To lower the reading level, use smaller sentences, one-or two-syllable words, and simple sentence structure (i.e., ditch the semi-colons).<\/p>\n If you’d like to learn more, there are numerous academic journals on this topic.<\/p>\n Shorter amounts of content are easier to read than long ones. Don’t be afraid of short sentences and paragraphs.<\/p>\n I’m clearly not.<\/p>\n Use simple words in favor of multi-syllable words. Use layman\u2019s terms in lieu of jargon. Use straightforward language instead of a clever turn of phrase.<\/p>\n 11\u00a0readability tips for designers:<\/p>\n When the text is too narrow, comprehension becomes more difficult. When text is too wide, eye strain increases, then eventually stops readers from continuing.<\/p>\n Body text that spans the entire width of a computer screen\u00a0should be an arrestable offense. (Seriously!) Instead, use margins, photos, or\u00a0graphics to help decrease\u00a0the width to a more comfortable size.<\/p>\n In the example above, I used\u00a0negative space (margins) and images to “squish” the width of the text to a comfortable size.<\/p>\n Some fonts are easier to read than others. Serif fonts (fonts that have little embellishments on each letter) are preferred in print, and up until recently, sans serif fonts were preferred for web.<\/p>\n Thankfully, screen resolution has significantly improved in recent years. Serif fonts no longer look blurry.<\/p>\n Today, it doesn’t matter which one you choose, but script and other novelty<\/em> fonts should be used very sparingly.<\/p>\n All capital letters (ALL CAPS) are more difficult to read than sentence case or title case. Lowercase letters help us recognize individual letters, and therefore, comprehend words more quickly. Plus, all caps just looks like you’re shouting.<\/p>\n Bold and italics should be used rarely and only for emphasis. It’s more difficult to read an entire sentence or paragraph of bold or italicized text.<\/p>\n Colored text is usually difficult to read in long blocks. Again, colored text should be used sparingly (e.g., links, headlines).<\/p>\n Right-aligned text is useful when designing a layout with a fixed height and width (e.g., business cards, PowerPoint). But on the web, right-aligned text causes readability issues due to the jagged left edge. It quickly becomes taxing on the eyes to search for the beginning of each new row.<\/p>\n Centered-text is OK for very small amounts of text \u2014 generally, no longer than 3 lines. Anything much longer and reader fatigue begins to set in due to that jagged left edge.<\/p>\n Depending on the font, a point size of 16pt is comfortable for most people. As the font size increases, so should the leading (the space between each row of text).<\/p>\n Most designers recommend leading (or line height) 1.5 times the font point size. That is,\u00a020pt text\u00a0should have 30pt leading.<\/p>\n The contrast between text color and background color should be as high as humanly possible. Black text on a white background\u00a0or\u00a0white on black (or another very dark color) is\u00a0ideal.<\/p>\n Gray text is extremely popular right now and frequently complained about in my usability studies. It may look good, but…<\/p>\n In the example above, I moved the heading from above the image to below the image to eliminate the\u00a0jarring eye flow.<\/p>\n For example, using an extra line break between each paragraph in this blog post makes the content feel more light and airy.<\/p>\n Don’t forget about readability for your customers who cannot see or who have low vision. Ensure images, tables, and other visual elements are translated\u00a0properly by screen readers.<\/p>\n Talk to your in-house accessibility subject matter expert (or hire an accessibility consultant) to learn more.<\/p>\n\n\n See also: UX Word of the Day Index<\/a><\/p>\n\n\n\nReading Level<\/strong><\/h3>\n
Word Count<\/strong><\/h3>\n
Clarity<\/strong><\/h3>\n
Designing for Readability<\/strong><\/h2>\n
Layout or Width of Text<\/strong><\/h3>\n
Very narrow\u00a0and very wide\u00a0columns of text are both difficult to read.<\/p>\n<\/p>\nFonts<\/strong><\/h3>\n
Capitalization<\/strong><\/h3>\n
\n
Bold +\u00a0Italics<\/strong><\/h3>\n
Text Color<\/strong><\/h3>\n
Text Alignment<\/strong><\/h3>\n
Left-aligned text \u2014 headlines, copy, captions, bylines, or any text containing 2 or more words\u00a0\u2014\u00a0is\u00a0almost always best. The consistent \u201chard\u201d left edge makes reading smooth and effortless.<\/p>\nText Size<\/strong><\/h3>\n
Contrast<\/strong><\/h3>\n
Eye Flow<\/strong><\/h3>\n
Keep related content grouped together, rather than separating it. Otherwise, eyes become fatigued bouncing up and down or side to side.<\/p>\nPadding +\u00a0Negative Space<\/strong><\/h3>\n
Adequate negative space around a block of text is needed to help our eyes focus and give the content breathing room.<\/p>\nAlt Text<\/strong><\/h3>\n
Related Articles<\/h2>\n\n\n