When you’re designing e-learning, the text you use is one of the biggest ways you can communicate with your learners. That means styling text with fonts that complement and reinforce the subject matter of the course.
Most of today’s computers come with a library of installed fonts, known as system fonts. Those system fonts are typically fine for grunt work like email, spreadsheets, and documents, but sometimes they just aren’t the right fit for the creative work of e-learning design. When your design calls for a specific look and feel, you might need to look beyond system fonts for something with a little more personality.
Tons of websites offer fonts for sale or for free. But that opens up another set of questions: How do you know which is better quality—paid or free? And what do you need to know about working with these new fonts once you get them into Storyline 360?
I’ve done some digging to get you answers to these questions and more. So let’s take a look at what I’ve found and along the way I’ll share some tips for sourcing fonts, working all types of text elements in Storyline 360.
Finding Fonts for Your Storyline 360 Projects
You’ve got a special project coming up and you’d really like to find a font that will work with the subject matter. Where to start?
The internet, of course! Finding fonts on the web these days is super-easy; so easy it can be hard to tell which ones are safe to use. Let’s break down the fundamental differences between free and paid fonts.
Free fonts are obviously easiest on the old pocketbook, and they’re great when you’re looking to prototype with some different visual design options.
However, free fonts do come with some limitations. For instance, it’s common for font designers to offer the free version of their font in only one stroke weight, like bold, light, or regular. All of the other stroke weights cost money.
Also, with free fonts, you tend to get what you’ve paid for. Font designers might not invest as much time on the fine details with a font they’re giving away for free. They might cut corners on things like proper kerning (the spacing between characters) or they might choose to leave out special characters entirely. Fonts that aren’t properly kerned can be hard to read and might not render or scale well on different devices. And missing special characters can force you to use a mish-mash of similar fonts to try and maintain some visual cohesion in your design.
A final drawback with free fonts is that they are often just stolen licensed fonts, repackaged with the copyright removed. This means you could end up using a “free” front illegally. Yikes!
How can you play it safe with free fonts? Well, just as you would with any other asset, always check the licensing to make sure it’s free for commercial use. When you download the font file, look for a readme text file in the zip folder. These generally contain the licensing terms and conditions. If your downloaded “free” font doesn’t have these terms and conditions spelled out … be suspicious.
There are many great sources for free, high-quality fonts on the web that are on the up-and-up; my go-to is Google Fonts. These fonts are open-source web fonts and I use a ton of them in my Storyline 360 projects. I love that there’s a variety of styles to choose from, and Google Fonts always look great and provide a full set of special characters for me to work with.
One last note about free fonts: Although some pre-installed Windows Fonts can be published to the web without purchasing an additional license, others like Arial, are owned by Monotype and are subject to a web font license. Personally, I’ve found Open Sans, Lato, and Source Sans Pro—free web fonts installed with Storyline 360—to be good substitutes for Arial. But if you’re already using a lot of Arial in your e-learning, you'll want to learn more about Monotype licensing here.
If you have the budget for assets, why hassle with free when you can just purchase a font for your project? Fonts for purchase tend (not always but often) to be higher quality and are more likely to give you a full assortment of stroke weights and special characters to use. Also, purchasing a font might mitigate concerns about how legal your chosen font is to use.
One drawback with using paid fonts is that less expensive ones often suffer from the same quality issues as free ones (see “Free Fonts,” above). Also, you might find font licensing is a little tricky. Some font designers require you to pay for separate licenses for print and web versions of the font. As such, once again it pays to read the fine print to make sure the font you’ve purchased can be used in the ways you intend to use it.
Before You Use Custom Fonts in Your Storyline 360 Project
Whether you choose to go with free or paid custom fonts, here’s a handy tip: create a test project using your font of choice and publish it in Storyline 360. Upload the published output to the environment your learners will view it on. Test this published course on any devices learners will view it from, including desktops, smartphones, and tablets. Make sure that the font you’ve chosen is rendered correctly across these devices and their web browsers. If it’s not rendering correctly or doesn’t scale well, this step will save you some time-consuming rework later on.
On the other hand, if you’re satisfied it’s clear and legible and it’s working wherever you need it to work, you’re ready to add it to your Storyline 360 project. So let’s talk about that next.
Working with Fonts in Storyline 360
At this point, you’ve gathered all of your content sources, design docs, and assets (including fonts). You’ve done some quick testing to make sure your custom fonts look great. Now you’re ready to get to work, so here are some font-specific things to know as you assemble your project.
First things first: when you install Storyline 360, you’re also getting an assortment of popular open-source web fonts (Lato, Open Sans, and Montserrat, to name a few). Here’s a full list of the installed fonts in case you’re curious.
If you’re already running Storyline 360, when you open an existing project, Storyline 360 will scan your project and let you know if any of the fonts you’ve used are missing from your computer so you can install or replace them.
Once you’ve installed any custom fonts you’ve downloaded to your system (you can check out installation instructions here), they’ll automatically appear in the fonts drop-down list in Storyline 360 the next time you open up the application.
Pro tip: If you install fonts while Storyline 360 is open, you’ll need to close Storyline 360 and then reopen it to see your newly installed fonts.
It’s also worth noting that Storyline 360 does not support Adobe Type 1 PostScript fonts. However, it does support Adobe TrueType and OpenType fonts. You can learn more about how to tell if you have PostScript fonts in your project by following the instructions in this support article, Storyline 360: Adobe Type 1 PostScript Fonts Aren’t Supported.
Taking Advantage of Modern Text Rendering
Storyline 360 uses the latest text-rendering technology to make sure your text flows beautifully with consistent spacing, and that it’s legible on every device. Any new projects you’re creating in Storyline 360 will automatically take advantage of these improvements without you needing to lift a finger!
However, if you’re working with an existing, older Storyline project, that project might still be using classic text. To see if your project is using classic or modern text, just open up your project and go to the design tab on the ribbon. Click on the fonts drop-down and look at the bottom of the list. You'll see a checkmark next to Use Modern Text if your project is using modern text. If there's no checkmark there, click the box next to Use Modern Text to convert your entire project. Here’s a quick .GIF to show you where to find the Use Modern Text setting:
You can read more about modern text rendering in this article: Storyline 360 Modern Text Rendering.
Applying Accessible Text Styles to Your Entire Project
As you've read this article, you may have noticed that your eye was drawn to the title first, then the subheadings and body text. For a sighted person, text elements like headings and subheadings help to establish a visual hierarchy that makes reading content a little easier. But what happens when you don’t have visual cues to help you understand the hierarchy of information?
That’s why applying accessible text styles to your Storyline 360 projects is such a big help to screen reader users. When you apply accessible text styles to your entire project, you create more design consistency (which helps all learners) and empower learners who use built-in screen readers by making it easier for them to distinguish the hierarchy of information, so headings, hyperlinks, quotes, and other custom text have context.
For example, if you format some text on your slide so it appears bigger and bolder than the rest of the text, sighted learners can easily tell that bigger text is a heading. However, screen reader users won’t know it’s a heading unless you apply a heading text style, which will tell the screen reader to announce the text AND its semantic formatting—for example, heading 1, heading 2, hyperlink. By using accessible text styles, you ensure that all your learners with accessibility needs have the context they need to understand your content.
Create and Rename Custom Text Styles
Storyline 360 has six built-in text styles—normal text, headings 1-4, and hyperlink. But you can also create your own to give screen reader users additional context and ensure all learners have an equivalent learning experience.
Pro tip: Want to use a more recognizable name for your custom styles? You can easily rename custom text styles so learners have a better understanding of the context.
Define Styles for Hyperlink States
Have you ever felt frustrated because you couldn’t locate the tiny, unnoticeable “unsubscribe” hyperlink in a spam email? Save your learners from experiencing the same frustration of locating and interacting with hyperlinked text in your courses. Storyline 360 gives you the ability to customize hyperlink states (normal, hover, active, and visited), which can help you maintain a consistent design across your project while also providing more distinction for learners with low vision. You can edit the text color and decoration settings for each state and Storyline 360 will automatically update all the links in your project.
There's a lot more to unpack when it comes to making your Storyline 360 projects accessible. Check out these helpful resources to learn more:
- Storyline 360: Using Text Styles
- Storyline 360: Accessible Text Styles
- Storyline 360: Creating & Renaming Custom Text Styles
- Storyline 360: Hyperlink States
- Everything You Need to Know About Working with Text in Storyline 360
Tips and Timesavers for Working with Fonts in Storyline 360
With your Storyline 360 project underway, here are some more things you can do to make working with custom fonts even faster and easier.
Use Design Themes
Design themes in Storyline 360 work similarly to design themes in PowerPoint and they allow you to quickly give your course a more consistent visual design. Design themes encompass visual characteristics like theme colors, theme fonts, slide masters, and feedback masters.
Each font theme specifies both a heading and a body font to be applied to your project. The heading font is automatically applied to slide titles, question text, and marker titles. The body font is automatically applied to slide text, including shapes, captions, and buttons, as well as quiz answer options and marker descriptions.
To use your newly installed custom fonts throughout a new Storyline 360 project, you can create your own custom design theme based on one of the built-in themes. The process is pretty straightforward and you can read about how to do it in this article: Storyline 360 Working with Theme Fonts.
Use Find and Replace to Quickly Switch Up Fonts
What about changing a custom font in an existing Storyline 360 project? One way is to customize the theme font, as I mentioned above.
But an even easier way is to use the find and replace feature. Simply choose the font you want to replace and the font you want to use instead and Storyline 360 will do the rest! Here’s the low-down on how it works:
- On the home tab on the Storyline 360 ribbon, click the drop-down arrow next to Find/Replace. Choose Replace Fonts.
- Use the “Replace” drop-down to select the font you want to replace.
- Use the “With” drop-down to choose the new replacement font and then click Replace.
- That’s all there is to it!
And here’s another .GIF to show you the above steps in action.
We’ve covered a lot of turf here and yet we’ve only scratched the surface of this topic. There are all sorts of great tips out there for managing and working with fonts—and the E-Learning Heroes community is the best place to find them!
If I’ve left any of your font questions unanswered, take advantage of our discussion forums for some quick answers.
What are your favorite sources for finding custom fonts? What are your tips and tricks for working with them in Storyline 360? Share your comments with me, below. I’d love to hear from you!
Want to try something you learned here, but don’t have Articulate 360? Start a free 60-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.