Text and Styling

Text editing, fonts, color presets, and styling options in Web Stories

The Web Stories editor provides comprehensive text editing and styling capabilities. Create beautiful typography with custom fonts, colors, and formatting options.

Text Elements

Add text to your stories through the Text pane in the library panel.

Text Pane

Access text tools from the library sidebar:

// Pane ID
PANE_IDS.Text

Reference: packages/story-editor/src/components/library/paneIds.ts:20

Text Presets

Pre-designed text styles for quick insertion:

// packages/story-editor/src/components/library/panes/text/textPresets.ts
interface TextPreset {
  type: 'text';
  fontSize: number;
  fontFamily: string;
  fontWeight: number;
  color: Color;
  // ... other styling properties
}

Reference: packages/story-editor/src/components/library/panes/text/textPresets.ts

Text Sets

Combinations of text elements that work together:

import { useInsertTextSet } from './useInsertTextSet';

const { insertTextSet } = useInsertTextSet();

// Insert a pre-designed text set
insertTextSet(textSetData);

Reference: packages/story-editor/src/components/canvas/useInsertTextSet.js

Text Editing

Entering Edit Mode

1. Select text element

   Click a text element on the canvas once to select it.

2. Enter edit mode

   Double-click the text element to begin editing.

3. Edit content

   Type to modify the text. Use standard keyboard shortcuts for copy/paste.

4. Exit edit mode

   Press Esc or click outside the element to exit edit mode.

Reference: packages/story-editor/src/components/canvas/editElement.js

Rich Text Editing

Text elements support rich formatting through the @googleforcreators/rich-text package:

• Bold - Cmd/Ctrl + B
• Italic - Cmd/Ctrl + I
• Underline - Cmd/Ctrl + U
• Alignment - Left, center, right, justify

Reference: packages/rich-text/

Text Style Panel

The Text Style panel in the Design sidebar provides comprehensive styling controls.

Panel Structure

<StylePanel selectedElements={selectedTextElements}>
  <FontControls />
  <ColorControls />
  <StyleControls />
  <BackgroundColorControls />
  <PaddingControls />
  <StylePresets />
</StylePanel>

Reference: packages/story-editor/src/components/panels/design/textStyle/textStyle.js:42-48

Font Controls

Font Picker

Select fonts from available options:

import { FontPicker } from '@googleforcreators/design-system';

<FontPicker
  value={currentFont}
  onChange={handleFontChange}
  fonts={availableFonts}
/>

Reference: packages/story-editor/src/components/fontPicker/

Font Provider

Fonts are managed through the Font Provider:

<FontProvider>
  {/* Editor components */}
</FontProvider>

The provider handles:

• Loading system fonts
• Custom font uploads
• Google Fonts integration
• Font preloading for performance

Reference: packages/story-editor/src/storyEditor.js:86

Story Font Picker

Manage fonts at the story level:

<StoryFontPicker />

Reference: packages/story-editor/src/components/storyFontPicker/

Font Properties

Font Size

Adjust text size with precise control:

• Input field - Enter exact pixel values
• Slider - Visual adjustment
• Presets - Common sizes (12px, 16px, 24px, 36px, 48px, 72px)

Font Weight

Select from available weights:

• Thin (100)
• Light (300)
• Regular (400)
• Medium (500)
• Semi-Bold (600)
• Bold (700)
• Black (900)

Available weights depend on the selected font family. Not all fonts include all weights.

Letter Spacing

Adjust spacing between characters:

• Range: -0.5em to 1em
• Default: 0em
• Fine-tune for visual appeal

Line Height

Control spacing between lines:

• Range: 0.5 to 3.0
• Default: 1.2
• Larger values increase readability for long text

Color Controls

Text Color

Set the color of text:

<ColorControls
  selectedElements={elements}
  onChange={handleColorChange}
/>

Reference: packages/story-editor/src/components/panels/design/textStyle/color.js

Color Picker

The color picker provides multiple input methods:

Color Swatches

Select from story color presets for brand consistency.

Presets are defined at the story level and shared across all elements.

Hex Input

Enter hex color codes directly:

<Hex value={color} onChange={setColor} />

Reference: packages/design-system/src/components/hex/

Color Picker

Visual color selector with:

• Hue slider
• Saturation/brightness area
• Opacity slider
• RGB/HSL input fields

Reference: packages/story-editor/src/components/colorPicker/

Eyedropper Tool

Sample colors from the canvas:

import { Eyedropper } from '../eyedropper';

<Eyedropper onSelect={handleColorSelect} />

Reference: packages/story-editor/src/components/eyedropper/

Background Color

Add background colors to text for emphasis:

<BackgroundColorControls
  selectedElements={elements}
  onChange={handleBackgroundChange}
/>

Background options:

• Solid colors
• Gradient backgrounds
• Opacity control
• Padding adjustment

Reference: packages/story-editor/src/components/panels/design/textStyle/backgroundColor.js

Padding Controls

Adjust spacing around text:

<PaddingControls
  selectedElements={elements}
  onChange={handlePaddingChange}
/>

Control padding on:

• All sides (uniform)
• Individual sides (top, right, bottom, left)

