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.
| Variable | Min (px) | Calculation | Max (px) | Fallback (px) | Fallback at 80rem (px) |
|---|---|---|---|---|---|
--text-01 | 12 | 0.21vw + 11.36 | 14.08 | 12 | 14.08 |
--text-02 | 14.4 | 0.32vw + 13.44 | 17.44 | 14.4 | 17.44 |
--text-03 | 17.28 | 0.48vw + 15.68 | 21.92 | 17.28 | 21.92 |
--text-04 | 20.8 | 0.69vw + 18.56 | 27.36 | 20.8 | 27.36 |
--text-05 | 24.96 | 0.97vw + 21.76 | 34.24 | 24.96 | 34.24 |
--text-06 | 29.92 | 1.34vw + 25.6 | 42.72 | 29.92 | 42.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.