Advanced Text Panel

The Advanced Text Panel provides professional typography controls including OpenType features, variable font settings, text direction, and spell checking. These features give you precise control over text appearance and behavior.

Accessing Advanced Typography

1. Select a text element on the canvas
2. In the Properties Panel, find the Advanced Typography section
3. Click to expand the section
4. Advanced text controls appear below

Text Direction

Control how text flows for different languages and writing systems:

Direction Modes

• Auto - Automatically detect direction based on content (default)
• LTR - Left-to-Right (English, most European languages)
• RTL - Right-to-Left (Arabic, Hebrew, Persian)

When to Use

• Auto - For mixed-language content or when unsure
• LTR - Force left-to-right for specific formatting needs
• RTL - For designs targeting RTL language markets

OpenType Features

OpenType features are advanced typographic options built into professional fonts. Not all fonts support all features.

Available OpenType Features

Ligatures

• Enabled by default
• Combines multiple characters into single glyphs (e.g., "fi", "fl")
• Improves readability and aesthetics
• Disable for code samples or technical content

Kerning

• Enabled by default
• Adjusts spacing between specific character pairs
• Prevents awkward gaps (e.g., between "A" and "V")
• Keep enabled for professional typography

Small Caps

• Disabled by default
• Converts lowercase letters to smaller uppercase versions
• Useful for headings, acronyms, and emphasis
• Different from simply making text smaller
• Requires font to support small caps feature

Oldstyle Figures

• Disabled by default
• Uses numbers with varying heights and descenders
• Numbers blend better with running text (1, 2, 3)
• Alternative to lining figures (uniform height numbers)
• Preferred for body text in editorial design

Tabular Figures

• Disabled by default
• All numbers have the same width
• Perfect for tables, columns, and aligned data
• Ensures vertical alignment of numbers
• Essential for financial data and spreadsheets

Fractions

• Disabled by default
• Converts number pairs with "/" into proper fractions
• Example: "1/2" becomes "½", "3/4" becomes "¾"
• Improves typography of recipes, measurements

Slashed Zero

• Disabled by default
• Displays zero (0) with a diagonal slash through it
• Differentiates zero from letter O
• Useful for code, serial numbers, and technical documentation

Variable Fonts

Variable fonts are modern fonts that allow smooth transitions between different font styles using adjustable axes. This provides unlimited style variations from a single font file.

Common Variable Font Axes

Weight (wght)

• Range: 100 (Thin) to 900 (Black)
• Default: 400 (Regular)
• Adjust font thickness continuously
• Go beyond traditional weight increments (Regular, Bold, etc.)
• Create subtle weight variations for hierarchy

Width (wdth)

• Range: 50 (Condensed) to 200 (Expanded)
• Default: 100 (Normal width)
• Make text narrower or wider without distortion
• Fit text into tight spaces or create emphasis
• Useful for responsive text sizing

Slant (slnt)

• Range: -15° (Slanted) to 0° (Upright)
• Default: 0° (Upright)
• Create oblique or slanted text
• Different from italic (which is separately designed)
• Adjust angle for subtle or dramatic slant

Variable Font Notes

• Font Support Required - Only works with variable fonts (e.g., Inter, Roboto Flex)
• Invisible with Static Fonts - Controls have no effect on traditional fonts
• Custom Axes - Some variable fonts have additional unique axes
• Performance - Variable fonts can reduce file sizes in web projects

Spell Check

Enable spell checking to highlight potential spelling errors in your text:

• Disabled by default
• Underlines misspelled words with red squiggly line
• Useful for catching typos in UI copy and content
• Disable for brand names, code, or technical terms
• Works with system dictionaries

Common Use Cases

Body Text with Oldstyle Figures

1. Select body text element
2. Open Advanced Typography section
3. Enable Oldstyle Figures
4. Enable Ligatures and Kerning (default)
5. Numbers now blend naturally with text

Data Tables

1. Select table text with numbers
2. Enable Tabular Figures
3. Disable Ligatures for clearer digits
4. Numbers vertically align perfectly

All Caps Headings with Small Caps

1. Create heading text
2. Enable Small Caps
3. Type in lowercase - appears as elegant small capitals
4. More refined than using all caps

Multilingual Design (RTL Support)

1. Create text for Arabic or Hebrew content
2. Set Text Direction to RTL
3. Text flows right-to-left
4. Punctuation appears on correct side

Variable Font Weight Animation

1. Select text with a variable font (e.g., Inter)
2. Adjust Weight slider to desired value
3. Create component variants with different weights
4. Use for hover states or dynamic emphasis

Font Feature Compatibility

Feature	Requires	Common Fonts
Ligatures	OpenType support	Inter, Roboto, most modern fonts
Kerning	OpenType support	Almost all professional fonts
Small Caps	True small caps glyphs	Adobe fonts, professional typefaces
Oldstyle Figures	Alternate number glyphs	Merriweather, Georgia, Garamond
Tabular Figures	Monospaced number glyphs	Inter, Roboto, DIN
Variable Font Axes	Variable font format	Inter, Roboto Flex, Source Sans Variable

Tips and Best Practices

• Check Font Support - Not all fonts support all OpenType features; test before committing
• Ligatures for Readability - Keep ligatures enabled for body text in most cases
• Tabular for Tables - Always use tabular figures for data tables and financial information
• Small Caps for Acronyms - Use small caps for abbreviations in body text (e.g., "NASA", "FBI")
• Variable Fonts for Flexibility - Variable fonts give more control with fewer font files
• Weight Increments - Use weight values in increments of 100 for clearest hierarchy
• RTL Testing - Always test RTL layouts with native speakers
• Slashed Zero for Code - Enable slashed zero for code samples and serial numbers
• Disable for Fallback - If a feature causes issues, disable it for safe fallback
• Spell Check for Copy - Enable spell check during copywriting, disable for final designs

Understanding OpenType Tags

Behind the scenes, OpenType features use 4-letter codes:

• liga - Standard ligatures
• kern - Kerning
• smcp - Small capitals
• onum - Oldstyle figures
• tnum - Tabular figures
• frac - Fractions
• zero - Slashed zero

Keyboard Shortcuts

• Cmd+T - Select Text tool
• Cmd+B - Toggle bold (changes weight if variable font)
• Cmd+I - Toggle italic

Related Topics

• Text Properties - Basic text formatting (font, size, color, alignment)
• Working with Text - Creating and editing text elements
• Text Styles - Creating reusable text styles
• Variables - Using design variables for dynamic text