Quick Start
Open the Type Scale tool on HeronTool, choose a preset ratio (e.g., 1.333 or 1.618), and get a complete font-size ladder from headlines to body text. Click any size to preview in real time and copy the corresponding CSS or Figma style code.
Customization & Fine-Tuning
Use the sliders to adjust the base font size and ratio coefficient, observing how the text hierarchy changes. Set min/max size limits to prevent extremes. Also, refer to the font pairing suggestions to choose harmonious font combinations for headings and body.
Export & Integration
Once you've finalized your styles, click "Export" to get sizes for Web (PX/REM/EM) or mobile (PT). Paste the generated code directly into your project files, or use "Copy Styles" to quickly apply to text layers in design tools.
FAQ
- Q: How to choose a ratio?
A: 1.333 suits compact interfaces, 1.618 is better for long-form reading; try based on content density.
- Q: How to relate font size and line-height?
A: The tool suggests 1.5x line-height automatically, but you can adjust manually.
- Q: Does it support Chinese?
A: Yes, but check visual balance manually for Chinese characters.
