Typography and Fonts

Type sets the tone of a lesson before learners read a single word. Berdee gives you a curated set of Google Fonts plus the styling controls every text-bearing widget needs, so you can keep a lesson visually consistent without managing CSS.

There are three layers, from broadest to narrowest:

1. Lesson theme defaults. Set one sans-serif and one serif font for the whole lesson.
2. Per-widget font. Override the lesson default on any widget that shows text.
3. Text effects. Add motion or styling effects to text widgets for emphasis.

For the sizes rather than the faces, the widget library's Heading, Subheading, and Body tiles drop a text box already sized for that job — see Text Presets. They set size and weight only, so the font still comes from your theme.

Lesson theme: set the defaults once

Every lesson has a theme that defines the default sans-serif and serif fonts. Most widgets use the sans default; the Text Highlight and Flashcard widgets default to serif because longer reading passages and study cards feel calmer in a serif face.

If you picked a theme or palette when you created the lesson, these two slots start out as the palette's pairing — for example, the dyslexia-friendly Lexend Clear palette puts Lexend in both slots. You can change them here at any time; the palette only sets the starting point.

To change the theme:

1. Open the lesson in the studio.
2. Open the ⋯ menu in the top bar and choose Settings.
3. Find the Typography section.
4. Pick a Sans-serif font and Serif font from the dropdowns.

Every widget that uses the Theme sans or Theme serif font value will update across all scenes. This is the fastest way to change a lesson's voice without touching every widget.

Per-widget font: override on a single widget

Sometimes a single widget needs a different face. A scene title might want a display script, a callout might want a monospaced font for code, or a Flashcard might want a bolder display serif.

To change a single widget:

1. Select the widget on the canvas.
2. In the Properties panel on the right, find the typography controls.
3. Click the font picker to open the categorized list.
4. Pick a font from one of the sections.

The font picker organizes options into six groups so you do not have to scroll a long flat list:

• Theme defaults: Theme sans and Theme serif. Pick these to inherit the lesson theme.
• Sans: 12 modern sans-serif fonts including Inter, Manrope, Open Sans, Nunito, Geist, and Space Grotesk.
• Serif: 12 serif fonts including Fraunces, Playfair Display, Lora, Merriweather, EB Garamond, and Instrument Serif.
• Dyslexia: Three accessibility-focused fonts: OpenDyslexic, Lexend, and Atkinson Hyperlegible. These improve readability for many learners with dyslexia or low vision.
• Fun: 12 display fonts including Caveat, Pacifico, Lobster, Bangers, Press Start 2P, and Permanent Marker. Use sparingly for titles, callouts, or themed activities.
• Mono: Four monospaced fonts including JetBrains Mono and Fira Code. Useful for code, timers, or fixed-width labels.

Each font row in the picker is rendered in its own face so you can compare looks at a glance.

If a widget is currently using a custom font and you want to return to the lesson default, click the Reset to theme button on the picker.

Bold, italic, size, and color

Below the font picker the same controls appear on every widget that has text:

• Bold: click B to switch between regular and bold text. Semibold text (like a Subheading) already counts as bold; turning Bold off and on again brings back the weight it had.
• Italic: click I for emphasis or for traditional book-like passages.
• Size: pick a common size from the dropdown-style field, or type a specific size when you need one that is not listed.
• Text color: pick from the swatches. Use Transparent when you want the text or background color to disappear.

These controls compose with the font family. A lesson can use the same family across every widget and still feel varied because of how bold, italic, size, and color combine.

Picking the right font for the lesson

A few rules of thumb:

• One sans + one serif per lesson is usually enough. Two competing display fonts make a lesson feel chaotic.
• Use Dyslexia fonts when accessibility matters. Lexend has the broadest weight range and works well for body copy. OpenDyslexic and Atkinson Hyperlegible are also excellent choices for learners who benefit from highly distinct letterforms. For setting a whole reading passage (font, size, line length, and alignment together), follow Make a reading passage easy to read.
• Reserve Fun fonts for titles and accents. A whole scene set in Pacifico is hard to read; a single scene title in Pacifico over a clean sans body feels intentional.
• Mono for things that should look like code or counters. Avoid mono for prose unless the activity is about programming.

Text effects (Text widget only)

The Text widget supports two extra controls that no other widget has: visual effects and entrance effects. They live in the Properties panel under the typography block.

These effects compose. You can pair an aurora gradient with a typing animation, or sparkles with a morphing string list, and both render together. The one exception is Spinning circle: it places each letter on the circle itself, so it can't play an entrance effect. While Spinning circle is selected the entrance picker is turned off; pick a different visual effect to add an entrance.

Visual effects

Visual effects change how text looks at rest:

