Blurry text on some slides

It's probably the HTML5 issue, as it has font support limitation. And also, it won't vectorize your text and graphic as well. 

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?

Here is a sample scene from the course. 

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.

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.

Alexandra - but then end user dont see the proper fonts (as selected in SL).. as the fonts are not embeded/converted, they get exchanged with default browser ones.. talking about HTML5 export.. Am I right?

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. 

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.

What version and update of Storyline are you using Sebastjan? I didn't see it noted above, and I do know it's something our team has worked on throughout multiple updates and versions. The latest is Storyline 2 Update 10 here. 

Hi Ashley,

The blurry of text also occurs to my project. I am now using Storyline 2 Update 11.

Any resolution to this?

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. 

I am having the same issue. Also using Storyline 2 Update 11, Windows 10, Chrome latest. If I copy and paste the slides into a new project, they are fine. I have 5 files using the same template and only 1 was experiencing the issue. I think something went bad/corrupt.

Jacqui,

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. 

Hi Ashley, I found out the issue I was having. The story size was small, hence after I changed it to 1024 x 768, it was so much clearer.

Very good Alvin - thanks for popping back in to share.

HI, I'm getting the same blurry text on over 90% of my slides after publishing and running from Articulate Online.  did you by chance find a solution? the blurriness will be unacceptable for my company.

Hi Michael,

Would you like to try changing your story size to 1024 x 768? It helps for me.

That's next on my list to test, but I'm afraid that will force me to adjust the positioning and size of elements on every screen. oh well.

Hi Michael,

I can see that you’re still struggling with text bluriness since you reached out here and in this other discussion. I’d love to help.  Can you take a look at the questions I asked in the other discussion? We can keep the conversation going over there!

Totally understand your worry! 

Well, you can always save another copy and do the testing. I hope your elements don't go haywire. :S

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).

Thanks for popping in to share the tip, Alvin! 

That's great! It is a best practice to set the story size before the start of any project :)

HI, I'm getting the same blurry text on over 90% of my slides after publishing in SL360 and running from Articulate Online. did you by chance find a solution? the blurriness will be unacceptable for my company. Please Help me....

Hi Vijay,

It looks like I replied to a similar question here.

We can keep the conversation going there, and I just wanted to share the link for anyone following along.