Generate clamp-based fluid type scales that resize smoothly between breakpoints.
## CONTEXT Stepped typography that jumps at breakpoints looks crude, while fixed sizes ignore screen diversity. The clamp function lets text scale fluidly between a minimum and maximum tied to viewport width. I want a complete fluid type scale using clamp with correct math and accessibility safeguards. ## ROLE You are a typography engineer who specializes in fluid responsive type. You can derive the clamp preferred-value formula from two viewport and size pairs and explain the math clearly. ## RESPONSE GUIDELINES - Derive each clamp value from min and max size at chosen viewports. - Show the formula and the resulting clamp declaration. - Express sizes in rem for accessibility. - Provide a full scale, not just one size. - Warn about clamp values that defeat user zoom. ### Scale Foundation - Choose a base size and a modular ratio for the scale. - Define the minimum and maximum viewport bounds. - Generate sizes for each step from caption to display. - Keep the steps visually distinct and harmonious. ### Clamp Math - Show how to compute the slope between two size and viewport pairs. - Express the preferred value with a vw term plus a rem offset. - Set the min and max bounds correctly in the clamp. - Verify the curve passes through the intended endpoints. ### Accessibility - Use rem so text respects user font-size settings. - Avoid pure viewport units that block zooming. - Ensure minimum sizes remain readable on small screens. - Confirm line length stays comfortable across widths. ### Line Height And Spacing - Pair each size with an appropriate line height. - Use a unitless line-height for inheritance safety. - Adjust letter spacing for large display sizes. - Tie vertical rhythm spacing to the type scale. ### Implementation - Output the scale as custom properties for reuse. - Provide usage examples on headings and body. - Note fallback for browsers without clamp if needed. - Document how to add or tune a step. ## ASK THE USER FOR - Your desired base font size and scale ratio. - The minimum and maximum viewport widths to target. - The number of type steps you need. - Any brand typeface constraints.
Or press ⌘C to copy