Font Generators Don’t Create Accessible and Usable Content

Font generators that allow for users to create fancy text to go into Facebook posts have been around for a while, but I feel like there use has increased over the past few months. That means more and more inaccessible content is on Facebook. Of course, Facebook could prevent this if they stopped allowing the code from the font generators to be inserted into posts. But they haven’t stopped it so far, so I’m doubting that it’ll happen any do soon.

I can’t emphasize enough though that if you’re using a code generator your are creating readability problems. What might look good to your eye, and might bring visual attention, is also excluding people in your audience and potential audience who have visual impairments and those who have cognitive impairments that make it difficult for them to parse and understand text.

Today I’ve seen a half a dozen posts from authors, personal assistants, and promo companies using code generators to make posts that will be impossible for some to read. Want to know how difficult? Play the video that I’ve included at the bottom of this post and you’ll find out how a screen reader will present the text example I have below.

Example from a Code Generator

The text below is a combination of elements from posts from today, although it doesn’t appear the same here as it did on Facebook. (Apologies to anyone going through the next 9 lines with a screen reader. You can skip this by going to the next header on the page.)

★ღ‿¸.•*•.¸‿¸.•*•.¸ ೋ💨¸.•*•.¸‿ღ★
░S░E░R░I░E░S░░S░A░L░E░
★ღ‿¸.•*•.¸‿¸.•*•.¸ ೋ ೋ¸.•*•.¸‿ღ★

💞 𝒄𝒂𝒏 𝒕𝒉𝒆𝒚 𝒋𝒖𝒔𝒕 𝒇𝒊𝒈𝒖𝒓𝒆 𝒊𝒕 𝒐𝒖𝒕 💞

📖 Buy it now
Awesome Trope 1
Awesome Trope 2

What’s Wrong With This?

  1. The stars, wind blowing emoji, and the other font art distracts the actual message for all users. There will be some who simply scroll on because it’s so busy. This is also terrible to hear with a text-to-speech screen reader.
  2. The text “Series Sale” seperated by the squares will be unreadable for some who can’t see the letters well enough or who have any type of impairment, such as dyslexia or other text processing impairments. Again, this is also terrible with a text-to-speech screen reader.
  3. The hearts with the text “can they just figure it out.” The hearts can be problematic for a number of readers, just as with the above 2 issues. The curly font will also pose a problem for text-to-speech screen readers that have to read this out letter by letter. The font itself will also be a problem to read for some visual readers because of its bold, italic, curly nature.
  4. The text at the bottom with “buy it now” and the two “awesome trope” lines are problematic because of the use of emojis as bullets. Each emoji has its own way to be read out via text-to-speech, and it may not carry the meaning you want it to. Plus, there are some who won’t understand the meaning even if engaging visually, and that may keep them from reading what’s after the bullet.

What To Do Instead

I know your question is probably, what do I do instead? Here are my suggestions:

  1. Keep the text of the post visually simple, using the fonts that Facebook gives you. Don’t try to fancy it up.
  2. To draw visual interest, use an image.
  3. If that image contains any text that you want your audience to understand, make sure it’s also in your text post since not everyone will be able to perceive the image (that’s a topic for another post…)
  4. Make sure you add alternative text for the image so that Facebook doesn’t generate it for you.

I hope you understand how difficult it can be for some readers when you use a font generator, and I hope this post has persuaded you to stop doing it and find other ways to present your content.

Example of How a Screen Reader Presents Font Generator Text on Facebook

This 84 second video demonstrates how a screen reader reads out the text from a font generator. This is from the Facebook post, which is the same as the example pasted in above. The original Facebook post is displayed on screen. The text that you’re supposed to be able to easily read is “Series Sale. Can they just figure it out. Buy it now. Awesome trope 1. Awesome trope 2.” This video includes captions, and there is also a transcript below the video.

Video Transcript

[0:00] Blackstar, Georgian letter “gh,” undertie, space with combining cedilla, bullet, star, bullet, space with combining cedilla, undertie, space with combining cedilla, bullet, star, bullet, space with combining cedilla, gust of wind, space with combining cedilla, bullet, star, bullet, space with combining cedilla, undertie, Georgian letter “gh,” blackstar.

[0:17] Light shade, S, light shade, E, light shade, R, light shade. I, light shade, E, light shade, S, like shade, light shade, S, light shade, A, light shade, L, light shade, E, light shade.

[0:23] Blackstar, Georgian letter “gh,” undertie, space with combining cedilla, bullet, star, bullet, space with combining cedilla, undertie, space with combining cedilla, bullet, star, bullet, space with combining cedilla, space with combining cedilla, bullet, star, bullet, space with combining cedilla, undertie, Georgian letter “gh,” blackstar.

[0:39] Two circling hearts, mathematical bold italic small C, mathematical bold italic small E, mathematical bold italic small N, mathematical bold italic small T, mathematical bold italic small H, mathematical bold italic small E, mathematical bold italic small Y, mathematical bold italic small J, mathematical bold italic small U, mathematical bold italic small S, mathematical bold italic small T, mathematical bold italic small F, mathematical bold italic small 1, mathematical bold italic small G, mathematical bold italic small U, mathematical bold italic small R, mathematical bold italic small E, mathematical bold italic small 1, mathematical bold italic small T, mathematical bold italic small O, mathematical bold italic small U, mathematical bold italic small T, two circling hearts.

[1:18] Book, buy now, yellow five-pointed star, awesome trope one, yellow five-pointed star, awesome trope two.