Beautiful Type

About this plugin

Create systematic, mathematically-perfect typography scales in seconds. Generate typography groups with automatic Figma variables and text styles, the professional way to build consistent design systems.

---

What Makes Beautiful Type Special?

Unlike similar plugins that stop short of full integration, Beautiful Type seamlessly creates and links all your variable values and applies them to text styles automatically. The result? A faster, more consistent, and truly professional design process.

Beautiful Type uses modular scale mathematics to generate harmonious typography scales that create visual rhythm in your designs. In just a few clicks, transform a single font into a complete, production-ready typography system with properly scoped Figma variables and text styles, not just raw numbers.

This is what professional design systems are made of.

---

Key Features

Five Typography Groups

1. Display - Large, impactful text for headlines and hero sections
2. Heading - Section headers and subheadings
3. Body - Main content text and paragraphs
4. Label - Small text for captions and labels
5. Special - For those type groups that don't fit anywhere else

Modular Scale System

1. 10 Built-in Ratios
2. T-Shirt Sizing: Automatically generates intuitive labels (XS, S, M, L, XL, XXL, etc.)
3. Geometric Progression: Each size multiplies from the base using mathematical precision

Design System Integration

1. Figma Variables - Automatically creates properly scoped variables for sizes, weights, and families
2. Text Styles - Generates text styles bound to variables for easy updates
3. Visual Specimens - Creates beautiful type specimens on a dedicated "Typography" page
4. Smart Naming - Organised as Group/Weight/Size (e.g., Body/Regular/M) for clarity
5. Overwrite Protection - Prevents accidental changes to existing styles

Complete Control

1. Base Size - Set your starting point (default: 16px)
2. Steps Above/Below - Control how many sizes are generated above and below the base
3. Font Selection - Choose from any font available in your Figma file
4. Multiple Weights - Generate scales for all font weights at once
5. Line Height - Customise line height multiplier (0.5 - 3.0)
6. Round Values - Optionally round font sizes to whole numbers for cleaner systems
7. Overrides – Override individual sizes or line heights before generating

Important Notes

1. Fonts must be available in your Figma file
2. Variables are created locally in your file
3. Visual specimens auto-position but can be manually adjusted

Made with ❤️ for better typography in Figma