Forum Discussion

SherriFricker-3's avatar
SherriFricker-3
Community Member
7 years ago

Rise: Default Font Size

In a course we are building, we are required to have a minimum font size of 18 for accessibility purposes.  Is there any way to set the default font size (not just default font)? What happens is even if we save templates with content at 18 pt, as soon as we paste (whether we use paste, paste special, or paste and match formatting) it always resorts to a 17 pt font.  This is very frustrating and can be time consuming for longer courses.  Any insight you can provide would be great! 

72 Replies

  • It is laughable that so many years on this issue of setting a default font size is not addressed. It seems painfully obvious that his should be part of authoring software. Why are simple features, requested by those that need to use this software ignored by Articulate?

  • Workaround: Changing Default Font Sizes in Rise Using the user-style.css File

    For years, many of us have asked Articulate for the ability to set global default font sizes in Rise instead of manually adjusting text in every block. I recently discovered that the exported course package already contains a file that can be used as a workaround.

    This approach lets you change typography across the entire course with one file. I'm looking into how to use the same process to change the color palette. An there are many other settings to be discovered like outlines and more. 

    ⚠️ One important limitation: this does not change the editing experience inside Rise. You still won’t see the new font sizes while designing the course. The changes only appear after exporting the course. However, it can still save a significant amount of time because you don’t need to manually resize text in every block.

     

    Step 1 — Export Your Course

    In Rise, click Export (SCORM or Web works).

    Download the ZIP package.


    Step 2 — Extract the Package

    Right-click the ZIP file and choose:

    Extract All

    Inside the extracted folder you will see several folders.


    Step 3 — Find the CSS Override File

    Navigate to: custom/user-style.css

    Open this file in a simple text editor (Notepad, TextEdit, etc.).

    You will likely see:

    /* No custom CSS provided */

    This file can be used to add your own style overrides.

     

    Step 4 — Add Your Overrides

    Example: Set all body and block text to 18pt

    .fr-view p,
    .fr-view li,
    .lesson p,
    .lesson li { font-size: 20pt !important; }

    Example: Also force headings to 24pt

    .fr-view h1,
    .fr-view h2,
    .fr-view h3,
    .fr-view h4,
    .fr-view h5,
    .fr-view h6,
    .block-text__heading,
    .lesson-header__title { font-size: 20pt !important; }


    Save the file.

     

    Step 5 — Test the Course

    Open: content\index.html

    The course will launch in your browser so you can confirm the changes.

    Step 6 — Re-zip and Upload

    Select all extracted files, zip them again, and upload the new ZIP to your LMS.

    Useful Classes You May Want to Customize

    These classes control most of the visible text in Rise.

    .fr-view
    (Main container used by the Rise text editor.)


    Controls:

    • paragraphs

    • lists

    • headings

    • most block text


    Example:

    .fr-view p { font-size: 20pt; }

    .block-text__heading

    Heading for text blocks (section titles).

     

    Example:

    .block-text__heading { font-size: 24pt; }

    .lesson-header__title

    The large lesson title at the top of a lesson.

     

    Example:

    .lesson-header__title { font-size: 32pt; }

    .lesson

    Main container for lesson content.

    Useful for global adjustments.

     

    Example:

    .lesson { line-height: 1.6; }

    .nav-sidebar

    Controls the course navigation sidebar.

     

    Example:

    .nav-sidebar { font-size: 14px; }


    Helpful Tip

    If you want to explore more classes in your course, open the course in your browser and press F12 → Inspect. This allows you to see the HTML structure and identify selectors used by different blocks.

     

    Important Note

    When you export the course again from Rise, the package is rebuilt, so you will need to copy your custom CSS into the new export.

    My team plans to keep a standard user-style.css file and reuse it across courses for WCAG compliance. We may even create one for each client. 

  • As I posted a workaround for this issue, I thought to myself, "watch, after 6 years, they'll add this feature right after I click send." 

    Sure enough, that seems to be what happened. Maybe I missed earlier notices, but I just found an announcement posted 15 hours ago about how this functionality has been added as a Labs feature. You can activate it from your account > labs settings, and then it appears in the Theme settings for your course.

    Give it a try. It worked well for me.

    I'm going to try this again!

    I'll post a workaround for fully customizable palette colors and see if they add that to labs as well! Keep an eye out for Rise updates!


    • TracyWindsor-96's avatar
      TracyWindsor-96
      Community Member

      Well, I didn't see the notice either -- but thanks to you I'm trying it out!

    • PhilFoss's avatar
      PhilFoss
      Community Member

      Patrick, doing some testing with this feature in Labs, it still leaves paragraph text inside tabs, accordion, and other blocks at 16px after I changed my default body size to 18px. So I think your solution would work more consistently for those with real typography requirements. However I'd be careful of using the .fr-view class, the fr comes from Froala text editor, but Rise switched to using the Tiptap editor somewhat recently, you've probably noticed classes for both text editors used in the html. So eventually the .fr-view class might be removed.