Crispness of edges of fonts in Storyline?

I am wondering if the modules that we are making with Storyline are having the fonts have edges that appear just a bit fuzzier than is normal.

Can you tell me -- if you look at the title slide of this module -- look at the black words

Evaluation for Education Programs

  and also  

Module 2 

Module is at: http://tinyurl.com/cvrep2e

Do the font edges seem fuzzy to you?   And if so, is that pretty much normal for Articulate, or can it be improved?

BTW, the chosen font is the default one called "Articulate."

Any thoughts or suggestions on that?  THANKS! --eric

138 Replies
Paul S.

I have to agree with Roman here. The rendering problem update should be available to all users ASAP. I use Sketchup Pro as my 3d drawing software and when they make rendering improvements it is for both the free and pro (paying) users. It is an ongoing improvement and makes good business sense because the company wants their stuff looking as good as possible when its on display for public consumption. Fuzzy text = Not Cool.

James McLuckie

Yes, I agree with Paul and Roman. As much as I think Storyline is a great tool, it's not fully fit for purpose with the fuzzy text issue. Often I have had to undertake very time consuming workarounds (e.g. preparing text in graphics packages and importing it in as PNGs) to get around the issue. 

Caryn Stein

Has there been a fix to this in the product? I'm noticing this as well and I find that it makes the text more difficult to read and increases the eyestrain when reading the content within the course material. It really makes our modules look unprofessional, which isn't the result I'm hoping for after investing in this product. If there's no fix for this, will we be able to get a refund?

Nancy Woinoski

Adrian Stokes said:

Woo that I came across this thread, I thought it was my eyes going funny!

Any update on this at all?  Its causing issues in my business as the fonts are not behaving and I am limited to the fonts I am allowed to use so some of the workarounds here aren't going to be useful for me :(


No change yet. Some fonts work better than others and I find the larger sizes work better.

Geoff Silkey

Discovering this problem is very disappointing. Typography is an important part of eLearning, and a huge part of graphic design. Web fonts have become an integral part of web design, and there are many free, downloadable, quality fonts. The font rendering problem is a large one for anyone who cares about fonts (and IMO all ID's and eLearning devs should care). Waiting until the next release doesn't reflect well on Articulate's commitment to quality graphic design in eLearning.

Sid Apolinario

To avoid this issue for now, I create a text variable containing just " " and attach this variable at the end of the text inside the textbox.

I create atext variable named "C" with the value " " (Without the quotation). Then I add a single instance of this as a text reference inside a text box. 

Example:

"The quick brown fox%C%"

By doing this, the text "The quick brown fox" is now looking better that without the variable. I am attaching a sample file and its published output.

Hope this helps. ^_^

Sid Apolinario

Glad to help! Here's some consideration for this workaround though:

  • you need to use custom bullets because the bullets will decrease its size when you add this workaround per textbox
  • you might need to adjust the fontsizein your content.
  • HTML5 version will need some tweaking in the css file because this workaround is for the Flash version only. So far I wasn't able to make this work on both Flash and HTML5 at the same time yet.

hth

Martin Horibaldo

We also now use the Google-Webfonts "Open Sans".

The Limitations:

- Bullet-Points won't work correctly

- You have only one font-Size for everything - only drag-items have a different css-style.

Change this value in player.css:

body {font-family: 'Open Sans', sans-serif; }

html > body   { font-size: 14px; } 

Unfortuneately, the headings do not work:

h1,h2,h3,h4,h5,h6

Add this to story_html5.html

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>   

Add a Zero-Variable to everey text-field like %clean%.

I think integrating google-webfonts in storyline would be the best solution for the crispnes-problem. There are only missing some css-options for different headings.

Geoff Silkey

Adding a variable to a text field does help, but it also seem to cause other layout problems. The published output I'm seeing is different in every browser - this is in the flash version, not HTML5. It is quite frustrating. That's not to mention how different the published version looks from the authoring or preview environment.


Ashley Terwilliger

Hi Ivan and welcome to Heroes!

I'm glad that this thread has assisted you, and it's something our Quality Assurance team is aware of and looking into, although I don't have an update to share regarding a time frame for a fix. We'll be sure to post something here when there is additional information to share. 

John Curran

This has always been an issue for me and the worst thing about it is that it is inconsistent. Sometimes the text looks OK, sometimes it looks terrible.

Really interesting to see that someone had said that Arial is one of the worst fonts to use in this respect.

Is there an official update on this font rendering issue?

Ashley Terwilliger

Hi John,

This issue remains with our QA team, and it's something that I know a lot of users have asked about here, but I don't have any other updates to share. You'll want to enable the Check for updates within Storyline so that you can be notified of any new updates available, subscribe to this thread so that you receive the email notifications and I'd also suggest subscribing to the Word of Mouth blog. 

Jon Gledhill

Wow - coming to the presentation stage of my first project and I can't understand why everyone isn't complaining about this issue.

The variable workaround improves the display greatly but absolutely messes around with display sizing so hotspots no longer align with text. This really does need to be fixed.

It would be nice if you define a section text as a hotspot and then the hotspot moves with it as the display alters.

I've tried Verdana and Calibri which work well for clarity. Has anyone found a font to use with the variable fix which is sans serif and keeps the font size pretty similar to how it looks in Articulate?

Jon

Ashley Terwilliger

Hi Jon and welcome to Heroes,

We have shared the text issue and this thread with our QA team and they're looking into potential fixes. I don't have any updates to share at this time, but I hope that other users are able to weight in on their experiences and what fonts they've found to work the best.

Also, I was curious to about your other question in relation to " define a section text as a hotspot and then the hotspot moves with it as the display alters". I'm not sure I understand what you're looking to set up, something with a responsive design? Currently Storyline doesn't have support for responsive design, but it may be something you'd like to share your thoughts on with our product development team in the form of a feature request.

Jon Gledhill

Hi Ashley

I think I'd prefer it if it worked as I feel it should rather than suggest another feature. placing a hotspot over a text box as a way to have the text below act as a link for the user works great. That is until you wish to use the "text variable technique" to make your text clearer on delivery. When you do this the size of the finished text is different to how it is displayed in the edit mode of Storyline. This makes it very hard to get the hotspot lined up.

Ashley Terwilliger

Hi Jon,

I certainly understand and we have shared with our team the issue in regards to the text publishing quality as a bug. I don't have a timeframe in regards to a fix or when it would be included in a future version or update. I think I'm understanding your set up a bit more now in that the hotspot isn't covering the entire variable reference as the hotspot is a predefined area whereas the variable reference could be wrapping or expanding? Since that's not a built in feature of how hotspots work, it would have to be a feature request at this point. Have you tried just hyperlinking to the textbox itself instead of using a hotspot?

Jon Gledhill

Thanks Ashley. I really do hope a fix for the text sharpness is forthcoming as it may in the future force me to look to other software for projects.

On a second note thanks for pointing out my glaring mistake in the use of hotspots over text! I'd never noticed the hyperlink option on the drop down. Perfect. Thanks.