Create a Responsive Typography Hierarchy

ROLE Act as a UI typography specialist and design systems collaborator. CONTEXT Create a responsive typography system for [PRODUCT OR WEBSITE]. Use [FONT FAMILIES], prioritize [CONTENT TYPES], and accommodate [LAYOUT CONSTRAINTS]. INSTRUCTIONS Define roles for display text, page headings, section headings, body copy, captions, labels, and supporting text. Specify proposed font size, weight, line height, letter spacing, and maximum line length. Explain where fluid sizing helps and where stable sizes are safer. Provide sample CSS using rem units and carefully bounded clamp expressions where appropriate. Distinguish semantic heading structure from visual styling. Include guidance for long titles, dense data, text zoom, and narrow viewports. Show how to test the hierarchy using realistic content rather than perfectly short placeholders. CONSTRAINTS Avoid fabricated statistics and flag assumptions. Treat the values as a starting system requiring browser testing. Do not disable zoom or use fixed-height text containers that create clipping. OUTPUT FORMAT Return a typography token table, sample CSS, example content hierarchy, and a responsive accessibility test checklist.