Commit
Author: Jothsa [58094796+Jothsa@users.noreply.github.com]
Committer: GitHub [noreply@github.com] Tue, 02 Jul 2024 16:47:01 +0000
Hash: e2732134337270e01f6aa02be0dc3a76d11030e7
Timestamp: Tue, 02 Jul 2024 16:47:01 +0000 (5 months ago)

+203 -32 +/-6 browse
Add Modern Font Stacks (#498) 
Add Modern Font Stacks (#498)

* add fonts

* remove --font-emoji

* remove fallback fonts, fixed #500

* remove quotes

* fix quotes

* remove fonts

* fix formatting

* fix removed fonts

* add fonts, better description, and use details element

* adjust .font-family-grid styles

* grammar, link to danklammer's gh

* fix test

* Update src/extra/normalize.src.css

* add old fonts

* Update src/props.fonts.css

Co-authored-by: Adam Argyle <argyle@google.com>

* update --monospace-code everywhere

* update --font-serif

* add notice for monospace-code font stack

* formatting

---------

Co-authored-by: Adam Argyle <argyle@google.com>
1diff --git a/docsite/index.css b/docsite/index.css
2index 29270a8..e41747b 100644
3--- a/docsite/index.css
4+++ b/docsite/index.css
5 @@ -1053,22 +1053,32 @@ pre[class*="language-"] {
6 }
7
8 .font-family-grid {
9+ --grid-cols: repeat(9, minmax(3rem, 1fr));
10+
11 display: grid;
12+ grid-template-columns: var(--grid-cols);
13 gap: var(--size-2);
14- justify-items: flex-start;
15
16- & > div {
17+ & > details {
18+ grid-column: 1 / -1;
19+ }
20+
21+ & > details > div {
22 display: grid;
23- grid-template-columns: repeat(9, minmax(3rem, 1fr));
24 place-items: center;
25- font-size: var(--font-size-5);
26+ grid-template-columns: var(--grid-cols);
27+ grid-column: 1 / -1;
28 color: var(--text-1);
29+ font-size: var(--font-size-5);
30
31 @media (--md-n-below) {
32- grid-template-columns: repeat(6, minmax(2rem, 1fr));
33 font-size: var(--font-size-3);
34 }
35 }
36+
37+ @media (--md-n-below) {
38+ --grid-cols: repeat(6, minmax(2rem, 1fr));
39+ }
40 }
41
42 #colors details h3 {
43 diff --git a/docsite/index.html b/docsite/index.html
44index c615004..50e21c4 100644
45--- a/docsite/index.html
46+++ b/docsite/index.html
47 @@ -2092,7 +2092,7 @@
48 <section id="typography">
49 <header>
50 <h2>Typography</h2>
51- <p>Variable and static font sizes, smart line heights, and other familiar typography variables, all ready to go.</p>
52+ <p>Variable and static font sizes, smart line heights, <a href="https://modernfontstacks.com">modern font stacks</a>, and other familiar typography variables, all ready to go.</p>
53 </header>
54 <div class="block-wrap">
55 <div>
56 @@ -2124,29 +2124,147 @@
57
58 <article class="font-sizes">
59 <h4>Font Families</h4>
60+ <p>These rad font-families from <a href="https://github.com/danklammer">Dan Klammer's</a> <a href="https://modernfontstacks.com">modern font stacks</a> provide great typefaces that are entirely local. With these font stacks you won't have to worry about slowing down your page load or layout shift from external fonts!</p>
61 <pre class="language-css"><code>
62- --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
63- --font-serif: ui-serif, serif;
64- --font-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace;
65+ --font-system-ui: system-ui, sans-serif;
66+ --font-transitional: Charter, Bitstream Charter, Sitka Text, Cambria, serif;
67+ --font-old-style: Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif;
68+ --font-humanist: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
69+ --font-geometric-humanist: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif;
70+ --font-classical-humanist: Optima, Candara, Noto Sans, source-sans-pro, sans-serif;
71+ --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;
72+ --font-monospace-slab-serif: Nimbus Mono PS, Courier New, monospace;
73+ --font-monospace-code: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono,Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code,Menlo, Consolas, DejaVu Sans Mono, monospace;
74+ --font-industrial: Bahnschrift, DIN Alternate, Franklin Gothic Medium, Nimbus Sans Narrow, sans-serif-condensed, sans-serif;
75+ --font-rounded-sans: ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif;
76+ --font-slab-serif: Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif;
77+ --font-antique: Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif;
78+ --font-didone: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;
79+ --font-handwritten: Segoe Print, Bradley Hand, Chilanka, TSCu_Comic, casual, cursive;
80 </code></pre>
81+ <blockquote>
82+ Unlike the other props, which are identical to their modern font stack counterparts, <code>--font-monospace-code</code> is modified in open-props.
83+ </blockquote>
84 <div class="block-wrap">
85 <div class="font-family-grid">
86- <code class="language-css">--font-sans</code>
87- <div>
88- <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
89- </div>
90+ <details>
91+ <summary><code class="language-css">--font-system-ui</code></summary>
92+ <div style="font-family: var(--font-system-ui)">
93+ <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
94+ </div>
95+ </details>
96 </div>
97 <div class="font-family-grid">
98- <code class="language-css">--font-serif</code>
99- <div style="font-family: var(--font-serif)">
100- <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
101- </div>
102+ <details>
103+ <summary><code class="language-css">--font-transitional</code></summary>
104+ <div style="font-family: var(--font-transitional)">
105+ <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
106+ </div>
107+ </details>
108+ </div>
109+ <div class="font-family-grid">
110+ <details>
111+ <summary><code class="language-css">--font-old-style</code></summary>
112+ <div style="font-family: var(--font-old-style)">
113+ <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
114+ </div>
115+ </details>
116 </div>
117 <div class="font-family-grid">
118- <code class="language-css">--font-mono</code>
119- <div style="font-family: var(--font-mono)">
120- <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
121- </div>
122+ <details>
123+ <summary><code class="language-css">--font-humanist</code></summary>
124+ <div style="font-family: var(--font-humanist)">
125+ <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
126+ </div>
127+ </details>
128+ </div>
129+ <div class="font-family-grid">
130+ <details>
131+ <summary><code class="language-css">--font-geometric-humanist</code></summary>
132+ <div style="font-family: var(--font-geometric-humanist)">
133+ <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
134+ </div>
135+ </details>
136+ </div>
137+ <div class="font-family-grid">
138+ <details>
139+ <summary><code class="language-css">--font-classical-humanist</code></summary>
140+ <div style="font-family: var(--font-classical-humanist)">
141+ <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
142+ </div>
143+ </details>
144+ </div>
145+ <div class="font-family-grid">
146+ <details>
147+ <summary><code class="language-css">--font-neo-grotesque</code></summary>
148+ <div style="font-family: var(--font-neo-grotesque)">
149+ <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
150+ </div>
151+ </details>
152+ </div>
153+ <div class="font-family-grid">
154+ <details>
155+ <summary><code class="language-css">--font-monospace-slab-serif</code></summary>
156+ <div style="font-family: var(--font-monospace-slab-serif)">
157+ <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
158+ </div>
159+ </details>
160+ </div>
161+ <div class="font-family-grid">
162+ <details>
163+ <summary><code class="language-css">--font-monospace-code</code></summary>
164+ <div style="font-family: var(--font-monospace)">
165+ <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
166+ </div>
167+ </details>
168+ </div>
169+ <div class="font-family-grid">
170+ <details>
171+ <summary><code class="language-css">--font-industrial</code></summary>
172+ <div style="font-family: var(--font-industrial)">
173+ <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
174+ </div>
175+ </details>
176+ </div>
177+ <div class="font-family-grid">
178+ <details>
179+ <summary><code class="language-css">--font-rounded-sans</code></summary>
180+ <div style="font-family: var(--font-rounded-sans)">
181+ <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
182+ </div>
183+ </details>
184+ </div>
185+ <div class="font-family-grid">
186+ <details>
187+ <summary><code class="language-css">--font-slab-serif</code></summary>
188+ <div style="font-family: var(--font-slab-serif)">
189+ <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
190+ </div>
191+ </details>
192+ </div>
193+ <div class="font-family-grid">
194+ <details>
195+ <summary><code class="language-css">--font-antique</code></summary>
196+ <div style="font-family: var(--font-antique)">
197+ <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
198+ </div>
199+ </details>
200+ </div>
201+ <div class="font-family-grid">
202+ <details>
203+ <summary><code class="language-css">--font-didone</code></summary>
204+ <div style="font-family: var(--font-didone)">
205+ <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
206+ </div>
207+ </details>
208+ </div>
209+ <div class="font-family-grid">
210+ <details>
211+ <summary><code class="language-css">--font-handwritten</code></summary>
212+ <div style="font-family: var(--font-handwritten)">
213+ <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
214+ </div>
215+ </details>
216 </div>
217 </div>
218 </article>
219 @@ -2460,7 +2578,7 @@
220 <div class="ease-demo paused">
221 <div style="animation-timing-function: var(--ease-elastic-out-1)">ease-elastic-out-1</div>
222 <div style="animation-timing-function: var(--ease-elastic-out-2)">ease-elastic-out-2</div>
223- <div style="animation-timing-function: var(--ease-elastic-out-3)">ease-elastic-out-3</div>
224+ <div style="animation-timing-function: var(--etic-elastic-out-3)">ease-elastic-out-3</div>
225 <div style="animation-timing-function: var(--ease-elastic-out-4)">ease-elastic-out-4</div>
226 <div style="animation-timing-function: var(--ease-elastic-out-5)">ease-elastic-out-5</div>
227 </div>
228 diff --git a/src/extra/normalize.src.css b/src/extra/normalize.src.css
229index 3910587..b1730f1 100644
230--- a/src/extra/normalize.src.css
231+++ b/src/extra/normalize.src.css
232 @@ -15,7 +15,7 @@
233
234 :where(html) {
235 block-size: 100%;
236- font-family: var(--font-sans);
237+ font-family: var(--font-system-ui);
238 line-height: var(--font-lineheight-3);
239 -webkit-text-size-adjust: none; /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
240
241 @@ -148,7 +148,7 @@
242 inline-size: var(--size-10);
243 }
244
245- :where(code, kbd, samp, pre) { font-family: var(--font-mono) }
246+ :where(code, kbd, samp, pre) { font-family: var(--font-monospace-code), monospace; }
247 :where(:not(pre) > code, kbd) { white-space: nowrap }
248
249 :where(pre) {
250 diff --git a/src/props.fonts.css b/src/props.fonts.css
251index 799e3c6..2ccb74d 100644
252--- a/src/props.fonts.css
253+++ b/src/props.fonts.css
254 @@ -1,7 +1,22 @@
255 :where(html) {
256- --font-sans: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
257- --font-serif: ui-serif,serif;
258- --font-mono: Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;
259+ --font-system-ui: system-ui, sans-serif;
260+ --font-transitional: Charter, Bitstream Charter, Sitka Text, Cambria, serif;
261+ --font-old-style: Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif;
262+ --font-humanist: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
263+ --font-geometric-humanist: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif;
264+ --font-classical-humanist: Optima, Candara, Noto Sans, source-sans-pro, sans-serif;
265+ --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;
266+ --font-monospace-slab-serif: Nimbus Mono PS, Courier New, monospace;
267+ --font-monospace-code: Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,Cascadia Code,Menlo,Consolas,DejaVu Sans Mono,monospace;
268+ --font-industrial: Bahnschrift, DIN Alternate, Franklin Gothic Medium, Nimbus Sans Narrow, sans-serif-condensed, sans-serif;
269+ --font-rounded-sans: ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif;
270+ --font-slab-serif: Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif;
271+ --font-antique: Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif;
272+ --font-didone: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;
273+ --font-handwritten: Segoe Print, Bradley Hand, Chilanka, TSCu_Comic, casual, cursive;
274+ --font-sans: var(--font-system-ui);
275+ --font-serif: ui-serif, serif;
276+ --font-mono: var(--font-monospace-code);
277 --font-weight-1: 100;
278 --font-weight-2: 200;
279 --font-weight-3: 300;
280 diff --git a/src/props.fonts.js b/src/props.fonts.js
281index bd54954..3112d34 100644
282--- a/src/props.fonts.js
283+++ b/src/props.fonts.js
284 @@ -1,7 +1,35 @@
285 export default {
286- '--font-sans': 'system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif',
287- '--font-serif': 'ui-serif,serif',
288- '--font-mono': 'Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace',
289+ '--font-system-ui': 'system-ui, sans-serif',
290+ '--font-transitional':
291+ 'Charter, Bitstream Charter, Sitka Text, Cambria, serif',
292+ '--font-old-style':
293+ 'Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif',
294+ '--font-humanist':
295+ 'Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif',
296+ '--font-geometric-humanist':
297+ 'Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif',
298+ '--font-classical-humanist':
299+ 'Optima, Candara, Noto Sans, source-sans-pro, sans-serif',
300+ '--font-neo-grotesque':
301+ 'Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif',
302+ '--font-monospace-slab-serif': 'Nimbus Mono PS, Courier New, monospace',
303+ '--font-monospace-code':
304+ 'Dank Mono,Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace',
305+ '--font-industrial':
306+ 'Bahnschrift, DIN Alternate, Franklin Gothic Medium, Nimbus Sans Narrow, sans-serif-condensed, sans-serif',
307+ '--font-rounded-sans':
308+ 'ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif',
309+ '--font-slab-serif':
310+ 'Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif',
311+ '--font-antique':
312+ 'Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif',
313+ '--font-didone':
314+ 'Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif',
315+ '--font-handwritten':
316+ 'Segoe Print, Bradley Hand, Chilanka, TSCu_Comic, casual, cursive',
317+ '--font-sans': 'var(--font-system-ui)',
318+ '--font-serif': 'ui-serif, serif',
319+ '--font-mono': 'var(--font-monospace-code)',
320
321 '--font-weight-1': '100',
322 '--font-weight-2': '200',
323 @@ -54,4 +82,4 @@ export default {
324 '--font-size-fluid-1': 'clamp(1rem, 4vw, 1.5rem)',
325 '--font-size-fluid-2': 'clamp(1.5rem, 6vw, 2.5rem)',
326 '--font-size-fluid-3': 'clamp(2rem, 9vw, 3.5rem)',
327- }
328+ };
329 diff --git a/test/basic.test.cjs b/test/basic.test.cjs
330index c0ba966..d6753bb 100644
331--- a/test/basic.test.cjs
332+++ b/test/basic.test.cjs
333 @@ -4,7 +4,7 @@ const OpenProps = require('../dist/open-props.cjs')
334 const OPtokens = require('../open-props.tokens.json')
335
336 test('Should have an all included import', t => {
337- t.is(Object.keys(OpenProps).length, 1704)
338+ t.is(Object.keys(OpenProps).length, 1734)
339 })
340
341 test('Import should have animations', async t => {