Content design is essential for making your text easier to read. It’s the starting point for any designers, and can be used by all researchers instantly. So take advantage of our tips on how to design your text and create happy readers.

What is content design?

Content design is the process of organizing, structuring, formatting, and designing texts and combining them with images to create visually attractive and user-friendly content for your website, reports, or infographics. In other words: content design visualizes the meaning of your text, making it easier for people to read, understand, and remember your message.

Content design visualizes the meaning of your text, making it easier for people to read, understand, and remember your message.

If you have written an amazing article, but it looks like a long piece of text without formatting, you might scare off your readers. A nicely formatted text where various components such as headings, paragraphs, frames, quotes, and references are easily recognizable improves the user-friendliness of the text.

So let’s see how content design can transform the meaning of your text into a visually appealing design that ensures that your key message becomes clear at a glance.

Consider the type of content you’re writing

Is your content a heading, paragraph, button, list, side note, date, number, summary, person’s name, title, or image description? As you can see, text can be any type of information! You could just style everything the same, but that means that people will have to do a lot of work to figure out what is what. And good writing is the opposite: you want to make it easy for your audience to read what you have to say.

If I’m planning an event, I could just write:

“Our event is called Talk about science, and it will be held in Amsterdam on the nineteenth of October in 2035. Our main speaker is Professor Smith, and she will give a one-hour talk about epidemiology, at noon, with a fifteen-minute break beforehand.”

This would be extremely annoying to read. So in this case (and we think in every case) you will need to design your text so people understand the meaning of it at a glance.

Here’s an example we use in our design workshops. We’ve redesigned an event flyer that wasn’t very clear. To make it better, we need to first find out what type of content each word or sentence is. In this case we have the following elements:

  • Type of design: event flyer (this should be immediately clear)
  • Title series
  • Title event name
  • Date
  • Time
  • Title of the talk
  • Speaker
  • Affiliation
  • Call to action (register, follow-us)

Then we style it so that it is instantly clear that this is an event with dates, speakers, and locations. Now the reader can see the dates at a glance and it’s clear just from the formatting that this is an event with dates.

An event flyer redesigned to make it clearer with content design.

Do the squint test

Squint your eyes and look at your design. Can you tell what type of information is in your design without reading the text? If your answer is yes, then you passed the squint test and have designed your content so that it’s clear at a glance. You need to make it very clear that something is a header, a quote, a button, or a label. This will help your reader make sense of the text.

Can you tell how the elements of the design are related to each other? Can you distinguish the most important parts of the design from the less important items? Perfect! This means you’ve created a great design.

Below, we’ve collected our best tips to help you design your content. Whether it’s a Word document, report, website text, event poster, or a brochure.

Write short paragraphs of 5 lines

In a book or scientific publication, you can get away with long pieces of text, but on a website or brochure, you have to be short and to the point. Therefore, you should write paragraphs that are about 5 lines long. This makes it more attractive to read and forces you to limit yourself to your key message.

Use headings to make your text scannable

Let’s be honest: nobody has the time to read your article word for word. Most people on the web only scan text to see if they are interested in reading it. This means that they only read a few headings, and maybe read some of the paragraph text below it if they are interested. So make sure to create as many headings as needed to show them what your content is about.

Headings do not only improve the readability and scannability of a page, they also help with search engine optimization (SEO). However, you need to create the right type of headings:

By using headers your text becomes easier to read, and it passes the squint test!

Use headings to structure your story (like this H3 heading)

For a content designer, nothing is worse than discovering that a title is written in bold font… Headings are more than just a font styled in bold! In every writing program you can work with hierarchical headings. H1 is the main heading for your article, and below it you can use H2, H3, and H4 headings to show your audience how your article is structured. The headings should be styled accordingly: an H1 title is larger than an H2 title, which is larger than an H3 title.

So, give each paragraph a title and make sure it has a logical hierarchy: if you write a section about mammals (an H2 heading), the headings Humans and Apes that fall within that category are both H3. Structuring your text like this does not only help prevent high-blood pressure in designers like me, but it also helps with accessibility, as people who use screen readers rely on properly structured headings to read your content online or in documents.

When creating headings, make sure that they are hierarchical.

Write your title as a conclusion (and not as a description)

Don’t use descriptive titles like ‘Introduction’, ‘Study context’ or ‘Analysis’. It’s easy, but it does not help your reader understand your main message when scanning your article. Instead, rewrite it so it reads as the summary of your paragraph. This way, your reader does not have to read the entire article to learn your main points.

