Typography Text - Complete Guide
Typography Text - Complete Guide
Learn how to add, edit, and style text in Scribe Animator. This guide covers the Text panel in the left sidebar, the Inspector properties on the right, and inline editing on the canvas.
Application Layout Overview
┌─────────────────────────────────────────────────────────────────────────────┐
│ HEADER BAR │
│ [File] [Edit] [View] [Export] [Share] [?] │
├────────────┬───────────────────────────────────────────────┬────────────────┤
│ │ │ │
│ LEFT │ │ RIGHT │
│ SIDEBAR │ CANVAS AREA │ SIDEBAR │
│ │ │ │
│ ┌────────┐ │ ┌─────────────────────────────┐ │ ┌────────────┐ │
│ │ 📁 │ │ │ │ │ │ INSPECTOR │ │
│ │ Assets │ │ │ Your Animation │ │ │ PANEL │ │
│ ├────────┤ │ │ Canvas │ │ ├────────────┤ │
│ │ 🖼️ │ │ │ │ │ │ Properties │ │
│ │ Images │ │ │ [Text elements appear │ │ │ Position │ │
│ ├────────┤ │ │ here after adding] │ │ │ Text │ │
│ │ 📝 │ │ │ │ │ │ Animation │ │
│ │ TEXT │◄├─────┤ │───────────►│ Layer │ │
│ ├────────┤ │ └─────────────────────────────┘ │ │ Camera │ │
│ │ 🎵 │ │ │ └────────────┘ │
│ │ Audio │ │ │ │
│ ├────────┤ │ │ │
│ │ 🎨 │ │ │ │
│ │ Backgr │ │ │ │
│ └────────┘ │ │ │
│ │ │ │
├────────────┴───────────────────────────────────────────────┴────────────────┤
│ TIMELINE │
│ [▶️ Play] ════════════════════════════════════════════════ [00:00 / 00:30] │
└─────────────────────────────────────────────────────────────────────────────┘
Text Feature Access Points:
- Left Sidebar → 📝 Text — Add text templates to canvas
- Right Sidebar → Inspector → Text Section — Edit selected text properties
- Canvas → Double-click text — Open full Text Properties Modal
Quick Start: Adding Text to Your Project
Method 1: Using Text Templates (Recommended)
Step 1 Step 2 Step 3
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Click 📝 │ │ Browse or │ │ Click any │
│ Text icon │ ───► │ Search │ ───► │ template │
│ in left │ │ templates │ │ to add it │
│ sidebar │ │ │ │ to canvas │
└──────────────┘ └──────────────┘ └──────────────┘
Method 2: Using Keyboard Shortcut
Press T key anywhere in the application to add a new text element with default styling.
Method 3: Canvas Toolbar
Click the "T" (Add Text) button in the canvas toolbar above the canvas area.
tip
Using Text Templates is recommended for beginners — they come with pre-configured styles and positioning that follow typography best practices!
Left Sidebar: Text Panel
When you click the Text icon in the left sidebar, the Text Templates Library opens.
Text Panel Layout
┌─────────────────────────────────────────┐
│ 📝 Text Templates Library │
├─────────────────────────────────────────┤
│ ┌─────────────────────────────────────┐ │
│ │ 🔎 Search text templates... │ │
│ └─────────────────────────────────────┘ │
│ │
│ Category: [📦 All ▼] │
│ │
├─────────────────────────────────────────┤
│ [📝 All] [🕐 Recent] [⭐ Favorites] │
├─────────────────────────────────────────┤
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Simple │ │Subhead+ │ │Centered │ │
│ │ Heading │ │ Body │ │ Quote │ │
│ │ ⭐ │ │ ⭐ │ │ ⭐ │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Stat │ │ Sale │ │ Label │ │
│ │ Block │ │ Promo │ │ Badge │ │
│ │ ⭐ │ │ ⭐ │ │ ⭐ │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ │
├─────────────────────────────────────────┤
│ 6 / 25 templates │
│ [Advanced Text Library →] │
└─────────────────────────────────────────┘
Template Categories
| Category | Icon | Description | Example Use |
|---|---|---|---|
| Headings | 🔠 | Simple headline templates | Title slides, section headers |
| Body layouts | 📄 | Subheading + body text | Explanatory content |
| Quotes | 💬 | Centered quote formats | Testimonials, inspiration |
| Stats / Number blocks | 📊 | Large number with caption | Metrics, data points |
| Sale / Promotion layouts | 🏷️ | Promotional arrangements | Marketing, announcements |
| Labels / Badges | 🏷️ | Small badge-style text | Tags, callouts |
Search & Filter Options
┌────────────────────────────────────────────────────────────┐
│ SEARCH CAPABILITIES │
├────────────────────────────────────────────────────────────┤
│ │
│ Search by: │
│ ├── Template name (e.g., "Simple Heading") │
│ ├── Category (e.g., "Quotes") │
│ ├── Tags (e.g., "promo", "stats") │
│ └── Default text (e.g., "SALE", "72%") │
│ │
│ Filter Tabs: │
│ ├── 📝 All → Shows all available templates │
│ ├── 🕐 Recent → Templates you recently used │
│ └── ⭐ Favorites → Templates you've starred │
│ │
└────────────────────────────────────────────────────────────┘
Favorites System
- Click the ⭐ icon on any template to add/remove from favorites
- Favorites sync across devices when signed in to your account
- Access favorites quickly via the ⭐ Favorites tab
note
Favorites sync requires an active internet connection. When offline, only local favorites are available.
Typography Themes
Themes control the default fonts, sizes, and styling for ALL text in your project.
Available Themes
┌─────────────────────────────────────────────────────────────────────────┐
│ TYPOGRAPHY THEMES │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 1. DEFAULT CLEAN THEME │
│ ├── Font: Noto Sans (Sans-serif) │
│ ├── Style: Modern, clean, professional │
│ └── Best for: Business, tech presentations, general use │
│ │
│ 2. ELEGANT SERIF THEME │
│ ├── Font: Noto Serif (Serif) │
│ ├── Style: Classic, editorial, refined │
│ └── Best for: Formal content, storytelling, literary │
│ │
│ 3. WARM / HUMAN THEME │
│ ├── Font: Mukta (Sans-serif, Hindi-optimized) │
│ ├── Style: Friendly, approachable, warm │
│ └── Best for: Education, Hindi content, personal projects │
│ │
└─────────────────────────────────────────────────────────────────────────┘
How to Change Theme
Location: Left Sidebar → Text Panel → Theme dropdown (top of panel)
OR
Location: Right Sidebar → Inspector → Text Section → Theme dropdown
Theme Selection:
┌────────────────────────────┐
│ Theme │
│ ┌────────────────────────┐ │
│ │ Default Clean Theme ▼ │ │
│ ├────────────────────────┤ │
│ │ Default Clean Theme │ │
│ │ Elegant Serif Theme │ │
│ │ Warm / Human Theme │ │
│ └────────────────────────┘ │
└────────────────────────────┘
warning
Changing theme updates ALL text elements that use style tokens. Text with custom overrides keeps its settings. This action cannot be undone in a single step — you'll need to manually reset any changes.
tip
Set your project theme before adding text elements. This ensures all text uses consistent styling from the start!
Right Sidebar: Inspector Panel (Text Section)
When you select a text element on the canvas, the Inspector panel shows the Text section.
Inspector Text Section Layout
┌─────────────────────────────────────┐
│ ▼ Text │
├─────────────────────────────────────┤
│ │
│ Theme ⓘ │
│ ┌─────────────────────────────────┐ │
│ │ Default Clean Theme ▼ │ │
│ └─────────────────────────────────┘ │
│ │
│ Content │
│ ┌─────────────────────────────────┐ │
│ │ Your text here... │ │
│ │ │ │
│ └─────────────────────────────────┘ │
│ │
│ Font Size: 24px │
│ ├────────────●────────────────────┤ │
│ 8px 120px │
│ │
│ Fill Color │
│ ┌────┐ ┌────────────────────────┐ │
│ │████│ │ #000000 │ │
│ └────┘ └────────────────────────┘ │
│ │
│ Font │
│ ┌─────────────────────────────────┐ │
│ │ Noto Sans ▼ │ │
│ └─────────────────────────────────┘ │
│ │
└─────────────────────────────────────┘
Properties Reference
| Property | Description | How to Use |
|---|---|---|
| Theme | Project-wide typography theme | Select from dropdown. Affects all style-token text. |
| Content | The actual text displayed | Type in textarea. Press Enter to commit. |
| Font Size | Text size in pixels (8-120px) | Drag slider or type value. |
| Fill Color | Text color | Click color box to pick, or type hex code. |
| Font | Typeface/font family | Select from dropdown menu. |
Available Fonts
┌────────────────────────────────────────────────────────────┐
│ AVAILABLE FONTS │
├────────────────────────────────────────────────────────────┤
│ │
│ SANS-SERIF FONTS: │
│ ├── Noto Sans (Clean, universal) │
│ ├── Noto Sans Devanagari (Hindi/Devanagari script) │
│ ├── Mukta (Friendly, Hindi-optimized) │
│ ├── Hind (Modern, Hindi support) │
│ └── Baloo 2 (Playful, rounded) │
│ │
│ SERIF FONTS: │
│ ├── Noto Serif (Classic, elegant) │
│ ├── Noto Serif Devanagari (Hindi/Devanagari script) │
│ └── Tiro Devanagari Hindi (Traditional Hindi) │
│ │
│ HANDWRITTEN/DISPLAY: │
│ ├── Kalam (Handwritten style) │
│ └── Jumps Winter (Decorative) │
│ │
└────────────────────────────────────────────────────────────┘
note
All fonts are pre-loaded and optimized for SVG path conversion, which is required for the hand-drawing animation effect.
tip
For Hindi/Devanagari content, use Mukta or Noto Sans Devanagari — they have excellent character support and rendering quality!
Advanced Text Properties (Full Modal)
For complete control over text styling, double-click any text element on the canvas.
How to Access
┌─────────────────────────────────────────────────────────────┐
│ ACCESS METHODS │
├─────────────────────────────────────────────────────────────┤
│ │
│ Method 1: Double-click │
│ ───────────────────── │
│ Canvas → Select text → Double-click → Modal opens │
│ │
│ Method 2: Inspector link (if available) │
│ ───────────────────────────────────────── │
│ Inspector → Text section → "More options" link │
│ │
└─────────────────────────────────────────────────────────────┘
Text Properties Modal Layout
┌─────────────────────────────────────────────────────────────┐
│ Text Properties [×] │
├─────────────────────────────────────────────────────────────┤
│ │
│ Text Content │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Enter your text here... │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ Tip: Press Enter for a new line. │
│ │
│ Wrapping │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Auto (word) ▼ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ Style │
│ ┌─────────────────────────────────┐ ┌─────────────┐ │
│ │ heading-lg ▼ │ │Reset to style│ │
│ └─────────────────────────────────┘ └─────────────┘ │
│ ⚠️ Overrides active │
│ │
│ Font Family │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Noto Sans ▼ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ Font Weight: 400 │
│ ├──────────●──────────────────────────────────────────────┤ │
│ 100 900 │
│ │
│ Font Size: 56px │
│ ├────────────────────────●────────────────────────────────┤ │
│ 8px 120px │
│ │
│ Text Color │
│ ┌────┐ ┌────────────────────────────────────────────────┐ │
│ │████│ │ #000000 │ │
│ └────┘ └────────────────────────────────────────────────┘ │
│ │
│ Font Style │
│ ┌──────────┐ ┌──────────┐ │
│ │ Italic │ │ Underline│ │
│ └──────────┘ └──────────┘ │
│ │
│ Text Alignment │
│ ┌──────┐ ┌────────┐ ┌───────┐ │
│ │ Left │ │ Center │ │ Right │ │
│ └──────┘ └────────┘ └───────┘ │
│ │
│ Line Height: 1.1 │
│ ├────●────────────────────────────────────────────────────┤ │
│ 0.8 3.0 │
│ │
│ Letter Spacing: 0px │
│ ├────────────────────●────────────────────────────────────┤ │
│ -5px 20px │
│ │
└─────────────────────────────────────────────────────────────┘
All Properties Reference
| Property | Description | Range/Values |
|---|---|---|
| Text Content | The displayed text | Any text, multiline supported |
| Wrapping | How text wraps | Auto (word), Auto (char), Single line |
| Style | Pre-defined style token | See Style Tokens table below |
| Font Family | Typeface | See Available Fonts list |
| Font Weight | Boldness | 100 (Thin) to 900 (Black) |
| Font Size | Size in pixels | 8px to 120px |
| Text Color | Fill color | Hex code (e.g., #FF5500) |
| Font Style | Italic toggle | Normal / Italic |
| Text Decoration | Underline toggle | None / Underline |
| Text Alignment | Horizontal align | Left / Center / Right |
| Line Height | Line spacing | 0.8 to 3.0 |
| Letter Spacing | Character spacing | -5px to 20px |
tip
Use Line Height of 1.4–1.6 for body text to improve readability. Headings can use tighter spacing (1.0–1.2).
warning
Extreme values for Letter Spacing (below -3px or above 10px) can make text difficult to read. Use sparingly for special effects only.
Style Tokens System
Style tokens provide consistent typography across your project. They inherit values from the current theme.
Available Style Tokens
┌─────────────────────────────────────────────────────────────────────────┐
│ STYLE TOKENS │
├───────────────┬──────────────┬──────────────────────────────────────────┤
│ Token │ Default Size │ Typical Use │
├───────────────┼──────────────┼──────────────────────────────────────────┤
│ heading-xl │ 72px │ Main titles, hero text, splash screens │
│ heading-lg │ 56px │ Section titles, major headings │
│ heading-md │ 40px │ Subsection titles, feature names │
│ heading-sm │ 28px │ Minor headings, card titles, labels │
├───────────────┼──────────────┼──────────────────────────────────────────┤
│ body-lg │ 24px │ Important body content, lead paragraphs │
│ body-md │ 18px │ Regular paragraphs, descriptions │
│ body-sm │ 14px │ Secondary content, fine print │
├───────────────┼──────────────┼──────────────────────────────────────────┤
│ caption │ 12px │ Footnotes, annotations, credits │
└───────────────┴──────────────┴──────────────────────────────────────────┘
How Style Tokens Work
┌─────────────────────────────────────────────────────────────────────────┐
│ STYLE TOKEN FLOW │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ THEME STYLE TOKEN TEXT ELEMENT │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Default │ │heading- │ │ "Hello" │ │
│ │ Clean │ ──defines──► │ lg │ ──applies──► │ │ │
│ │ Theme │ │ │ │ 56px │ │
│ └─────────┘ └─────────┘ │ Noto │ │
│ │ │ │ Sans │ │
│ │ │ └─────────┘ │
│ ▼ ▼ │
│ Change theme? Token inherits │
│ All tokens update! new values │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Overrides
When you customize a property on text that uses a style token:
┌─────────────────────────────────────────────────────────────────────────┐
│ OVERRIDE SYSTEM │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ ORIGINAL (from style token): AFTER OVERRIDE: │
│ ┌───────────────────────┐ ┌───────────────────────┐ │
│ │ Style: heading-lg │ │ Style: heading-lg │ │
│ │ Font: Noto Sans │ ───► │ Font: Mukta ⚠️ │ │
│ │ Size: 56px │ │ Size: 56px │ │
│ │ Weight: 700 │ │ Weight: 700 │ │
│ └───────────────────────┘ └───────────────────────┘ │
│ │
│ ⚠️ "Overrides active" indicator appears │
│ │
│ To remove overrides: │
│ Click [Reset to style] button → Restores all token values │
│ │
└─────────────────────────────────────────────────────────────────────────┘
note
Style tokens are the recommended way to maintain consistent typography. When you need custom styling, apply overrides sparingly to specific elements rather than modifying the theme itself.
Text Wrapping Options
Control how text flows within its bounding box.
┌─────────────────────────────────────────────────────────────────────────┐
│ TEXT WRAPPING MODES │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ AUTO (WORD) - Default │
│ ┌────────────────────┐ │
│ │ This is a long │ Breaks at word boundaries. │
│ │ sentence that │ Words stay intact. │
│ │ wraps at words. │ Best for: Body text, paragraphs │
│ └────────────────────┘ │
│ │
│ AUTO (CHARACTERS) │
│ ┌────────────────────┐ │
│ │ This is a long sen │ Breaks at any character. │
│ │ tence that wraps a │ Maximizes space usage. │
│ │ t characters. │ Best for: Tight spaces, tables │
│ └────────────────────┘ │
│ │
│ SINGLE LINE │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ This is a long sentence that never wraps │ │
│ └──────────────────────────────────────────────────────┘ │
│ No wrapping. Text extends horizontally. │
│ Best for: Headlines, badges, labels │
│ │
└─────────────────────────────────────────────────────────────────────────┘
tip
When using Single Line mode for headlines, make sure your canvas is wide enough to accommodate the full text — otherwise text may extend beyond visible area!
Editing Text on Canvas
Selection & Transformation
┌─────────────────────────────────────────────────────────────────────────┐
│ TEXT SELECTION ON CANVAS │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ When text is selected: │
│ │
│ ○ (rotation handle) │
│ │ │
│ ┌───────┴───────┐ │
│ ●───────────────● ← corner handles (resize) │
│ │ │ │
│ │ Hello World │ │
│ │ │ │
│ ●───────────────● │
│ └───────────────┘ │
│ │
│ ACTIONS: │
│ ├── Click + Drag inside → Move text │
│ ├── Drag corner handles → Resize (aspect ratio locked) │
│ ├── Drag rotation handle → Rotate │
│ ├── Double-click → Open Text Properties Modal │
│ └── Press Delete → Remove text │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Quick Edit Flow
┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ 1. Click │ │ 2. Double │ │ 3. Edit │ │ 4. Close │
│ to select │ ──► │ click │ ──► │ properties │ ──► │ modal │
│ │ │ │ │ │ │ (×/Esc) │
└──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘
Changes apply instantly - no Save button needed!
note
All text changes are auto-saved. There's no manual save required — your work is preserved automatically!
Text Animation
Text elements can be animated like any other object.
Animation Types for Text
┌─────────────────────────────────────────────────────────────────────────┐
│ TEXT ANIMATION TYPES │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ NONE │
│ ──── │
│ Text appears instantly at start time. │
│ [Hello] → immediately visible │
│ │
│ FADE IN │
│ ─────── │
│ Text fades from transparent to opaque. │
│ [ ... ] → [Hello] (opacity 0% → 100%) │
│ │
│ TYPEWRITER │
│ ────────── │
│ Text appears character by character. │
│ [H] → [He] → [Hel] → [Hell] → [Hello] │
│ │
│ DRAW │
│ ──── │
│ Hand draws the text stroke by stroke. │
│ Converts text to SVG paths automatically. │
│ [✏️───────────────────────────] → [Hello] │
│ │
└─────────────────────────────────────────────────────────────────────────┘
tip
The Draw animation type creates the signature whiteboard effect. Use it for headlines and key messages to maximize impact!
warning
Draw animation converts text to SVG paths. Very long text or complex fonts may take longer to render. For best performance, keep draw-animated text under 50 characters.
Animation Properties
| Property | Description | Location |
|---|---|---|
| Animation Type | Effect to use | Inspector → Animation section |
| Start Time | When animation begins (seconds) | Inspector → Animation section |
| Duration | How long animation takes | Inspector → Animation section |
| Easing | Acceleration curve | Inspector → Animation section |
Easing Options
LINEAR EASE-IN EASE-OUT EASE-IN-OUT
────────► ╭──────► ────────╮ ╭────────╮
│ │ │ │
constant slow→fast fast→slow slow→fast→slow
speed
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
T | Add new text element |
Double-click | Open Text Properties Modal |
Escape | Close modal / Deselect |
Delete or Backspace | Delete selected text |
⌘C / Ctrl+C | Copy selected text |
⌘V / Ctrl+V | Paste text |
⌘D / Ctrl+D | Duplicate selected text |
⌘Z / Ctrl+Z | Undo |
⌘⇧Z / Ctrl+Shift+Z | Redo |
Arrow keys | Nudge selected text (1px) |
Shift + Arrow keys | Nudge selected text (10px) |
Validation Rules
Scribe Animator enforces certain validation rules to ensure text renders correctly.
Text Content Validation
┌─────────────────────────────────────────────────────────────────────────┐
│ TEXT CONTENT RULES │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ RULE LIMIT ERROR MESSAGE │
│ ────────────────────────────────────────────────────────────────── │
│ Maximum characters 10,000 "Text too long" │
│ Maximum lines (multiline) 500 "Too many lines" │
│ Empty text not allowed N/A "Text required" │
│ Special characters Supported (no restriction) │
│ Unicode/Emoji Supported (no restriction) │
│ HTML tags Stripped (sanitized) │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Font Size Validation
┌─────────────────────────────────────────────────────────────────────────┐
│ FONT SIZE RULES │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Property Minimum Maximum Default │
│ ──────────────────────────────────────────────────────────────────── │
│ Font Size 8px 120px Based on style token │
│ Font Weight 100 900 400 (normal) │
│ Line Height 0.8 3.0 1.1 │
│ Letter Spacing -5px 20px 0px │
│ │
│ ⚠️ Values outside range are automatically clamped to nearest limit │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Color Validation
┌─────────────────────────────────────────────────────────────────────────┐
│ COLOR INPUT RULES │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ ACCEPTED FORMATS: │
│ ├── Hex (6-digit): #FF5500, #ff5500 │
│ ├── Hex (3-digit): #F50 → converted to #FF5500 │
│ ├── Hex (8-digit): #FF5500AA (with alpha) │
│ ├── RGB: rgb(255, 85, 0) │
│ ├── RGBA: rgba(255, 85, 0, 0.5) │
│ └── Named colors: red, blue, green, etc. │
│ │
│ INVALID INPUT: │
│ ├── Empty string → Falls back to #000000 (black) │
│ ├── Invalid hex → Falls back to #000000 (black) │
│ └── Out of range RGB → Clamped to 0-255 │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Animation Timing Validation
┌─────────────────────────────────────────────────────────────────────────┐
│ ANIMATION TIMING RULES │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Property Minimum Maximum Default │
│ ──────────────────────────────────────────────────────────────────── │
│ Start Time 0s Project end 0s │
│ Duration 0.1s 60s 1s │
│ Delay 0s 30s 0s │
│ │
│ VALIDATION ERRORS: │
│ ├── Start time > project length → Warning shown, time adjusted │
│ ├── Duration = 0 → Auto-set to 0.1s minimum │
│ ├── Negative values → Converted to absolute value │
│ └── Non-numeric input → Rejected, previous value kept │
│ │
└─────────────────────────────────────────────────────────────────────────┘
warning
If animation start time + duration exceeds project length, the animation will be cut off at the end of the project. Ensure your timing fits within the project timeline!
Best Practices
Typography Guidelines
┌─────────────────────────────────────────────────────────────────────────┐
│ TYPOGRAPHY BEST PRACTICES │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ ✓ DO: │
│ ├── Set project theme before adding text │
│ ├── Use style tokens (heading-lg, body-md) for consistency │
│ ├── Limit to 2-3 fonts per project │
│ ├── Ensure good contrast between text and background │
│ ├── Use hierarchy (big headings, smaller body) │
│ └── Keep animations subtle and purposeful │
│ │
│ ✗ DON'T: │
│ ├── Use heading-xl for body text │
│ ├── Mix too many fonts (looks unprofessional) │
│ ├── Use low-contrast colors (hard to read) │
│ ├── Animate every text element (distracting) │
│ └── Use Single Line mode for paragraphs │
│ │
└─────────────────────────────────────────────────────────────────────────┘
tip
Create a style guide for your project: decide on 2-3 heading sizes and 1-2 body sizes before you start. Consistency is key to professional-looking videos!
Performance Tips
- Avoid excessive text elements (can slow rendering)
- Group related text that animates together
- Use appropriate sizes for content type
- Consider using templates for common layouts
Troubleshooting
Common Issues
| Problem | Possible Cause | Solution |
|---|---|---|
| Text appears blurry | Zoom level not 100% | Set zoom to 100% |
| Font not showing | Font still loading | Wait a moment, refresh if needed |
| Animation not working | Type set to "None" | Change animation type in Inspector |
| Theme not applying | Text has overrides | Click "Reset to style" button |
| Text too small/large | Wrong style token | Select appropriate heading/body style |
| Can't find text panel | Sidebar collapsed | Click 📝 icon in left sidebar |
Reset Text to Default
To completely reset a text element:
1. Select the text on canvas
2. Double-click to open modal
3. Set Style to a token (e.g., "body-md")
4. Click "Reset to style"
5. All properties reset to theme defaults
Summary: Where to Find Everything
┌─────────────────────────────────────────────────────────────────────────┐
│ QUICK REFERENCE MAP │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ TO ADD TEXT: │
│ └── Left Sidebar → 📝 Text → Click template │
│ OR press T key │
│ OR Canvas Toolbar → T button │
│ │
│ TO EDIT TEXT CONTENT: │
│ └── Select text → Inspector (right) → Content textarea │
│ OR Double-click text → Modal → Text Content │
│ │
│ TO CHANGE FONT/SIZE/COLOR: │
│ └── Select text → Inspector (right) → Text section │
│ OR Double-click text → Modal │
│ │
│ TO CHANGE THEME: │
│ └── Inspector → Text section → Theme dropdown │
│ OR Text Panel → Theme dropdown │
│ │
│ TO ANIMATE TEXT: │
│ └── Select text → Inspector → Animation section │
│ │
│ FOR ADVANCED PROPERTIES: │
│ └── Double-click text on canvas → Full modal with all options │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Questions? Check out our Documentation or visit app.ohotech.com to start creating!