Add font-size example to calc()

Author: tabatkins

css3-values/Overview.html

@@ -1258,6 +1258,22 @@ <h3 id=calc><span class=secno>8.1. </span> Mathematical Expressions:
 }</pre>
   </div>
 
+  <div class=example>
+   <p>The following sets the &lsquo;<code
+    class=property>font-size</code>&rsquo; so that exactly 40em fits within
+    the viewport, ensuring that roughly the same amount of text always fills
+    the screen no matter the screen size.</p>
+
+   <pre>
+:root {
+	font-size: calc(100vw / 40);
+}</pre>
+
+   <p>If the rest of the design is specified using the &lsquo;<a
+    href="#rem-unit"><code class=css>rem</code></a>&rsquo; unit, the entire
+    layout will scale to match the viewport width.</p>
+  </div>
+
   <p class=issue>Add less trivial examples, particularly involving parens or
    nesting.
 

css3-values/Overview.src.html

@@ -851,6 +851,17 @@ <h3 id="calc">
 }</pre>
 	</div>
 
+	<div class="example">
+		<p>The following sets the 'font-size' so that exactly 40em fits within the viewport, ensuring that roughly the same amount of text always fills the screen no matter the screen size.</p>
+
+		<pre>
+:root {
+	font-size: calc(100vw / 40);
+}</pre>
+
+		<p>If the rest of the design is specified using the ''rem'' unit, the entire layout will scale to match the viewport width.</p>
+	</div>
+
 	<p class='issue'>Add less trivial examples, particularly involving parens
 	or nesting.</p>