• Aurora gradient: animates a colorful gradient across the letters. Pick two to six colors and a speed.
• Line shadow: a slanted decorative shadow behind each letter. Pick a shadow color.
• Sparkles: floating sparkle particles around the text. Pick a count (capped at 30) and one to three sparkle colors.
• Spinning circle: lays the text out around a circle that rotates. Pick a duration and radius. It doesn't combine with entrance effects (see above).

Entrance effects

Entrance effects start when the text first appears: when the scene opens, or — for a text box that is hidden until a button or condition shows it — at the moment it's revealed. Preview effect in the Properties panel replays one on demand.

• Animate in: fades or slides text in by character, word, or line. Pick the unit and the animation style (fade, blur, slide up, slide left).
• Typing animation: types through a sequence of strings like a typewriter. Add up to ten strings, set a speed, and choose whether it loops. With Loop off it stops on the last string and leaves it on screen; with Loop on it deletes and starts over forever.
• Reveal on view: reveals letters or words as the scene scrolls into view.
• Hyper scramble: letters scramble through random characters before settling on the final text.
• Morph between: smoothly cross-fades between up to ten different strings on a timer, and keeps cycling for as long as the scene is open. Add at least two strings to use this effect.

The strings you give Typing animation and Morph between replace the widget's own text on screen, so the text box is sized to fit the longest of them. Both accept Liquid variables like {{ score }}.

When to use effects

Effects are deliberate emphasis. A title with an aurora gradient and a typing entrance reads as "this matters." A whole lesson where every text widget animates feels exhausting.

For a step-by-step example, follow Make a celebration screen with text effects: an ending headline with an aurora gradient that types itself out, and a line of praise that morphs between cheers.

A few good fits:

• Scene titles that introduce a new section.
• Encouragement messages after a learner completes a tough activity.
• Game-show callouts in fast-paced or competitive activities.
• Vocabulary review where Morph between is used to cycle through related words.

A few patterns to avoid:

• Long paragraphs with character-level animation. The reveal becomes a wall of motion.
• Multiple visual effects on the same scene competing for attention. Pick one anchor effect per scene.
• Animated effects on long-running scenes where learners need to focus. Visual effects and Morph between never stop moving, so on those scenes use an entrance that plays through once (Animate in, Typing with Loop off, Hyper scramble, Reveal on view) or skip effects entirely.

Effects and alignment

Effects and the Alignment buttons work together. A centered title stays centered with an aurora gradient on it; a right-aligned callout stays right-aligned while it types itself out. Text also stays vertically centered in its box, exactly as it does with no effect — so turning an effect on or off never moves your text.

If you built a lesson before August 2026 and nudged a text box sideways to make an effect _look_ aligned, that workaround is no longer needed: set the Alignment button you actually want and put the box back where it belongs.

One thing to know about Spinning circle: it lays letters around a circle rather than along a line, so the Alignment buttons don't apply to it the way they do to the other effects.

Reduced motion

Every effect respects the learner's operating-system Reduce motion setting. When that setting is on, animations fall back to a static final frame so the text still reads, just without the movement. You do not have to do anything for this to work.

Studio preview vs runtime

In the studio canvas, effects start as soon as the text appears on the canvas — when you open the scene or add the effect — so you can see the result while authoring. Click Preview effect in the Properties panel to replay the entrance animation on demand. Liquid variables show as the {{ braces }} you typed; learners see the filled-in values.

Effect text sits in the same place in both: what you see on the canvas is where learners see it. If you're revisiting an older lesson that used an effect on a tall text box, the text may now sit in the middle of that box rather than at the top — that is the box's own alignment finally being applied. Drag the box to fine-tune it if the new position isn't what you want.

When a learner opens the published lesson, the entrance effect starts when the text first appears, and visual effects loop indefinitely (Line shadow is static). The lesson preview image and the scene thumbnails show every effect's finished state: the full text, fully revealed, not caught mid-animation.

Strong combinations

• Theme sans + bold weight + accent color for scene titles that should feel like a magazine spread.
• Theme serif + italic for narrative passages in a Text box. (Flashcard text has no italic setting — a theme serif on its own gives a story prompt on a Flashcard the same bookish feel.)
• OpenDyslexic + 18pt minimum for activities used by learners who specifically benefit from dyslexia-friendly type.
• Pacifico + Aurora gradient + Typing entrance for celebration screens after a learner finishes a unit.
• JetBrains Mono + monospace for timers or score displays in game-style activities.

Performance and privacy notes

Fonts load on demand from Google Fonts when you pick them, and the same fonts are pre-loaded in the published lesson before learners see the first scene. You do not need to bundle font files yourself.

A future release will support self-hosting fonts for stricter privacy postures. Reach out through the contact form if your district or school has a specific compliance requirement.