Quick Start: Preview and Compare Fonts
In HeronTool's "Font Previewer" tool, type your text (e.g., "Design is Communication") to see real-time rendering across different fonts. We suggest entering both Chinese and English samples to inspect letter spacing and stroke details. Click a font card to enlarge it, and use the "Add to Compare" feature to display up to three fonts side-by-side, quickly filtering to the best fit.
Pairing Fonts: Create Harmonious Combinations
Open the "Font Pairing" tool and start with preset font pairs (like "Source Han Serif + Source Han Sans"). Adjust the heading and body sizes (headings should be 1.5–2× the body), and use the tool's contrast score and sample paragraphs to preview the overall effect. Try mixing serif and sans-serif fonts, but keep a style unity—for example, use sans-serif for headings and serif for body text to create clear hierarchy.
Generating Type Scale: Build a Typographic System
Use the "Type Scale" tool, set a base size (e.g., 16px) and a ratio (like 1.25 or 1.333), and the tool will generate a set of progressive type sizes (e.g., 16, 20, 25, 31px). Copy the generated CSS variables or use them directly in your design. Test readability in real mockups and adjust the ratio until it feels visually comfortable.
FAQ
Q: How to quickly compare multiple fonts?
A: In "Font Previewer", use the "Add to Compare" feature to select fonts side-by-side, or switch to list view.
Q: Is there a universal formula for font pairing?
A: No absolute rule, but follow "unity in contrast"—like "sans-serif headings + serif body" or same font family with different weights, then fine-tune sizes.
Q: How to choose a type scale ratio?
A: Start with 1.25 (web) or 1.333 (print), adjust based on content density, and keep hierarchy clear.
