Blurry text on some slides

Jul 21, 2016

Hi all,

I am doing some testing of a module everything is working great on PC and then I tried the tablet version and some of the text is blurry, often to the point of not being readable at all.

There is no consistency though. Some slides have the same font and font size and render perfectly, others don't. Some are text boxes, some are text in a shape or callout.

As per screenshot above the text in the buttons and content are the same font.



25 Replies
Crystal Horn

Hey there Tristan.  First I'd like to share this discussion about custom fonts being handled in HTML5 output; basically, in your slide content, your font will be embedded in the project (with the exception of variable references and the Player text).

So, what you're seeing is inconsistent with what we'd expect.  Would you be able to share your .story project here for some testing?

Crystal Horn

Thanks, Tristan, for the file.  I was able to take a look.  Everything looked ok in the editing environment and in Preview.  I published for Web, and I viewed the HTML5 output on our supported HTML5 browsers on my desktop, first.  The output looked good.  I then tested on the iPad in mobile Safari, and it seemed ok there, too.

Could you confirm if you are viewing it using a supported HTML5 browser on the tablet?

  • Mobile: Safari in Apple iOS 7 and later, Google Chrome (latest version) in Android OS 4.1 and later

If so, I might try importing those slides into a new project and republishing to see if that eliminates the inconsistency between slides.  And if all of that fails, let's get you into a support case so that our engineers can probe a bit more deeply.

Alexandra Masche

Hi Tristan Hunt,

I would guess it is a known problem of storyline with the font rendering. Best solution in that case is:

  1. Create a new string variable called fontfix
  2. Add this empty variable at the end of each text in a textfield (Example: My text goes here. <fontfix>)

Now the text won't be rendered and appears not blurry anymore. Downside of this workaround: You can't use all animation-effects with these textfields. 

Good luck.

Ashley Terwilliger-Pollard

Hi Sebastjan,

I know that the method Alexandra shared is something that folks had done in the past with just a general variable reference (even though it's empty) to prevent blurry text issues in Storyline 1. Although the fonts for references aren't embedded as detailed here, it may display in the less blurry set up you're seeing based on how the texts are rendered upon publish. 

sebastjan f

What Alexandra suggested (among others) is a workaround - to get text less blurry.. BUT - I can not use it if my client has OpenSans (or any other non-default system font) font in their design - while SL export with above mentioned hack gives me default Times New Roman. So I am stuck - client wants HTML5 solution and has a designed template.. but ups - the software that I am using claiming to be "The most powerful, most intuitive software for creating interactive courses. It’s the world’s favorite e-learning authoring tool, better than ever." cant handle that.

Ashley Terwilliger-Pollard

Hi Alvin, 

Thanks for sharing the image here. I'd love to see the .story file in question as well to compare this, as I'll admit my eyes are not the best at spotting the blurriness. :) Also, can you tell us more about where you're hosting and viewing the content? We have seen the HTML5 output still display some blurriness as items are not vectored in the HTML5 output and you'll also want to confirm that you're using a supported browser as detailed here.   The blurriness of HTML5 output specifically is something that is still with our QA team.

If you'd like to share the .story file here we can take a look to confirm and include it in the report filed so that we have a good estimation of impacted users. 

Ashley Terwilliger-Pollard


We'd be happy to take a look at those and try to compare them to help determine what's occurring, but corruption is notoriously difficult to track down.  We'll also want to know where you're hosting the content to try and replicate the behavior. You can upload files to our team here. 

As a reminder for ways to help prevent corruption, you'll want to look at these best practices and guidelines. 

Michael W

Hi Alvin, by adjusting the story resolution to 1024 width and keeping the aspect ratio, I didn't have to adjust any of the graphics nor text.  And the best result is that all the text on every slide is now crystal clear! Thanks so much for following up. (So it appears that one should be careful when he/she customizes their "stage" storyline size, as text may not render properly).

This discussion is closed. You can start a new discussion or contact Articulate Support.