See the table below for the difference between descriptive and conclusive headers. If you were to scan the descriptive title, you would learn exactly nothing about this research. In contrast, by just reading a few conclusive titles in your article you get all the key messages at a glance. And your readers will love you for this!

Descriptive title (bad)Conclusive title (good)
Introduction50% of Dutch people are overweight.
Study contextThe Netherlands has a relatively low percentage of overweight people compared to other EU countries.
AnalysisOur meta-analysis compared the rates of overweight across all EU countries.

Write an introductory text

As you can see at the beginning of this article, we’ve written an introduction in a slightly larger font. A short summary like this, or some other type of enticing text, helps the reader get on their way and get excited to read the rest of your article. Just don’t call it “Introduction”.

Differentiate between main and side content

If you use examples in your text, or if you want to explain a definition, you can use frames to show that it’s not part of the main content. So think about every paragraph you write: is it part of your main train of thought, or is it an example, definition, or explanation that would benefit from some other type of styling?

This block is an example of side content. It can be an explanation, a detail, or a reference to another source. Anything that is not essential for the main text.

Use quotes

Alternate your text with quotes. This helps break up long pieces of text and allows you to bring forward the most important sentences so that no one can accidentally skip them.

A quote helps to put focus on important information.

Indent the text

Sometimes you want to use a quote of someone else or a longer piece of text that is not part of the main text. Rather than using a frame you can indent the text:

When you indent the text, the reader will immediately know that it is a specific example. You can use it for pieces in which you are having a conversation with someone (and indent all texts of the other person) or when you use a longer quote from a book.

Use real bullet points

Don’t use hyphens when you want to use bullet-points! It does not make the list any clearer and it is just as easy to hit the corresponding button to create a bullet list in Word or WordPress. And again, this is important for accessibility.

For lists, use the standard round bullet points for unordered lists (like countries or tips) and numbered lists when you have a clear order (such as a recipe). If you have other types of lists, you can even try out more exotic bullet points like check marks.

https://www.theonlinescientist.com/wp-content/uploads/bullet-point-design.gif

Do not underline your text for emphasis

On websites, underlined texts are reserved for links. So don’t underline text you only want to emphasize, you will confuse the visitor who will try to click on it. The only exception is when you want users to interact with the text, like with pop-up descriptions or word definitions.

None of these underlined texts on this website are links, which is very confusing!

Write better links, and not “CLICK HERE”

If you’re tempted to write “click here” as your link text: stop. Where does this link go? And what does it offer the reader? You need to step up your game here. If you’re not clear about where a link may lead, you’re tricking your readers.

For every link you create, you should tell the reader where the link is going (the same website, or an external website), and provide a description of what you link to. Compare the two link texts below. Which one would you rather click?

Another benefit of writing better links? You might have guessed it: SEO. So make sure the description is very clear and readers don’t get annoyed with your links.

If you link to an external website, make sure that the link opens in a new tab and that the visitor knows they are leaving your website. Like this: Read more about typography on practicaltypography.com.

How to apply bold and italics properly

Use bold and italics sparingly. In any case, do not use them in headings and titles. You can make text bold to highlight an important word or sentence. Italics are used when you are putting emphasis on how a word would be pronounced or when you want to use a different tone from the rest of the text (but both can be used in the same way).

Italics are especially suitable for a small note by the author, or as an off-hand comment (and when it concerns a word in another language).

Read more on the use of bold and italics on practicaltypography.com.

Use content design for all your designs

You can use these tips for anything you’re creating: Word documents, reports, blogs, websites, infographics, or graphical abstracts. All designs that are based on content (basically everything), could use content design to make your text more user-friendly.

We’re using this in everything we design. For a text-heavy medical website that we created about burn injury, you can see how we styles all the different types of content to it’s easy to scan and understand, and puts emphasis on the most important elements:

Want to learn more about design?

If you’re ready to learn more about content design and you want to apply it to your presentations, do our workshop Presentation Design. In case you want to make a poster or infographics, we have the workshop Poster design & Infographics.

About the Author: Liesbeth Smit

Liesbeth combines her knowledge of science communication, technology and design to explain difficult topics to a wide audience. You can use her practical tips immediately in your (poster) presentations to create a bigger impact. She developed dozens of websites, infographics and animated videos, and regularly gives workshops about design at The Online Scientist.