Hey Product Hunt! First-time hunter here 😄 Fluid typography is currently a hot topic in CSS, and there are plenty of useful tools out there that can help you generate or visualize fluid typography for your projects. Fluid Type Scale Calculator is one such tool that I created for designers and front-end developers. It combines ideas from similar apps, allowing you to generate fluid font size variables as part of a modular type scale and preview the results for any font family. You can customize most aspects of the output, including: - The minimum (mobile) font size, viewport breakpoint, and type scale. - The maximum (desktop) font size, viewport breakpoint, and type scale. - The names of all of the steps in your custom type scale. - The naming convention to use for the output variables. - The number of decimal places to use when rounding the output. - Whether to use rems or pixels for the output. If you're more of a visual person, the app also includes a preview mode with sample text, a Google Fonts picker, and a slider to simulate resizing your screen. Tweak these settings until you're happy with the results, and copy the CSS when you're done! Finally, in case this is your first time working with fluid typography, the app also includes a brief explainer towards the end along with some links to resources and similar tools. I hope you find this tool useful!

Fluid Type Scale Calculator

Create CSS variables for a fluid type scale with CSS clamp.

Create CSS variables for a fluid type scale with CSS clamp.