Chapter 4: Text Elements

Text elements are fundamental to video templates, conveying messages, titles, captions, and more. This chapter covers everything you need to know about working with text in FX Express.

Adding Text

To add a text element:

Click Text in the element palette (or drag it to the canvas)
A text box appears with placeholder text
Double-click to edit the text content

Editing Text Content

Inline Editing

Double-click any text element to enter edit mode:

Type your text directly
Use standard text editing shortcuts (copy, paste, select all)
Click outside or press Escape to exit edit mode

Properties Panel

You can also edit text in the Properties panel:

Select the text element
Find the “Content” field under TEXT
Enter or modify your text

This method is useful for longer text or when you want to see all properties at once.

Text Properties

The Properties panel shows all text settings:

Content

The actual text displayed. Supports:

Plain text
Variables using {variableName} syntax
Line breaks

Color

Click the color swatch to open the color picker:

Select from preset colors
Enter a hex code
Use the color gradient picker
Adjust opacity

Align

Text alignment within the element box:

Left: Text aligns to the left edge
Center: Text centers horizontally
Right: Text aligns to the right edge

Weight

Font weight (boldness):

Normal: Regular weight (400)
Bold: Bold weight (700)
Additional weights may be available depending on the font

Style

Font style:

Normal: Regular upright text
Italic: Slanted text

Font Family

The typeface used for the text:

Default: Inter, system-ui, sans-serif
Custom fonts available through themes
Web-safe fallbacks ensure consistent display

Heading Level

Semantic heading level for accessibility and themes:

Body: Regular paragraph text
H1: Primary heading
H2: Secondary heading
H3: Tertiary heading
And so on…

Heading levels can automatically apply theme styling.

Line Height and Letter Spacing

Under STYLE:

Line Height: spacing between lines as a multiple of the font size (1.5 = one and a half lines)
Letter Spacing: extra space between glyphs, in pixels (negative values tighten the text)

Stretch X / Stretch Y

Also under STYLE. Stretches every glyph horizontally or vertically by the given factor. 1 is no stretch; 1.5 makes the letters half again as wide (or tall); 0.8 condenses them.

Animating Text Scalars

Font Size, Line Height, Letter Spacing, Stretch X and Stretch Y are keyframe properties, animated exactly like an element’s position, scale, rotation or opacity — for example a title that grows from 40px to 96px, or letters that spread apart as the line settles. They use the timeline’s keyframe system (see Chapter 12): the same lanes, easing, auto-keyframe mode and keyframe editing.

Each of the five rows in the STYLE section ends in a small keyframe icon (the rising zigzag line). Hover it to see its tooltip, “Add keyframe for Font Size at current time”.

Select the text element and open the Layer tab of the Properties panel
Move the playhead to where the animation should start
Click the keyframe icon next to the property — a keyframe with the property’s current value is recorded at the playhead, and the icon turns blue
Move the playhead to where the animation should end and change the value — because the property now has keyframes, the edit records a second keyframe at the new time

The icon is blue whenever the property has keyframes, and highlighted when a keyframe sits exactly at the playhead. With Auto Keyframe on (the ◇+ button in the timeline header), changing any of the five values records a keyframe without clicking the icon first.

Every keyframed property appears as its own lane under the element in the timeline, where its keyframes can be selected, dragged, deleted and eased like any other. The value field in the Properties panel always shows the value at the playhead. Scrub the timeline or press Play to see the in-between values on the canvas; the preview and the published video animate the same way, including the keyframes’ easing. To stop animating a property, delete its keyframes in the timeline — the value at the last remaining keyframe (or the static value) is kept.

Templates saved with the earlier start → end “animate” toggle load with their pairs converted into two keyframes per property, one at the element’s start and one at its end.

Using Variables in Text

FX Express supports dynamic text using variables:

Variable Syntax

Hello {name}!
Your order #{orderNumber} is ready.

Variables are enclosed in curly braces { and }.

How Variables Work

Define variables in your template
When rendering, variables are replaced with actual values
Each video instance can have different variable values

Common Use Cases

Personalized greetings: Hello {firstName}!
Dynamic data: Your balance: ${amount}
Dates: Created on {date}
Conditional content combined with Optional scenes

See Chapter 13: Variables for more details.

Text Overflow

When text content exceeds the element bounds, FX Express handles overflow:

Overflow Options

Visible: Text extends beyond the element (default)
Hidden: Text is clipped at element bounds
Scroll: Adds scrolling (for interactive contexts)

Best Practices for Overflow

Size text elements to fit expected content
Use smaller fonts for variable-length content
Test with longest expected text values

Text Animation

Text elements can be animated using the timeline:

Entry Animations

Control how text appears:

Fade in
Slide in from direction
Type writer effect
Character-by-character reveal

Exit Animations

Control how text disappears:

Fade out
Slide out
Dissolve

Keyframe Animation

For advanced control:

Animate position, size, opacity over time
Create custom motion paths
Sync with audio or other elements

See Chapter 10: Timeline Editor for animation details.

Text Formatting Tips

Readability

Ensure sufficient contrast between text and background
Use appropriate font sizes (not too small)
Limit line length for easier reading
Add adequate line spacing

Hierarchy

Use heading levels to establish importance
Vary font sizes to create visual hierarchy
Use weight (bold) sparingly for emphasis

Consistency

Stick to 2-3 fonts maximum
Use consistent sizing throughout
Apply themes for automatic consistency

Accessibility

Use semantic heading levels
Ensure color contrast meets WCAG guidelines
Don’t rely solely on color to convey meaning

Styling Text with Themes

Themes can automatically style text based on heading level:

Set the Heading Level property
Apply a theme to your template
Text automatically uses theme colors, fonts, and sizes

This ensures consistency across your entire video.

See Chapter 11: Themes and Styling for details.

Text Element Examples

Title Slide

Element: Text
Content: Welcome to Our Company
Heading Level: H1
Font Size: 48px
Align: Center
Weight: Bold

Body Text

Element: Text
Content: Lorem ipsum dolor sit amet...
Heading Level: Body
Font Size: 16px
Align: Left
Weight: Normal

Personalized Greeting

Element: Text
Content: Hello {firstName}, welcome back!
Heading Level: H2
Font Size: 32px

Caption/Subtitle

Element: Text
Content: {caption}
Heading Level: Body
Font Size: 14px
Opacity: 80%

Troubleshooting

Text Not Showing

Check if the element is positioned off-canvas
Verify the In Time hasn’t passed the current playhead
Ensure opacity is greater than 0
Check text color against background (contrast)

Font Not Rendering

The font may not be available
Check font family fallbacks
Use web-safe fonts for maximum compatibility

Variables Not Replacing

Verify the syntax: {variableName} (no spaces)
Ensure the variable is defined
Check for typos in variable names

Text Looks Different in Preview

Browser font rendering varies
Final output uses specified fonts
Test in the actual player for accuracy

← Previous: Adding and Editing Elements | Next: Image Elements →