Choosing Fonts for Confluence: Accessibility and Branding GuideConfluence is where teams collaborate, document processes, and preserve institutional knowledge. The fonts you choose for Confluence pages affect readability, accessibility, and how your brand is perceived. This guide helps you choose, apply, and manage fonts in Confluence with attention to accessibility standards and practical branding needs.
Why font choice matters
Fonts do more than make text look pleasing. They:
- Influence readability and comprehension for readers with and without visual impairments.
- Support or undermine an organization’s visual identity.
- Affect how easily content can be scanned on different devices and screen sizes.
- Impact load times and cross-device consistency when using web fonts.
Choosing the right font balances legibility, accessibility, and brand voice.
Accessibility first: principles and practical rules
Key accessibility principles
- Legibility: Characters should be easily distinguishable (e.g., avoid overly decorative or condensed fonts).
- Familiar letterforms: Prefer fonts with clear distinctions between characters like “I”, “l”, and “1”.
- Sufficient size and spacing: Typography scale and line-height directly influence comprehension.
- Contrast and weight: Ensure sufficient contrast between text and background; avoid relying on thin weights for body text.
- Screen- and device-friendly: Fonts should render well on Windows, macOS, iOS, Android, and various browsers.
Practical rules for Confluence pages
- Use a sans-serif font for UI and body text when possible; they’re typically more readable on screens.
- Keep body copy at a minimum of 16px (or an equivalent readable scale) for clarity across devices.
- Line-height of 1.4–1.6 for body text; tighter for headings, looser for dense content like code snippets or tables.
- Avoid all-caps for long passages; reserve for short labels or headings.
- Limit decorative or script fonts to logos or very short headings—never for paragraphs.
- Provide sufficient color contrast; follow WCAG AA as a baseline and WCAG AAA where feasible.
WCAG reminder: To meet WCAG AA for normal text, contrast ratio should be at least 4.5:1; for large text (≥18pt or ≥14pt bold), at least 3:1.
Branding considerations: voice, tone, and consistency
Typography is a major part of brand identity. Your Confluence site should reflect your brand while staying usable.
- Define a typographic hierarchy: choose a primary font for headings, a secondary for body, and a monospaced option for code.
- Maintain consistency: use the same fonts, sizes, and spacing across templates and page blueprints.
- Align tone with brand: a modern tech brand may choose a neutral geometric sans (e.g., Inter), while a heritage brand might use a humanist serif for headings combined with a neutral sans for body.
- Consider global audience: pick fonts with broad language support (Latin, Cyrillic, Greek; additionally Arabic, Hebrew, CJK if you have those readers).
- Web vs. print: remember Confluence is primarily digital—prioritize screen-optimized fonts.
Recommended font combinations for Confluence
Here are several practical pairings depending on brand intent. Use a primary for headings and a secondary for body text.
-
Modern tech (neutral, clean)
- Headings: Inter
- Body: Roboto
- Code: Source Code Pro
-
Minimal / Scandinavian
- Headings: Noto Sans
- Body: IBM Plex Sans
- Code: Fira Code
-
Professional / Corporate
- Headings: Segoe UI or Open Sans
- Body: Arial or Roboto
- Code: Consolas
-
Creative / Boutique
- Headings: Playfair Display (sparingly)
- Body: Lato or Montserrat
- Code: JetBrains Mono
-
International / Wide language support
- Headings: Noto Sans (wide script coverage)
- Body: Noto Sans / Noto Serif
- Code: DejaVu Sans Mono
Technical options for using fonts in Confluence
Confluence Cloud and Server/Data Center have different capabilities and limitations.
Confluence Cloud
- Built-in theme settings vary by site plan and apps installed. You can change fonts via global themes in some plans.
- For custom fonts, use:
- Built-in theme options (if present).
- Marketplace apps (look for “custom fonts” or theme editors).
- CSS injection is not supported on Confluence Cloud by default for security reasons; rely on supported theming apps.
Confluence Server / Data Center
- Greater control: you can upload web fonts to your server and add custom CSS to apply fonts site-wide.
- Steps typically involve:
- Upload font files (WOFF/WOFF2 recommended) to a location served by Confluence.
- Add @font-face rules in a custom CSS file and reference them in site stylesheet or space stylesheets.
- Update page templates and global styles to use the new fonts.
- Remember to keep licensing in mind; self-hosted fonts still require appropriate webfont licenses.
Licensing and performance
- Prefer WOFF2/WOFF formats for web serving (compressed, good browser support).
- Host fonts locally when possible to avoid external calls and reduce third-party tracking.
- Use font-display: swap to prevent invisible text during font loading.
- Consider subsetted fonts for large-family fonts (only include needed characters) to reduce file size.
- Check font licenses carefully: many free fonts (Google Fonts, SIL Open Font License) are permissive, but commercial fonts require web licenses.
Implementation checklist
- Audit current pages for inconsistent typography and accessibility issues.
- Choose primary/secondary/code fonts with required language coverage.
- Test contrast, sizes, and line-height on desktop and mobile.
- Decide hosting approach (cloud theme, marketplace app, or self-hosted fonts + CSS).
- Implement in a staging space or sample pages first.
- Use templates and space styles to enforce consistency.
- Train your team on the typography rules and provide a short style snippet for editors.
- Periodically revisit fonts as brand or accessibility requirements evolve.
Quick troubleshooting
- Text looks different across browsers: ensure you’re using webfont formats (WOFF/WOFF2) and proper fallbacks.
- Slow page loads after adding fonts: enable WOFF2, subset fonts, use font-display: swap, host fonts locally.
- Non-Latin scripts don’t render: pick fonts with appropriate Unicode coverage (Noto family is broad).
- Editor UI shows default fonts while published pages show custom fonts: Confluence editor may not load custom CSS/themes—preview published pages or use templates for visible consistency.
Example CSS snippet (for Confluence Server/Data Center)
@font-face { font-family: 'InterCustom'; src: url('/download/resources/fonts/inter-v-variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } body, .wiki-content { font-family: 'InterCustom', 'Roboto', Arial, sans-serif; font-size: 16px; line-height: 1.5; } h1, h2, h3, h4 { font-family: 'InterCustom', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; } code, pre { font-family: 'Source Code Pro', 'DejaVu Sans Mono', monospace; } Final notes
Good typography in Confluence improves comprehension, accessibility, and brand cohesion. Prioritize legibility and accessibility first, then align fonts with your brand voice. Test on real pages and devices, document your rules, and use Confluence templates or theming tools to keep the experience consistent across your workspace.
Leave a Reply