Typography
Create a cohesive typographic system that scales beautifully across all devices.
Overview
TheDock's typography system is built on a base size that scales all text proportionally. This ensures visual harmony and makes responsive design effortless.
All typography in your theme - from tiny labels to massive headlines - derives from this single foundation.
Base Size
The Base Size is the most important typography setting. It determines:
- Body text size
- Heading proportions (relative to base)
- Spacing calculations
- Overall "feel" of your design
Available Options
TheDock offers 5 base size options for medium screens (laptops):
| Size | Pixels | Best For |
|---|---|---|
| Extra Small | 14px | Dense interfaces, data-heavy sites |
| Small | 15px | Compact designs |
| Medium | 16px | Standard web typography |
| Large | 17px | Content-focused sites |
| Extra Large | 18px | Editorial, luxury, accessibility |
Responsive Scaling
Your base size automatically adjusts on different screens:
- Mobile - Slightly smaller (maintains readability)
- Desktop - Your selected size
- Wide Desktop - Slightly larger (uses available space)
The current sizes for each breakpoint are shown next to the "Size" label.
Typographic Scale
TheDock provides 5 text styles in a hierarchical scale:
The Five Styles
| Style | Multiplier | Typical Use |
|---|---|---|
| Huge | 4x-5x base | Hero headlines, impact statements |
| Large | 2x-3x base | Section headings, important titles |
| Medium | 1.25x-1.5x base | Subheadings, introductions |
| Normal | 1x base | Body text, paragraphs |
| Small | 0.75x-0.85x base | Labels, captions, metadata |
Style Properties
Each style can be customized with:
| Property | Description |
|---|---|
| Font Family | The typeface (serif, sans-serif, etc.) |
| Font Weight | Light (300) to Bold (800) |
| Line Height | Space between lines (1.2-2.0 typical) |
| Letter Spacing | Space between characters |
| Uppercase | Transform to all capitals |
| Font Size | Size relative to base |
| Mobile Size | Size specifically for mobile devices |
Editing a Style
- Click on Typography in the Design sidebar
- Click on any style (Huge, Large, etc.)
- Adjust properties using the controls
- Preview changes in real-time
Font Selection
Available Fonts
TheDock includes a curated selection of web-safe and Google Fonts:
- Sans-serif - Manrope, Inter, Open Sans, Lato, etc.
- Serif - Playfair Display, Merriweather, etc.
- Monospace - For code blocks and technical content
Font Pairing Tips
| Approach | Example |
|---|---|
| Same family | Manrope for everything (vary weights) |
| Serif + Sans | Playfair (headings) + Inter (body) |
| Display + Text | Bold display font (huge) + readable body font |
Consistency Guideline
The scale system will highlight when your choices stray from the intended proportions. While you're free to customize, maintaining scale relationships creates visual harmony.
Text Max Length
For readability, text blocks shouldn't stretch too wide. TheDock includes Max Length settings.
What is Max Length?
Max Length limits how wide text can grow, independent of screen width. It's measured relative to your base size, not pixels.
Why Use It?
- Readability - 45-75 characters per line is optimal
- Flexibility - Works across all screen sizes
- Consistency - Text blocks maintain readable proportions
Available Options
- Small - Short lines (captions, sidebars)
- Normal - Standard paragraph width
- Large - Wider text blocks
- Full - No limit (spans container)
Responsive Typography
Automatic Adjustments
TheDock handles responsive typography automatically:
| Device | Adjustments |
|---|---|
| Mobile | Smaller base, tighter line heights, adjusted headings |
| Tablet | Transitional sizes between mobile and desktop |
| Desktop | Your specified settings |
| Wide | Optionally larger for big screens |
Mobile-Specific Sizes
For each style, you can set a specific mobile size. This is useful when:
- Large headlines need to be smaller on phones
- You want tighter control over mobile typography
Using Typography in Layouts
Applying Styles to Blocks
When editing text blocks in templates:
- Select the text block
- In settings, find Typography Style
- Choose: Huge, Large, Medium, Normal, or Small
Overriding Styles
Individual blocks can override the global style:
- Custom font size
- Different font weight
- Specific line height
These overrides only affect that one block.
Best Practices
1. Start with Base Size
Choose your base size first. Everything else scales from it.
2. Maintain Hierarchy
Keep clear visual distinction between heading levels. Large should be noticeably bigger than Medium.
3. Test on Mobile
What looks great on desktop may overwhelm a phone screen. Use mobile preview regularly.
4. Limit Font Families
Two fonts maximum. One for headings, one for body is a classic choice.
5. Consider Reading Context
- Long articles: Normal or Large base, generous line height
- Marketing pages: Bigger is often better
- Data-heavy apps: Smaller, denser typography
6. Use Weight for Emphasis
Instead of adding a new font, try a bolder weight of your existing font.
Troubleshooting
Text looks too big/small
- Adjust the base size first
- Check that style multipliers make sense
- Verify mobile-specific sizes
Headings and body don't match
- Ensure you're using fonts from the same family or intentionally paired
- Check that weights complement each other
Line spacing feels off
- Line height of 1.5-1.75 works for most body text
- Headings can be tighter (1.1-1.3)
Text breaks awkwardly on mobile
- Set appropriate mobile sizes for large text
- Use Max Length to control line width
Related Topics
- Colors - Text color and contrast
- Spacing - Margins around text elements
- UI Elements - Button and form typography