[css-fonts-4] Add ui-serif, ui-monospaced, and ui-rounded

Closes #4107

Author: litherum

css-fonts-4/Overview.bs

@@ -343,10 +343,6 @@ Generic font families</h4>
             A cross-platform UA should use different fonts on its different supported platforms.
             The purpose of ''system-ui'' is to allow web content
             to integrate with the look and feel of the native OS.
-            On platforms which have a collection of system user interface fonts
-            (e.g. for different languages),
-            user agents may treat ''system-ui'' as a virtual font
-            which encompasses all the relevant platform user interface fonts.
 
             <div class="example">
                 As with other generic font families,
@@ -402,6 +398,59 @@ Generic font families</h4>
 			Fang Song is often used for official Chinese Government documents.
     </dl>
 
+<h4 id="standard-font-families">
+Standard font families</h4>
+
+    Standard font families are font families which are expected to be
+    interoperable between browsers, but which may not exist on every platform
+    or operating system. They are not required to map to a concrete font
+    face. Just like generic font families, standard font families may be a
+    composite face combining different typefaces based on such things as the
+    Unicode range of the character, the content language of the containing
+    element, user preferences, system settings, etc.
+
+    <dl dfn-for="font-family,<generic-family>" dfn-type=value>
+        <dt id="ui-serif-def"><dfn>ui-serif</dfn>
+        <dd>
+            This font family is used for the serif variant of the system's
+            user interface. The purpose of ''ui-serif'' is to allow web
+            content to integrate with the look and feel of the native OS.
+
+            <div class="example">
+                <figure>
+                    <img alt="sample ui-serif font" src="images/ui-serif.png" >
+                    <figcaption>Sample ui-serif font on macOS Catalina and iOS 13: New York</figcaption>
+                </figure>
+            </div>
+
+        <dt id="ui-monospaced-def"><dfn>ui-monospaced</dfn>
+        <dd>
+            This font family is used for the monospaced variant of the
+            system's user interface. The purpose of ''ui-monospaced'' is to
+            allow web content to integrate with the look and feel of the
+            native OS.
+
+            <div class="example">
+                <figure>
+                    <img alt="sample ui-monospaced font" src="images/ui-monospaced.png" >
+                    <figcaption>Sample ui-monospaced font on macOS Catalina and iOS 13: SF Mono</figcaption>
+                </figure>
+            </div>
+
+        <dt id="ui-rounded-def"><dfn>ui-rounded</dfn>
+        <dd>
+            This font family is used for the rounded variant of the system's
+            user interface. The purpose of ''ui-rounded'' is to allow web
+            content to integrate with the look and feel of the native OS.
+
+            <div class="example">
+                <figure>
+                    <img alt="sample ui-rounded font" src="images/ui-rounded.png" >
+                    <figcaption>Sample ui-rounded font on macOS Catalina and iOS 13: SF Rounded</figcaption>
+                </figure>
+            </div>
+    </dl>
+
 <h3 id="font-weight-prop">Font weight: the 'font-weight!!property' property</h3>
 
     <pre class="propdef">