Reference: packages/story-editor/src/components/panels/design/textStyle/padding.js

Text Alignment

Align text within its container:

<AlignmentControls
  value={alignment}
  onChange={setAlignment}
/>

Options:

• Left align
• Center align
• Right align
• Justify

Reference: packages/story-editor/src/components/panels/design/alignment/

Style Presets

Save and reuse text styles:

Creating Style Presets

1. Style your text

   Apply fonts, colors, and formatting to a text element.

2. Save as preset

   Click “Save as Preset” in the Style Presets section.

3. Apply to other text

   Select any text element and click a preset to apply the saved style.

Reference: packages/story-editor/src/components/library/panes/text/stylePresets/

Style Presets Panel

<StylePresets
  selectedElements={elements}
  onApply={handleApplyPreset}
/>

Reference: packages/story-editor/src/components/panels/design/textStyle/stylePresets/

Text Accessibility

Ensure text is accessible to all users:

Color Contrast

The editor checks color contrast automatically:

import { getPagesWithFailedContrast } from '../../checklist';

const failedElements = await getPagesWithFailedContrast([page], pageSize);

Reference: packages/story-editor/src/components/panels/design/textStyle/textStyle.js:94-100

Contrast Warnings

When text doesn’t meet WCAG contrast requirements:

<Warning>
  {ACCESSIBILITY_COPY.lowContrast}
</Warning>

Reference: packages/story-editor/src/components/panels/design/textStyle/textStyle.js:36

Text Accessibility Panel

Additional accessibility controls:

<TextAccessibilityPanel selectedElement={textElement} />

Reference: packages/story-editor/src/components/panels/design/textAccessibility/

Advanced Text Styling

Text Effects

Apply visual effects:

• Shadow - Add drop shadows
• Outline - Stroke around text
• Gradient fills - Multi-color text

Style Controls

Comprehensive style options:

<StyleControls
  selectedElements={elements}
  onChange={handleStyleChange}
/>

Reference: packages/story-editor/src/components/panels/design/textStyle/style.js

Font Preview

Preview fonts before applying:

<FontPreview
  font={fontFamily}
  size={fontSize}
  weight={fontWeight}
/>

Reference: packages/story-editor/src/components/library/panes/text/fontPreview.js

Inserting Text Presets

Use pre-designed text styles:

const { insertPreset } = useInsertPreset();

// Insert a text preset onto the canvas
insertPreset(presetConfig);

Reference: packages/story-editor/src/components/library/panes/text/useInsertPreset.js

Color Presets

Manage story-level color palettes through the Style Manager:

<StyleManager>
  {/* Color preset management */}
</StyleManager>

Color presets enable:

• Brand consistency across stories
• Quick color changes
• Palette sharing between elements

Reference: packages/story-editor/src/components/styleManager/

Text in Templates

Templates include pre-styled text:

• Font combinations tested for visual harmony
• Color schemes that ensure accessibility
• Sizing optimized for readability

Replace template text while keeping styles:

1. Select text element
2. Double-click to edit
3. Replace text content
4. Styles remain applied

Best Practices

1. Limit font variety

   Use 2-3 fonts maximum per story for visual cohesion.

2. Ensure readability

   Minimum font size of 24px for body text, larger for headings.

3. Check contrast

   Maintain at least 4.5:1 contrast ratio for normal text, 3:1 for large text.

4. Mind text length

   Keep text concise - Web Stories are visual-first. Aim for 1-2 sentences per element.

5. Use backgrounds wisely

   Add semi-transparent backgrounds to text over busy images for legibility.

Avoid placing text over complex backgrounds without adding a semi-transparent overlay or text background.

Highlights System

The editor uses highlights to guide text styling:

const { dropdownHighlight, colorHighlight } = useHighlights((state) => ({
  dropdownHighlight: state[states.Font],
  colorHighlight: state[states.TextColor],
}));

Highlights:

• Draw attention to relevant controls
• Guide users through styling tasks
• Provide contextual help

Reference: packages/story-editor/src/components/panels/design/textStyle/textStyle.js:67-73

Keyboard Shortcuts

Speed up text editing:

• Bold - Cmd/Ctrl + B
• Italic - Cmd/Ctrl + I
• Underline - Cmd/Ctrl + U
• Select All - Cmd/Ctrl + A
• Copy - Cmd/Ctrl + C
• Paste - Cmd/Ctrl + V
• Undo - Cmd/Ctrl + Z
• Redo - Cmd/Ctrl + Shift + Z

Size and Position

Precise text element positioning:

import { getUpdatedSizeAndPosition } from '../../../utils/getUpdatedSizeAndPosition';

// Automatically adjust size/position when text changes
usePresubmitHandler(getUpdatedSizeAndPosition, []);

Reference: packages/story-editor/src/components/panels/design/textStyle/textStyle.js:79-80

Text Icon

Represent text in the library:

<TextIcon />

Reference: packages/story-editor/src/components/library/panes/text/textIcon.js

Next Steps

Animations

Add animations to text elements

Templates

Use templates with pre-designed text styles

Creating Stories

Learn the basics of story creation