{"id":2319,"date":"2015-05-15T00:00:35","date_gmt":"2015-05-15T00:00:35","guid":{"rendered":"http:\/\/blog.jimdo.com\/?p=2319"},"modified":"2023-02-15T10:17:09","modified_gmt":"2023-02-15T08:17:09","slug":"checklist-for-clear-readable-website-text","status":"publish","type":"post","link":"https:\/\/www.jimdo.com/blog\/checklist-for-clear-readable-website-text\/","title":{"rendered":"Your Checklist for Clear, Readable Website Text"},"content":{"rendered":"\n

Earlier this week we talked about how to write for your website<\/a> so that people will want to read it. But what about the way your text actually appears on the page?<\/p>\n\n\n\n

Words aside, text is yet another visual element on your website, just like your images, colors, and template.<\/p>\n\n\n\n

And just like those other visual elements, text needs to be arranged and styled in a way that makes it clear and accessible to people who visit your website. For website text, your mantra should be \u201creadability, readability, readability.\u201d<\/p>\n\n\n\n

Focus on text readability<\/h2>\n\n\n\n

\u201cReadability\u201d is basically a measure of how easy it is for people to recognize words, sentences, and paragraphs. Considering how quickly people glance at your website, readability becomes a crucial factor in how long they will spend on your page<\/strong> and whether they will even attempt to read what you have to say.<\/p>\n\n\n\n

Reading on screens is tough. Different studies have found<\/a> that people read slower, less accurately, and remember less of what they read when it\u2019s presented on a screen. By some estimates, website visitors only read about 25% of the text<\/a> on your site.<\/p>\n\n\n\n

Any obstacle to readability\u2014text that is too small, a font color that\u2019s hard to read, or irregular line lengths\u2014will lower that percentage even more.<\/p>\n\n\n\n

So the more you can do to keep your text readable, the happier your visitors will be and the more likely they\u2019ll want to stick around a while.<\/p>\n\n\n\n

How do you design text that will catch\u2014and hold\u2014readers\u2019 eyes? Here are some factors to look at:<\/p>\n\n\n\n

1. Line length<\/h2>\n\n\n\n

We may have grown up reading from 8.5 x 11 sheets of paper, but when it comes to on-screen reading, line length needs to be much shorter. With long lines of text, people\u2019s eyes have to move side-to-side to take in all the words. It\u2019s harder to skim, and harder to keep your place as you move from one line down to the next. Just compare these two websites, with the same text and font (16 pt Noto Sans):<\/p>\n\n\n\n

\"Example<\/figure>\n\n\n\n
\"Example<\/figure>\n\n\n\n

In the first example, the line length is 140 characters. In the second example, I added a Columns element and put the text on one side and the photo on another. This shortens the line length to 67 characters.<\/p>\n\n\n\n

Readers see a longer line of text as more of an investment to read, so they are more likely to skip over it. The same amount of text on shorter lines looks more digestible and inviting.<\/p>\n\n\n\n

For basic landing page text, there are lots of estimates<\/a> for proper line length, but most fall somewhere in between 40-70 characters long<\/strong>, depending on the font size you are using.<\/p>\n\n\n\n

With blogs, the lines can be longer because people dive deeper into the content. For example, the line length of this blog is about 115 characters. To figure out the length of your own lines of text, copy and paste it into a tool like lettercount.com<\/a>.<\/p>\n\n\n\n

Note:<\/strong> Many Jimdo Creator templates have full-width content areas (like template Zurich in the example above), which make them ideal for showing large images or photo galleries. When it comes to landing page text, though, it\u2019s best not to let your lines run across the entire width. Try using Columns elements<\/a> and Photo elements<\/a> to break up the text and create shorter lines.<\/div><\/p>\n\n\n\n

2. Contrast<\/h2>\n\n\n\n

The better the color contrast between the background and the text, the better the readability.<\/p>\n\n\n\n

For your website, make sure there\u2019s enough difference between your background color and your text color<\/strong> so that the text is crystal clear. Even very different colors can clash badly when put together (like the red and blue example, below).<\/p>\n\n\n\n

Choosing the right colors<\/h3>\n\n\n\n

With Jimdo\u2019s Style Editor, the sky is really the limit when it comes to choosing colors for your fonts and backgrounds. Just make sure that you don\u2019t sacrifice readability for creativity. There\u2019s a reason books have been printed since time immemorial with black ink on white paper. If black and white seem too unexciting, you can always try gray, navy, brown, or another dark color.<\/p>\n\n\n\n

\"Example
Make sure that the contrast between your background and your text is strong enough that text is easy to read. Some color combinations like red and blue are particularly hard to read.<\/figcaption><\/figure>\n\n\n\n

Light text on dark backgrounds<\/h3>\n\n\n\n

You can go the other way and choose a dark background with light text, but this is best used in small doses. Even with sufficient contrast, this combination can be tiring on the eyes if you have a lot of text to read. If you\u2019re going this route, you need to make the font larger to get the same readability of a dark font on a light background.<\/p>\n\n\n\n

\"Example
Light text on a dark background can look nice in small doses, but the combination can strain the eye if there\u2019s too much text, or if the text is too small.<\/figcaption><\/figure>\n\n\n\n

Link colors<\/h3>\n\n\n\n

You can also adjust the color of your links<\/a> using the Style Editor. Choose a color that complements your text but that will still stand out so people can recognize a link when they see it.<\/p>\n\n\n\n

Not sure about your color combinations? It always helps to get a second opinion. If you use Jimdo\u2019s Style Editor to choose a color scheme, it\u2019s a safe bet that you\u2019ll start with a color combination that works well. You can also use online web accessibility<\/a> tools that measure the contrast for you and tell you if you\u2019re in an acceptable range.<\/p>\n\n\n\n

3. White space<\/h2>\n\n\n\n
\"Example
Squished line height like this is tough to read.<\/figcaption><\/figure>\n\n\n\n

On your website, there\u2019s no need to crowd. Give your text a comfortable amount of \u201cwhite space\u201d (empty space) around it and it will be much easier to read and scan<\/a>.<\/p>\n\n\n\n

Think about it\u2014if you open up a webpage and just see a big block of text, you\u2019ll probably not even bother to read any of it. But if you see text broken up into smaller, more manageable pieces, you\u2019ll probably give it a glance at least.<\/p>\n\n\n\n

Add space and break up paragraphs<\/h3>\n\n\n\n

To create more white space on your site, try using the Spacing element and the Horizontal Line element to add more cushioning between Text elements.<\/p>\n\n\n\n

You can also break up text into smaller paragraphs, or add bulleted\/numbered lists.<\/p>\n\n\n\n

Adjust your line height<\/h3>\n\n\n\n

Use the Style Editor in Jimdo Creator to increase the line height of your body text (this adjusts the amount of white space between lines of text). There’s no one rule for what your line height should be\u2014you’ll need to adjust it based on the what looks best with the font and font size you’re using.<\/p>\n\n\n\n

\"How
You can adjust the line height of your paragraph text in Edit Mode.<\/figcaption><\/figure>\n\n\n\n

In the example website below, both the images and the text have a nice amount of empty space around them. This creates a sense of harmony and visual hierarchy (you know what to look at and read first). Notice how the designer has increased the line height in the text on the right hand side, which makes the smaller font easier to read.<\/p>\n\n\n\n

\"Example<\/figure>\n\n\n\n

4. Alignment and rough edges<\/h2>\n\n\n\n

In Text elements, you\u2019ll see that you have the option of making text aligned left, right, center, or justified.<\/p>\n\n\n\n

Choose the correct alignment<\/h3>\n\n\n\n

Left aligned text is pretty much the gold standard. Steer clear of center- or right-alignment for body text. While centered text can work well for titles and headings, it\u2019s tough to read more than a few lines of it<\/a>. That\u2019s because the starting place of each line of text changes with every line, meaning that readers have to search to find the beginning of each line.<\/p>\n\n\n\n

\"Comparison
Left aligned text is easier to read than center aligned text, because each line starts at the same place. With center alignment, the reader has to search for the beginning of each line.<\/figcaption><\/figure>\n\n\n\n

Justifying your text can make for very neat, uniform paragraphs. But depending on your text, sometimes the words can appear stretched or unnatural-looking.<\/p>\n\n\n\n

Neaten up your right edge<\/h3>\n\n\n\n

If you\u2019ve been adjusting the styles and fonts sizes of a Text element, you may find that even if it\u2019s left-aligned, the right hand side has gotten a little ragged. Normally this happens because the text was copied and pasted and contains \u201chard returns\u201d or tabs in the text that you can\u2019t actually see. If this is happening to you, you can fix it manually by deleting those extra spaces:<\/p>\n\n\n\n

\"If
If the alignment isn’t quite right in your Text elements (see red arrows), you can usually fix it manually just by deleting the extra spaces.<\/figcaption><\/figure>\n\n\n\n

Note:<\/strong> If you\u2019re copying and pasting text into your text elements and it all looks different, you will need to remove the formatting.<\/p>\n\n\n\n

5. Font size<\/h2>\n\n\n\n

If you have really good eyesight, take a moment to pat yourself on the back, and then immediately go and check the font sizes on your website. Something that looks totally normal to you could have many readers squinting and scratching their heads.<\/p>\n\n\n\n

A typical rule of thumb you\u2019ll see on the web is to keep your body text at least 16pt. That\u2019s a good place to start, but keep in mind that that number is entirely dependent on what font you\u2019re using<\/a>.<\/p>\n\n\n\n

\"Example
Fonts BenchNine, on the left, and Ubuntu, on the right, are both shown here at 16pt, but with dramatically different results.<\/figcaption><\/figure>\n\n\n\n

As the examples above show, there\u2019s no substitute for looking carefully at your own text and judging for yourself. Better yet, get a few friends to help you with some user testing<\/a>.<\/p>\n\n\n\n

\n
\n

Bring your business online with Jimdo.<\/h4>\n<\/div>\n\n\n\n
\n
\n
Start Now<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

6. Font Style<\/h2>\n\n\n\n

With over 600 Google Web Fonts to choose from, how do you choose the right kind of font? Here\u2019s a basic recipe:<\/p>\n\n\n\n