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.

Typography scale editor

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.

Google Fonts browser

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.

Responsive typography

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.