zenCSS comes with a dynamic text scaling feature that takes the guesswork out of font sizing, line height and line spacing across varying viewport resolutions, ensuring readability and aesthetic consistency are always in check.

Font Sizing

Right out of the gate, zenCSS uses dynamic font sizing as defined below:

Dynamic Heading Resizing

The heading tags (h1 - h6) are dynamically set up to resize at each breakpoint, based on the default font size. For a closer look, inspect an element below and switch to the computed tab in your browser's developer tools while toggling the responsive view. As you resize the window, you'll see the font sizes gracefully adapting to the changing viewport dimensions.

Fine Tuning Made Easy

Adjusting text scaling to meet your preferences is straightforward with zenCSS. Overriding the font-size in a specific media query just once triggers a cascade effect, updating the sizes of all font elements accordingly.

By default, we style text using the Inter typeface. Inter is carefully crafted & designed for a wide range of applications, from detailed user interfaces to marketing & signage. The Inter typeface family features over 2000 glyphs covering 147 languages. Weights range from a thin 300 all the way up to a heavy 900.

Dynamic Line Height

zenCSS automatically adjusts line heights to ensure optimal readability and aesthetic appeal across different screen sizes. This feature dynamically calculates the best line height based on the font size and screen resolution, preventing text from appearing too cramped or too spread out. Whether you're working with long paragraphs or concise headings, the line height adapts seamlessly, maintaining a comfortable reading experience for your audience.

Dynamic Line Spacing

The dynamic line spacing feature in zenCSS enhances text layout by intelligently adjusting the space between lines based on content type and display size. This ensures that your text remains legible and visually appealing, whether it's a short caption or an extensive article. The spacing adjusts in real-time to match the changing viewport sizes, maintaining a consistent and reader-friendly text layout. With zenCSS, you can trust that your content will always look its best, no matter the device or screen resolution.