Typography

Enhance readability across devices with Luxa CSS's fluid typography scale.

Luxa CSS uses a fluid typography scale to enhance readability across devices.

Fluid type scale

Luxa dynamically adjusts font sizes using the CSS clamp() function, ensuring optimal readability on any device.

VariableMin (px)CalculationMax (px)Fallback (px)Fallback at 80rem (px)
--text-01120.21vw + 11.3614.081214.08
--text-0214.40.32vw + 13.4417.4414.417.44
--text-0317.280.48vw + 15.6821.9217.2821.92
--text-0420.80.69vw + 18.5627.3620.827.36
--text-0524.960.97vw + 21.7634.2424.9634.24
--text-0629.921.34vw + 25.642.7229.9242.72

The clamp() function takes three parameters: minimum value, preferred value (usually calculated based on viewport width), and maximum value.

Design philosophy

Luxa’s fluid-type scale represents a shift from pixel-perfect design to a more flexible approach:

  • Entrusts the browser with layout adjustments;
  • Ensures a tailored experience on every device;
  • Provides a robust, universally adaptive design.

For more on this approach, see The Myth of Pixel Perfection.

Reproduce in Tailwind CSS

To replicate Luxa’s type scale in Tailwind CSS, add the following to your tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      fontSize: {
        "text-01": "clamp(0.75rem, 0.21vw + 0.71rem, 0.88rem)",
        "text-02": "clamp(0.9rem, 0.32vw + 0.84rem, 1.09rem)",
        "text-03": "clamp(1.08rem, 0.48vw + 0.98rem, 1.37rem)",
        "text-04": "clamp(1.3rem, 0.69vw + 1.16rem, 1.71rem)",
        "text-05": "clamp(1.56rem, 0.97vw + 1.36rem, 2.14rem)",
        "text-06": "clamp(1.87rem, 1.34vw + 1.6rem, 2.67rem)"
      }
    }
  }
};

This configuration allows you to use Luxa-like fluid typography in your Tailwind CSS projects.