Precise Type
Browser-based tool for building type scales with customizable font sizes, line heights, and letter spacing, including export-ready CSS.
Pros
- Clean interface with real-time preview and live updates
- Offers full control over font size, line height, and spacing
Cons
- Only works with Google Fonts
Precise Type is a browser-based tool built to help you create type scales with clarity and control. It gives you the flexibility to design your own system from scratch, whether you prefer modular scales, metric spacing, or something in between. You can define base sizes, adjust ratios, fine-tune line height, and dial in letter spacing without relying on pre-baked values that rarely fit the project.
The interface is clean and focused. There is no fluff or gimmicks, just sliders, inputs, and a live preview that lets you see your typography as you build it. You can work in pixels, rems, or unitless values and apply grid constraints to keep everything locked to a rhythm. It is especially useful when you’re building a design system and want to map out how type behaves across breakpoints without jumping between Figma and a calculator.
When you’re done, you can export your scale as CSS or CSV and drop it straight into your workflow. It is built for people who want precision and structure, not random spacing or default type sizes. You can go as deep as you want or keep it simple and move on. The tool gives you control without overcomplicating the process.


More
Accessibility
Accessible Color Palette Generator
Browser tool that generates accessible UI palettes for light and dark modes, balancing perceived lightness, contrast rules, and practical UI roles.
Adobe Color
Color tool for building palettes, pulling themes from images, and syncing color systems across your Adobe apps.
Colour Contrast Checker
An online tool that evaluates the contrast ratio between text and background colors to ensure compliance with WCAG accessibility standards.
accessiBe
Web accessibility platform that helps businesses improve compliance with ADA and WCAG standards through automated and customizable tools.
Color.review
Dive into a tool designed for ensuring visual accessibility, offering color contrast checks aligned with WCAG standards to optimize design inclusivity.
Get a grip on your design
resources and join our community
Free Membership
Current Membership
Save your favorite resources to your personal board for quick access and easy referencing.
- Create 1 board
- Save 10 resources
- Share your saved board with your team and network
- Rate and suggest resources
- Access to curated boards
- Be the first to discover new tools, trends, and insider perspectives
Premium Membership
Save your favorite resources to your personal board for quick access and easy referencing
- Create 50 boards
- Save 50 resources per board
- Share your saved board with your team and network
- Rate and suggest resources
- Access to curated boards
- Be the first to discover new tools, trends, and insider perspectives
Save this resource to a board.
Before saving a resource a board needs to be created.
Save to favorites.
Add to my list.
Name your new board:
Edit Board
Share or Delete Board
Are you sure you want to delete this Board?
Delete from my favorites.Are you sure you want to delete this Resource?
Remove from this board.Suggest a resource, report a broken or expired link.
Send We See Giants a message.
Free Membership
Current Membership
Save your favorite resources to your personal board for quick access and easy referencing.
- Create 1 board
- Save 10 resources
- Share your saved board with your team and network
- Rate and suggest resources
- Access to curated boards
- Be the first to discover new tools, trends, and insider perspectives
Already have an account? LOGIN