I built a type scale generator that exports CSS, Tailwind v3/v4 & Style Dictionary tokens - all in the browser
Bilal Malik has developed a type scale generator that simplifies the process of creating typography scales for web design. The tool allows users to export CSS, Tailwind v3/v4, and Style Dictionary tokens directly in the browser. It features a live preview of font pairings and offers shareable URLs for easy collaboration.
- ▪The type scale generator supports multiple built-in ratios and custom ratios for typography scaling.
- ▪Users can preview over 1000 Google Fonts and see how they look with their chosen scales in real-time.
- ▪The tool provides export options in various formats, including CSS Custom Properties and Tailwind CSS.
Opening excerpt (first ~120 words) tap to expand
try { if(localStorage) { let currentUser = localStorage.getItem('current_user'); if (currentUser) { currentUser = JSON.parse(currentUser); if (currentUser.id === 3960897) { document.getElementById('article-show-container').classList.add('current-user-is-article-author'); } } } } catch (e) { console.error(e); } Bilal Malik Posted on Jun 3 I built a type scale generator that exports CSS, Tailwind v3/v4 & Style Dictionary tokens - all in the browser #typescript #opensource #webdev #tailwindcss Every time I started a new design system, the same ritual: open a calculator, pick a base size, choose a modular ratio, hand-compute every step, paste into CSS variables - then do it all over again when the designer changed the base from 16px to 17px.
…
Excerpt limited to ~120 words for fair-use compliance. The full article is at DEV.to (Top).
Discussion
0 commentsMore from DEV.to (Top)
