diff --git a/css-fonts-5/Overview.bs b/css-fonts-5/Overview.bs
index fde5666ac934..6cdeea42197f 100644
--- a/css-fonts-5/Overview.bs
+++ b/css-fonts-5/Overview.bs
@@ -168,10 +168,17 @@ Further, when the value of the [=text-scale=] content attribute is
 
 Note:
 Authors are expected to use
-<code>&lt;meta name="text-scale" content="scale"&gt;</code> in stylesheets so that the ''font-size/medium'' font size will reflect a combination of the user's font preferences, whether those are specified at the OS level or the UA level. The author will then be able to use ''rem'' throughout the page to honor the user's font preferences.
+<code>&lt;meta name="text-scale" content="scale"&gt;</code> in stylesheets so that the ''font-size/medium'' font size will reflect the user's font preferences, whether those are specified at the OS level or the UA level.
+The author will then be able to use ''rem'' and ''em'' throughout the page to honor the user's font preferences.
+
+Note:
+This requires care to do correctly, given the very large font sizes some low-vision users need.
+Consider the extreme case of an iPhone Mini set to iOS's largest font size of 53px.
+Only ~12-15 characters fit on a line.
+
 
 <div class="example" id="ex-scaled-page">
-	If authors don't alter the '':root'' font size, content sized with ''rem'' units will be relative to the preferred text scale
+	Assuming a page hasn't altered the '':root'' font size, content sized with ''rem'' units will be relative to the preferred text scale
 	<pre class="lang-html">
 &lt;!DOCTYPE html>
 &lt;html> &lt;!-- leave this element's font-size as the default -->
@@ -195,6 +202,50 @@ Authors are expected to use
 	</pre>
 </div>
 
+<div class="example" id="ex-non-linear">
+	Header text starts larger than body text, so pages should probably grow headers at a slower rate.
+	<pre class="lang-html">
+		&lt;meta name="text-scale" content="scale" />
+		&lt;style>
+		.h1 {
+			--dampen-factor: calc(0.5 + 0.5 / env(preferred-text-scale));
+			font-size: calc(2rem * var(--dampen-factor));
+			/* Resulting font sizes at various text scale factors:
+			      h1      body
+			1x    32px    16px
+			1.5x  40px    24px
+			2x    48px    32px
+			3x    64px    48px */
+		}
+		&lt;/style>
+	</pre>
+</div>
+
+<div class="example" id="ex-inverse">
+	An extreme version of the above, some text content that starts larger than body text can and should become smaller than body text as the user's font size increases.
+	In this floating button example, the button text is larger than the body text at 1x but gets smaller at ~2.5x font scale.
+	<pre class="lang-html">
+		&lt;meta name="text-scale" content="scale" />
+		&lt;style>
+		.floating-action-button {
+			position: fixed;
+			top: 30px;
+			right: 30px;
+			/* Grow slightly slower than h1 example: */
+			--dampen-factor: calc(0.4 + 0.6 / env(preferred-text-scale));
+			font-size: calc(1.5rem * var(--dampen-factor));
+			/* Resulting font sizes at various text scale factors:
+			      button    body
+			1x    24px      16px
+			1.5x  28.8px    24px
+			2x    33.6px    32px
+			3x    43.2px    48px    &lt;-- inversion */
+		}
+		&lt;/style>
+		&lt;button class="floating-action-button">➕Add&lt;/button>
+	</pre>
+</div>
+
 
 <h2 id="basic-font-props">
 Basic Font Properties</h2>