Typography
Enhance readability across devices with Luxa CSS's fluid typography scale.
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.
The
clamp()function in CSS takes three parameters: a minimum value, a preferred value (usually calculated based on the viewport width), and a maximum value. It ensures that the element’s size scales fluidly between the minimum and maximum values based on the viewport size.
| Name | Min size (px) | Calc (vw + px) | Max size (px) | Fallback size (px) | Fallback size 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 |
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
By default, Tailwind will look for an optional tailwind.config.js file at the root of your project, where you can define any customizations, such as a fluid-type scale.
Add the following settings within the theme.extend section to replicate the Luxa-type scale:
// 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)"
}
}
}
};