[css-fonts-4] Font matching algorithm benefits from graphs

#1077

Author: litherum

css-fonts-4/Overview.bs

@@ -1394,12 +1394,33 @@ at least as dark as its predecessor. Only values between 1 - 999 are valid, and
 
 		<div class="example">
 
-		Similar to the <a href="#ascendingstretch">previous example</a>, here is the conceptual distance graph for an element styled with "font-weight: 500":
+		Similar to the <a href="#ascendingstretch">previous example</a>, here is the conceptual distance graph for an element styled with "font-weight: 400":
 
 		<img src="styleweight.svg">
 
 		As you can see, because font B contains the minimum oblique value across the entire family, font B would be selected by this algorithm. However, if font B were somehow eliminated from the family, font D would then contain the lowest distance in the family, so it would be selected. If D were eliminated, A would be selected, followed by fonts C and then E.
 		</div>
+
+		<div class="example">
+
+		Similar to the <a href="#ascendingstretch">previous example</a>, here is the conceptual distance graph for an element styled with "font-weight: 500":
+
+		<img src="weightmatching.svg">
+
+		As you can see, because font D contains the minimum oblique value across the entire family, font D would be selected by this algorithm. However, if font D were somehow eliminated from the family, font B would then contain the lowest distance in the family, so it would be selected. If B were eliminated, C would be selected, followed by fonts A and then E.
+		</div>
+		Once the closest matching weight has been determined by this process,
+		faces with weights which do not include this determined width are removed from the matching set.
+		</li>
+
+		<div class="example">
+
+		Similar to the <a href="#ascendingstretch">previous example</a>, here is the conceptual distance graph for an element styled with "font-weight: 300":
+
+		<img src="weightmatching2.svg">
+
+		As you can see, because font B contains the minimum oblique value across the entire family, font B would be selected by this algorithm. However, if font B were somehow eliminated from the family, font A would then contain the lowest distance in the family, so it would be selected. If A were eliminated, C would be selected.
+		</div>
 		Once the closest matching weight has been determined by this process,
 		faces with weights which do not include this determined width are removed from the matching set.
 		</li>