Typography

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

On this page

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
--text-01In a hole in the ground there lived a hobbit.
--text-02In a hole in the ground there lived a hobbit.
--text-03In a hole in the ground there lived a hobbit.
--text-04In a hole in the ground there lived a hobbit.
--text-05In a hole in the ground there lived a hobbit.
--text-06In a hole in the ground there lived a hobbit.

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.

Understanding browser typography

The foundation of fluid typography lies in understanding how browsers handle font scaling:

  • The rem unit is relative to whatever font size is set on the html element;
  • Percentages in font-size are equivalent to using em/100;
  • When applied to the html element, percentages reference browser font scaling (default 16px);
  • Browser font sizes can be adjusted between 9px and 72px in settings.

Recomended reading: Josh Comeau article.

Scaling vs. Zooming

There are two distinct ways users can adjust content size:

  • Browser font scaling: adjusts through browser settings;
  • Browser zooming: uses keyboard shortcuts (⌘+/-) or menu options;
  • Zooming applies additively on top of font scaling;
  • Each serves different accessibility needs.

The reality of web scaling

Unfortunately, many websites break this natural scaling:

  • Most sites override browser scaling with hard-coded pixel values;
  • Using px units opts out of scaling entirely;
  • CNN.com stands out by properly implementing scaling:
    • Main content scales with rem;
    • Navigation and supplemental text remain stable;
    • Creates a balanced, accessible reading experience.

Impact on accessibility

When browser scaling is ignored through hard-coded values:

  • The accessibility benefits of rem over px are negated;
  • Users lose control over their reading experience;
  • The web becomes less adaptable to individual needs.

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

Luxa’s approach embraces these principles by:

  1. Respecting browser font scaling;
  2. Using relative units appropriately;
  3. Maintaining hierarchy through selective scaling;
  4. Prioritizing readability across all devices.

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.

Getting Help

Need help? Open an issue. I'll be happy to help. 🎈