Typometer
In-depth reviewTypometer helps designers and developers compose typographic scales using CSS tokens. It provides a structured approach to defining font sizes and line heights for consistent web typography, offering tools to establish a visual hierarchy across projects.
Typometer, as it opens in a browser tab.
Not sure how to add Typometer to your home screen? Step-by-step for Chrome, Safari, Firefox and Edge — it takes about ten seconds, and there is no app store involved.
Own Typometer? Have us re-run this measurement — we open it in a real browser, cut the network, and send you what survived.
How to install Typometer as a PWA
Screenshots
Why we recommend Typometer
Typometer stands out by providing a dedicated environment for generating typographic scales. It simplifies the often complex process of defining responsive font sizes and line heights using CSS variables, as evident from the code snippets shown on the page (e.g., `--base-min`, `--base-max`, `--ratio`, `--fs-s`, `--fs`). This focus on programmatic typography allows designers and developers to maintain consistency across various screen sizes and ensures a scalable, maintainable design system. The tool directly outputs values that can be integrated into stylesheets, bridging the gap between design concepts and implementation.
Best use cases
Best for: Frontend developers and web designers who need to create consistent and responsive typographic scales for their projects. It's ideal for establishing design systems where font sizes and line heights need to be precisely controlled and adaptable across different viewports, leveraging CSS variables for dynamic scaling. Also suitable for those looking to quickly prototype typographic relationships without manual calculations.
Honest limitations
Typometer focuses specifically on typographic scales and does not offer broader design or layout functionalities. It is not a general-purpose design editor or a comprehensive CSS framework. Users looking for advanced font pairing suggestions or full-fledged style guide generation beyond typographic values might find its scope limited. As no service worker evidence was found, offline functionality is not supported.
Are you the maker of Typometer? Claim this listing →
Similar to Typometer
Visual typographic scale calculator. Set a base font size and modular scale ratio, preview the resulting type hierarchy as CSS code. Essential for establishing consistent UI typography.
DUAL-UX promotes dual-experience websites that combine a conventional site for customer acquisition with an installable, app-like experience for retention. Its own site can be installed, loads fast, and works offline. It targets businesses that want one web presence to serve both marketing and returning-user needs.
Color Pal helps users find color palettes and schemes for design projects. It provides a straightforward tool to explore and select color combinations. The app focuses on accessibility through its web-based interface, making it suitable for designers and creatives seeking visual inspiration and practical color solutions.
An interactive calculator from Undercast Media that produces an instant price estimate for a website project. Answer questions about what you need and get a ballpark figure for your next web build. Useful for small businesses and clients scoping a site before contacting an agency.
AI-powered font pairing tool. Generate harmonious font combinations for your designs with one click. Instantly preview heading/body text pairings across Google Fonts. Pairings are generated from typeface similarity rather than a fixed list, so refreshing gives genuinely different results.
GreetingCardGo is a PWA for creating personalized digital greeting cards. Users can choose from templates like birthday, thank-you, and business appreciation cards. It offers AI-powered customization, allowing users to replace photos and messages, then download or share their creations without needing to sign in initially.
Own a PWA? See the listing options — standard submission is free.