Give type a range—and reading some room

Responsive typography can begin with three questions: what is the smallest useful size, what is the largest needed size, and how should the transition work? CSS clamp() combines a minimum, preferred value, and maximum. It allows a size to change without growing or shrinking indefinitely. The formula cannot decide whether the result reads comfortably. MDN clamp()

Start with an actual paragraph

Do not begin with the largest heading. Use text that could appear on the site, including Chinese, English, numbers, and a link. A body size around eighteen pixels can be an experimental starting point, not a universal standard. Once the body works, compare the hierarchy of subheadings, larger headings, and supporting text.

A type scale provides a regular progression, but you need not apply every step mechanically. Changing a ratio from 1.2 to 1.25 produces a visibly different result after several steps. Compare the article list, article page, and phone view. Adjust an individual level when necessary instead of sacrificing the content for a pleasing numerical pattern.

Compare spacing and measure together

The same font size can feel very different in different column widths. Long lines make the return to the next line harder; short ones can continually disrupt long English words and headings. Chinese and English also differ in density. A preview containing only a few large characters cannot stand in for a complete article.

Begin with a unitless line height such as line-height: 1.7, then adjust it for the typeface. Unitless values use the element's own font size and can avoid problems caused by inheriting a fixed line height. MDN line-height Change one variable at a time: hold the column width while comparing spacing, then hold spacing while comparing width. Record what you actually observe.

Test enlarged text as well

Relative units leave room for user settings, but enlargement still needs a practical test. Increase text to two hundred percent and inspect navigation, headings, and form labels for clipping. WCAG's resizing criterion concerns whether content and functionality remain available, not merely whether rem appears in the stylesheet. W3C Resize Text

In the typography workshop, use one sample to create two sets: one for long reading and one for narrow notes. Keep a narrow-screen preview and export the CSS for each. Add a purpose statement, such as “a Chinese long-form starting point; recheck long English headings.”

Export is the beginning of handoff. In the actual page, check whether the intended font loaded, how headings wrap, and whether controls changed unexpectedly. Keep those observations beside the parameters. The numbers then become design decisions you can explain and improve.