????
How to make graphics that are more
BY MAAYAA.CO
I love art and design and it makes me happy to see all sorts of fun and unique design styles on social media, especially Instagram.
However…
I’ve been seeing a lot of informational graphics on Instagram that have been really hard for me to read!*
*Who am I? I am a sighted person with dyslexia & a visual designer with 10 years+ of experience (with focus on text-heavy materials). This guide is for sighted people who are new designers and are unfamiliar with accessibility.
I get the desire to create posts for Insta that are #aesthetic. Since this is a highly visual platform, it’s beneficial to make eye-catching and visually compelling posts. And sometimes the goal of a post is NOT about education or information, and instead about expressing hopes, dreams, fears, feelings... an artistic vision. Art is a wonderful thing, and there is real value in creating something that is simply meant to inspire.
However, when designing a graphic and the goal is to educate, inform, and communicate, it’s a good idea to keep some accessibility-related design principles in mind. Effective design puts purpose and content first.
Legibility
Legibility is the ease with which a reader can decode individual symbols.
Generally speaking, using a less embellished font is better for legibility, especially when there is a lot of text.
How easy is it for you to read this sentence? You can probably still read it, but compare the reading experience to the previous blue text. Imagine a whole paragraph, or reading a whole book in this font.
These embellished fonts, also known as display fonts, are great for headlines and typographic artworks, but not so great for lots of text.
Legibility: font styles
Beyond the font choice, other stylistic choices affect legibility, such as unconventional capitalization.
In addition to making the reader feel like you are shouting at them, reading long-form text in all caps literally requires more work form the reader's brain and is therefore less legible. All caps can cause eye strain as well.
Even when using a very simple typeface, it is important to consider different font weights and widths. These are all important considerations for body text.
Using a very condensed font allows more words per line, but is harder to read. Using highly condensed fonts is useful and may be required in certain cases, such as trying to fit the ingredients list on a small food item. But these are highly specific scenarios.
We also read wide and italicized text more slowly, since italics reads as emphasis in our brains. Use sparingly! If too much of the text is emphasized then italics no longer serve a purpose.
Readability
Okay. So let’s say we’ve chosen a typeface that seems suitable for long-form text. While legibility applies to individual letters and characteristics of a font, readability is about the macro-level reading experience.
Imagine you’re reading a novel, and the whole book is one HUGE paragraph, with no indentions for new paragraphs. There are no special fonts for chapter numbers. One block of text.
If this doesn’t sound appealing to you, you’re understanding readability! To increase the readability of your own graphics and websites, try breaking content into small blocks. Write in small paragraphs.
Generally, smaller text size is less readable. It is harder for small children, seniors and the visually impaired to read. However, sometimes when space is a constraint, it may be necessary to use a smaller font size. The width of the paragraph, relative to the number of words per line, should be taken into consideration. This is where columns come in. Think about a newspaper. The font size of body text is small, and the actual width of the columns is not the width of the whole sheet of newspaper. Why is this?
The ideal line width, in terms of words, for a column or paragraph is about 9 to 12 words. Why does paragraph or column width matter? The width of the column affect readability because of how we read. We don’t read by looking at character by character or even word by word. Instead, our eyes scan each line, in about groups of three or four words. If the line gets too long, we can lose track.
It may surprise you that using too large of a font size, especially in relation to column width also reduces readability. Fewer words per line may cause the sentence structure to break up, and you might have to hyphenate more words.
Readability: hierarchy and space
Establishing a hierarchy and sense of flow within a page, space or graphic helps the readability. Here, the words "Readability: hierarchy and space" are meant to be a title, yet is the same size as body text. Not a good way to establish hierarchy.
Another thing that affects readability: kerning and tracking. Kerning is the amount of space between individual letters. If the kerning is off, the text also becomes difficult to read.
You also don’t want to mess with space between each line too much either. Too close and it becomes hard to read and claustrophobic.
Too much space and it looks like you’re writing a poem, rupi kuar style. Nothing wrong with her, but is this really what your infographic needs?
Accessibility
Accessibility is the practice of making your work perceivable by as many people as possible. Instagram is primarily a visual platform, but not everyone who uses it has 20/20 vision. People who are color blind or have low vision may have difficulty perceiving certain color combinations.
How easily can you read this? How about this?How about this color?
Or how about this use of a shadow?
Some of these color combinations are easier or harder to read because of the contrast between the background color and text color. When there is more contrast, things are easier to read. Use a free accessibility color contrast checker to make sure the color combinations used meet accessibility standards.
Image Descriptions
Writing image descriptions and/or alt text allows more people to perceive your work!
An image description is a detailed text description of the contents of the image. Alt text is a brief textual explanation of an image. Both are different from captions. Many people use captions to make witty remarks/cute statements about their posts (i.e. are supplements to the image, not an explanation of it).
Image descriptions and alt text ensures that your graphic is accessible to anyone who may not be able to physically see your work for any reason (this includes internet/tech issues and the image doesn’t load). It’s a good way to support the inclusion of blind, low vision and low-tech users. Image descriptions are also helpful when you make an illegible and hard-to-read graphic! At the very least, please consider typing out all of the image text into the caption or as a comment of your graphic.
But how would a blind or low-vision person even come across your graphic in the first place? Some people use Screen Readers, which reads out text to them. If you write an Image Description of your graphic in the caption or as a separate comment on the post, it can be read by a Screen Reader.
Some accessibility devices will read out alt text. To include on your own posts, it’s under “Advanced settings” on the same screen where you write the caption. Alt Text is generally short (125 characters or less). It’s a good idea add alt text for all of your posts, educational or not.
Inclusion
You may read all of this and feel that it is a lot of work and places a lot of restrictions on what you can and can't design. At the end of the day, it’s up to you to tailor your design choices to your goals and intended audience. Do you know your goals and your audience well?
When I was younger, I would make designs and show them to my elderly family members. Sometimes they would say they couldn't read or see parts of the image because it was too small. This made me want to change the design so they could be included in my audience.
If your audience cannot effectively percieve your work, it will not have the impact you want.
There are things that go beyond design choices that increase the accessibility of your work. The language(s) used, the platforms you publish it on... everything affects the reach of your work. There are so many choices: should I write the graphic in English? Is the language complexity appropriate for the topic? Should I use this hip font that appeals to millennials? Or what about this illustration style that Boomers like? Should I publish it on Instagram? Facebook? A journalistic publication (which may have a paywall?) Should I write alt text?
Unintentionally excluding someone from your work is still exclusion. Realistically, you cannot hope to literally include ALL people in our audience. But try to make these choices (design or otherwise) intentional. Effective design is a practice, and something that arises from being thoughtful, attentive, and creative!