Text and font editorial guidelines
Text is extremely important, even if your Web Story is video or sound based. Some viewers may be in a situation that doesn’t allow them to listen to your story, or they may be hearing impaired. Thoughtful use of text and captions will widen your audience and feel inclusive.
Ensure legibility
Ensure your text is legible. Viewers won’t do the work for you. If there’s too much text on the screen, or the font is too styled, users will stop reading. Choose a font family, size, weight, color and line height that gives the best legibility while balancing aesthetics. Avoid burned in text; by not using burned in text, you prevent text from being blocked when it gets resized to fit various device sizes. Burned in text also makes it harder for Search engines to know precisely what your story is about.
Contrast colors
Contrast text color with the story page background or image.
Add a textbox
If the contrast isn’t high enough, use a textbox style or shape to enhance legibility.
Add a textbox
Use equal padding
When taking the textbox approach, use equal padding around text and be mindful of rounded corners.
Be concise
Keep text short. Avoid walls of text and try to minimize it to the essentials. We recommend less than 280 characters, approximately 40 to 70 words, per page. If you find yourself needing a lot of text, such as a lengthy step or an ingredient list, look for a natural breaking point. Break large paragraphs or complex steps into smaller pieces and increase your story page count.
Know the safe zone
Because Web Stories are viewed across multiple devices, some areas of your story may be cropped for different users. The good news, there’s a safe zone! Keep text, and other critical elements, within the safe zone. Your Web Story creation tool has a preview of the safe zone, use it and make adjustments where needed before publishing. Keep in mind, text and elements can be placed outside the safe zone! But only if it’s used purely for design aesthetic.
