Text and Font Best Practices for Web Story Success

Good storytelling in web stories is best combined with great text. The right typography can establish mood, tone and style. Text is becoming even more important as a sign of inclusivity to people who have a hearing impairment. It also aids the rising trend of users viewing content without audio, on mute.

If you want your Web Story to be consumed by as many people as possible, invest time in the right typography. It allows your viewers to take in the important context and narration before moving into the visual narrative. It is not recommended to use videos or images with text burned into the web story slide because they cannot be indexed by Google, nor are they responsive to different screen sizes.

But we can often get lost inside the vast world of fonts and typography. This could lead to text that is illegible. If a user cannot read your text, you’ve already lost them. The best font and text practices to enhancing web story user experience includes the following:

1. Text Length

Keep titles and body text concise per slide.

1. Recommended title length should be between 10 to 40 characters including spaces.The body text on the inside slides should not cross 200 characters. To get a clearer idea, that’s no longer than a tweet.
2. Tools like MakeStories keep a check of this for you. They validate your web story text and provide you with clear notifications if you are exceeding or are short of the ideal character limit.

2. Font

Web Stories are typically viewed on mobile devices and the font you use could make or break your legibility. Users don’t have time to figure out the text on the screen.

1. Online web story creator tool MakeStories comes with over 1400 fonts to suit your brand and content type.
2. It also has Text Combinations that are very helpful for any web story editorial and creation team. These text combinations are reliable font combinations in style and size. Creators can simply drag and drop a font combination that suits their content and brand, edit and drag the unit to increase it’s size proportionately. The font unit increases and decreases in size in a fixed ratio, which means you would not have to make any extra adjustments upon dragging.

3. Size

Getting the font size right for mobile device viewing can also get tricky. MakeStories has built in recommended font sizes for Headings and Paragraph content. These range from the largest recommended header at 25px, Heading 2 at 23.5px, Heading 3 at 22px and Paragraph text at 16 and 14 each. These tried and tested font sizes take away the need for experimentation on the designer’s end.

4. Appearance

The text on your web story can be creatively eye-catching but must be clear at the same time.

1. Ensure a contrasting color that is pleasing yet allows the text to come across clearly. If your background image or video is too colorful or busy add a text box to boost visibility. There’s nothing a text box cannot solve!
2. Creator tools like MakeStories have features that allow designers to do this very quickly. Options like Background color instantly add a text box behind the text. Other tools allow you to select Opacity, add a Drop Shadow, or even a Box Shadow. These can further enhance text visibility while still keeping the web story slide aesthetically pleasing.
3. MakeStories also offers filters for your text, if you do not wish to play around manually with brightness and contrasts. Some of their popular text filters are Sepia and Hue-Rotate.

5. Padding

When using text boxes with fonts, padding plays a vital role in it’s visual impact. Keeping balanced empty spaces between the box and the text is called padding, when text touches or overlaps with the edges of boxes it can make the text illegible or disturbing to the eye. MakeStories, which is free for enterprises of all sizes till December 2022, has an easy way to fix this too, with their four sided padding function.

6. Text Animation

Bring your web stories to life with animated text. This is especially useful when you are working with static images. Animated text can give you the scope to stand out and create a unique experience for the user

1. However, it is recommended not to go overboard with animations. Usew simple animations that are pleasing to the eye and not distracting from your actual content.
2. Overuse of a particular text animation can also create fatigue in the minds of the user.
3. MakeStories has 17 text animations pre built into the editor. You do not need any design expertise or training for this. You can simply select a text animation and edit the text. Drag the corners to increase or decrease the size of the text. Some of the popular text animations on MakeStories are Apple Reveal and Begin Race.

7. Safe Zone

When users view your web story across different devices, it might not always fit on the screen. For example, if you are showing a picture and the text is too long, the text may get completely cut off on their screen. Create a Safe Zone on your web story editor canvas and keep all the elements within those lines. Tools like MakeStories have Preset Rulers that have built in rulers at 20px, 30px and 40px. The recommended safe zone is

Text can be a powerful design element in the right hands. Web Stories are serving a purpose for your brand – be it for advertising, publishing content, or news. Craft your web stories with care, test out what works best for your audience, keep the above best practices in mind and let Web Stories add another content distribution and revenue generation dimension to your brand.