Survey Design: Use Typography to Improve Readability

By Tracy Sherwin

Typography can go a long way in creating a visual hierarchy within your surveys, improving readability, and engaging participants. Understandably, this may feel overwhelming if you do not have a design background. How can you be sure your survey looks pleasing in the eyes of your participants? How many different fonts should you use? What will make my text the most legible? How should my typography change to adapt to mobile devices? Luckily we have a lot of solid examples out there, and with it best practices have emerged. Here are a few answers to several questions we’ve been asked in regards to making surveys both readable and aesthetically pleasing.

How many fonts should I use?

In general, you should use a small number of fonts, with each having a specific purpose. For example, you might choose to use a tall bold font for headlines, and a finer, clean san-serif font for your question text. It is best to not use more than one display/script font because their bold personalities can compete with one another, making the visual hierarchy unclear.

For the best visual distinction while maintaining consistency, using a single font with a large number of variations is your best bet. For example, the font family Open Sans has 10 variations, going from light all the way to extrabold. Google Fonts is a great place to find fonts with large families, as most browser default fonts only have regular, italic, and bold. If you are using multiple fonts, be careful that they aren’t too similar, such as the serif fonts Times New Roman and Georgia. It can be distracting to the participant.

How wide should my paragraphs be?

The width of your paragraphs can have a huge impact on eye strain and concentration. To minimize the strain put on your participants’ eyes and maximize their focus on the paragraph, about 45-75 characters (including spaces) per line is recommended. If your paragraphs are two wide, the viewer will more easily lose their place, and the jump from one thing to the next is more difficult because of the distance the eye has to cover. If the paragraph is too narrow, the viewer’s eyes will be constantly jumping from one line to the next, which can be stressful and irritating. With the viewer switching to new lines of text so frequently, there is a possibility for missing words as they try to keep up the rapid cadence.

How much space should be between lines of text?

Spacing between your lines of text is another way to make paragraphs and sentences easy for your participants to read. The term for this is leading, which refers to the old days of setting metal type, and placing strips of lead in between lines of type.  In the world of the web today, using line-spacing of about 1.5 times your font size is recommended for best readability. Luckily, with web language CSS, you do not have to calculate this out, and can simply set line-height to 1.5.

How can I optimize my text for mobile devices?

There are several things you can do to create an optimized experience for your viewer on mobile. For the most part, you can stick to using the same number of fonts, font sizes, and leading for mobile as you did for desktop. Keep in mind: thin, script fonts (e.g. Pinyon Script) can be difficult to read on older phones with poor resolution. The current trend for paragraph text size across both devices is around 16pt. Apple’s iOS Human Interface Guidelines uses 17pt for paragraph text, and recommends never going below 11pt on a mobile device.

In terms of paragraph width, your text should adapt to fit within the width of smaller devices so your viewer does not have to zoom out or constantly swipe left to right in order to read. If you have some experience with CSS, add padding around your paragraphs so the text doesn’t run into the side of the screen and evoke a sense of claustrophobia. We recommend starting with 10 to 20px and adjusting from there. Also, consider hiding certain visual elements or images on mobile to clean up the experience and give the user only the important information.

Using the above tips will help you create a survey design that will optimize the participant experience. For a quick refresher, things to consider are:

  • Choosing a couple of fonts with each having a specific purpose
  • Formatting paragraphs to be 45-75 characters wide
  • Using a line-height of 1.5 times your font size
  • Following current industry trends for mobile optimization

Designing a survey takes practice and testing to figure out what works best for maximizing engagement among your participants. If you have any further questions, don’t hesitate to reach out through one of our social channels (LinkedIn, Twitter, Facebook) or by contacting us.

Related Posts
Apple ResearchKitCollaborative Learning Patients