Type scale generator
Create and explore dynamic type scales with ease. Choose from a vast selection of Google Fonts, set your base font size and scale, and see how different type sizes look in real time. Customize your text preview and instantly see the effects on various font sizes and line heights. Copy the generated CSS, SCSS, SASS, and Tailwind CSS code snippets to integrate with your projects seamlessly. Whether you’re designing for the web or mobile, this tool helps you maintain consistent typography with just a few clicks.
You’re not everything you could be, and you know it.
html { font-size: 2.5rem; }
body { font-family: 'Roboto', sans-serif; line-height: 1.067; }
--text-size-xs: 2.20rem;
--line-height-xs: 1.067;
--text-size-sm: 2.35rem;
--line-height-sm: 1.067;
--text-size-md: 2.50rem;
--line-height-md: 1.067;
--text-size-lg: 2.68rem;
--line-height-lg: 1.067;
--text-size-xl: 2.85rem;
--line-height-xl: 1.067;
--text-size-2xl: 3.02rem;
--line-height-2xl: 1.067;
--text-size-3xl: 3.25rem;
--line-height-3xl: 1.067;
--text-size-4xl: 3.45rem;
--line-height-4xl: 1.067;
--text-size-5xl: 3.70rem;
--line-height-5xl: 1.067;
