Why design is important for readability.

Why design is important for readability.

Considering text should be your first consideration when designing and developing products, services and content.

Here's what you need to know about a role of text in your designs! Text is not an afterthought in the design process. It should be your first consideration. Planning is a crucial part of designing, and the more you plan, the better the outcome will be. When planning the design for brochures or websites, you’ll get a lot more accomplished if you start with words first. The first step to making readable designs is to make sure that your text is well prepared.

Text is not an afterthought in the design process. It should be your first consideration. Readability is a big part of comprehension. Consider how you can plan a design around the words, so that your projects are easy to read.

Typography can make or break your design. When designing for the web, it's important to remember that your words are typically the most important part of your design, so it's best to find a way for them to pop, and draw attention.

What is Readability?

Readability is a measure of how easy a text is to understand. It isn’t concerned with the actual letters in a text, but with its higher level structure, the way it’s put together. Because comprehension relies more on your grasp of the bigger picture than on the tiny details, it’s reasonable to assume that readability and comprehensibility go hand-in-hand.

“Readability is the ease with which text can be read. Comprehension is a key factor in terms of readability, as is being able to quickly look at — and understand — lettering.”

To maximize readability, experts recommend that text be written on an eighth-grade reading level.

Let’s take a look at a few more of the visual standards that contribute to readability.

Line Length

Line length,? known as measure in typography, refers to the length of a line of text in a column. Lines of type, especially in large blocks, that are too long can cause the eyes to tire and make reading difficult. Line that are too short often result in awkward breaks. If hyphenation is used, short lines will also result in many hyphenated words, which can also break up the flow of reading.

Line lengths should optimally reach to somewhere between 6–10 words per line (40–70 characters, including spaces) depending on the typeface used. Short lines make long blocks of text slow going for readers. Long lines force readers to move their eyes quickly from one end of the line to the other, which can cause them to miss parts of sentences. In print books these issues can be avoided by adjusting leading and type size to allow for short or long lines as needed.

When it comes to text, try to avoid going too small where people will have difficulty reading it or so large that it causes odd pauses or breaks in reading. Text should be large enough to read with ease.

A text frame is a container for text. To format text frames, select one or more with the selection tool (black arrow) and adjust the settings in the control panel. InDesign provides many options to fine-tune a text frame, making it easier to display your type in the best possible way. You can adjust margins and column width, add vertical rules and background colors, or display columns in any order using step and repeat

The column pica is based on the length of a typographic pica, used in many early American typesetting systems. The column pica measures 12 points. There are 6 picas per inch, or 6 column picas per inch. Thus, a single-column page set in 12 point type would be 72 points wide (1 in. x 6 pts per pica x 6 picas per in.), or 1?6 yd.; a double-column page would be 36 points wide, or 1?12 yd.

What about digital projects with pixels?

According to WebStyleGuide.com, a better system to use on digital media is setting type in characters per line: 10-12 characters (including spaces) for a column of text or 36-40 characters (including spaces) for a line of text. The reasoning is that web content will always be rendered differently on various computers, and if the column or line measurement is used, the type will always look too long or short. So instead, you should measure and set your type by character count to ensure that the chunk of text looks right in relation to the rest of your design.

Space or Contrast

Space and contrast make all the difference when it comes to type readability. Make sure your typography lives in its own space, with the proper contrast between your chosen text color and the background color of the page.

With text design, line length and space between lines are important. UX Designers recommend that the space between lines of type (leading) is at least equal to the point size of type and most digital designers opt for a minimum of 150 percent leading. That leaves plenty of space for each line in large blocks of text to be read. As with line length, too much or too little space between lines, can make comprehension difficult. Line height can be scaled relative to the font-size.

One of the most overlooked aspects of visual design is the space between blocks of text and other objects. Make sure to check for text wraps and text that crosses into the boundaries of other objects. Text wraps – both vertical and horizontal – should be at least equal to the line spacing used for a block of text. Avoid allowing text blocks to touch other objects or elements, or run across or on top of images.

Remember to leave some white space around the entire text frame, creating an almost invisible halo. This margin will help set text apart from other “noise,” easing the reader into the copy, without having to jump right in.

When it comes to text that looks good and is easy to read, contrast is key. Avoid using light grey on a white background, and keep in mind that oversized type works best in small amounts. That’s because different font weights create separation, while large blocks of text can seem overwhelming when they are big and bold.

Hyphenation & Word Breaks

As a typographer, there is nothing more annoying than a giant hyphen in the middle of a headline or subhead. As a reader, it’s incomprehensible and aggravating.

To avoid confusing readers, hyphens should be discouraged in large type and furniture. Anything bigger than 25 should be simple and readable.

Some hyphenation is acceptable in major blocks, but consider setting a limited number of hyphenation per paragraph.

Good writing is concise. Use short, simple words and phrases whenever possible. Aim for clarity and clarity, aiming at both the mind and the heart of your reader. Every sentence should be important to a single idea, to avoid misunderstandings or misunderstandings. Good writing is a good breadcrumb to your readers - every sentence builds towards something bigger.

While working with a digital and web projects, it can be easy to get carried away in our text. So remember to give your users some space and break up your copy with subheadings. This not only breaks up the chunk of text into something more manageable, but also helps users scan quickly to find the section they want to read first!

Alignment

Alignment is important because is it helps your audience know where to look. Proper alignment makes reading easier. Things you need to be aware of include:

The alignment of a block of text is the way that it lines up along the left and right margins. Whether text is in the center, to the left, or to the right side of a document or screen, is also important and can greatly impact readability. Generally speaking, the strong alignment for text is left-aligned. Left alignment works because it mirrors the way you read – from left to right. You know where each line ends and where the next begins.

Right alignment is best reserved for small blocks of text, such as big quotes or artistic text elements. Justified text requires pinpoint-perfect hyphenation and justification specifications and is best used in a non-fluid environment, which is why you see it most commonly in the confines of print design.Due to the amount of manual work necessary to achieve such subtle effects, right and justified alignment are not recommended for body text. Use them within a limited context for some fun experimentation, as you’ll learn about shortly.

The difficulty with centered text is that it can be hard for the eye to know where things start and stop since lines are ragged on both sides of the copy block. While centered text has its uses, it is not as readable as flush left/ragged right text used in professional typographers’ typesetting. For clarity, I don’t recommend using it more than a few lines at a time.

Readability Tools

Readability Test Tool: ?When you enter a URL or text block, you get multiple readability score results, including grade level and other scores, plus an overall analysis of your text. And the tool includes a nifty bookmarklet in case you want to score on the go.

Readability: This web browser plugin and application transforms any web page into a clean view for reading and allows you to gather pages to read later.

Juicy Studio Readability Test:? Learn more about each of the readability tests, including the Flesch-Kincaid Grade Level and Flesch Reading Ease tests.

Take the away

Designing for readability includes selecting an appropriate typeface, choosing an optimal point size, providing sufficient line spacing and contrast, and more. It doesn’t matter how useful your content is if no one can read it. By designing for readability, you increase the chances that they will.

With too much information out there, readers are looking for content that keeps things simple. If yours isn't easy to understand, you're likely missing out on customers.