Fluid Typography

useFluidTypography

Create fluid typography (or responsive typography) that scales gradually, smoothly, and seamlessly across devices without the need for complex media queries. This advanced feature is based on the Utopia Fluid Type Scale, which automatically calculates the perfect font sizes for optimal readability on any screen size.

Traditional responsive typography relies on breakpoints and media queries, creating abrupt size changes that can feel jarring. Fluid typography solves this by:

• Seamless scaling: Text size adapts continuously as viewport changes
• Perfect readability: Maintains optimal reading experience across all devices
• Reduced complexity: No need to manage multiple breakpoints and font sizes
• Performance optimized: Uses modern CSS clamp() functions for efficient rendering
• Accessibility friendly: Respects user font size preferences while maintaining proportions

import { styleframe } from 'styleframe';
import { useFluidTypography } from 'styleframe/theme';

const s = styleframe();

const { fontSizeLg } = useFluidTypography(s);

selector('.heading', {
    fontSize: ref(fontSizeLg)
});

:root {
    ... Fluid Typography Variable definitions ...
}

.heading {
    font-size: var(--font-size--lg);
}