[css-fonts-4] improve font-size-adjust example #2859

Author: svgeesus

css-fonts-4/Overview.bs

@@ -999,7 +999,7 @@ Relative sizing: the 'font-size-adjust' property</h3>
 
 	For any given font size, the apparent size and effective legibility of text
 	varies across fonts.
-	For scripts such as Latin or Cyrillic that
+	For bicameral scripts such as Latin or Cyrillic that
 	distinguish between upper and lowercase letters,
 	the relative height of lowercase letters
 	compared to their uppercase counterparts
@@ -1009,7 +1009,8 @@ Relative sizing: the 'font-size-adjust' property</h3>
 	divided by the font size.
 
 	In situations where font fallback occurs,
-	fallback fonts might not share the same aspect value as the desired font family
+	fallback fonts might not share the same aspect value
+	as the desired font family
 	and will thus be less readable.
 	The 'font-size-adjust' property is a way
 	to preserve the readability of text when font fallback occurs.
@@ -1020,31 +1021,40 @@ Relative sizing: the 'font-size-adjust' property</h3>
 	<div class="example">
 		The style defined below defines Verdana as the desired font family,
 		but if Verdana is not available Futura or Times will be used.
+		One paragraph also has font-size-adjust specified.
 
 		<pre>
 			p {
 				font-family: Verdana, Futura, Times;
 			}
+			p.adj {
+				font-size-adjust: 0.545;
+			}
 
 			&lt;p>Lorem ipsum dolor sit amet, ...&lt;/p>
+			&lt;p class="adj">Lorem ipsum dolor sit amet, ...&lt;/p>
 		</pre>
 
-		Verdana has a relatively high aspect value,
-		lowercase letters are relatively tall compared to uppercase letters,
+		Verdana has a relatively high aspect value of 0.545,
+		meaning lowercase letters are relatively tall
+		compared to uppercase letters,
 		so at small sizes text appears legible.
-		Times has a lower aspect value and so if fallback occurs,
-		the text will be less legible at small sizes than Verdana.
+		Times has a lower aspect value of 0.447,
+		and so if fallback occurs,
+		the text will be less legible at small sizes than Verdana
+		unless font-size-adjust is also specified.
 	</div>
 
 	How text rendered in each of these fonts compares is shown below,
 	the columns show text rendered in Verdana, Futura and Times.
 	The same font-size value is used across cells
 	within each row and red lines are included to show the differences in x-height.
-	In the upper half each row is rendered in the same font-size value.
-	The same is true for the lower half
+	In the upper half, each row is rendered in the same font-size value.
+	The same is true for the lower half,
 	but in this half the 'font-size-adjust' property is also set
+	to 0.545,
 	so that the actual font size is adjusted
-	to preserve the x-height across each row.
+	to preserve the x-height of Verdana across each row.
 	Note how small text remains relatively legible across each row in the lower half.
 
 	<figure>