Fluid Type Scales

Fixed type sizes break at different viewport widths. A 38px display headline that looks commanding on a 1920px desktop monitor overwhelms a 375px mobile screen. Fluid type scales solve this by calculating font size as a function of viewport width — a continuous scale instead of a set of breakpoint jumps.

The fluid formula: font-size = clamp(min, preferred, max). Min: the smallest the type should ever be (readability floor). Preferred: a viewport-relative calculation (e.g., 2vw + 16px). Max: the largest the type should ever be (hierarchy ceiling). For our display level: clamp(24px, 2vw + 16px, 38px). At 375px viewport: 2*3.75 + 16 = 23.5px, clamped to 24px. At 1920px viewport: 2*19.2 + 16 = 54.4px, clamped to 38px. At 1200px viewport: 2*12 + 16 = 40px, clamped to 38px.

For AI-generated assets that target multiple sizes (a hero image that appears on both desktop and mobile), generate at the maximum dimensions and specify the type scale at the max size. The responsive adaptation happens in the layout layer (CSS or the rendering engine), not in the image itself. A generated image with text baked in at 38px is correct for desktop and oversized for mobile — which is why the hybrid approach (generate canvas, composite text in code) is superior for responsive contexts.