Caption Text Size in Storyline

Last updated: 5/23/2025

Caption text size in Storyline eCourses is currently controlled through a percentage value in the Closed Captions section of Color & Effects tab, within the Player Properties panel.

Captions are set to 100% size by default, but it's recommended that you instead treat 125% as the minimum size and consider using 150%, if not a little larger.

125% typically results in text that is roughly 12pt in size, which is commonly considered a minimum size for easily readable text. 150% corresponds with roughly 14pt text, which should be even easier to read, which is important because, in terms of providing an equivalent experience, it should be as easy to read caption text as it is to listen to eCourse audio.

100%, on the other hand, corresponds with roughly 10pt text, which is typically considered small enough to require extra effort to read.

Customizing caption size to browser width

Caption text size and position relative to slide content varies slightly depending on one's display settings. Thus, you may find that captions that do not obstruct non-decorative slide content on a high-resolution external monitor do obstruct non-decorative slide content on a lower-resolution laptop monitor. This can be challenging, and potentially limiting, for eCourse developers who need their product to work for all learners, regardless of their monitors.

One technique you can employ in Storyline eCourses is to use a trigger to execute JavaScript that will add new caption size rules to an eCourse's CSS. To experiment with this technique:

  1. Create an Execute JavaScript when timeline of this slide starts trigger in an eCourse's opening slide

  2. Copy the following JavaScript code and paste it into the trigger's JavaScript Editor panel:

    const addCss = css => document.head.appendChild (document.createElement("style")).innerHTML=css;
addCss(".cs-npxnabnsnfns10111100101 .cs-seekcontrol .cs-seek {background: #757575 !important;} @media (max-width: 1500px) {.view-desktop .caption, .theme-unified .caption {font-size: 80% !important;}} @media (min-width: 1501px) {.view-desktop .caption, .theme-unified .caption {font-size: 100% !important;}} @media (min-width: 1921px) {.view-desktop .caption, .theme-unified .caption {font-size: 120% !important;}}");
  3. Review the outcome on monitors of different sizes/resolutions and adjust the @media browser widths and font-size rules as necessary; remember, the ultimate goal is for captions to display at an easily-readable size (e.g., 12-14pt), without obstructing non-decorative slide content, for as many monitor sizes as possible
  4. Finally, if the eCourse allows learners to leave and then resume from where they left off, consider copy/pasting the trigger into all slides
    • Once the trigger fires in any slide, the CSS rules it adds will remain in effect throughout the remainder of the learner's current session, but if the learner exits the eCourse, then re-opens it and resumes their progress, the CSS rules wont be present unless another trigger adding the rules fires
    • So, if you want the rules to be present regardless of which slide a learner begins a session within, you'll need to include this trigger in every slide

If the trigger, JavaScript and CSS execute properly, captions should display at an easily-readable size on smaller/lower-resolution monitors without occupying as much of the slide area (and potentially obstructing slide contents that are unobstructed on larger/higher-resolution monitors).

See also within the Checklist