Typography

Luxa dynamically adjusts font sizes with the viewport width through a fluid-type scale, ensuring optimal readability on any device. A simple formula in the CSS’s clamp function creates this fluidity, making the text appear perfectly on screens of any size.

NameMin size (px)Calc (vw + px)Max size (px)Fallback size (px)Fallback size at 80rem (px)
--lx-text-01120.21vw + 11.3614.081214.08
--lx-text-0214.40.32vw + 13.4417.4414.417.44
--lx-text-0317.280.48vw + 15.6821.9217.2821.92
--lx-text-0420.80.69vw + 18.5627.3620.827.36
--lx-text-0524.960.97vw + 21.7634.2424.9634.24
--lx-text-0629.921.34vw + 25.642.7229.9242.72

Pixel perfection and design intention

Embracing fluid-type scales marks a shift from pixel-perfect design to a more flexible approach. Instead of clinging to precise values and rigid breakpoint control, entrusting the browser with layout adjustments ensures a tailored experience on every device. This ‘letting go’ doesn’t mean losing grip but gaining a more robust, universally adaptive design.

Further reading:

Reproduce in Tailwind CSS

You can reproduce this system in Tailwind CSS in your tailwind.config.js theme section. Using this file, you can define the type scale of your project.