Typography
Responsive type scale from negative 2 to positive 6
Adjust the type scale
Your scale ranges from negative 2 smallest to positive 6 largest
Negative 2 maps to small text like captions
0 is your body text
Positive 1 through positive 6 map to H6 through H1
Typography in Naina uses this scale system. Small text to huge headings. The scale adjusts smoothly from mobile to desktop using clamp functions.
Change growth factors
Select how your text scales between mobile and desktop
Choose from musical intervals: major fourth, perfect fifth, and others
See the effect instantly across all your pages
Pick a growth factor and watch your entire type system scale mathematically. It's like music for your fonts.
Add or change fonts
Browse the full Google Fonts library
Add multiple weights
Apply font families to specific elements
Control font loading behavior
Browse, preview, and apply fonts in seconds. They load fast because Naina only includes the weights you actually use.
Smooth scaling with clamp
All typography uses modern clamp functions, meaning your text smoothly scales between screen sizes without awkward breakpoints.
Your H1 should be bigger on desktop than mobile, but media queries are clunky. Naina uses CSS clamp so text scales smoothly at every screen size. No breakpoints needed.
Typography is more than fonts
Typography isn't just about picking fonts. It's about rhythm, scale, and hierarchy.
Naina handles the math so you can focus on how it looks. The system ensures consistent relationships between text sizes, proper line heights, and readable spacing throughout your design.