Font Size Adjustment
VertiTab's custom theme feature provides two methods to adjust font sizes. Choose the appropriate method based on your needs.
Method 1: Typography Configuration - Global Settings
Access Path
- Open VertiTab settings page
- Click "Custom Themes" in the sidebar menu
- Select the theme to edit and click "Edit"
- Click the "📝 Typography" tab
Global Font Settings
In the "Global Settings" section:
- Base Font Size: Adjust 10-24px via slider; changing this value will synchronously adjust all typography variants
- Font Family: Select preset fonts or enter custom font families
Individual Typography Variant Settings
You can independently adjust 10 typography variants:
Heading Variants
- H1-H6: Font sizes for various heading levels (0.5-3rem)
Body Variants
- Body1: Primary body text
- Body2: Secondary body text
- Button: Button text
- Caption: Caption text
Other Properties
- Line Height: 1-3x line height adjustment
- Font Weight: 100-900
- Text Transform: None, uppercase, lowercase, capitalize
Method 2: Component Customization - HTML Font Size
Access Path
- In the theme editor, click the "🧩 Component Customization" tab
- Find the "CssBaseline" configuration card and expand it
- In the "HTML Element Styles" section
HTML Font Size Settings
- Adjustment Range: 12-20px
- Effect: Affects the base font size of the entire page
- Real-time Preview: See effects immediately when adjusting the slider
Differences Between Methods
| Method | Scope | Characteristics |
|---|---|---|
| Typography Configuration | Specific typography variants | Fine control over each text type |
| HTML Font Size | Global base size | Affects overall font baseline |
Usage Recommendations
- Adjust HTML Font Size First: Set an appropriate base size
- Then Adjust Typography: Fine-tune various typography variants
- Maintain Visual Hierarchy: Ensure headings are larger than body text for clear hierarchy
- Test Different Scenarios: Verify effects across various interface elements
Saving Settings
All adjustments are previewed in real-time. Click the "Save" button in the theme editor to save changes.