Test Font Pairings
TypeSmith Test Font Pairings provides real-time font preview controls. Select fonts, adjust typography settings, and see instant results. Compare font pairings side by side to find the perfect typeface combination for your project.
Select Primary Font
Search and select a font
Select Pairing Font
Search and select a font
Select a font to get started
Use the font selectors above to preview font pairings
Keyboard Shortcuts
How to Test Font Pairings with TypeSmith
TypeSmith Test Font Pairings provides professional-grade font testing tools for designers, developers, and typography enthusiasts. This comprehensive guide walks you through every feature, from basic font selection to advanced comparison techniques.
Test Font Pairings transforms TypeSmith from a font discovery platform into an active design workspace. Whether you're selecting typography for a website, app, or print project, Test Font Pairings gives you the tools to make informed decisions.
Quick Start Steps
Select a Primary Font
Click the "Primary Font" selector at the top of the page. Use the search field to find fonts by name, or browse by category. TypeSmith's database includes over 8,500+ fonts from Google Fonts, all with .
Pro Tips for Font Selection:
- Start with your headline font first—it sets the visual tone
- Filter by category to narrow options quickly
- Check the accessibility rating for body text fonts (aim for A or B)
- Recently used fonts appear at the top for quick access
- Variable fonts offer the most flexibility for fine-tuning
Add a Pairing Font (Optional)
The "Pairing Font" selector lets you test font combinations. This is typically your body text font that complements the primary headline font. Use the swap button () between selectors to quickly switch primary and pairing fonts.
Font Pairing Fundamentals:
Contrast is key: Pair fonts with different characteristics. A geometric sans-serif headline with a humanist serif body creates visual interest while maintaining readability.
Match x-heights: Fonts with similar look more harmonious when used together.
Limit to 2-3 fonts: Most professional designs use no more than three typefaces. Test Font Pairings' comparison tool helps you evaluate multiple options before committing.
Consider context: A font pairing for a tech startup differs from one for a law firm. Use the Specimens tab to see fonts in realistic contexts.
Customize Preview Settings
The sticky toolbar at the top provides real-time controls for font size, weight, letter spacing, line height, alignment, and background color. All changes apply instantly to the preview area.
Edit Preview Text
Click directly on the preview text to edit it. Type your own headlines, taglines, or body copy to see how fonts perform with your actual content. Press Esc or click outside to finish editing.
The sticky toolbar provides precise control over every aspect of your typography. Settings are automatically saved and persist between sessions.
| Control | Range | Default | Description |
|---|---|---|---|
| Font Size | 12px – 120px | 48px | Controls the size of displayed text. Use keyboard shortcuts + and - for quick adjustments. |
| Font Weight | 100 – 900 | 400 | Adjusts the thickness of characters. Available weights depend on the selected font. |
| Letter Spacing | -5px – 20px | 0px | Controls the space between individual characters. Also known as . |
| Line Height | 1.0 – 2.5 | 1.5 | Controls the vertical space between lines. Also called . |
| Background | Light / Dark / Custom | Light | Toggle between light and dark backgrounds, or set custom colors. Press D to quickly toggle dark mode. |
| Alignment | Left / Center / Right | Left | Controls text alignment within the preview area. |
Typography Best Practices:
For body text, aim for 50-75 characters per line. At the default 48px size, this means your preview area should show roughly 10-15 words per line for comfortable reading.
Use weight contrast to create visual hierarchy. A common pattern is 700 for headlines, 400 for body text, and 500 for subheadings. Test Font Pairings lets you see these relationships in real-time.
Increase letter spacing for all-caps text (try +1px to +3px). Decrease slightly for large display sizes (-0.5px to -1px). Body text usually works best with default spacing.
Body text typically needs 1.4–1.6 line height. Headlines can use tighter spacing (1.1–1.3). Long-form reading benefits from more generous spacing (1.6–1.8).
Test Font Pairings organizes its features into four tabs. Use number keys 1–4 to switch quickly.
Preview Tab
1The main workspace where you see your fonts rendered with current settings. Click on text to edit it directly. Both primary and pairing fonts display here with appropriate styling.
Primary font display: Shows at full size with all your typography settings applied. This represents your headline or display text.
Pairing font display: Renders at 60% of primary size with adjusted weight and spacing, simulating body text proportions.
Edit hint: Look for "Click text to edit" in the bottom corner. Your custom text persists across sessions.
Specimens Tab
2See your fonts in realistic design contexts. Specimens include editorial layouts, UI components, posters, wordmarks, and code editors. Filtered based on font category.
Editorial: Magazine-style layout with headline, subhead, and body text. Perfect for testing readability hierarchy.
UI Components: Buttons, form fields, and navigation elements. Essential for web and app design testing.
Poster: Large-scale display composition. Tests how fonts perform at impactful sizes.
Wordmark: Logo and brand treatment variations. See your font as a potential brand identity element.
Code Editor: Syntax-highlighted code block (monospace fonts only). Tests programming font characteristics.
Characters Tab
3Explore the complete character set of your selected font. Filter by category, search by character name, and copy glyphs in various formats.
Category filters: Toggle between uppercase, lowercase, numbers, punctuation, symbols, and extended characters.
Search: Find characters by name or Unicode value (e.g., "ampersand" or "U+0026").
Copy formats: Click any character to copy it directly, or use the popover to copy as HTML entity or CSS escape code.
Keyboard navigation: Use arrow keys to navigate the character grid, Enter to copy.
Compare Tab
4Compare up to 3 fonts side by side. Add fonts to comparison using the "Add to compare" button under each font selector.
Side by Side: Fonts displayed in columns for direct visual comparison. Best for evaluating overall character.
Stacked: Fonts overlaid with opacity control. Useful for comparing specific letterforms and spacing.
Metrics: Technical comparison showing x-height, cap height, ascender/descender ratios, and other measurements.
Test Font Pairings supports comprehensive keyboard shortcuts for power users. Press ? at any time to see all available shortcuts.
Navigation
Preview Controls
Actions
Effective typography requires both technical knowledge and aesthetic judgment. These guidelines will help you make better font choices.
1. Start with Purpose, Not Style
Before exploring fonts, define your project's communication goals. A tech startup's landing page has different needs than a literary magazine or a children's app. Test Font Pairings' specimens help you visualize fonts in context.
2. Test at Real Sizes
Fonts can look dramatically different at different sizes. A font that's beautiful at 72px may become illegible at 14px. Use Test Font Pairings' size slider to test your fonts at actual production sizes, not just display sizes.
- Hero headlines: 48–72px (or larger)
- Section headings: 24–36px
- Body text (web): 16–18px
- Body text (mobile): 14–16px
- Captions/labels: 12–14px
- Legal/fine print: 10–12px
3. Check Accessibility Ratings
TypeSmith rates every font for accessibility. For body text or UI elements, prioritize fonts with A or B ratings. Display fonts used at large sizes can have lower ratings since legibility is less critical at scale.
4. Test Both Light and Dark Modes
Some fonts appear heavier or lighter depending on background color. Use the D shortcut to toggle between light and dark backgrounds and ensure your typography works in both contexts.
5. Use the Comparison Tool Strategically
Don't just compare fonts you like—compare fonts you're deciding between. The metrics view is especially useful for ensuring consistent x-heights and proportions when pairing fonts.
6. Export and Iterate
Use the Copy CSS button (C) to export your typography settings. Test in your actual project, then return to Test Font Pairings to refine. The best typography comes from iteration.
Why isn't my font loading?
Fonts load dynamically when selected. If a font isn't loading:
- Check your internet connection
- Wait a moment—large font families may take longer
- Try refreshing the page
- Some fonts have limited character support for non-Latin scripts
Why are some weights unavailable?
Not all fonts include every weight from 100 to 900. The weight slider works within the available range for each font. Variable fonts offer the most flexibility with continuous weight adjustment.
How do I save my work?
Test Font Pairings automatically saves your settings to your browser's local storage. Your font selections, preview text, and typography settings persist between sessions. Use the Share button to create a link with your current configuration.
Can I use these fonts in my projects?
All fonts in TypeSmith come from Google Fonts and are free to use under the Open Font License. Click on a font card to view its profile page with full license details and embedding instructions.
How do I reset everything?
Use the Reset button in the toolbar to restore default settings. This resets font size, weight, spacing, line height, alignment, and background color to their default values. Your font selections are preserved.