[css-text-3] Add illustration to ligature/letter-spacing example. Clarify that kerning is still applied.

Author: fantasai

css-text-3/Overview.bs

@@ -1954,13 +1954,20 @@ Word Spacing: the 'word-spacing' property</h3>
     <p>When the effective spacing between two characters is not zero
       (due to either <a href="#text-justify-property">justification</a>
       or a non-zero value of 'letter-spacing'),
-      user agents should not apply optional ligatures.</p>
+      user agents should not apply optional ligatures.
+      However, kerning should still be applied
+      (see 'font-kerning' [[CSS3-FONTS]]).
 
-    <p class="example">
+    <div class="example">
       For example, if the word “filial” is letter-spaced,
       an “fi” ligature should not be used
       as it will prevent even spacing of the text.
 
+      <figure>
+        <p><strong style="letter-spacing: 0.5em">filial</strong> vs <strong style="letter-spacing: 0.5em">filial</strong>
+      </figure>
+    </div>
+
 <h4 id="cursive-tracking">
 Cursive Scripts</h4>