Use native font stack (#417)

It ensures that the text is displayed in the font that the user is
most comfortable with, and it also reduces the size of the data
transferred.

Breaking change:

The Titillium web font has been replaced with native font stack.

Migration:

To keep the Titillium web font in your project, load the web font
and override the `--rui-font-family-base` custom property:

```
--rui-font-family-base: 'Titillium Web', helvetica, roboto, arial, sans-serif;
```

Author: adamkudrna

README.md

@@ -53,16 +53,7 @@ To install React UI in your app:
    npm install --save @react-ui-org/react-ui
    ```
 
-2. Load the Titillium Web font:
-
-   ```html
-   <link
-     href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap"
-     rel="stylesheet"
-   />
-   ```
-
-3. Load React UI CSS in your app:
+2. Load React UI CSS in your app:
 
    <!-- eslint-env browser -->
    <!-- eslint-disable import/no-unresolved -->
@@ -73,7 +64,7 @@ To install React UI in your app:
 
    <!-- eslint-env browser -->
 
-4. Import and use any of React UI components in your app:
+3. Import and use any of React UI components in your app:
 
    ```jsx
    import { Button } from '@react-ui-org/react-ui';

mkdocs.yml

@@ -29,8 +29,6 @@ theme:
   language: 'en'
   favicon: 'favicon.ico'
   custom_dir: 'src/docs/_overrides'
-  font:
-    text: 'Titillium Web'
   palette:
     - media: "(prefers-color-scheme: light)"
       scheme: default

src/docs/_assets/stylesheets/extra.css

@@ -81,7 +81,7 @@ code, kbd, pre {
 .md-search-result__terms,
 .md-source,
 .md-top {
-  font-size: 1rem;
+  font-size: 0.875rem;
 }
 
 .md-nav,
@@ -92,11 +92,11 @@ code, kbd, pre {
 .md-typeset .footnote,
 .md-typeset .footnote-ref,
 .md-typeset .tabbed-labels > label {
-  font-size: 0.85rem;
+  font-size: 0.875rem;
 }
 
 .md-typeset {
-  font-size: 1.125rem;
+  font-size: 1rem;
 }
 
 .md-typeset a {
@@ -117,36 +117,37 @@ code, kbd, pre {
 .md-typeset h1 {
   margin-top: 0.8rem;
   margin-bottom: 2rem;
-  font-size: 3rem;
+  font-weight: 800;
+  font-size: 2.4rem;
   color: inherit;
 }
 
 .md-content .md-typeset h1 + p {
-  font-size: 1.5rem;
+  font-size: 1.3rem;
 }
 
 .md-typeset h2 {
   margin-top: 3.2rem;
   margin-bottom: 0.8rem;
-  font-size: 2rem;
+  font-size: 1.65rem;
 }
 
 .md-typeset h3 {
   margin-top: 2.4rem;
   margin-bottom: 0.8rem;
-  font-size: 1.75rem;
+  font-size: 1.45rem;
 }
 
 .md-typeset h4 {
   margin-top: 1.6rem;
   margin-bottom: 0.4rem;
-  font-size: 1.5rem;
+  font-size: 1.25rem;
 }
 .md-typeset h5,
 .md-typeset h6 {
   margin-top: 1.6rem;
   margin-bottom: 0.4rem;
-  font-size: 1.25rem;
+  font-size: 1.125rem;
 }
 
 .md-typeset blockquote {
@@ -172,15 +173,14 @@ code, kbd, pre {
 }
 
 .md-typeset :is(ol, ul) li {
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.55rem;
 }
 
 .md-typeset ol li blockquote,
 .md-typeset ol li p,
 .md-typeset ul li blockquote,
 .md-typeset ul li p {
-  margin-top: 0;
-  margin-bottom: 0.8rem;
+  margin-block: 0;
 }
 
 .md-typeset hr {
@@ -199,12 +199,12 @@ table {
 }
 
 .md-typeset table:not([class]) {
-  font-size: 1rem;
+  font-size: 0.875rem;
   border: none;
 }
 
 .md-typeset table:not([class]) :is(th, td) {
-  padding: 0.75rem 0.5rem;
+  padding: 1rem 0.5rem;
   vertical-align: middle;
   border-style: none none solid;
   border-width: 1px;
@@ -386,8 +386,13 @@ pre[class*="language-"] {
 }
 
 pre[class*="language-"],
-.docoff-Root,
+.docoff-Root {
+  margin-top: 0;
+  margin-bottom: 2.4rem;
+}
+
 .md-typeset :is(p, ul, ol, dl) {
+  max-width: 40rem;
   margin-top: 0;
   margin-bottom: 1.6rem;
 }
@@ -398,6 +403,15 @@ docoff-react-props {
   overflow-x: auto;
 }
 
+docoff-react-props > table tr {
+  transition: background-color 125ms;
+}
+
+docoff-react-props > table tr:hover {
+  background-color: var(--md-typeset-table-color--light);
+  box-shadow: 0 .05rem 0 var(--md-default-bg-color) inset;
+}
+
 @media screen and (max-width: 44.9375em) {
   docoff-react-props,
   .docoff-Root,

src/docs/foundation/typography.md

@@ -59,10 +59,22 @@ Styling of basic HTML elements:
 
 ## Font
 
-React UI is designed with [Titillium Web] font, a geometric sans with a wide
-variety of weights and styles. You can change it to a custom font by
-[overriding](/docs/customize/theming/overview) the `--rui-font-family-base` CSS
-custom property:
+React UI uses [native font stack][sm-native-font-stack], which means it uses
+the default font of the browser. This is a good practice because it ensures that
+the text is displayed in the font that the user is most comfortable with, and
+it also reduces the size of the data transferred.
+
+You can change it to a custom font by loading the font in your project:
+
+```html
+   <link
+     href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;700&display=swap"
+     rel="stylesheet"
+   />
+```
+
+… and [overriding](/docs/customize/theming/overview) the
+`--rui-font-family-base` CSS custom property:
 
 ```css
 :root {
@@ -101,4 +113,4 @@ Font size, font weight, and line height values can be
 }
 ```
 
-[Titillium Web]: https://fonts.google.com/specimen/Titillium+Web
+[sm-native-font-stack]: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/

src/docs/getting-started/usage.md

@@ -11,21 +11,6 @@ add the responsive viewport meta tag to your `<head>` element:
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 ```
 
-## Fonts
-
-React UI is designed with the Titillium Web font. Add it to your project e.g. via
-Google Fonts in your `<head>` element:
-
-```html
-<link
-  href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;700&display=swap"
-  rel="stylesheet"
-/>
-```
-
-Remember to include all necessary font weights (and only them — for better
-performance).
-
 ## CSS
 
 React UI styles are written in Sass and compiled to CSS. You can import them
@@ -80,10 +65,6 @@ Example HTML:
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>React UI Example</title>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
   </head>
   <body>
     <div id="app"></div>

src/theme.scss

@@ -49,7 +49,31 @@
         // Font Families
         // =============
 
-        --rui-font-family-base: "Titillium Web", helvetica, roboto, arial, sans-serif;
+        // Native font stack inspired by Bootstrap.
+        // @see https://getbootstrap.com/docs/5.0/content/reboot/#native-font-stack
+        // @see https://css-tricks.com/snippets/css/system-font-stack/
+        --rui-font-family-base:
+            /* Cross-platform generic font family (default user interface font) */
+            system-ui,
+            /* Safari for macOS and iOS (San Francisco)*/
+            -apple-system,
+            /* Windows*/
+            "Segoe UI",
+            /* Android*/
+            roboto,
+            /* Basic web fallback*/
+            "Helvetica Neue",
+            arial,
+            /* Linux*/
+            "Noto Sans",
+            "Liberation Sans",
+            /* Sans serif fallback*/
+            sans-serif,
+            /* Emoji fonts*/
+            "Apple Color Emoji",
+            "Segoe UI Emoji",
+            "Segoe UI Symbol",
+            "Noto Color Emoji";
         --rui-font-family-monospace:
             "SFMono-Regular",
             "Menlo",