Let text grow without breaking the page

How to do it

Size text in rem or em, and let boxes grow with their content instead of fixing their height. Never set maximum-scale or user-scalable=no in the viewport tag.

Example

<!-- Good -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bad: blocks zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

.card { min-height: 8rem; }   /* not height: 8rem, which cuts off larger text */

How to check

Zoom the browser to 200% and apply a text spacing bookmarklet. No text is cut off or overlaps. The viewport tag contains neither maximum-scale nor user-scalable.