PageSourceSearch

https://manueljlin.com/post/fontra-101/en

html manueljlin.com collected 2026-10-05 23:07:44 UTC 209,750 bytes, 3,511 lines download raw bytes

1<!DOCTYPE html><html lang="en"><head><link rel="preconnect" href="https://cdn.jsdelivr.net/fontsource/fonts"><link rel="preconnect" href="https://cdn.jsdelivr.net/fontsource/fonts" crossorigin="anonymous"><link rel="preload" href="https://cdn.jsdelivr.net/fontsource/fonts/comme:vf@latest/latin-wght-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
1<script>window._$HY||(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host.nodeType?e.host:e.parentNode));["click", "input"].forEach((o=>document.addEventListener(o,(o=>{if(!e.events)return;let s=t(o.composedPath&&o.composedPath()[0]||o.target);s&&!e.completed.has(s)&&e.events.push([s,o])}))))})(_$HY={events:[],completed:new WeakSet,r:{},fe(){}});</script>
1<!--xs--><link href="/assets/entry-client-BXHq1e5c.css" rel="stylesheet" /><link href="/_build/assets/dist-CmufyXml.js" rel="modulepreload" /><link href="/_build/assets/routing-CKznLvHG.js" rel="modulepreload" /><link href="/_build/assets/entry-client-B2KhNcgq.js" rel="modulepreload" /><link data-sm="0000000000" rel="icon" href="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20166%20155.3'%3e%3cdefs%3e%3clinearGradient%20id='a'%20gradientUnits='userSpaceOnUse'%20x1='27.5'%20y1='3'%20x2='152'%20y2='63.5'%3e%3cstop%20offset='.1'%20stop-color='%2376b3e1'/%3e%3cstop%20offset='.3'%20stop-color='%23dcf2fd'/%3e%3cstop%20offset='1'%20stop-color='%2376b3e1'/%3e%3c/linearGradient%3e%3clinearGradient%20id='b'%20gradientUnits='userSpaceOnUse'%20x1='95.8'%20y1='32.6'%20x2='74'%20y2='105.2'%3e%3cstop%20offset='0'%20stop-color='%2376b3e1'/%3e%3cstop%20offset='.5'%20stop-color='%234377bb'/%3e%3cstop%20offset='1'%20stop-color='%231f3b77'/%3e%3c/linearGradient%3e%3clinearGradient%20id='c'%20gradientUnits='userSpaceOnUse'%20x1='18.4'%20y1='64.2'%20x2='144.3'%20y2='149.8'%3e%3cstop%20offset='0'%20stop-color='%23315aa9'/%3e%3cstop%20offset='.5'%20stop-color='%23518ac8'/%3e%3cstop%20offset='1'%20stop-color='%23315aa9'/%3e%3c/linearGradient%3e%3clinearGradient%20id='d'%20gradientUnits='userSpaceOnUse'%20x1='75.2'%20y1='74.5'%20x2='24.4'%20y2='260.8'%3e%3cstop%20offset='0'%20stop-color='%234377bb'/%3e%3cstop%20offset='.5'%20stop-color='%231a336b'/%3e%3cstop%20offset='1'%20stop-color='%231a336b'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath%20d='M163%2035S110-4%2069%205l-3%201c-6%202-11%205-14%209l-2%203-15%2026%2026%205c11%207%2025%2010%2038%207l46%209%2018-30z'%20fill='%2376b3e1'/%3e%3cpath%20d='M163%2035S110-4%2069%205l-3%201c-6%202-11%205-14%209l-2%203-15%2026%2026%205c11%207%2025%2010%2038%207l46%209%2018-30z'%20opacity='.3'%20fill='url(%23a)'/%3e%3cpath%20d='M52%2035l-4%201c-17%205-22%2021-13%2035%2010%2013%2031%2020%2048%2015l62-21S92%2026%2052%2035z'%20fill='%23518ac8'/%3e%3cpath%20d='M52%2035l-4%201c-17%205-22%2021-13%2035%2010%2013%2031%2020%2048%2015l62-21S92%2026%2052%2035z'%20opacity='.3'%20fill='url(%23b)'/%3e%3cpath%20d='M134%2080a45%2045%200%2000-48-15L24%2085%204%20120l112%2019%2020-36c4-7%203-15-2-23z'%20fill='url(%23c)'/%3e%3cpath%20d='M114%20115a45%2045%200%2000-48-15L4%20120s53%2040%2094%2030l3-1c17-5%2023-21%2013-34z'%20fill='url(%23d)'/%3e%3c/svg%3e"/><link data-sm="000000001100000" rel="canonical" href="https://manueljlin.com/post/fontra-101/en"/><title data-sm="0000000011000200000000">Making your own fonts with Fontra</title><link data-sm="00000000110002000000200" rel="alternate" hreflang="en" href="/post/fontra-101/en"/><link data-sm="00000000110002000000210" rel="alternate" hreflang="es" href="/post/fontra-101/es"/><link data-sm="00000000110002000000910000" rel="preload" as="image" href="/assets/4TFbEH9I.svg" fetchpriority="high"/><link href="/_build/assets/posts-DAA7roJx.js" rel="modulepreload" /><link href="/_build/assets/_lang_-BCk95bqw.js" rel="modulepreload" /></head><body><div id="app"><!--!$e000000--><div data-hk="00000000110001" class="flex flex-col font-sans min-h-dvh"><a href="#main" class="absolute -left-vw z-999 px-4 py-2 bg-hazel-950 text-hazel-300 dark:bg-mauve-300 dark:text-mauve-950 font-400 no-underline rounded-xl focus:left-4 focus:top-4">skip to main content</a><main id="main" tabindex="-1" class="w-full px-5 pb-4 outline-none"><style data-hk="000000001100020000001">
2              article.post > * { min-width: 0; }
3
4              .pm-block { --track-prose-margin: 2rem; }
5              .r-aside  { --track-prose-margin: 0.5rem; }
6
7              .r-aside:first-child:has(+ .pm-block),
8              .pm-block + .r-aside { --track-prose-margin: 2rem; }
9
10              @media (min-width: 850px) {
11                article.post {
12                  display: grid;
13                  grid-template-columns:
14                    [main-track-l-gutter-edge]    0.5rem
15                    [main-track-l-gutter-center]  0.5rem
16                    [main-track-content]          2fr
17                    [main-track-r-gutter-center]  0.5rem
18                    [main-track-r-gutter-edge]    0.5rem
19
20                    [main-aside-track-margin]     2rem
21
22                    [aside-track-l-gutter-edge]   0.5rem
23                    [aside-track-l-gutter-center] 0.5rem
24                    [aside-track-content]         0.7fr
25                    [aside-track-r-gutter-center] 0.5rem
26                    [aside-track-r-gutter-edge]   0.5rem;
27                }
28
29                :where(article.post) > * { grid-column: main-track-content / main-track-r-gutter-center; }
30
31                .r-aside { grid-column: aside-track-content / aside-track-r-gutter-center; }
32                .r-wide  { grid-column: main-track-l-gutter-edge / -1; }
33                .r-sub   {
34                  grid-column: main-track-l-gutter-edge / -1;
35                  display: grid;
36                  grid-template-columns: subgrid;
37                }
38
39                :where(.r-sub) > *           { grid-column: main-track-content / main-track-r-gutter-center; }
40                .r-sub > .col-content        { grid-column: main-track-content / main-track-r-gutter-center; }
41                .r-sub > .col-content-bleed  { grid-column: main-track-l-gutter-edge / main-aside-track-margin; }
42                .r-sub > .col-aside          { grid-column: aside-track-content / aside-track-r-gutter-center; }
43                .r-sub > .col-aside-bleed    { grid-column: aside-track-l-gutter-edge / -1; }
44              }
45
46              .nav-scrim {
47                opacity: 0;
48                animation: nav-scrim-fade-in linear forwards;
49                animation-timeline: scroll(root block);
50                animation-range: 0 20rem;
51              }
52
53              @keyframes nav-scrim-fade-in {
54                to { opacity: 1; }
55              }
56
57              @keyframes hint-fade {
58                0% {
59                  opacity: 0;
60                  filter: blur(2px);
61                }
62                100% {
63                  opacity: 1; 
64                  filter: blur(0);
65                }
66              }
67
68              @keyframes hint-fade-out {
69                from {
70                  opacity: 1;
71                  visibility: visible;
72                  filter: blur(0);
73                }
74                to {
75                  opacity: 0;
76                  visibility: hidden;
77                  filter: blur(2px);
78                }
79              }
80
81              .language-hint {
82                opacity: 1;
83                filter: blur(0);
84                animation:
85                  hint-fade 250ms ease-out forwards,
86                  hint-translate 200ms ease-out forwards,
87                  hint-fade-out 1.5s ease-out 3s forwards;
88              }
89
90              .language-hint:hover {
91                opacity: 1;
92                visibility: visible;
93                filter: blur(0);
94                animation:
95                  hint-fade 150ms ease-out forwards,
96                  hint-translate 150ms ease-in forwards;
97              }
98
99              .history-popover {
100                animation:
101                  hint-fade 250ms ease-out forwards,
102                  hint-translate 200ms ease-out forwards;
103              }
104
105              @keyframes heading-pulse {
106                0%, 50%, 100% { opacity: 1; }
107                25%, 75%      { opacity: 0.35; }
108              }
109
110              .heading-pulse {
111                animation: heading-pulse 400ms cubic-bezier(0.455, 0.03, 
1110.515, 0.955) forwards;
112              }
113
114              @media (prefers-reduced-motion: reduce) {
115                .heading-pulse { animation: none; }
116              }
117
118              @keyframes hint-translate {
119                0% {
120                  translate: 0 -8px;
121                }
122                100% {
123                  translate: 0 0;
124                }
125              }
126            </style><div data-hk="000000001100020000003" class="w-full max-w-xl md:max-w-5xl mx-auto"><article class="post w-full"><nav class="relative r-sub sticky top-0 z-40 py-4"><span class="nav-scrim pointer-events-none r-sub absolute inset-y-0 w-screen left-[calc(50%-50vw)] bg-sine-mid bg-sine-from-hazel-150/95-40% bg-sine-via-hazel-150/90-60% dark:bg-sine-from-mauve-950/95-40% dark:bg-sine-via-mauve-950/90-60% scale-y-250"></span><span class="nav-scrim pointer-events-none r-sub absolute inset-y-0 w-screen left-[calc(50%-50vw)] mask-sine-dir-b [backdrop-filter:blur(3px)]"></span><span class="nav-scrim pointer-events-none r-sub absolute inset-y-0 w-screen left-[calc(50%-50vw)] mask-sine-dir-b [backdrop-filter:blur(1px)] scale-y-200 origin-t"></span><div class="flex gap-2 items-center" style="grid-column:main-track-l-gutter-center / aside-track-r-gutter-center"><!--$--><button data-hk="0000000011000200000040" aria-label="Back" data-variant="regular" data-size="sm" data-shape="circle" class="uno-lwuarh group/b transition-font-weight,font-stretch,transform,shadow,padding text-size-body "><span class="*:shrink-0 font-600 invisible h-0" aria-hidden="true"><span data-hk="0000000011000200000041" class="i-md:arrow-back size-5"></span></span><span class="*:shrink-0 group-active/b:scale-98 group-active/p:[font-stretch:75%]"><span data-hk="0000000011000200000042" class="i-md:arrow-back size-5"></span></span></button><!--/--><!--$--><button data-hk="0000000011000200000050" type="button" disabled aria-label="Toggle table of contents" aria-expanded="false" style="pointer-events:none" class="group flex flex-col min-w-0 text-sm line-height-normal px-1 bg-transparent border-none cursor-pointer text-left"><span class="font-bold" style="opacity:0;filter:blur(2px)">Making your own fonts with Fontra</span><div class="grid transition-[grid-template-rows] duration-100 ease-out" style="grid-template-rows:0fr"><div class="min-h-0"><div style="opacity:0;filter:blur(2px);pointer-events:none" class="flex items-center min-w-0 font-450 text-hazel-800 dark:text-mauve-200 transition-color group-hover:text-hazel-800 group-hover:dark:text-mauve-300"><span></span><span class="i-mdl:keyboard-arrow-down size-5 -my-4 shrink-0" aria-hidden="true"></span></div></div></div></button><!--/--></div></nav><header class="r-sub flex flex-col gap-y-3 md:gap-y-6 pt-10dvh pb-16"><h1 class="uno-kyq0wj">Making your own fonts with Fontra</h1><!--$--><!--/--><div class="uno-pakmh0 col-aside" style="grid-row:1"><!--$--><div data-hk="0000000011000200000070" class="relative"><button data-hk="00000000110002000000710" type="button" aria-expanded="false" class="flex items-center gap-2 bg-transparent border-none cursor-pointer p-0 text-hazel-500 dark:text-mauve-500 transition-color hover:text-hazel-800 hover:dark:text-mauve-300 line-height-140%"><time datetime="2026-05-11">May 11, 2026</time><span class="i-md:history size-1em" aria-hidden="true"></span></button></div><!--/--><!--$--><div data-hk="0000000011000200000080" class="relative"><select aria-label="Post language" class="peer appearance-none bg-transparent border-none text-hazel-500 dark:text-mauve-500 transition-color hover:text-hazel-800 hover:dark:text-mauve-300 text-base line-height-140% cursor-pointer outline-none pr-4 py-0.5"><option data-hk="00000000110002000000810" value="en" selected>English</option><option data-hk="00000000110002000000811" value="es">Español</option></select><span class="i-md:keyboard-arrow-down absolute right-0 top-1/2 -translate-y-1/2 pointer-events-none text-hazel-500 dark:text-mauve-500 transition-color peer-hover:text-hazel-800 peer-hover:dark:text-mauve-300" aria-hidden="true"></span><!--$--><!--/--></div><!--/--></div></header><div class="prose r-sub pb-12"><p data-hk="00000000110002000000900" >I've been working on a custom typeface called Zephyr Sans on and off for about a year.
127It attempts to be a fresh take on the vibes from KDE's Breeze icons and the old Oxygen Sans family.</p>
128<!--!$-->
129<!--!$--><figure data-hk="00000000110002000000912" class="not-prose r-sub my-8"><picture class="" style="display:block;grid-column:main-track-l-gutter-edge / -1;aspect-ratio:1300 / 400"><!--$--><source data-hk="000000001100020000009130" srcset="/assets/CVhHYr4a.svg" media="(prefers-color-scheme: dark)"><source data-hk="000000001100020000009131" srcset="/assets/4TFbEH9I.svg"><!--/--><img src="/assets/4TFbEH9I.svg" alt="A sample with all four currently available weights" loading="eager" fetchpriority="high" draggable="false" class="
130              block
131              w-full
132              corner-shape-superellipse-2
133
134              smooth-shadow-z-2.75
135              smooth-shadow-color-from-hazel-a-1000
136              smooth-shadow-color-to-hazel-a-900
137              dark:smooth-shadow-color-mauve-1000
138
139              transition-transform,shadow
140              spring-duration-[--flip-duration]
141
142              spring-bounce-20
143              select-none
144
145              outline outline-retina -outline-offset-1
146              outline-hazel-50/8
147              outline-mauve-50/4
148                 
149                smooth-shadow-z-2.75
150                cursor-pointer
151
152                corner-radius-8 md:corner-radius-12
153
154                hover:smooth-shadow-z-3 hover:scale-101
155
156                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
157              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><!--/--></figure>
158<p data-hk="00000000110002000000920" >It took a decent amount of research to get this far, and I still consider myself a bit of a noob. But I can try to 
158smooth the bumps for you if you want to do a similar project.</p>
159<p data-hk="00000000110002000000930" >As you can probably guess, we'll be using Fontra, an open-source editor that works in all the usual places.</p>
160<h1 data-hk="00000000110002000000940" id="creating-a-typeface" >Creating a typeface</h1>
161<p data-hk="00000000110002000000960" >First off, we install FontraPak from <a data-hk="00000000110002000000950" href="https://fontra.xyz" >fontra.xyz</a>, which runs both the server and client locally on your computer.</p>
162<p data-hk="00000000110002000000970" >The client/server split allows you to have Figma-style real-time collaboration, but we don't really care about that at the moment.</p>
163<p data-hk="00000000110002000000980" >Once opened, a window like the following will appear:</p>
164<!--!$--><figure data-hk="00000000110002000000992" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:900 / 600"><!--$--><!--/--><img src="/assets/CeOpvcyL.webp" loading="lazy" draggable="false" class="
165              block
166              w-full
167              corner-shape-superellipse-2
168
169              smooth-shadow-z-2.75
170              smooth-shadow-color-from-hazel-a-1000
171              smooth-shadow-color-to-hazel-a-900
172              dark:smooth-shadow-color-mauve-1000
173
174              transition-transform,shadow
175              spring-duration-[--flip-duration]
176
177              spring-bounce-20
178              select-none
179
180              outline outline-retina -outline-offset-1
181              outline-hazel-50/8
182              outline-mauve-50/4
183                 
184                smooth-shadow-z-2.75
185                cursor-pointer
186
187                corner-radius-8 md:corner-radius-12
188
189                hover:smooth-shadow-z-3 hover:scale-101
190
191                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
192              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><figcaption data-hk="000000001100020000009940" class="
193              text-hazel-500 dark:text-mauve-500 
194
195              px-5 py-2 md:p-0
196              flex flex-col gap-2
197              my-0
198             col-aside" style=""><!--$--><span data-hk="0000000011000200000099410" class="text-md mt-2 md:mt-0 !line-height-140%">FontraPak window</span><!--/--><!--$--><!--/--><!--$--><!--/--></figcaption><!--/--></figure>
199<p data-hk="000000001100020000009a120" >Click on <strong data-hk="000000001100020000009a100" >New Font</strong> on the top left. You'll see multiple formats (Designspace, Fontra, RoboCJK and UFO). Pick <strong data-hk="000000001100020000009a110" >Designspace</strong>.</p>
200<p data-hk="000000001100020000009a150" >UFO is the standard app-independent format for a single font (folders like <code data-hk="000000001100020000009a130" class="
201        not-prose
202
203        px-0.35em
204
205        font-mono text-0.95em
206
207        text-[--prose-body]
208        bg-hazel-100
209        dark:bg-mauve-900
210
211        corner-radius-[0.75em]
212        corner-shape-superellipse-2
213
214        [overflow-wrap:anywhere]
215        box-decoration-clone
216
217        
218       ">MyFont_Light.ufo</code>, <code data-hk="000000001100020000009a140" class="
219        not-prose
220
221        px-0.35em
222
223        font-mono text-0.95em
224
225        text-[--prose-body]
226        bg-hazel-100
227        dark:bg-mauve-900
228
229        corner-radius-[0.75em]
230        corner-shape-superellipse-2
231
232        [overflow-wrap:anywhere]
233        box-decoration-clone
234
235        
236       ">MyFont_Regular.ufo</code> and so on).</p>
237<p data-hk="000000001100020000009a170" >Designspace is a folder of UFOs (plus a <code data-hk="000000001100020000009a160" class="
238        not-prose
239
240        px-0.35em
241
242        font-mono text-0.95em
243
244        text-[--prose-body]
245        bg-hazel-100
246        dark:bg-mauve-900
247
248        corner-radius-[0.75em]
249        corner-shape-superellipse-2
250
251        [overflow-wrap:anywhere]
252        box-decoration-clone
253
254        
255       ">.designspace</code> XML file) that combines those fonts into the single typeface. By picking Designspace you're both future proofing your font in case you ever want to scale it up, while still allowing for other potential contributors to use their preferred editor like Glyphs, RoboFont, FontLab etc. which may have advanced features like plugins, curvature combs and non-Latin language support.</p>
256<p data-hk="000000001100020000009a180" >You should see a page like the following open up in your browser:</p>
257<!--!$--><figure data-hk="000000001100020000009a192" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:911 / 751"><!--$--><!--/--><img src="/assets/CFi0Cr6W.webp" loading="lazy" draggable="false" class="
258              block
259              w-full
260              corner-shape-superellipse-2
261
262              smooth-shadow-z-2.75
263              smooth-shadow-color-from-hazel-a-1000
264              smooth-shadow-color-to-hazel-a-900
265              dark:smooth-shadow-color-mauve-1000
266
267              transition-transform,shadow
268              spring-duration-[--flip-duration]
269
270              spring-bounce-20
271              select-none
272
273              outline outline-retina -outline-offset-1
274              outline-hazel-50/8
275              outline-mauve-50/4
276                 
277                smooth-shadow-z-2.75
278                cursor-pointer
279
280                corner-radius-8 md:corner-radius-12
281
282                hover:smooth-shadow-z-3 hover:scale-101
283
284                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
285              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><figcaption data-hk="000000001100020000009a1940" class="
286              text-hazel-500 dark:text-mauve-500 
287
288              px-5 py-2 md:p-0
289              flex flex-col gap-2
290              my-0
291             col-aside" style=""><!--$--><span data-hk="000000001100020000009a19410" class="text-md mt-2 md:mt-0 !line-height-140%">Empty glyph grid view</span><!--/--><!--$--><!--/--><!--$--><!--/--></figcaption><!--/--></figure>
292<h1 data-hk="000000001100020000009a200" id="adding-glyph-sets" >Adding glyph sets</h1>
293<p data-hk="000000001100020000009a210" >Glyph sets are a way to specify which characters you plan on supporting on your typeface. You can pick a standardized glyph set from an existing collection like the one from Google Fonts.</p>
294<!--!$-->
295<p data-hk="000000001100020000009a270" >See the sidebar on the left? Click on the <span data-hk="000000001100020000009a240" class="inline-flex align-middle"><button data-hk="000000001100020000009a230" data-variant="regular" data-size="xs" data-shape="rounded-rect" class="uno-lwuarh group/b transition-font-weight,font-stretch,transform,shadow,padding text-size-body "><span class="*:shrink-0 font-600 invisible h-0" aria-hidden="true"><span data-hk="000000001100020000009a220" class="i-md:add-2 "></span></span><span class="*:shrink-0 group-active/b:scale-98 group-active/p:[font-stretch:75%]"><span data-hk="000000001100020000009a220" class="i-md:add-2 "></span></span></button></span> button to the right of Project glyph sets. Select the <strong data-hk="000000001100020000009a250" >Google Fonts</strong> collection and check <strong data-hk="000000001100020000009a260" >GF Latin Kernel</strong> for now, then save.</p>
296<!--!$--><figure data-hk="000000001100020000009a292" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:961 / 819"><!--$--><!--/--><img src="/assets/DhIktYSp.webp" alt="Glyph set view" loading="lazy" draggable="false" class="
297              block
298              w-full
299              corner-shape-superellipse-2
300
301              smooth-shadow-z-2.75
302              smooth-shadow-color-from-hazel-a-1000
303              smooth-shadow-color-to-hazel-a-900
304              dark:smooth-shadow-color-mauve-1000
305
306              transition-transform,shadow
307              spring-duration-[--flip-duration]
308
309              spring-bounce-20
310              select-none
311
312              outline outline-retina -outline-offset-1
313              outline-hazel-50/8
314              outline-mauve-50/4
315                 
316                smooth-shadow-z-2.75
317                cursor-pointer
318
319                corner-radius-8 md:corner-radius-12
320
321                hover:smooth-shadow-z-3 hover:scale-101
322
323                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
324              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><figcaption data-hk="000000001100020000009a2940" class="
325              text-hazel-500 dark:text-mauve-500 
326
327              px-5 py-2 md:p-0
328              flex flex-col gap-2
329              my-0
330             col-aside" style=""><!--$--><!--/--><!--$--><span data-hk="000000001100020000009a29420" class="line-height-160% [--divider-margin:1rem] [&amp;>*]:text-hazel-500 [&amp;>*]:dark:text-mauve-500 [&amp;>*]:my-4 [&amp;>*:first-child]:mt-0 [&amp;>*:last-child]:mb-0 [&amp;_a]:underline [&amp;_a]:font-500 [&amp;_a]:text-[--prose-links]"><p data-hk="000000001100020000009a280" >You'll now see the coverage on your font, with light gray cards containing a preview for existing glyphs.</p></span><!--/--><!--$--><!--/--></figcaption><!--/--></figure>
331<h1 data-hk="000000001100020000009a300" id="line-metrics" >Line metrics</h1>
332<p data-hk="000000001100020000009a310" >Before we start drawing any glyphs, we need to think about the anatomy of the font we want to make.</p>
333<!--!$--><figure data-hk="000000001100020000009a322" class="not-prose r-sub my-8"><picture class="" style="display:block;grid-column:main-track-l-gutter-edge / -1;aspect-ratio:3840 / 1049"><!--$--><!--/--><img src="/assets/BPQo8Y3-.svg" alt="Line metrics diagram" loading="lazy" draggable="false" class="
334              block
335              w-full
336              corner-shape-superellipse-2
337
338              smooth-shadow-z-2.75
339              smooth-shadow-color-from-hazel-a-1000
340              smooth-shadow-color-to-hazel-a-900
341              dark:smooth-shadow-color-mauve-1000
342
343              transition-transform,shadow
344              spring-duration-[--flip-duration]
345
346              spring-bounce-20
347              select-none
348
349              outline outline-retina -outline-offset-1
350              outline-hazel-50/8
351              outline-mauve-50/4
352                 
353                smooth-shadow-z-2.75
354                cursor-pointer
355
356                corner-radius-8 md:corner-radius-12
357
358                hover:smooth-shadow-z-3 hover:scale-101
359
360                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
361              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><!--/--></figure>
362<p data-hk="000000001100020000009a330" >A default Fontra Designspace project has 1000 units per em but you may come across 1024, 2000 or 2048 sometimes.
363Variable fonts generally speaking need a higher UPM.</p>
364<p data-hk="000000001100020000009a340" >While the format itself is vector based, the nodes snap unit by unit based on this resolution as if it were pixel based.</p>
365<p data-hk="000000001100020000009a380" >Now out of these 1000 vertical units we have to pick how many go to each section.
366Get some paper out and sketch a bit. Draw enough glyphs to figure out the proportions for the <strong data-hk="000000001100020000009a350" >ascender</strong>, <strong data-hk="000000001100020000009a360" >x-height</strong> and <strong data-hk="000000001100020000009a370" >descender</strong>. Then try to retroactively give it sizes by literally measuring on paper and rounding.</p>
367<!--!$--><figure data-hk="000000001100020000009a402" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:940 / 479"><!--$--><!--/--><img src="/assets/Bkbbqe7T.webp" alt="Glyph sketches" loading="lazy" draggable="false" class="
368              block
369              w-full
370              corner-shape-superellipse-2
371
372              smooth-shadow-z-2.75
373              smooth-shadow-color-from-hazel-a-1000
374              smooth-shadow-color-to-hazel-a-900
375              dark:smooth-shadow-color-mauve-1000
376
377              transition-transform,shadow
378              spring-duration-[--flip-duration]
379
380              spring-bounce-20
381              select-none
382
383              outline outline-retina -outline-offset-1
384              outline-hazel-50/8
385              outline-mauve-50/4
386                 
387                smooth-shadow-z-2.75
388                cursor-pointer
389
390                corner-radius-8 md:corner-radius-12
391
392                hover:smooth-shadow-z-3 hover:scale-101
393
394                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
395              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><figcaption data-hk="000000001100020000009a4040" class="
396              text-hazel-500 dark:text-mauve-500 
397
398              px-5 py-2 md:p-0
399              flex flex-col gap-2
400              my-0
401             col-aside" style=""><!--$--><!--/--><!--$--><span data-hk="000000001100020000009a40420" class="line-height-160% [--divider-margin:1rem] [&amp;>*]:text-hazel-500 [&amp;>*]:dark:text-mauve-500 [&amp;>*]:my-4 [&amp;>*:first-child]:mt-0 [&amp;>*:last-child]:mb-0 [&amp;_a]:underline [&amp;_a]:font-500 [&amp;_a]:text-[--prose-links]"><p data-hk="000000001100020000009a390" >You can probably tell I drew this sketch before I learned all of this.</p></span><!--/--><!--$--><!--/--></figcaption><!--/--></figure>
402<p data-hk="000000001100020000009a420" >In this case I chose to make the <kbd data-hk="000000001100020000009a410" class="uno-anmfza not-prose before: " >a</kbd> double-storey and based my measurements around where the bowl and the hook meet.</p>
403<p data-hk="000000001100020000009a430" >Cap height should be derived from the x-height. Body fonts (those used for long-form text at small sizes) should sit between 65% and 75% cap he
403ight to x-height ratio.</p>
404<p data-hk="000000001100020000009a440" >I picked as close to 75% as possible – around where Inter and Helvetica sit – as my intention for this font is to be used on user interfaces. 550/740 is ≈ 75%, 775-550 = 225 (which matches the descender).</p>
405<!--!$--><figure data-hk="000000001100020000009a452" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:961 / 701"><!--$--><!--/--><img src="/assets/BuWNzFhL.webp" alt="Line metrics view" loading="lazy" draggable="false" class="
406              block
407              w-full
408              corner-shape-superellipse-2
409
410              smooth-shadow-z-2.75
411              smooth-shadow-color-from-hazel-a-1000
412              smooth-shadow-color-to-hazel-a-900
413              dark:smooth-shadow-color-mauve-1000
414
415              transition-transform,shadow
416              spring-duration-[--flip-duration]
417
418              spring-bounce-20
419              select-none
420
421              outline outline-retina -outline-offset-1
422              outline-hazel-50/8
423              outline-mauve-50/4
424                 
425                smooth-shadow-z-2.75
426                cursor-pointer
427
428                corner-radius-8 md:corner-radius-12
429
430                hover:smooth-shadow-z-3 hover:scale-101
431
432                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
433              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><!--/--></figure>
434<p data-hk="000000001100020000009a460" >The values on the left should sum up to your units per em (default to 1000), 775 + 225 = 1000.</p>
435<h2 data-hk="000000001100020000009a470" id="compensating-for-optical-illusions" >Compensating for optical illusions</h2>
436<p data-hk="000000001100020000009a480" >The number inputs on the right of each metric act as buffer zones for overshoots. As a rule of thumb, the smaller in size you expect the font to be used, the greater the buffer has to be.</p>
437<p data-hk="000000001100020000009a500" ><a data-hk="000000001100020000009a490" href="http://designwithfontforge.com/en-US/Trusting_Your_Eyes.html" >Read this page</a> to catch up to speed on this.</p>
438<h1 data-hk="000000001100020000009a510" id="drawing-our-first-glyph-in-fontra" >Drawing our first glyph in Fontra</h1>
439<p data-hk="000000001100020000009a540" >We can now start drawing our first glyphs, <kbd data-hk="000000001100020000009a520" class="uno-anmfza not-prose before: " >n</kbd> and <kbd data-hk="000000001100020000009a530" class="uno-anmfza not-prose before: " >o</kbd>. These will act as the base for the others.</p>
440<p data-hk="000000001100020000009a560" >Go back to the glyph grid and double click the <kbd data-hk="000000001100020000009a550" class="uno-anmfza not-prose before: " >n</kbd> card.
441A new editor tab will open. The UI is pretty self-explanatory so just play around with it and we'll start drawing once you come back.</p>
442<!--!$--><figure data-hk="000000001100020000009a572" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:1508 / 981"><!--$--><!--/--><img src="/assets/eYwxzxhz.webp" alt="Empty glyph editor tab" loading="lazy" draggable="false" class="
443              block
444              w-full
445              corner-shape-superellipse-2
446
447              smooth-shadow-z-2.75
448              smooth-shadow-color-from-hazel-a-1000
449              smooth-shadow-color-to-hazel-a-900
450              dark:smooth-shadow-color-mauve-1000
451
452              transition-transform,shadow
453              spring-duration-[--flip-duration]
454
455              spring-bounce-20
456              select-none
457
458              outline outline-retina -outline-offset-1
459              outline-hazel-50/8
460              outline-mauve-50/4
461                 
462                smooth-shadow-z-2.75
463                cursor-pointer
464
465                corner-radius-8 md:corner-radius-12
466
467                hover:smooth-shadow-z-3 hover:scale-101
468
469                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
470              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><!--/--></figure>
471<p data-hk="000000001100020000009a580" >
471Select the rectangle tool, and add a rectangle from x-height to baseline to make a vertical stroke.
472Unlike on editors like Figma, the selection tool (Pointer) doesn't select the entire shape by just clicking on the fill. For that, double click on the shape's path.</p>
473<p data-hk="000000001100020000009a600" >On the right sidebar, select the <strong data-hk="000000001100020000009a590" >Selection Transformation</strong> tab, then select a shape to see its width and height.</p>
474<p data-hk="000000001100020000009a650" >There's also an option to see the coordinates on each selected node. It's on View <span data-hk="000000001100020000009a620" class="inline-flex align-middle"><span data-hk="000000001100020000009a610" class="i-md:arrow-forward "></span></span> Glyph editor appearance <span data-hk="000000001100020000009a640" class="inline-flex align-middle"><span data-hk="000000001100020000009a630" class="i-md:arrow-forward "></span></span> Coordinates.</p>
475<p data-hk="000000001100020000009a660" >There's also a Ruler tool that sticks and rotates along the closest edge where you click, which is pretty handy.</p>
476<!--!$--><figure data-hk="000000001100020000009a672" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:981 / 980"><!--$--><!--/--><img src="/assets/Dt7UdRxX.webp" alt="Rectangle in editor" loading="lazy" draggable="false" class="
477              block
478              w-full
479              corner-shape-superellipse-2
480
481              smooth-shadow-z-2.75
482              smooth-shadow-color-from-hazel-a-1000
483              smooth-shadow-color-to-hazel-a-900
484              dark:smooth-shadow-color-mauve-1000
485
486              transition-transform,shadow
487              spring-duration-[--flip-duration]
488
489              spring-bounce-20
490              select-none
491
492              outline outline-retina -outline-offset-1
493              outline-hazel-50/8
494              outline-mauve-50/4
495                 
496                smooth-shadow-z-2.75
497                cursor-pointer
498
499                corner-radius-8 md:corner-radius-12
500
501                hover:smooth-shadow-z-3 hover:scale-101
502
503                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
504              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><!--/--></figure>
505<p data-hk="000000001100020000009a680" >Let's pick the pencil tool to start drawing our own shape. We'll do the shoulder now.</p>
506<!--!$--><figure data-hk="000000001100020000009a692" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:1001 / 1005"><!--$--><!--/--><img src="/assets/CtzUPJTe.webp" alt="Starting shoulder" loading="lazy" draggable="false" class="
507              block
508              w-full
509              corner-shape-superellipse-2
510
511              smooth-shadow-z-2.75
512              smooth-shadow-color-from-hazel-a-1000
513              smooth-shadow-color-to-hazel-a-900
514              dark:smooth-shadow-color-mauve-1000
515
516              transition-transform,shadow
517              spring-duration-[--flip-duration]
518
519              spring-bounce-20
520              select-none
521
522              outline outline-retina -outline-offset-1
523              outline-hazel-50/8
524              outline-mauve-50/4
525                 
526                smooth-shadow-z-2.75
527                cursor-pointer
528
529                corner-radius-8 md:corner-radius-12
530
531                hover:smooth-shadow-z-3 hover:scale-101
532
533                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
534              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><!--/--></figure>
535<p data-hk="000000001100020000009a710" >Hold <kbd data-hk="000000001100020000009a700" class="uno-anmfza not-prose before: " >Shift</kbd> to lock the X or Y axis down, then draw a straight line downwards.</p>
536<p data-hk="000000001100020000009a720" >We then close this shape by drawing our way back to the initial point where we click to finish. You'll see a blue circle while hovering the node, clicking here will close the contour.</p>
537<!--!$--><figure data-hk="000000001100020000009a732" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:1001 / 1005"><!--$--><!--/--><img src="/assets/fN51G3X-.webp" alt="Closing shoulder" loading="lazy" draggable="false" class="
538              block
539              w-full
540              corner-shape-superellipse-2
541
542              smooth-shadow-z-2.75
543              smooth-shadow-color-from-hazel-a-1000
544              smooth-shadow-color-to-hazel-a-900
545              dark:smooth-shadow-color-mauve-1000
546
547              transition-transform,shadow
548              spring-duration-[--flip-duration]
549
550              spring-bounce-20
551              select-none
552
553              outline outline-retina -outline-offset-1
554              outline-hazel-50/8
555              outline-mauve-50/4
556                 
557                smooth-shadow-z-2.75
558                cursor-pointer
559
560                corner-radius-8 md:corner-radius-12
561
562                hover:smooth-shadow-z-3 hover:scale-101
563
564                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
565              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><!--/--></figure>
566<p data-hk="000000001100020000009a740" >You can also click on the middle of a line to split it with a node – you'll see the blue circle again.</p>
567<!--!$--><figure data-hk="000000001100020000009a752" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:1001 / 1005"><!--$--><!--/--><img src="/assets/BSVDWUbT.webp" alt="Closed shoulder" loading="lazy" draggable="false" class="
568              block
569              w-full
570              corner-shape-superellipse-2
571
572              smooth-shadow-z-2.75
573              smooth-shadow-color-from-hazel-a-1000
574              smooth-shadow-color-to-hazel-a-900
575              dark:smooth-shadow-color-mauve-1000
576
577              transition-transform,shadow
578              spring-duration-[--flip-duration]
579
580              spring-bounce-20
581              select-none
582
583              outline outline-retina -outline-offset-1
584              outline-hazel-50/8
585              outline-mauve-50/4
586                 
587                smooth-shadow-z-2.75
588                cursor-pointer
589
590                corner-radius-8 md:corner-radius-12
591
592                hover:smooth-shadow-z-3 hover:scale-101
593
594                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
595              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><!--/--></figure>
596<p data-hk="000000001100020000009a770" >Now, to make the lines curved instead of straight, hold <kbd data-hk="000000001100020000009a760" class="uno-anmfza not-prose before: " >Alt</kbd> and click with your Pencil tool. You'll see two smaller blue circles before clicking.</p>
597<!--!$--><figure data-hk="000000001100020000009a782" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:1001 / 1005"><!--$--><!--/--><img src="/assets/QQ3Ox6BH.webp" alt="Curve indicator preview" loading="lazy" draggable="false" class="
598              block
599              w-full
600              corner-shape-superellipse-2
601
602              smooth-shadow-z-2.75
603              smooth-shadow-color-from-hazel-a-1000
604              smooth-shadow-color-to-hazel-a-900
605              dark:smooth-shadow-color-mauve-1000
606
607              transition-transform,shadow
608              spring-duration-[--flip-duration]
609
610              spring-bounce-20
611              select-none
612
613              outline outline-retina -outline-offset-1
614              outline-hazel-50/8
615              outline-mauve-50/4
616                 
617                smooth-shadow-z-2.75
618                cursor-pointer
619
620                corner-radius-8 md:corner-radius-12
621
622                hover:smooth-shadow-z-3 hover:scale-101
623
624                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
625              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><!--/--></figure>
626<!--!$--><figure data-hk="000000001100020000009a792" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:1001 / 1005"><!--$--><!--/--><img src="/assets/BIfvp9k9.webp" alt="Curve handles" loading="lazy" draggable="false" class="
627              block
628              w-full
629              corner-shape-superellipse-2
630
631              smooth-shadow-z-2.75
632              smooth-shadow-color-from-hazel-a-1000
633              smooth-shadow-color-to-hazel-a-900
634              dark:smooth-shadow-color-mauve-1000
635
636              transition-transform,shadow
637              spring-duration-[--flip-duration]
638
639              spring-bounce-20
640              select-none
641
642              outline outline-retina -outline-offset-1
643              outline-hazel-50/8
644              outline-mauve-50/4
645                 
646                smooth-shadow-z-2.75
647                cursor-pointer
648
649                corner-radius-8 md:corner-radius-12
650
651                hover:smooth-shadow-z-3 hover:scale-101
652
653                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
654              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><!--/--></figure>
655<p data-hk="000000001100020000009a810" >It's better to have the same angle on either side, so hold <kbd data-hk="000000001100020000009a800" class="uno-anmfza not-prose before: " >Shift</kbd> when moving the handles.</p>
656<p data-hk="000000001100020000009a820" >Once you're finished making all the lines curved, chances are it'll look a bit rough. That's fine for now.</p>
657<!--!$--><figure data-hk="000000001100020000009a832" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:1001 / 1005"><!--$--><!--/--><img src="/assets/DKgmYf5V.webp" alt="This does not bring joy" loading="lazy" draggable="false" class="
658              block
659              w-full
660              corner-shape-superellipse-2
661
662              smooth-shadow-z-2.75
663              smooth-shadow-color-from-hazel-a-1000
664              smooth-shadow-color-to-hazel-a-900
665              dark:smooth-shadow-color-mauve-1000
666
667              transition-transform,shadow
668              spring-duration-[--flip-duration]
669
670              spring-bounce-20
671              select-none
672
673              outline outline-retina -outline-offset-1
674              outline-hazel-50/8
675              outline-mauve-50/4
676                 
677                smooth-shadow-z-2.75
678                cursor-pointer
679
680                corner-radius-8 md:corner-radius-12
681
682                hover:smooth-shadow-z-3 hover:scale-101
683
684                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
685              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><!--/--></figure>
686<!--!$--><figure data-hk="000000001100020000009a862" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:1001 / 1005"><!--$--><!--/--><img src="/assets/Dj4qjqKD.webp" alt="Slightly better now" loading="lazy" draggable="false" class="
687              block
688              w-full
689              corner-shape-superellipse-2
690
691              smooth-shadow-z-2.75
692              smooth-shadow-color-from-hazel-a-1000
693              smooth-shadow-color-to-hazel-a-900
694              dark:smooth-shadow-color-mauve-1000
695
696              transition-transform,shadow
697              spring-duration-[--flip-duration]
698
699              spring-bounce-20
700              select-none
701
702              outline outline-retina -outline-offset-1
703              outline-hazel-50/8
704              outline-mauve-50/4
705                 
706                smooth-shadow-z-2.75
707                cursor-pointer
708
709                corner-radius-8 md:corner-radius-12
710
711                hover:smooth-shadow-z-3 hover:scale-101
712
713                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
714              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><figcaption data-hk="000000001100020000009a8640" class="
715              text-hazel-500 dark:text-mauve-500 
716
717              px-5 py-2 md:p-0
718              flex flex-col gap-2
719              my-0
720             col-aside" style=""><!--$--><!--/--><!--$--><span data-hk="000000001100020000009a86420" class="line-height-160% [--divider-margin:1rem] [&amp;>*]:text-hazel-500 [&amp;>*]:dark:text-mauve-500 [&amp;>*]:my-4 [&amp;>*:first-child]:mt-0 [&amp;>*:last-child]:mb-0 [&amp;_a]:underline [&amp;_a]:font-500 [&amp;_a]:text-[--prose-links]"><p data-hk="000000001100020000009a840" >Make sure the shoulder goes up to the overshoot region.</p><p data-hk="000000001100020000009a850" >Remember that it's rounded so it needs that compensation.</p></span><!--/--><!--$--><!--/--></figcaption><!--/--></figure>
721<p data-hk="000000001100020000009a880" >Now while having both nodes selected like in the picture, hold <kbd data-hk="000000001100020000009a870" class="uno-anmfza not-prose before: " >Alt</kbd> and use the arrow keys to nudge the nodes left or right while keeping the curve handles where they are. Trust your eyes. Also nudge the nodes on the right side.</p>
722<!--!$--><figure data-hk="000000001100020000009a892" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:1001 / 1005"><!--$--><!--/--><img src="/assets/bbH696VE.webp" alt="Acceptable" loading="lazy" draggable="false" class="
723              block
724              w-full
725              corner-shape-superellipse-2
726
727              smooth-shadow-z-2.75
728              smooth-shadow-color-from-hazel-a-1000
729              smooth-shadow-color-to-hazel-a-900
730              dark:smooth-shadow-color-mauve-1000
731
732              transition-transform,shadow
733              spring-duration-[--flip-duration]
734
735              spring-bounce-20
736              select-none
737
738              outline outline-retina -outline-offset-1
739              outline-hazel-50/8
740              outline-mauve-50/4
741                 
742                smooth-shadow-z-2.75
743                cursor-pointer
744
745                corner-radius-8 md:corner-radius-12
746
747                hover:smooth-shadow-z-3 hover:scale-101
748
749                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
750              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><!--/--></figure>
751<p data-hk="000000001100020000009a900" >Now we have to think about stroke contrast, which would be how much narrower horizontal strokes are compared to vertical ones.</p>
752<p data-hk="000000001100020000009a910" >If you were to set both to, say, 80, the top side of N's shoulder would paradoxically look bolder/wider than the vertical lines on either side. This is yet another optical illusion that we need to compensate for.</p>
753<p data-hk="000000001100020000009a930" >If you want to make it <em data-hk="000000001100020000009a920" >visually</em> the same, you should do about 10% less on horizontal strokes, which is what we'll do here by setting it to 72. You can make it more contrasty if you want.</p>
754<!--!$--><figure data-hk="000000001100020000009a942" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:1001 / 1005"><!--$--><!--/--><img src="/assets/HV939rGB.webp" alt="With proper contrast" loading="lazy" draggable="false" class="
755              block
756              w-full
757              corner-shape-superellipse-2
758
759              smooth-shadow-z-2.75
760              smooth-shadow-color-from-hazel-a-1000
761              smooth-shadow-color-to-hazel-a-900
762              dark:smooth-shadow-color-mauve-1000
763
764              transition-transform,shadow
765              spring-duration-[--flip-duration]
766
767              spring-bounce-20
768              select-none
769
770              outline outline-retina -outline-offset-1
771              outline-hazel-50/8
772              outline-mauve-50/4
773                 
774                smooth-shadow-z-2.75
775                cursor-pointer
776
777                corner-radius-8 md:corner-radius-12
778
779                hover:smooth-shadow-z-3 hover:scale-101
780
781        
781        active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
782              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><!--/--></figure>
783<p data-hk="000000001100020000009a950" >Now we have to fix that weird hole where both shapes intersect. Why is that happening? Well, it's because of the draw direction. Notice how every shape has a node with a half circle – that's where the shape starts to be drawn. If both shapes happen to have the same direction, they will combine. If they don't, they'll cancel each other out and leave a hole.</p>
784<p data-hk="000000001100020000009a970" >Best practice is to have additive shapes be drawn clockwise and subtractive ones like counters (the negative space in <kbd data-hk="000000001100020000009a960" class="uno-anmfza not-prose before: " >o</kbd> for example) counter-clockwise.</p>
785<p data-hk="000000001100020000009a980" >The de-facto standard most seem to have converged to is setting the start point of every shape to the closest point to the bottom left.
786I've since moved to using that in my typefaces also.</p>
787<!--!$--><figure data-hk="000000001100020000009b1002" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:1001 / 1005"><!--$--><!--/--><img src="/assets/1QamJX10.webp" alt="Setting start point" loading="lazy" draggable="false" class="
788              block
789              w-full
790              corner-shape-superellipse-2
791
792              smooth-shadow-z-2.75
793              smooth-shadow-color-from-hazel-a-1000
794              smooth-shadow-color-to-hazel-a-900
795              dark:smooth-shadow-color-mauve-1000
796
797              transition-transform,shadow
798              spring-duration-[--flip-duration]
799
800              spring-bounce-20
801              select-none
802
803              outline outline-retina -outline-offset-1
804              outline-hazel-50/8
805              outline-mauve-50/4
806                 
807                smooth-shadow-z-2.75
808                cursor-pointer
809
810                corner-radius-8 md:corner-radius-12
811
812                hover:smooth-shadow-z-3 hover:scale-101
813
814                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
815              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><figcaption data-hk="000000001100020000009b10040" class="
816              text-hazel-500 dark:text-mauve-500 
817
818              px-5 py-2 md:p-0
819              flex flex-col gap-2
820              my-0
821             col-aside" style=""><!--$--><!--/--><!--$--><span data-hk="000000001100020000009b100420" class="line-height-160% [--divider-margin:1rem] [&amp;>*]:text-hazel-500 [&amp;>*]:dark:text-mauve-500 [&amp;>*]:my-4 [&amp;>*:first-child]:mt-0 [&amp;>*:last-child]:mb-0 [&amp;_a]:underline [&amp;_a]:font-500 [&amp;_a]:text-[--prose-links]"><p data-hk="000000001100020000009a990" >You can still set it to the top or wherever you prefer.</p></span><!--/--><!--$--><!--/--></figcaption><!--/--></figure>
822<!--!$--><figure data-hk="000000001100020000009b1012" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:1001 / 1005"><!--$--><!--/--><img src="/assets/BBTrQwHa.webp" alt="New start point" loading="lazy" draggable="false" class="
823              block
824              w-full
825              corner-shape-superellipse-2
826
827              smooth-shadow-z-2.75
828              smooth-shadow-color-from-hazel-a-1000
829              smooth-shadow-color-to-hazel-a-900
830              dark:smooth-shadow-color-mauve-1000
831
832              transition-transform,shadow
833              spring-duration-[--flip-duration]
834
835              spring-bounce-20
836              select-none
837
838              outline outline-retina -outline-offset-1
839              outline-hazel-50/8
840              outline-mauve-50/4
841                 
842                smooth-shadow-z-2.75
843                cursor-pointer
844
845                corner-radius-8 md:corner-radius-12
846
847                hover:smooth-shadow-z-3 hover:scale-101
848
849                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
850              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><!--/--></figure>
851<p data-hk="000000001100020000009b1050" >We can now see more clearly the direction it's being drawn in. Change it to clockwise to make it additive. Right click <span data-hk="000000001100020000009b1030" class="inline-flex align-middle"><span data-hk="000000001100020000009b1020" class="i-md:arrow-forward "></span></span> <strong data-hk="000000001100020000009b1040" >Reverse contour direction</strong>.</p>
852<p data-hk="000000001100020000009b1070" >You can hold <kbd data-hk="000000001100020000009b1060" class="uno-anmfza not-prose before: " >Space</kbd> to hide the editor UI, preview the glyph with a solid color, and pan around the canvas.</p>
853<!--!$--><figure data-hk="000000001100020000009b1082" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:1001 / 1005"><!--$--><!--/--><img src="/assets/Czy_qnAv.webp" alt="N preview" loading="lazy" draggable="false" class="
854              block
855              w-full
856              corner-shape-superellipse-2
857
858              smooth-shadow-z-2.75
859              smooth-shadow-color-from-hazel-a-1000
860              smooth-shadow-color-to-hazel-a-900
861              dark:smooth-shadow-color-mauve-1000
862
863              transition-transform,shadow
864              spring-duration-[--flip-duration]
865
866              spring-bounce-20
867              select-none
868
869              outline outline-retina -outline-offset-1
870              outline-hazel-50/8
871              outline-mauve-50/4
872                 
873                smooth-shadow-z-2.75
874                cursor-pointer
875
876                corner-radius-8 md:corner-radius-12
877
878                hover:smooth-shadow-z-3 hover:scale-101
879
880                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
881              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><!--/--></figure>
882<p data-hk="000000001100020000009b1110" >Now try drawing <kbd data-hk="000000001100020000009b1090" class="uno-anmfza not-prose before: " >o</kbd> by yourself. Remember that you should do both vertical and horizontal overshoots, so it should be wider than <kbd data-hk="000000001100020000009b1100" class="uno-anmfza not-prose before: " >n</kbd> – in this case, it's about 40 units wider horizontally, according to the Dimensions section in the Glyph info panel on the right.</p>
883<!--!$--><figure data-hk="000000001100020000009b1132" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:1001 / 1005"><!--$--><!--/--><img src="/assets/C91AkR6Q.webp" alt="O preview" loading="lazy" draggable="false" class="
884              block
885              w-full
886              corner-shape-superellipse-2
887
888              smooth-shadow-z-2.75
889              smooth-shadow-color-from-hazel-a-1000
890              smooth-shadow-color-to-hazel-a-900
891              dark:smooth-shadow-color-mauve-1000
892
893              transition-transform,shadow
894              spring-duration-[--flip-duration]
895
896              spring-bounce-20
897              select-none
898
899              outline outline-retina -outline-offset-1
900              outline-hazel-50/8
901              outline-mauve-50/4
902                 
903                smooth-shadow-z-2.75
904                cursor-pointer
905
906                corner-radius-8 md:corner-radius-12
907
908                hover:smooth-shadow-z-3 hover:scale-101
909
910                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
911              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><figcaption data-hk="000000001100020000009b11340" class="
912              text-hazel-500 dark:text-mauve-500 
913
914              px-5 py-2 md:p-0
915              flex flex-col gap-2
916              my-0
917             col-aside" style=""><!--$--><!--/--><!--$--><span data-hk="000000001100020000009b113420" class="line-height-160% [--divider-margin:1rem] [&amp;>*]:text-hazel-500 [&amp;>*]:dark:text-mauve-500 [&amp;>*]:my-4 [&amp;>*:first-child]:mt-0 [&amp;>*:last-child]:mb-0 [&amp;_a]:underline [&amp;_a]:font-500 [&amp;_a]:text-[--prose-links]"><p data-hk="000000001100020000009b1120" >I did some mining off-camera because the n glyph looked rough lol.</p></span><!--/--><!--$--><!--/--></figcaption><!--/--></figure>
918<h1 data-hk="000000001100020000009b1140" id="side-bearings" >Side bearings</h1>
919<p data-hk="000000001100020000009b1160" >Notice how when we draw glyphs we reserve some space on either side of them so they don't scrape against each other.
920That space is what's called the <strong data-hk="000000001100020000009b1150" >side bearings</strong>.</p>
921<p data-hk="000000001100020000009b1180" >A common analogy for this is <em data-hk="000000001100020000009b1170" >volume</em>, the liquid kind. Both the space between glyphs and the glyph's own counterform should have about the same visual volume.</p>
922<p data-hk="000000001100020000009b1210" >The gap on the right side of <kbd data-hk="000000001100020000009b1190" class="uno-anmfza not-prose before: " >r</kbd> has more space for volume than, say, <kbd data-hk="000000001100020000009b1200" class="uno-anmfza not-prose before: " >q</kbd>, so we have to take that into consideration.</p>
923<p data-hk="000000001100020000009b1230" >You <em data-hk="000000001100020000009b1220" >could</em> eyeball it but it's better to follow some sort of guideline to keep things consistent. One of those is the Tracy method, which we'll be using.</p>
924<div data-hk="000000001100020000009b1240" class="
925          not-prose
926          pm-block
927
928          select-none
929
930          w-full corner-radius-12
931          corner-shape-superellipse-2
932
933          text-base text-[--prose-body]
934          [&_p]:my-2
935
936          bg-hazel-100 dark:bg-mauve-900
937
938          p-5 py-4.5
939          my-[--track-prose-margin]
940
941          col-content-bleed
942
943
944          flex flex-col gap-y-8
945        
946          md:-mb-3
947        "><section data-hk="000000001100020000009b12410" class="flex flex-col gap-2"><h3 class="text-sm text-hazel-500 dark:text-mauve-500">Diagonals</h3><div class="flex flex-wrap gap-x-8 gap-y-6"><div data-hk="000000001100020000009b124110" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b1241110" class="
948        bg-teal-500   bg-sine bg-sine-to-teal-600   dark:bg-teal-700   dark:bg-sine-to-teal-800
949
950        group/orb
951
952        relative grid place-items-center
953        
954        
955        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
956
957        size-3 rounded-full
958        text-[0.65rem] font-700 leading-none text-white
959
960        bg-sine bg-sine-from-transparent
961
962        spring-bounce-50 spring-duration-300
963        transition-transform,opacity
964        [will-change:transform]
965        transform-gpu
966
967        [font-variant-numeric:tabular-nums]
968         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 4" aria-pressed="false"><span class="
969          h-0.8em 
970          
971          transition-transform,filter,opacity
972          
973          spring-duration-300
974          spring-bounce-50
975
976          scale-50 [filter:blur(1px)]
977
978          group-hover/orb:scale-100 group-hover/orb:[filter:none]
979
980          group-[:not(:hover)]/orb:delay-100
981
982
983          text-shadow
984          
985          text-shadow-color-hazel-800/10
986          dark:text-shadow-color-mauve-800/50
987         opacity-0">4</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>v</p></span><!--$--><span data-hk="000000001100020000009b1241120" class="
988        bg-teal-500   bg-sine bg-sine-to-teal-600   dark:bg-teal-700   dark:bg-sine-to-teal-800
989
990        group/orb
991
992        relative grid place-items-center
993        
994        
995        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
996
997        size-3 rounded-full
998        text-[0.65rem] font-700 leading-none text-white
999
1000        bg-sine bg-sine-from-transparent
1001
1002        spring-bounce-50 spring-duration-300
1003        transition-transform,opacity
1004        [will-change:transform]
1005        transform-gpu
1006
1007        [font-variant-numeric:tabular-nums]
1008         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 4" aria-pressed="false"><span class="
1009          h-0.8em 
1010          
1011          transition-transform,filter,opacity
1012          
1013          spring-duration-300
1014          spring-bounce-50
1015
1016          scale-50 [filter:blur(1px)]
1017
1018          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1019
1020          group-[:not(:hover)]/orb:delay-100
1021
1022
1023          text-shadow
1024          
1025          text-shadow-color-hazel-800/10
1026          dark:text-shadow-color-mauve-800/50
1027         opacity-0">4</span></span><!--/--></div><div data-hk="000000001100020000009b124113" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b1241140" class="
1028        bg-teal-500   bg-sine bg-sine-to-teal-600   dark:bg-teal-700   dark:bg-sine-to-teal-800
1029
1030        group/orb
1031
1032        relative grid place-items-center
1033        
1034        
1035        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1036
1037        size-3 rounded-full
1038        text-[0.65rem] font-700 leading-none text-white
1039
1040        bg-sine bg-sine-from-transparent
1041
1042        spring-bounce-50 spring-duration-300
1043        transition-transform,opacity
1044        [will-change:transform]
1045        transform-gpu
1046
1047        [font-variant-numeric:tabular-nums]
1048         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 4" aria-pressed="false"><span class="
1049          h-0.8em 
1050          
1051          transition-transform,filter,opacity
1052          
1053          spring-duration-300
1054          spring-bounce-50
1055
1056          scale-50 [filter:blur(1px)]
1057
1058          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1059
1060          group-[:not(:hover)]/orb:delay-100
1061
1062
1063          text-shadow
1064          
1065          text-shadow-color-hazel-800/10
1066          dark:text-shadow-color-mauve-800/50
1067         opacity-0">
10674</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>w</p></span><!--$--><span data-hk="000000001100020000009b1241150" class="
1068        bg-teal-500   bg-sine bg-sine-to-teal-600   dark:bg-teal-700   dark:bg-sine-to-teal-800
1069
1070        group/orb
1071
1072        relative grid place-items-center
1073        
1074        
1075        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1076
1077        size-3 rounded-full
1078        text-[0.65rem] font-700 leading-none text-white
1079
1080        bg-sine bg-sine-from-transparent
1081
1082        spring-bounce-50 spring-duration-300
1083        transition-transform,opacity
1084        [will-change:transform]
1085        transform-gpu
1086
1087        [font-variant-numeric:tabular-nums]
1088         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 4" aria-pressed="false"><span class="
1089          h-0.8em 
1090          
1091          transition-transform,filter,opacity
1092          
1093          spring-duration-300
1094          spring-bounce-50
1095
1096          scale-50 [filter:blur(1px)]
1097
1098          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1099
1100          group-[:not(:hover)]/orb:delay-100
1101
1102
1103          text-shadow
1104          
1105          text-shadow-color-hazel-800/10
1106          dark:text-shadow-color-mauve-800/50
1107         opacity-0">4</span></span><!--/--></div><div data-hk="000000001100020000009b124116" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b1241170" class="
1108        bg-teal-500   bg-sine bg-sine-to-teal-600   dark:bg-teal-700   dark:bg-sine-to-teal-800
1109
1110        group/orb
1111
1112        relative grid place-items-center
1113        
1114        
1115        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1116
1117        size-3 rounded-full
1118        text-[0.65rem] font-700 leading-none text-white
1119
1120        bg-sine bg-sine-from-transparent
1121
1122        spring-bounce-50 spring-duration-300
1123        transition-transform,opacity
1124        [will-change:transform]
1125        transform-gpu
1126
1127        [font-variant-numeric:tabular-nums]
1128         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 4" aria-pressed="false"><span class="
1129          h-0.8em 
1130          
1131          transition-transform,filter,opacity
1132          
1133          spring-duration-300
1134          spring-bounce-50
1135
1136          scale-50 [filter:blur(1px)]
1137
1138          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1139
1140          group-[:not(:hover)]/orb:delay-100
1141
1142
1143          text-shadow
1144          
1145          text-shadow-color-hazel-800/10
1146          dark:text-shadow-color-mauve-800/50
1147         opacity-0">4</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>x</p></span><!--$--><span data-hk="000000001100020000009b1241180" class="
1148        bg-teal-500   bg-sine bg-sine-to-teal-600   dark:bg-teal-700   dark:bg-sine-to-teal-800
1149
1150        group/orb
1151
1152        relative grid place-items-center
1153        
1154        
1155        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1156
1157        size-3 rounded-full
1158        text-[0.65rem] font-700 leading-none text-white
1159
1160        bg-sine bg-sine-from-transparent
1161
1162        spring-bounce-50 spring-duration-300
1163        transition-transform,opacity
1164        [will-change:transform]
1165        transform-gpu
1166
1167        [font-variant-numeric:tabular-nums]
1168         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 4" aria-pressed="false"><span class="
1169          h-0.8em 
1170          
1171          transition-transform,filter,opacity
1172          
1173          spring-duration-300
1174          spring-bounce-50
1175
1176          scale-50 [filter:blur(1px)]
1177
1178          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1179
1180          group-[:not(:hover)]/orb:delay-100
1181
1182
1183          text-shadow
1184          
1185          text-shadow-color-hazel-800/10
1186          dark:text-shadow-color-mauve-800/50
1187         opacity-0">
11874</span></span><!--/--></div><div data-hk="000000001100020000009b124119" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b12411a100" class="
1188        bg-teal-500   bg-sine bg-sine-to-teal-600   dark:bg-teal-700   dark:bg-sine-to-teal-800
1189
1190        group/orb
1191
1192        relative grid place-items-center
1193        
1194        
1195        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1196
1197        size-3 rounded-full
1198        text-[0.65rem] font-700 leading-none text-white
1199
1200        bg-sine bg-sine-from-transparent
1201
1202        spring-bounce-50 spring-duration-300
1203        transition-transform,opacity
1204        [will-change:transform]
1205        transform-gpu
1206
1207        [font-variant-numeric:tabular-nums]
1208         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 4" aria-pressed="false"><span class="
1209          h-0.8em 
1210          
1211          transition-transform,filter,opacity
1212          
1213          spring-duration-300
1214          spring-bounce-50
1215
1216          scale-50 [filter:blur(1px)]
1217
1218          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1219
1220          group-[:not(:hover)]/orb:delay-100
1221
1222
1223          text-shadow
1224          
1225          text-shadow-color-hazel-800/10
1226          dark:text-shadow-color-mauve-800/50
1227         opacity-0">4</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>y</p></span><!--$--><span data-hk="000000001100020000009b12411a110" class="
1228        bg-teal-500   bg-sine bg-sine-to-teal-600   dark:bg-teal-700   dark:bg-sine-to-teal-800
1229
1230        group/orb
1231
1232        relative grid place-items-center
1233        
1234        
1235        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1236
1237        size-3 rounded-full
1238        text-[0.65rem] font-700 leading-none text-white
1239
1240        bg-sine bg-sine-from-transparent
1241
1242        spring-bounce-50 spring-duration-300
1243        transition-transform,opacity
1244        [will-change:transform]
1245        transform-gpu
1246
1247        [font-variant-numeric:tabular-nums]
1248         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 4" aria-pressed="false"><span class="
1249          h-0.8em 
1250          
1251          transition-transform,filter,opacity
1252          
1253          spring-duration-300
1254          spring-bounce-50
1255
1256          scale-50 [filter:blur(1px)]
1257
1258          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1259
1260          group-[:not(:hover)]/orb:delay-100
1261
1262
1263          text-shadow
1264          
1265          text-shadow-color-hazel-800/10
1266          dark:text-shadow-color-mauve-800/50
1267         opacity-0">4</span></span><!--/--></div></div></section><section data-hk="000000001100020000009b12412" class="flex flex-col gap-2"><h3 class="text-sm text-hazel-500 dark:text-mauve-500">Short vertical stems</h3><div class="flex flex-wrap gap-x-8 gap-y-6"><div data-hk="000000001100020000009b124130" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b1241310" class="
1268        bg-pink-500   bg-sine bg-sine-to-pink-600   dark:bg-pink-700   dark:bg-sine-to-pink-800
1269
1270        group/orb
1271
1272        relative grid place-items-center
1273        
1274        
1275        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1276
1277        size-3 rounded-full
1278        text-[0.65rem] font-700 leading-none text-white
1279
1280        bg-sine bg-sine-from-transparent
1281
1282        spring-bounce-50 spring-duration-300
1283        transition-transform,opacity
1284        [will-change:transform]
1285        transform-gpu
1286
1287        [font-variant-numeric:tabular-nums]
1288         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 1" aria-pressed="false"><span class="
1289          h-0.8em 
1290          
1291          transition-transform,filter,opacity
1292          
1293          spring-duration-300
1294          spring-bounce-50
1295
1296          scale-50 [filter:blur(1px)]
1297
1298          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1299
1300          group-[:not(:hover)]/orb:delay-100
1301
1302
1303          text-shadow
1304          
1305          text-shadow-color-hazel-800/10
1306          dark:text-shadow-color-mauve-800/50
1307         opacity-0">1</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>r</p></span><!--$--><span data-hk="000000001100020000009b1241320" class="
1308        bg-teal-500   bg-sine bg-sine-to-teal-600   dark:bg-teal-700   dark:bg-sine-to-teal-800
1309
1310        group/orb
1311
1312        relative grid place-items-center
1313        
1314        
1315        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1316
1317        size-3 rounded-full
1318        text-[0.65rem] font-700 leading-none text-white
1319
1320        bg-sine bg-sine-from-transparent
1321
1322        spring-bounce-50 spring-duration-300
1323        transition-transform,opacity
1324        [will-change:transform]
1325        transform-gpu
1326
1327        [font-variant-numeric:tabular-nums]
1328         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 4" aria-pressed="false"><span class="
1329          h-0.8em 
1330          
1331          transition-transform,filter,opacity
1332          
1333          spring-duration-300
1334          spring-bounce-50
1335
1336          scale-50 [filter:blur(1px)]
1337
1338          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1339
1340          group-[:not(:hover)]/orb:delay-100
1341
1342
1343          text-shadow
1344          
1345          text-shadow-color-hazel-800/10
1346          dark:text-shadow-color-mauve-800/50
1347         opacity-0">
13474</span></span><!--/--></div><div data-hk="000000001100020000009b124133" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b1241340" class="
1348        bg-pink-500   bg-sine bg-sine-to-pink-600   dark:bg-pink-700   dark:bg-sine-to-pink-800
1349
1350        group/orb
1351
1352        relative grid place-items-center
1353        
1354        
1355        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1356
1357        size-3 rounded-full
1358        text-[0.65rem] font-700 leading-none text-white
1359
1360        bg-sine bg-sine-from-transparent
1361
1362        spring-bounce-50 spring-duration-300
1363        transition-transform,opacity
1364        [will-change:transform]
1365        transform-gpu
1366
1367        [font-variant-numeric:tabular-nums]
1368         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 1" aria-pressed="false"><span class="
1369          h-0.8em 
1370          
1371          transition-transform,filter,opacity
1372          
1373          spring-duration-300
1374          spring-bounce-50
1375
1376          scale-50 [filter:blur(1px)]
1377
1378          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1379
1380          group-[:not(:hover)]/orb:delay-100
1381
1382
1383          text-shadow
1384          
1385          text-shadow-color-hazel-800/10
1386          dark:text-shadow-color-mauve-800/50
1387         opacity-0">1</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>m</p></span><!--$--><span data-hk="000000001100020000009b1241350" class="
1388        bg-indigo-500 bg-sine bg-sine-to-indigo-600 dark:bg-indigo-700 dark:bg-sine-to-indigo-800
1389
1390        group/orb
1391
1392        relative grid place-items-center
1393        
1394        
1395        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1396
1397        size-3 rounded-full
1398        text-[0.65rem] font-700 leading-none text-white
1399
1400        bg-sine bg-sine-from-transparent
1401
1402        spring-bounce-50 spring-duration-300
1403        transition-transform,opacity
1404        [will-change:transform]
1405        transform-gpu
1406
1407        [font-variant-numeric:tabular-nums]
1408         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 2" aria-pressed="false"><span class="
1409          h-0.8em 
1410          
1411          transition-transform,filter,opacity
1412          
1413          spring-duration-300
1414          spring-bounce-50
1415
1416          scale-50 [filter:blur(1px)]
1417
1418          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1419
1420          group-[:not(:hover)]/orb:delay-100
1421
1422
1423          text-shadow
1424          
1425          text-shadow-color-hazel-800/10
1426          dark:text-shadow-color-mauve-800/50
1427         opacity-0">2</span></span><!--/--></div><div data-hk="000000001100020000009b124136" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b1241370" class="
1428        bg-pink-500   bg-sine bg-sine-to-pink-600   dark:bg-pink-700   dark:bg-sine-to-pink-800
1429
1430        group/orb
1431
1432        relative grid place-items-center
1433        
1434        
1435        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1436
1437        size-3 rounded-full
1438        text-[0.65rem] font-700 leading-none text-white
1439
1440        bg-sine bg-sine-from-transparent
1441
1442        spring-bounce-50 spring-duration-300
1443        transition-transform,opacity
1444        [will-change:transform]
1445        transform-gpu
1446
1447        [font-variant-numeric:tabular-nums]
1448         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 1" aria-pressed="false"><span class="
1449          h-0.8em 
1450          
1451          transition-transform,filter,opacity
1452          
1453          spring-duration-300
1454          spring-bounce-50
1455
1456          scale-50 [filter:blur(1px)]
1457
1458          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1459
1460          group-[:not(:hover)]/orb:delay-100
1461
1462
1463          text-shadow
1464          
1465          text-shadow-color-hazel-800/10
1466          dark:text-shadow-color-mauve-800/50
1467         opacity-0">1</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>j</p></span><!--$--><span data-hk="000000001100020000009b1241380" class="
1468        bg-pink-500   bg-sine bg-sine-to-pink-600   dark:bg-pink-700   dark:bg-sine-to-pink-800
1469
1470        group/orb
1471
1472        relative grid place-items-center
1473        
1474        
1475        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1476
1477        size-3 rounded-full
1478        text-[0.65rem] font-700 leading-none text-white
1479
1480        bg-sine bg-sine-from-transparent
1481
1482        spring-bounce-50 spring-duration-300
1483        transition-transform,opacity
1484        [will-change:transform]
1485        transform-gpu
1486
1487        [font-variant-numeric:tabular-nums]
1488         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 1" aria-pressed="false"><span class="
1489          h-0.8em 
1490          
1491          transition-transform,filter,opacity
1492          
1493          spring-duration-300
1494          spring-bounce-50
1495
1496          scale-50 [filter:blur(1px)]
1497
1498          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1499
1500          group-[:not(:hover)]/orb:delay-100
1501
1502
1503          text-shadow
1504          
1505          text-shadow-color-hazel-800/10
1506          dark:text-shadow-color-mauve-800/50
1507         opacity-0">1</span></span><!--/--></div><div data-hk="000000001100020000009b124139" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b12413a100" class="
1508        bg-indigo-500 bg-sine bg-sine-to-indigo-600 dark:bg-indigo-700 dark:bg-sine-to-indigo-800
1509
1510        group/orb
1511
1512        relative grid place-items-center
1513        
1514        
1515        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1516
1517        size-3 rounded-full
1518        text-[0.65rem] font-700 leading-none text-white
1519
1520        bg-sine bg-sine-from-transparent
1521
1522        spring-bounce-50 spring-duration-300
1523        transition-transform,opacity
1524        [will-change:transform]
1525        transform-gpu
1526
1527        [font-variant-numeric:tabular-nums]
1528         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 2" aria-pressed="false"><span class="
1529          h-0.8em 
1530          
1531          transition-transform,filter,opacity
1532          
1533          spring-duration-300
1534          spring-bounce-50
1535
1536          scale-50 [filter:blur(1px)]
1537
1538          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1539
1540          group-[:not(:hover)]/orb:delay-100
1541
1542
1543          text-shadow
1544          
1545          text-shadow-color-hazel-800/10
1546          dark:text-shadow-color-mauve-800/50
1547         opacity-0">2</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>u</p></span><!--$--><span data-hk="000000001100020000009b12413a110" class="
1548        bg-indigo-500 bg-sine bg-sine-to-indigo-600 dark:bg-indigo-700 dark:bg-sine-to-indigo-800
1549
1550        group/orb
1551
1552        relative grid place-items-center
1553        
1554        
1555        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1556
1557        size-3 rounded-full
1558        text-[0.65rem] font-700 leading-none text-white
1559
1560        bg-sine bg-sine-from-transparent
1561
1562        spring-bounce-50 spring-duration-300
1563        transition-transform,opacity
1564        [will-change:transform]
1565        transform-gpu
1566
1567        [font-variant-numeric:tabular-nums]
1568         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 2" aria-pressed="false"><span class="
1569          h-0.8em 
1570          
1571          transition-transform,filter,opacity
1572          
1573          spring-duration-300
1574          spring-bounce-50
1575
1576          scale-50 [filter:blur(1px)]
1577
1578          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1579
1580          group-[:not(:hover)]/orb:delay-100
1581
1582
1583          text-shadow
1584          
1585          text-shadow-color-hazel-800/10
1586          dark:text-shadow-color-mauve-800/50
1587         opacity-0">2</span></span><!--/--></div><div data-hk="000000001100020000009b12413a12" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b12413a130" class="
1588        bg-sky-500    bg-sine bg-sine-to-sky-600    dark:bg-sky-700    dark:bg-sine-to-sky-800
1589
1590        group/orb
1591
1592        relative grid place-items-center
1593        
1594        
1595        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1596
1597        size-3 rounded-full
1598        text-[0.65rem] font-700 leading-none text-white
1599
1600        bg-sine bg-sine-from-transparent
1601
1602        spring-bounce-50 spring-duration-300
1603        transition-transform,opacity
1604        [will-change:transform]
1605        transform-gpu
1606
1607        [font-variant-numeric:tabular-nums]
1608         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 3" aria-pressed="false"><span class="
1609          h-0.8em 
1610          
1611          transition-transform,filter,opacity
1612          
1613          spring-duration-300
1614          spring-bounce-50
1615
1616          scale-50 [filter:blur(1px)]
1617
1618          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1619
1620          group-[:not(:hover)]/orb:delay-100
1621
1622
1623          text-shadow
1624          
1625          text-shadow-color-hazel-800/10
1626          dark:text-shadow-color-mauve-800/50
1627         opacity-0">3</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>i</p></span><!--$--><span data-hk="000000001100020000009b12413a140" class="
1628        bg-pink-500   bg-sine bg-sine-to-pink-600   dark:bg-pink-700   dark:bg-sine-to-pink-800
1629
1630        group/orb
1631
1632        relative grid place-items-center
1633        
1634        
1635        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1636
1637        size-3 rounded-full
1638        text-[0.65rem] font-700 leading-none text-white
1639
1640        bg-sine bg-sine-from-transparent
1641
1642        spring-bounce-50 spring-duration-300
1643        transition-transform,opacity
1644        [will-change:transform]
1645        transform-gpu
1646
1647        [font-variant-numeric:tabular-nums]
1648         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 1" aria-pressed="false"><span class="
1649          h-0.8em 
1650          
1651          transition-transform,filter,opacity
1652          
1653          spring-duration-300
1654          spring-bounce-50
1655
1656          scale-50 [filter:blur(1px)]
1657
1658          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1659
1660          group-[:not(:hover)]/orb:delay-100
1661
1662
1663          text-shadow
1664          
1665          text-shadow-color-hazel-800/10
1666          dark:text-shadow-color-mauve-800/50
1667         opacity-0">1</span></span><!--/--></div></div></section><section data-hk="000000001100020000009b12414" class="flex flex-col gap-2"><h3 class="text-sm text-hazel-500 dark:text-mauve-500">Tall vertical stems</h3><div class="flex flex-wrap gap-x-8 gap-y-6"><div data-hk="000000001100020000009b124150" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b1241510" class="
1668        bg-pink-500   bg-sine bg-sine-to-pink-600   dark:bg-pink-700   dark:bg-sine-to-pink-800
1669
1670        group/orb
1671
1672        relative grid place-items-center
1673        
1674        
1675        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1676
1677        size-3 rounded-full
1678        text-[0.65rem] font-700 leading-none text-white
1679
1680        bg-sine bg-sine-from-transparent
1681
1682        spring-bounce-50 spring-duration-300
1683        transition-transform,opacity
1684        [will-change:transform]
1685        transform-gpu
1686
1687        [font-variant-numeric:tabular-nums]
1688         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 1" aria-pressed="false"><span class="
1689          h-0.8em 
1690          
1691          transition-transform,filter,opacity
1692          
1693          spring-duration-300
1694          spring-bounce-50
1695
1696          scale-50 [filter:blur(1px)]
1697
1698          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1699
1700          group-[:not(:hover)]/orb:delay-100
1701
1702
1703          text-shadow
1704          
1705          text-shadow-color-hazel-800/10
1706          dark:text-shadow-color-mauve-800/50
1707         opacity-0">1</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>
1707b</p></span><!--$--><span data-hk="000000001100020000009b1241520" class="
1708        bg-lime-500   bg-sine bg-sine-to-lime-600   dark:bg-lime-700   dark:bg-sine-to-lime-800
1709
1710        group/orb
1711
1712        relative grid place-items-center
1713        
1714        
1715        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1716
1717        size-3 rounded-full
1718        text-[0.65rem] font-700 leading-none text-white
1719
1720        bg-sine bg-sine-from-transparent
1721
1722        spring-bounce-50 spring-duration-300
1723        transition-transform,opacity
1724        [will-change:transform]
1725        transform-gpu
1726
1727        [font-variant-numeric:tabular-nums]
1728         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 5" aria-pressed="false"><span class="
1729          h-0.8em 
1730          
1731          transition-transform,filter,opacity
1732          
1733          spring-duration-300
1734          spring-bounce-50
1735
1736          scale-50 [filter:blur(1px)]
1737
1738          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1739
1740          group-[:not(:hover)]/orb:delay-100
1741
1742
1743          text-shadow
1744          
1745          text-shadow-color-hazel-800/10
1746          dark:text-shadow-color-mauve-800/50
1747         opacity-0">5</span></span><!--/--></div><div data-hk="000000001100020000009b124153" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b1241540" class="
1748        bg-sky-500    bg-sine bg-sine-to-sky-600    dark:bg-sky-700    dark:bg-sine-to-sky-800
1749
1750        group/orb
1751
1752        relative grid place-items-center
1753        
1754        
1755        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1756
1757        size-3 rounded-full
1758        text-[0.65rem] font-700 leading-none text-white
1759
1760        bg-sine bg-sine-from-transparent
1761
1762        spring-bounce-50 spring-duration-300
1763        transition-transform,opacity
1764        [will-change:transform]
1765        transform-gpu
1766
1767        [font-variant-numeric:tabular-nums]
1768         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 3" aria-pressed="false"><span class="
1769          h-0.8em 
1770          
1771          transition-transform,filter,opacity
1772          
1773          spring-duration-300
1774          spring-bounce-50
1775
1776          scale-50 [filter:blur(1px)]
1777
1778          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1779
1780          group-[:not(:hover)]/orb:delay-100
1781
1782
1783          text-shadow
1784          
1785          text-shadow-color-hazel-800/10
1786          dark:text-shadow-color-mauve-800/50
1787         opacity-0">3</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>p</p></span><!--$--><span data-hk="000000001100020000009b1241550" class="
1788        bg-lime-500   bg-sine bg-sine-to-lime-600   dark:bg-lime-700   dark:bg-sine-to-lime-800
1789
1790        group/orb
1791
1792        relative grid place-items-center
1793        
1794        
1795        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1796
1797        size-3 rounded-full
1798        text-[0.65rem] font-700 leading-none text-white
1799
1800        bg-sine bg-sine-from-transparent
1801
1802        spring-bounce-50 spring-duration-300
1803        transition-transform,opacity
1804        [will-change:transform]
1805        transform-gpu
1806
1807        [font-variant-numeric:tabular-nums]
1808         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 5" aria-pressed="false"><span class="
1809          h-0.8em 
1810          
1811          transition-transform,filter,opacity
1812          
1813          spring-duration-300
1814          spring-bounce-50
1815
1816          scale-50 [filter:blur(1px)]
1817
1818          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1819
1820          group-[:not(:hover)]/orb:delay-100
1821
1822
1823          text-shadow
1824          
1825          text-shadow-color-hazel-800/10
1826          dark:text-shadow-color-mauve-800/50
1827         opacity-0">5</span></span><!--/--></div><div data-hk="000000001100020000009b124156" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b1241570" class="
1828        bg-sky-500    bg-sine bg-sine-to-sky-600    dark:bg-sky-700    dark:bg-sine-to-sky-800
1829
1830        group/orb
1831
1832        relative grid place-items-center
1833        
1834        
1835        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1836
1837        size-3 rounded-full
1838        text-[0.65rem] font-700 leading-none text-white
1839
1840        bg-sine bg-sine-from-transparent
1841
1842        spring-bounce-50 spring-duration-300
1843        transition-transform,opacity
1844        [will-change:transform]
1845        transform-gpu
1846
1847        [font-variant-numeric:tabular-nums]
1848         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 3" aria-pressed="false"><span class="
1849          h-0.8em 
1850          
1851          transition-transform,filter,opacity
1852          
1853          spring-duration-300
1854          spring-bounce-50
1855
1856          scale-50 [filter:blur(1px)]
1857
1858          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1859
1860          group-[:not(:hover)]/orb:delay-100
1861
1862
1863          text-shadow
1864          
1865          text-shadow-color-hazel-800/10
1866          dark:text-shadow-color-mauve-800/50
1867         opacity-0">3</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>k</p></span><!--$--><span data-hk="000000001100020000009b1241580" class="
1868        bg-teal-500   bg-sine bg-sine-to-teal-600   dark:bg-teal-700   dark:bg-sine-to-teal-800
1869
1870        group/orb
1871
1872        relative grid place-items-center
1873        
1874        
1875        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1876
1877        size-3 rounded-full
1878        text-[0.65rem] font-700 leading-none text-white
1879
1880        bg-sine bg-sine-from-transparent
1881
1882        spring-bounce-50 spring-duration-300
1883        transition-transform,opacity
1884        [will-change:transform]
1885        transform-gpu
1886
1887        [font-variant-numeric:tabular-nums]
1888         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 4" aria-pressed="false"><span class="
1889          h-0.8em 
1890          
1891          transition-transform,filter,opacity
1892          
1893          spring-duration-300
1894          spring-bounce-50
1895
1896          scale-50 [filter:blur(1px)]
1897
1898          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1899
1900          group-[:not(:hover)]/orb:delay-100
1901
1902
1903          text-shadow
1904          
1905          text-shadow-color-hazel-800/10
1906          dark:text-shadow-color-mauve-800/50
1907         opacity-0">
19074</span></span><!--/--></div><div data-hk="000000001100020000009b124159" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b12415a100" class="
1908        bg-sky-500    bg-sine bg-sine-to-sky-600    dark:bg-sky-700    dark:bg-sine-to-sky-800
1909
1910        group/orb
1911
1912        relative grid place-items-center
1913        
1914        
1915        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1916
1917        size-3 rounded-full
1918        text-[0.65rem] font-700 leading-none text-white
1919
1920        bg-sine bg-sine-from-transparent
1921
1922        spring-bounce-50 spring-duration-300
1923        transition-transform,opacity
1924        [will-change:transform]
1925        transform-gpu
1926
1927        [font-variant-numeric:tabular-nums]
1928         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 3" aria-pressed="false"><span class="
1929          h-0.8em 
1930          
1931          transition-transform,filter,opacity
1932          
1933          spring-duration-300
1934          spring-bounce-50
1935
1936          scale-50 [filter:blur(1px)]
1937
1938          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1939
1940          group-[:not(:hover)]/orb:delay-100
1941
1942
1943          text-shadow
1944          
1945          text-shadow-color-hazel-800/10
1946          dark:text-shadow-color-mauve-800/50
1947         opacity-0">3</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>l</p></span><!--$--><span data-hk="000000001100020000009b12415a110" class="
1948        bg-indigo-500 bg-sine bg-sine-to-indigo-600 dark:bg-indigo-700 dark:bg-sine-to-indigo-800
1949
1950        group/orb
1951
1952        relative grid place-items-center
1953        
1954        
1955        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1956
1957        size-3 rounded-full
1958        text-[0.65rem] font-700 leading-none text-white
1959
1960        bg-sine bg-sine-from-transparent
1961
1962        spring-bounce-50 spring-duration-300
1963        transition-transform,opacity
1964        [will-change:transform]
1965        transform-gpu
1966
1967        [font-variant-numeric:tabular-nums]
1968         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 2" aria-pressed="false"><span class="
1969          h-0.8em 
1970          
1971          transition-transform,filter,opacity
1972          
1973          spring-duration-300
1974          spring-bounce-50
1975
1976          scale-50 [filter:blur(1px)]
1977
1978          group-hover/orb:scale-100 group-hover/orb:[filter:none]
1979
1980          group-[:not(:hover)]/orb:delay-100
1981
1982
1983          text-shadow
1984          
1985          text-shadow-color-hazel-800/10
1986          dark:text-shadow-color-mauve-800/50
1987         opacity-0">2</span></span><!--/--></div><div data-hk="000000001100020000009b12415a12" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b12415a130" class="
1988        bg-sky-500    bg-sine bg-sine-to-sky-600    dark:bg-sky-700    dark:bg-sine-to-sky-800
1989
1990        group/orb
1991
1992        relative grid place-items-center
1993        
1994        
1995        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
1996
1997        size-3 rounded-full
1998        text-[0.65rem] font-700 leading-none text-white
1999
2000        bg-sine bg-sine-from-transparent
2001
2002        spring-bounce-50 spring-duration-300
2003        transition-transform,opacity
2004        [will-change:transform]
2005        transform-gpu
2006
2007        [font-variant-numeric:tabular-nums]
2008         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 3" aria-pressed="false"><span class="
2009          h-0.8em 
2010          
2011          transition-transform,filter,opacity
2012          
2013          spring-duration-300
2014          spring-bounce-50
2015
2016          scale-50 [filter:blur(1px)]
2017
2018          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2019
2020          group-[:not(:hover)]/orb:delay-100
2021
2022
2023          text-shadow
2024          
2025          text-shadow-color-hazel-800/10
2026          dark:text-shadow-color-mauve-800/50
2027         opacity-0">3</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>h</p></span><!--$--><span data-hk="000000001100020000009b12415a140" class="
2028        bg-indigo-500 bg-sine bg-sine-to-indigo-600 dark:bg-indigo-700 dark:bg-sine-to-indigo-800
2029
2030        group/orb
2031
2032        relative grid place-items-center
2033        
2034        
2035        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2036
2037        size-3 rounded-full
2038        text-[0.65rem] font-700 leading-none text-white
2039
2040        bg-sine bg-sine-from-transparent
2041
2042        spring-bounce-50 spring-duration-300
2043        transition-transform,opacity
2044        [will-change:transform]
2045        transform-gpu
2046
2047        [font-variant-numeric:tabular-nums]
2048         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 2" aria-pressed="false"><span class="
2049          h-0.8em 
2050          
2051          transition-transform,filter,opacity
2052          
2053          spring-duration-300
2054          spring-bounce-50
2055
2056          scale-50 [filter:blur(1px)]
2057
2058          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2059
2060          group-[:not(:hover)]/orb:delay-100
2061
2062
2063          text-shadow
2064          
2065          text-shadow-color-hazel-800/10
2066          dark:text-shadow-color-mauve-800/50
2067         opacity-0">2</span></span><!--/--></div></div></section><section data-hk="000000001100020000009b12416" class="flex flex-col gap-2"><h3 class="text-sm text-hazel-500 dark:text-mauve-500">Rounded</h3><div class="flex flex-wrap gap-x-8 gap-y-6"><div data-hk="000000001100020000009b124170" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b1241710" class="
2068        bg-lime-500   bg-sine bg-sine-to-lime-600   dark:bg-lime-700   dark:bg-sine-to-lime-800
2069
2070        group/orb
2071
2072        relative grid place-items-center
2073        
2074        
2075        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2076
2077        size-3 rounded-full
2078        text-[0.65rem] font-700 leading-none text-white
2079
2080        bg-sine bg-sine-from-transparent
2081
2082        spring-bounce-50 spring-duration-300
2083        transition-transform,opacity
2084        [will-change:transform]
2085        transform-gpu
2086
2087        [font-variant-numeric:tabular-nums]
2088         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 5" aria-pressed="false"><span class="
2089          h-0.8em 
2090          
2091          transition-transform,filter,opacity
2092          
2093          spring-duration-300
2094          spring-bounce-50
2095
2096          scale-50 [filter:blur(1px)]
2097
2098          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2099
2100          group-[:not(:hover)]/orb:delay-100
2101
2102
2103          text-shadow
2104          
2105          text-shadow-color-hazel-800/10
2106          dark:text-shadow-color-mauve-800/50
2107         opacity-0">5</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>c</p></span><!--$--><span data-hk="000000001100020000009b1241720" class="
2108        bg-amber-500  bg-sine bg-sine-to-amber-600  dark:bg-amber-700  dark:bg-sine-to-amber-800
2109
2110        group/orb
2111
2112        relative grid place-items-center
2113        
2114        
2115        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2116
2117        size-3 rounded-full
2118        text-[0.65rem] font-700 leading-none text-white
2119
2120        bg-sine bg-sine-from-transparent
2121
2122        spring-bounce-50 spring-duration-300
2123        transition-transform,opacity
2124        [will-change:transform]
2125        transform-gpu
2126
2127        [font-variant-numeric:tabular-nums]
2128         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 6" aria-pressed="false"><span class="
2129          h-0.8em 
2130          
2131          transition-transform,filter,opacity
2132          
2133          spring-duration-300
2134          spring-bounce-50
2135
2136          scale-50 [filter:blur(1px)]
2137
2138          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2139
2140          group-[:not(:hover)]/orb:delay-100
2141
2142
2143          text-shadow
2144          
2145          text-shadow-color-hazel-800/10
2146          dark:text-shadow-color-mauve-800/50
2147         opacity-0">6</span></span><!--/--></div><div data-hk="000000001100020000009b124173" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b1241740" class="
2148        bg-lime-500   bg-sine bg-sine-to-lime-600   dark:bg-lime-700   dark:bg-sine-to-lime-800
2149
2150        group/orb
2151
2152        relative grid place-items-center
2153        
2154        
2155        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2156
2157        size-3 rounded-full
2158        text-[0.65rem] font-700 leading-none text-white
2159
2160        bg-sine bg-sine-from-transparent
2161
2162        spring-bounce-50 spring-duration-300
2163        transition-transform,opacity
2164        [will-change:transform]
2165        transform-gpu
2166
2167        [font-variant-numeric:tabular-nums]
2168         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 5" aria-pressed="false"><span class="
2169          h-0.8em 
2170          
2171          transition-transform,filter,opacity
2172          
2173          spring-duration-300
2174          spring-bounce-50
2175
2176          scale-50 [filter:blur(1px)]
2177
2178          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2179
2180          group-[:not(:hover)]/orb:delay-100
2181
2182
2183          text-shadow
2184          
2185          text-shadow-color-hazel-800/10
2186          dark:text-shadow-color-mauve-800/50
2187         opacity-0">5</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>e</p></span><!--$--><span data-hk="000000001100020000009b1241750" class="
2188        bg-amber-500  bg-sine bg-sine-to-amber-600  dark:bg-amber-700  dark:bg-sine-to-amber-800
2189
2190        group/orb
2191
2192        relative grid place-items-center
2193        
2194        
2195        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2196
2197        size-3 rounded-full
2198        text-[0.65rem] font-700 leading-none text-white
2199
2200        bg-sine bg-sine-from-transparent
2201
2202        spring-bounce-50 spring-duration-300
2203        transition-transform,opacity
2204        [will-change:transform]
2205        transform-gpu
2206
2207        [font-variant-numeric:tabular-nums]
2208         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 6" aria-pressed="false"><span class="
2209          h-0.8em 
2210          
2211          transition-transform,filter,opacity
2212          
2213          spring-duration-300
2214          spring-bounce-50
2215
2216          scale-50 [filter:blur(1px)]
2217
2218          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2219
2220          group-[:not(:hover)]/orb:delay-100
2221
2222
2223          text-shadow
2224          
2225          text-shadow-color-hazel-800/10
2226          dark:text-shadow-color-mauve-800/50
2227         opacity-0">6</span></span><!--/--></div><div data-hk="000000001100020000009b124176" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b1241770" class="
2228        bg-lime-500   bg-sine bg-sine-to-lime-600   dark:bg-lime-700   dark:bg-sine-to-lime-800
2229
2230        group/orb
2231
2232        relative grid place-items-center
2233        
2234        
2235        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2236
2237        size-3 rounded-full
2238        text-[0.65rem] font-700 leading-none text-white
2239
2240        bg-sine bg-sine-from-transparent
2241
2242        spring-bounce-50 spring-duration-300
2243        transition-transform,opacity
2244        [will-change:transform]
2245        transform-gpu
2246
2247        [font-variant-numeric:tabular-nums]
2248         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 5" aria-pressed="false"><span class="
2249          h-0.8em 
2250          
2251          transition-transform,filter,opacity
2252          
2253          spring-duration-300
2254          spring-bounce-50
2255
2256          scale-50 [filter:blur(1px)]
2257
2258          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2259
2260          group-[:not(:hover)]/orb:delay-100
2261
2262
2263          text-shadow
2264          
2265          text-shadow-color-hazel-800/10
2266          dark:text-shadow-color-mauve-800/50
2267         opacity-0">5</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>q</p></span><!--$--><span data-hk="000000001100020000009b1241780" class="
2268        bg-pink-500   bg-sine bg-sine-to-pink-600   dark:bg-pink-700   dark:bg-sine-to-pink-800
2269
2270        group/orb
2271
2272        relative grid place-items-center
2273        
2274        
2275        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2276
2277        size-3 rounded-full
2278        text-[0.65rem] font-700 leading-none text-white
2279
2280        bg-sine bg-sine-from-transparent
2281
2282        spring-bounce-50 spring-duration-300
2283        transition-transform,opacity
2284        [will-change:transform]
2285        transform-gpu
2286
2287        [font-variant-numeric:tabular-nums]
2288         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 1" aria-pressed="false"><span class="
2289          h-0.8em 
2290          
2291          transition-transform,filter,opacity
2292          
2293          spring-duration-300
2294          spring-bounce-50
2295
2296          scale-50 [filter:blur(1px)]
2297
2298          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2299
2300          group-[:not(:hover)]/orb:delay-100
2301
2302
2303          text-shadow
2304          
2305          text-shadow-color-hazel-800/10
2306          dark:text-shadow-color-mauve-800/50
2307         opacity-0">1</span></span><!--/--></div><div data-hk="000000001100020000009b124179" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b12417a100" class="
2308        bg-lime-500   bg-sine bg-sine-to-lime-600   dark:bg-lime-700   dark:bg-sine-to-lime-800
2309
2310        group/orb
2311
2312        relative grid place-items-center
2313        
2314        
2315        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2316
2317        size-3 rounded-full
2318        text-[0.65rem] font-700 leading-none text-white
2319
2320        bg-sine bg-sine-from-transparent
2321
2322        spring-bounce-50 spring-duration-300
2323        transition-transform,opacity
2324        [will-change:transform]
2325        transform-gpu
2326
2327        [font-variant-numeric:tabular-nums]
2328         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 5" aria-pressed="false"><span class="
2329          h-0.8em 
2330          
2331          transition-transform,filter,opacity
2332          
2333          spring-duration-300
2334          spring-bounce-50
2335
2336          scale-50 [filter:blur(1px)]
2337
2338          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2339
2340          group-[:not(:hover)]/orb:delay-100
2341
2342
2343          text-shadow
2344          
2345          text-shadow-color-hazel-800/10
2346          dark:text-shadow-color-mauve-800/50
2347         opacity-0">5</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>d</p></span><!--$--><span data-hk="000000001100020000009b12417a110" class="
2348        bg-pink-500   bg-sine bg-sine-to-pink
2348-600   dark:bg-pink-700   dark:bg-sine-to-pink-800
2349
2350        group/orb
2351
2352        relative grid place-items-center
2353        
2354        
2355        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2356
2357        size-3 rounded-full
2358        text-[0.65rem] font-700 leading-none text-white
2359
2360        bg-sine bg-sine-from-transparent
2361
2362        spring-bounce-50 spring-duration-300
2363        transition-transform,opacity
2364        [will-change:transform]
2365        transform-gpu
2366
2367        [font-variant-numeric:tabular-nums]
2368         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing 1" aria-pressed="false"><span class="
2369          h-0.8em 
2370          
2371          transition-transform,filter,opacity
2372          
2373          spring-duration-300
2374          spring-bounce-50
2375
2376          scale-50 [filter:blur(1px)]
2377
2378          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2379
2380          group-[:not(:hover)]/orb:delay-100
2381
2382
2383          text-shadow
2384          
2385          text-shadow-color-hazel-800/10
2386          dark:text-shadow-color-mauve-800/50
2387         opacity-0">1</span></span><!--/--></div></div></section><section data-hk="000000001100020000009b12418" class="flex flex-col gap-2"><h3 class="text-sm text-hazel-500 dark:text-mauve-500">Irregulars</h3><div class="flex flex-wrap gap-x-8 gap-y-6"><div data-hk="000000001100020000009b124190" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b1241910" class="
2388        bg-hazel-500  bg-sine bg-sine-to-hazel-600  dark:bg-mauve-500  dark:bg-sine-to-mauve-600
2389
2390        group/orb
2391
2392        relative grid place-items-center
2393        
2394        
2395        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2396
2397        size-3 rounded-full
2398        text-[0.65rem] font-700 leading-none text-white
2399
2400        bg-sine bg-sine-from-transparent
2401
2402        spring-bounce-50 spring-duration-300
2403        transition-transform,opacity
2404        [will-change:transform]
2405        transform-gpu
2406
2407        [font-variant-numeric:tabular-nums]
2408         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing *" aria-pressed="false"><span class="
2409          h-0.8em 
2410          
2411          transition-transform,filter,opacity
2412          
2413          spring-duration-300
2414          spring-bounce-50
2415
2416          scale-50 [filter:blur(1px)]
2417
2418          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2419
2420          group-[:not(:hover)]/orb:delay-100
2421
2422
2423          text-shadow
2424          
2425          text-shadow-color-hazel-800/10
2426          dark:text-shadow-color-mauve-800/50
2427         opacity-0">*</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>g</p></span><!--$--><span data-hk="000000001100020000009b1241920" class="
2428        bg-hazel-500  bg-sine bg-sine-to-hazel-600  dark:bg-mauve-500  dark:bg-sine-to-mauve-600
2429
2430        group/orb
2431
2432        relative grid place-items-center
2433        
2434        
2435        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2436
2437        size-3 rounded-full
2438        text-[0.65rem] font-700 leading-none text-white
2439
2440        bg-sine bg-sine-from-transparent
2441
2442        spring-bounce-50 spring-duration-300
2443        transition-transform,opacity
2444        [will-change:transform]
2445        transform-gpu
2446
2447        [font-variant-numeric:tabular-nums]
2448         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing *" aria-pressed="false"><span class="
2449          h-0.8em 
2450          
2451          transition-transform,filter,opacity
2452          
2453          spring-duration-300
2454          spring-bounce-50
2455
2456          scale-50 [filter:blur(1px)]
2457
2458          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2459
2460          group-[:not(:hover)]/orb:delay-100
2461
2462
2463          text-shadow
2464          
2465          text-shadow-color-hazel-800/10
2466          dark:text-shadow-color-mauve-800/50
2467         opacity-0">*</span></span><!--/--></div><div data-hk="000000001100020000009b124193" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b1241940" class="
2468        bg-hazel-500  bg-sine bg-sine-to-hazel-600  dark:bg-mauve-500  dark:bg-sine-to-mauve-600
2469
2470        group/orb
2471
2472        relative grid place-items-center
2473        
2474        
2475        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2476
2477        size-3 rounded-full
2478        text-[0.65rem] font-700 leading-none text-white
2479
2480        bg-sine bg-sine-from-transparent
2481
2482        spring-bounce-50 spring-duration-300
2483        transition-transform,opacity
2484        [will-change:transform]
2485        transform-gpu
2486
2487        [font-variant-numeric:tabular-nums]
2488         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing *" aria-pressed="false"><span class="
2489          h-0.8em 
2490          
2491          transition-transform,filter,opacity
2492          
2493          spring-duration-300
2494          spring-bounce-50
2495
2496          scale-50 [filter:blur(1px)]
2497
2498          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2499
2500          group-[:not(:hover)]/orb:delay-100
2501
2502
2503          text-shadow
2504          
2505          text-shadow-color-hazel-800/10
2506          dark:text-shadow-color-mauve-800/50
2507         opacity-0">*</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>a</p></span><!--$--><span data-hk="000000001100020000009b1241950" class="
2508        bg-hazel-500  bg-sine bg-sine-to-hazel-600  dark:bg-mauve-500  dark:bg-sine-to-mauve-600
2509
2510        group/orb
2511
2512        relative grid place-items-center
2513        
2514        
2515        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2516
2517        size-3 rounded-full
2518        text-[0.65rem] font-700 leading-none text-white
2519
2520        bg-sine bg-sine-from-transparent
2521
2522        spring-bounce-50 spring-duration-300
2523        transition-transform,opacity
2524        [will-change:transform]
2525        transform-gpu
2526
2527        [font-variant-numeric:tabular-nums]
2528         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing *" aria-pressed="false"><span class="
2529          h-0.8em 
2530          
2531          transition-transform,filter,opacity
2532          
2533          spring-duration-300
2534          spring-bounce-50
2535
2536          scale-50 [filter:blur(1px)]
2537
2538          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2539
2540          group-[:not(:hover)]/orb:delay-100
2541
2542
2543          text-shadow
2544          
2545          text-shadow-color-hazel-800/10
2546          dark:text-shadow-color-mauve-800/50
2547         opacity-0">*</span></span><!--/--></div><div data-hk="000000001100020000009b124196" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b1241970" class="
2548        bg-hazel-500  bg-sine bg-sine-to-hazel-600  dark:bg-mauve-500  dark:bg-sine-to-mauve-600
2549
2550        group/orb
2551
2552        relative grid place-items-center
2553        
2554        
2555        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2556
2557        size-3 rounded-full
2558        text-[0.65rem] font-700 leading-none text-white
2559
2560        bg-sine bg-sine-from-transparent
2561
2562        spring-bounce-50 spring-duration-300
2563        transition-transform,opacity
2564        [will-change:transform]
2565        transform-gpu
2566
2567        [font-variant-numeric:tabular-nums]
2568         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing *" aria-pressed="false"><span class="
2569          h-0.8em 
2570          
2571          transition-transform,filter,opacity
2572          
2573          spring-duration-300
2574          spring-bounce-50
2575
2576          scale-50 [filter:blur(1px)]
2577
2578          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2579
2580          group-[:not(:hover)]/orb:delay-100
2581
2582
2583          text-shadow
2584          
2585          text-shadow-color-hazel-800/10
2586          dark:text-shadow-color-mauve-800/50
2587         opacity-0">*</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>s</p></span><!--$--><span data-hk="000000001100020000009b1241980" class="
2588        bg-hazel-500  bg-sine bg-sine-to-hazel-600  dark:bg-mauve-500  dark:bg-sine-to-mauve-600
2589
2590        group/orb
2591
2592        relative grid place-items-center
2593        
2594        
2595        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2596
2597        size-3 rounded-full
2598        text-[0.65rem] font-700 leading-none text-white
2599
2600        bg-sine bg-sine-from-transparent
2601
2602        spring-bounce-50 spring-duration-300
2603        transition-transform,opacity
2604        [will-change:transform]
2605        transform-gpu
2606
2607        [font-variant-numeric:tabular-nums]
2608         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing *" aria-pressed="false"><span class="
2609          h-0.8em 
2610          
2611          transition-transform,filter,opacity
2612          
2613          spring-duration-300
2614          spring-bounce-50
2615
2616          scale-50 [filter:blur(1px)]
2617
2618          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2619
2620          group-[:not(:hover)]/orb:delay-100
2621
2622
2623          text-shadow
2624          
2625          text-shadow-color-hazel-800/10
2626          dark:text-shadow-color-mauve-800/50
2627         opacity-0">*</span></span><!--/--></div><div data-hk="000000001100020000009b124199" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b12419a100" class="
2628        bg-hazel-500  bg-sine bg-sine-to-hazel-600  dark:bg-mauve-500  dark:bg-sine-to-mauve-600
2629
2630        group/orb
2631
2632        relative grid place-items-center
2633        
2634        
2635        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2636
2637        size-3 rounded-full
2638        text-[0.65rem] font-700 leading-none text-white
2639
2640        bg-sine bg-sine-from-transparent
2641
2642        spring-bounce-50 spring-duration-300
2643        transition-transform,opacity
2644        [will-change:transform]
2645        transform-gpu
2646
2647        [font-variant-numeric:tabular-nums]
2648         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing *" aria-pressed="false"><span class="
2649          h-0.8em 
2650          
2651          transition-transform,filter,opacity
2652          
2653          spring-duration-300
2654          spring-bounce-50
2655
2656          scale-50 [filter:blur(1px)]
2657
2658          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2659
2660          group-[:not(:hover)]/orb:delay-100
2661
2662
2663          text-shadow
2664          
2665          text-shadow-color-hazel-800/10
2666          dark:text-shadow-color-mauve-800/50
2667         opacity-0">*</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>z</p></span><!--$--><span data-hk="000000001100020000009b12419a110" class="
2668        bg-hazel-500  bg-sine bg-sine-to-hazel-600  dark:bg-mauve-500  dark:bg-sine-to-mauve-600
2669
2670        group/orb
2671
2672        relative grid place-items-center
2673        
2674        
2675        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2676
2677        size-3 rounded-full
2678        text-[0.65rem] font-700 leading-none text-white
2679
2680        bg-sine bg-sine-from-transparent
2681
2682        spring-bounce-50 spring-duration-300
2683        transition-transform,opacity
2684        [will-change:transform]
2685        transform-gpu
2686
2687        [font-variant-numeric:tabular-nums]
2688         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing *" aria-pressed="false"><span class="
2689          h-0.8em 
2690          
2691          transition-transform,filter,opacity
2692          
2693          spring-duration-300
2694          spring-bounce-50
2695
2696          scale-50 [filter:blur(1px)]
2697
2698          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2699
2700          group-[:not(:hover)]/orb:delay-100
2701
2702
2703          text-shadow
2704          
2705          text-shadow-color-hazel-800/10
2706          dark:text-shadow-color-mauve-800/50
2707         opacity-0">*</span></span><!--/--></div><div data-hk="000000001100020000009b12419a12" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b12419a130" class="
2708        bg-hazel-500  bg-sine bg-sine-to-hazel-600  dark:bg-mauve-500  dark:bg-sine-to-mauve-600
2709
2710        group/orb
2711
2712        relative grid place-items-center
2713        
2714        
2715        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2716
2717        size-3 rounded-full
2718        text-[0.65rem] font-700 leading-none text-white
2719
2720        bg-sine bg-sine-from-transparent
2721
2722        spring-bounce-50 spring-duration-300
2723        transition-transform,opacity
2724        [will-change:transform]
2725        transform-gpu
2726
2727        [font-variant-numeric:tabular-nums]
2728         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing *" aria-pressed="false"><span class="
2729          h-0.8em 
2730          
2731          transition-transform,filter,opacity
2732          
2733          spring-duration-300
2734          spring-bounce-50
2735
2736          scale-50 [filter:blur(1px)]
2737
2738          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2739
2740          group-[:not(:hover)]/orb:delay-100
2741
2742
2743          text-shadow
2744          
2745          text-shadow-color-hazel-800/10
2746          dark:text-shadow-color-mauve-800/50
2747         opacity-0">*</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>f</p></span><!--$--><span data-hk="000000001100020000009b12419a140" class="
2748        bg-hazel-500  bg-sine bg-sine-to-hazel-600  dark:bg-mauve-500  dark:bg-sine-to-mauve-600
2749
2750        group/orb
2751
2752        relative grid place-items-center
2753        
2754        
2755        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2756
2757        size-3 rounded-full
2758        text-[0.65rem] font-700 leading-none text-white
2759
2760        bg-sine bg-sine-from-transparent
2761
2762        spring-bounce-50 spring-duration-300
2763        transition-transform,opacity
2764        [will-change:transform]
2765        transform-gpu
2766
2767        [font-variant-numeric:tabular-nums]
2768         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing *" aria-pressed="false"><span class="
2769          h-0.8em 
2770          
2771          transition-transform,filter,opacity
2772          
2773          spring-duration-300
2774          spring-bounce-50
2775
2776          scale-50 [filter:blur(1px)]
2777
2778          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2779
2780          group-[:not(:hover)]/orb:delay-100
2781
2782
2783          text-shadow
2784          
2785          text-shadow-color-hazel-800/10
2786          dark:text-shadow-color-mauve-800/50
2787         opacity-0">*</span></span><!--/--></div><div data-hk="000000001100020000009b12419a15" class="flex items-center text-xl leading-none text-black dark:text-mauve-50"><!--$--><span data-hk="000000001100020000009b12419a160" class="
2788        bg-hazel-500  bg-sine bg-sine-to-hazel-600  dark:bg-mauve-500  dark:bg-sine-to-mauve-600
2789
2790        group/orb
2791
2792        relative grid place-items-center
2793        
2794        
2795        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2796
2797        size-3 rounded-full
2798        text-[0.65rem] font-700 leading-none text-white
2799
2800        bg-sine bg-sine-from-transparent
2801
2802        spring-bounce-50 spring-duration-300
2803        transition-transform,opacity
2804        [will-change:transform]
2805        transform-gpu
2806
2807        [font-variant-numeric:tabular-nums]
2808         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing *" aria-pressed="false"><span class="
2809          h-0.8em 
2810          
2811          transition-transform,filter,opacity
2812          
2813          spring-duration-300
2814          spring-bounce-50
2815
2816          scale-50 [filter:blur(1px)]
2817
2818          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2819
2820          group-[:not(:hover)]/orb:delay-100
2821
2822
2823          text-shadow
2824          
2825          text-shadow-color-hazel-800/10
2826          dark:text-shadow-color-mauve-800/50
2827         opacity-0">*</span></span><!--/--><span class="flex items-center justify-center text-center size-1.5em"><p>t</p></span><!--$--><span data-hk="000000001100020000009b12419a170" class="
2828        bg-hazel-500  bg-sine bg-sine-to-hazel-600  dark:bg-mauve-500  dark:bg-sine-to-mauve-600
2829
2830        group/orb
2831
2832        relative grid place-items-center
2833        
2834        
2835        before:content-empty before:absolute before:inset-0 before:scale-150 before:transition-transform before:delay-100 before:[will-change:transform] before:transform-gpu before:rounded-full
2836
2837        size-3 rounded-full
2838        text-[0.65rem] font-700 leading-none text-white
2839
2840        bg-sine bg-sine-from-transparent
2841
2842        spring-bounce-50 spring-duration-300
2843        transition-transform,opacity
2844        [will-change:transform]
2845        transform-gpu
2846
2847        [font-variant-numeric:tabular-nums]
2848         before:scale-300  opacity-20 delay-100 " role="button" tabindex="0" aria-label="Tracy spacing *" aria-pressed="false"><span class="
2849          h-0.8em 
2850          
2851          transition-transform,filter,opacity
2852          
2853          spring-duration-300
2854          spring-bounce-50
2855
2856          scale-50 [filter:blur(1px)]
2857
2858          group-hover/orb:scale-100 group-hover/orb:[filter:none]
2859
2860          group-[:not(:hover)]/orb:delay-100
2861
2862
2863          text-shadow
2864          
2865          text-shadow-color-hazel-800/10
2866          dark:text-shadow-color-mauve-800/50
2867         opacity-0">*</span></span><!--/--></div></div></section></div>
2868<aside data-hk="000000001100020000009b1270" class="r-aside text-md my-[--track-prose-margin] [--divider-margin:1rem] [&amp;>*]:text-hazel-500 [&amp;>*]:dark:text-mauve-500 [&amp;>*]:my-4 [&amp;>*]:line-height-160% [&amp;>*:first-child]:mt-0 [&amp;>*:last-child]:mb-0"><p data-hk="000000001100020000009b1250" >For simplicity's sake, we'll just do lowercase.</p><p data-hk="000000001100020000009b1260" >This grouping is based on the one in Designing Type by Karen Cheng, which you really should buy.</p></aside>
2869<div data-hk="000000001100020000009b1750" class="uno-eqbp8u pm-block not-prose col-content-bleed "><table class="w-full " ><thead data-hk="000000001100020000009b1330" ><tr data-hk="000000001100020000009b1320" ><th data-hk="000000001100020000009b1290" class="w-px whitespace-nowrap !pr-0 " ><span data-hk="000000001100020000009b1280" class="size-5 i-md:tag ml-0.75 -mt-0.5 "></span></th><th data-hk="000000001100020000009b1300" >Description</th><th data-hk="000000001100020000009b1310" >Units</th></tr></thead><tbody data-hk="000000001100020000009b1740" class="[&amp;_tr_td:first-child]:!pr-0 " ><tr data-hk="000000001100020000009b1390" ><td data-hk="000000001100020000009b1350" ><span data-hk="000000001100020000009b1340" class="
2870      bg-pink-500   bg-sine bg-sine-to-pink-600   dark:bg-pink-700   dark:bg-sine-to-pink-800
2871      inline-grid place-items-center
2872      size-6 rounded-full
2873      text-base font-700 leading-none text-white
2874
2875      select-none
2876      
2877      bg-sine-from-transparent
2878
2879      [font-variant-numeric:tabular-nums]
2880      align-middle
2881
2882      text-shadow
2883      
2884      text-shadow-color-hazel-800/10
2885      dark:text-shadow-color-mauve-800/50
2886    ">1</span></td><td data-hk="000000001100020000009b1370" >Same as left side bearing of <kbd data-hk="000000001100020000009b1360" class="uno-anmfza not-prose before: " >n</kbd></td><td data-hk="000000001100020000009b1380" >75</td></tr><tr data-hk="000000001100020000009b1450" ><td data-hk="000000001100020000009b1410" ><span data-hk="000000001100020000009b1400" class="
2887      bg-indigo-500 bg-sine bg-sine-to-indigo-600 dark:bg-indigo-700 dark:bg-sine-to-indigo-800
2888      inline-grid place-items-center
2889      size-6 rounded-full
2890      text-base font-700 leading-none text-white
2891
2892      select-none
2893      
2894      bg-sine-from-transparent
2895
2896      [font-variant-numeric:tabular-nums]
2897      align-middle
2898
2899      text-shadow
2900      
2901      text-shadow-color-hazel-800/10
2902      dark:text-shadow-color-mauve-800/50
2903    ">2</span></td><td data-hk="000000001100020000009b1430" >Same as right side bearing of <kbd data-hk="000000001100020000009b1420" class="uno-anmfza not-prose before: " >n</kbd></td><td data-hk="000000001100020000009b1440" >70</td></tr><tr data-hk="000000001100020000009b1510" ><td data-hk="000000001100020000009b1470" ><span data-hk="000000001100020000009b1460" class="
2904      bg-sky-500    bg-sine bg-sine-to-sky-600    dark:bg-sky-700    dark:bg-sine-to-sky-800
2905      inline-grid place-items-center
2906      size-6 rounded-full
2907      text-base font-700 leading-none text-white
2908
2909      select-none
2910      
2911      bg-sine-from-transparent
2912
2913      [font-variant-numeric:tabular-nums]
2914      align-middle
2915
2916      text-shadow
2917      
2918      text-shadow-color-hazel-800/10
2919      dark:text-shadow-color-mauve-800/50
2920    ">3</span></td><td data-hk="000000001100020000009b1490" >Slightly more than left side bearing of <kbd data-hk="000000001100020000009b1480" class="uno-anmfza not-prose before: " >n</kbd></td><td data-hk="000000001100020000009b1500" >80</td></tr><tr data-hk="000000001100020000009b1560" ><td data-hk="000000001100020000009b1530" ><span data-hk="000000001100020000009b1520" class="
2921      bg-teal-500   bg-sine bg-sine-to-teal-600   dark:bg-teal-700   dark:bg-sine-to-teal-800
2922      inline-grid place-items-center
2923      size-6 rounded-full
2924      text-base font-700 leading-none text-white
2925
2926      select-none
2927      
2928      bg-sine-from-transparent
2929
2930      [font-variant-numeric:tabular-nums]
2931      align-middle
2932
2933      text-shadow
2934      
2935      text-shadow-color-hazel-800/10
2936      dark:text-shadow-color-mauve-800/50
2937    ">4</span></td><td data-hk="000000001100020000009b1540" >Minimum side bearings</td><td data-hk="000000001100020000009b1550" >40</td></tr><tr data-hk="000000001100020000009b1620" ><td data-hk="000000001100020000009b1580" ><span data-hk="000000001100020000009b1570" class="
2938      bg-lime-500   bg-sine bg-sine-to-lime-600   dark:bg-lime-700   dark:bg-sine-to-lime-800
2939      inline-grid place-items-center
2940      size-6 rounded-full
2941      text-base font-700 leading-none text-white
2942
2943      select-none
2944      
2945      bg-sine-from-transparent
2946
2947      [font-variant-numeric:tabular-nums]
2948      align-middle
2949
2950      text-shadow
2951      
2952      text-shadow-color-hazel-800/10
2953      dark:text-shadow-color-mauve-800/50
2954    ">5</span></td><td data-hk="000000001100020000009b1600" >Same side bearings as <kbd data-hk="000000001100020000009b1590" class="uno-anmfza not-prose before: " >o</kbd></td><td data-hk="000000001100020000009b1610" >55</td></tr><tr data-hk="000000001100020000009b1680" >
2954<td data-hk="000000001100020000009b1640" ><span data-hk="000000001100020000009b1630" class="
2955      bg-amber-500  bg-sine bg-sine-to-amber-600  dark:bg-amber-700  dark:bg-sine-to-amber-800
2956      inline-grid place-items-center
2957      size-6 rounded-full
2958      text-base font-700 leading-none text-white
2959
2960      select-none
2961      
2962      bg-sine-from-transparent
2963
2964      [font-variant-numeric:tabular-nums]
2965      align-middle
2966
2967      text-shadow
2968      
2969      text-shadow-color-hazel-800/10
2970      dark:text-shadow-color-mauve-800/50
2971    ">6</span></td><td data-hk="000000001100020000009b1660" >Slightly less than side bearings of <kbd data-hk="000000001100020000009b1650" class="uno-anmfza not-prose before: " >o</kbd></td><td data-hk="000000001100020000009b1670" >50</td></tr><tr data-hk="000000001100020000009b1730" ><td data-hk="000000001100020000009b1700" ><span data-hk="000000001100020000009b1690" class="
2972      bg-hazel-500  bg-sine bg-sine-to-hazel-600  dark:bg-mauve-500  dark:bg-sine-to-mauve-600
2973      inline-grid place-items-center
2974      size-6 rounded-full
2975      text-base font-700 leading-none text-white
2976
2977      select-none
2978      
2979      bg-sine-from-transparent
2980
2981      [font-variant-numeric:tabular-nums]
2982      align-middle
2983
2984      text-shadow
2985      
2986      text-shadow-color-hazel-800/10
2987      dark:text-shadow-color-mauve-800/50
2988    ">*</span></td><td data-hk="000000001100020000009b1710" >Adjusted visually by hand</td><td data-hk="000000001100020000009b1720" class="!pl-5.5 " >—</td></tr></tbody></table></div>
2989<aside data-hk="000000001100020000009b1770" class="r-aside text-md my-[--track-prose-margin] [--divider-margin:1rem] [&amp;>*]:text-hazel-500 [&amp;>*]:dark:text-mauve-500 [&amp;>*]:my-4 [&amp;>*]:line-height-160% [&amp;>*:first-child]:mt-0 [&amp;>*:last-child]:mb-0"><p data-hk="000000001100020000009b1760" >These are the units I ended up picking for Zephyr. You can pick others.</p></aside>
2990<p data-hk="000000001100020000009b1800" >As I alluded to before, <kbd data-hk="000000001100020000009b1780" class="uno-anmfza not-prose before: " >o</kbd> and <kbd data-hk="000000001100020000009b1790" class="uno-anmfza not-prose before: " >n</kbd> are pretty important to nail down before we do the rest of the glyphs.
2991Now we know why: we'll set by eye the units that feel nice and balanced and use those as a base.</p>
2992<p data-hk="000000001100020000009b1830" >Open the Selection Info tab on the right sidebar and tweak the side bearings of <kbd data-hk="000000001100020000009b1810" class="uno-anmfza not-prose before: " >n</kbd> and <kbd data-hk="000000001100020000009b1820" class="uno-anmfza not-prose before: " >o</kbd> until you're happy with the results.</p>
2993<!--!$--><figure data-hk="000000001100020000009b1842" class="not-prose r-sub my-8"><picture class="" style="display:block;grid-column:main-track-l-gutter-edge / -1;aspect-ratio:1698 / 869"><!--$--><!--/--><img src="/assets/BBceHaqV.webp" alt="Setting start point" loading="lazy" draggable="false" class="
2994              block
2995              w-full
2996              corner-shape-superellipse-2
2997
2998              smooth-shadow-z-2.75
2999              smooth-shadow-color-from-hazel-a-1000
3000              smooth-shadow-color-to-hazel-a-900
3001              dark:smooth-shadow-color-mauve-1000
3002
3003              transition-transform,shadow
3004              spring-duration-[--flip-duration]
3005
3006              spring-bounce-20
3007              select-none
3008
3009              outline outline-retina -outline-offset-1
3010              outline-hazel-50/8
3011              outline-mauve-50/4
3012                 
3013                smooth-shadow-z-2.75
3014                cursor-pointer
3015
3016                corner-radius-8 md:corner-radius-12
3017
3018                hover:smooth-shadow-z-3 hover:scale-101
3019
3020                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
3021              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><!--/--></figure>
3022<p data-hk="000000001100020000009b1860" >You can now draw the rest of the glyphs, then apply the sidebearings based on your own table. You can use either the text inputs highlighted on the previous image, or the tool button with <kbd data-hk="000000001100020000009b1850" class="uno-anmfza not-prose before: " >H</kbd> on it.</p>
3023<p data-hk="000000001100020000009b1900" >Here's a cool trick: say you're setting the right side bearing of <kbd data-hk="000000001100020000009b1870" class="uno-anmfza not-prose before: " >b</kbd>, which would be the same value as the one in <kbd data-hk="000000001100020000009b1880" class="uno-anmfza not-prose before: " >o</kbd>. You can just set the value to <kbd data-hk="000000001100020000009b1890" class="uno-anmfza not-prose before: " >o</kbd> and Fontra will automatically translate it.</p>
3024<h1 data-hk="000000001100020000009b1910" id="kerning" >Kerning</h1>
3025<p data-hk="000000001100020000009b1920" >Note: You should only start once you've completely finished setting all side bearings.</p>
3026<p data-hk="000000001100020000009b1970" >There are some pairs like <kbd data-hk="000000001100020000009b1930" class="uno-anmfza not-prose before: " >r.</kbd>, <kbd data-hk="000000001100020000009b1940" class="uno-anmfza not-prose before: " >r-</kbd>, <kbd data-hk="000000001100020000009b1950" class="uno-anmfza not-prose before: " >fo</kbd> and <kbd data-hk="000000001100020000009b1960" class="uno-anmfza not-prose before: " >lt</kbd>
3026 that, regardless of what you set their side bearings to, still need to be kerned by hand so that they don't end up with too little or too much space.</p>
3027<!--!$--><figure data-hk="000000001100020000009b1992" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:1465 / 867"><!--$--><!--/--><img src="/assets/CasUhjtI.webp" loading="lazy" draggable="false" class="
3028              block
3029              w-full
3030              corner-shape-superellipse-2
3031
3032              smooth-shadow-z-2.75
3033              smooth-shadow-color-from-hazel-a-1000
3034              smooth-shadow-color-to-hazel-a-900
3035              dark:smooth-shadow-color-mauve-1000
3036
3037              transition-transform,shadow
3038              spring-duration-[--flip-duration]
3039
3040              spring-bounce-20
3041              select-none
3042
3043              outline outline-retina -outline-offset-1
3044              outline-hazel-50/8
3045              outline-mauve-50/4
3046                 
3047                smooth-shadow-z-2.75
3048                cursor-pointer
3049
3050                corner-radius-8 md:corner-radius-12
3051
3052                hover:smooth-shadow-z-3 hover:scale-101
3053
3054                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
3055              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><figcaption data-hk="000000001100020000009b19940" class="
3056              text-hazel-500 dark:text-mauve-500 
3057
3058              px-5 py-2 md:p-0
3059              flex flex-col gap-2
3060              my-0
3061             col-aside" style=""><!--$--><span data-hk="000000001100020000009b199410" class="text-md mt-2 md:mt-0 !line-height-140%">Before</span><!--/--><!--$--><span data-hk="000000001100020000009b199420" class="line-height-160% [--divider-margin:1rem] [&amp;>*]:text-hazel-500 [&amp;>*]:dark:text-mauve-500 [&amp;>*]:my-4 [&amp;>*:first-child]:mt-0 [&amp;>*:last-child]:mb-0 [&amp;_a]:underline [&amp;_a]:font-500 [&amp;_a]:text-[--prose-links]"><p data-hk="000000001100020000009b1980" >Anything with diagonals, tails or crossbars is awkwardly spaced.</p></span><!--/--><!--$--><!--/--></figcaption><!--/--></figure>
3062<!--!$--><figure data-hk="000000001100020000009b2012" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:1465 / 867"><!--$--><!--/--><img src="/assets/v0YTjZPu.webp" loading="lazy" draggable="false" class="
3063              block
3064              w-full
3065              corner-shape-superellipse-2
3066
3067              smooth-shadow-z-2.75
3068              smooth-shadow-color-from-hazel-a-1000
3069              smooth-shadow-color-to-hazel-a-900
3070              dark:smooth-shadow-color-mauve-1000
3071
3072              transition-transform,shadow
3073              spring-duration-[--flip-duration]
3074
3075              spring-bounce-20
3076              select-none
3077
3078              outline outline-retina -outline-offset-1
3079              outline-hazel-50/8
3080              outline-mauve-50/4
3081                 
3082                smooth-shadow-z-2.75
3083                cursor-pointer
3084
3085                corner-radius-8 md:corner-radius-12
3086
3087                hover:smooth-shadow-z-3 hover:scale-101
3088
3089                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
3090              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><figcaption data-hk="000000001100020000009b20140" class="
3091              text-hazel-500 dark:text-mauve-500 
3092
3093              px-5 py-2 md:p-0
3094              flex flex-col gap-2
3095              my-0
3096             col-aside" style=""><!--$--><span data-hk="000000001100020000009b201410" class="text-md mt-2 md:mt-0 !line-height-140%">After a first pass</span><!--/--><!--$--><span data-hk="000000001100020000009b201420" class="line-height-160% [--divider-margin:1rem] [&amp;>*]:text-hazel-500 [&amp;>*]:dark:text-mauve-500 [&amp;>*]:my-4 [&amp;>*:first-child]:mt-0 [&amp;>*:last-child]:mb-0 [&amp;_a]:underline [&amp;_a]:font-500 [&amp;_a]:text-[--prose-links]"><p data-hk="000000001100020000009b2000" >Not perfect but acceptable</p></span><!--/--><!--$--><!--/--></figcaption><!--/--></figure>
3097<p data-hk="000000001100020000009b2030" >Sure, we could go letter by letter and try every permutation and manually adjust it but that's too time-consuming. We'll define groups of similar shapes on either side called <em data-hk="000000001100020000009b2020" >classes</em>
3097.</p>
3098<h2 data-hk="000000001100020000009b2040" id="kerning-classes" >Kerning classes</h2>
3099<p data-hk="000000001100020000009b2070" >This isn't really covered in Designing Type all that much. Probably because there's no right way to approach this.
3100I found this one somewhere on the internet, and I can't seem to find where it was anymore. Only tweak to the original was adding <kbd data-hk="000000001100020000009b2050" class="uno-anmfza not-prose before: " >d</kbd> and <kbd data-hk="000000001100020000009b2060" class="uno-anmfza not-prose before: " >q</kbd> to the right side verticals, which is based on the RoboFont docs.</p>
3101<div data-hk="000000001100020000009b2080" class="not-prose pm-block w-full text-base text-[--prose-body] [&amp;_p]:my-2 my-[--track-prose-margin] r-sub"><!--$--><h3 data-hk="000000001100020000009b20810" class="mt-4 mb-2 first:mt-0 text-sm text-hazel-500 dark:text-mauve-500 select-none">Left side</h3><div data-hk="000000001100020000009b20811" class="col-content-bleed flex flex-col gap-2 corner-radius-8 md:corner-radius-12 corner-shape-superellipse-2 bg-hazel-100 dark:bg-mauve-900 p-5 py-4.5 mb-2 last:mb-0"><div class="grid grid-cols-[0.25fr_1fr] gap-x-5 gap-y-4 items-start"><h4 data-hk="000000001100020000009b208120" class="text-body mt-0.75rem line-height-120% text-hazel-500 dark:text-mauve-500 select-none">Verticals</h4><div data-hk="000000001100020000009b208121" class="flex flex-wrap gap-2"><span data-hk="000000001100020000009b2081220" class="
3102                                  relative grid place-items-center
3103                                  size-3rem rounded-full
3104                                  text-xl leading-none text-black dark:text-mauve-50
3105                                 "><!--$-->b<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081221" class="
3106                                  relative grid place-items-center
3107                                  size-3rem rounded-full
3108                                  text-xl leading-none text-black dark:text-mauve-50
3109                                 bg-hazel-50 dark:bg-mauve-500/10 smooth-shadow-z-1"><!--$-->i<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081222" class="
3110                                  relative grid place-items-center
3111                                  size-3rem rounded-full
3112                                  text-xl leading-none text-black dark:text-mauve-50
3113                                 "><!--$-->j<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081223" class="
3114                                  relative grid place-items-center
3115                                  size-3rem rounded-full
3116                                  text-xl leading-none text-black dark:text-mauve-50
3117                                 "><!--$-->k<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081224" class="
3118                                  relative grid place-items-center
3119                                  size-3rem rounded-full
3120                                  text-xl leading-none text-black dark:text-mauve-50
3121                                 "><!--$-->l<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081225" class="
3122                                  relative grid place-items-center
3123                                  size-3rem rounded-full
3124                                  text-xl leading-none text-black dark:text-mauve-50
3125                                 "><!--$-->m<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081226" class="
3126                                  relative grid place-items-center
3127                                  size-3rem rounded-full
3128                                  text-xl leading-none text-black dark:text-mauve-50
3129                                 "><!--$-->n<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081227" class="
3130                                  relative grid place-items-center
3131                                  size-3rem rounded-full
3132                                  text-xl leading-none text-black dark:text-mauve-50
3133                                 "><!--$-->p<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081228" class="
3134                                  relative grid place-items-center
3135                                  size-3rem rounded-full
3136                                  text-xl leading-none text-black dark:text-mauve-50
3137                                 "><!--$-->r<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081229" class="
3138                                  relative grid place-items-center
3139                                  size-3rem rounded-full
3140                                  text-xl leading-none text-black dark:text-mauve-50
3141                                 "><!--$-->h<!--/--><!--$--><!--/--></span></div><h4 data-hk="000000001100020000009b208123" class="text-body mt-0.75rem line-height-120% text-hazel-500 dark:text-mauve-500 select-none">Rounded</h4><div data-hk="000000001100020000009b208124" class="flex flex-wrap gap-2"><span data-hk="000000001100020000009b2081250" class="
3142                                  relative grid place-items-center
3143                                  size-3rem rounded-full
3144                                  text-xl leading-none text-black dark:text-mauve-50
3145                                 "><!--$-->c<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081251" class="
3146                                  relative grid place-items-center
3147                                  size-3rem rounded-full
3148                                  text-xl leading-none text-black dark:text-mauve-50
3149                                 "><!--$-->d<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081252" class="
3150                                  relative grid place-items-center
3151                                  size-3rem rounded-full
3152                                  text-xl leading-none text-black dark:text-mauve-50
3153                                 "><!--$-->e<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081253" class="
3154                                  relative grid place-items-center
3155                                  size-3rem rounded-full
3156                                  text-xl leading-none text-black dark:text-mauve-50
3157                                 bg-hazel-50 dark:bg-mauve-500/10 smooth-shadow-z-1"><!--$-->o<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081254" class="
3158                                  relative grid place-items-center
3159                                  size-3rem rounded-full
3160                                  text-xl leading-none text-black dark:text-mauve-50
3161                                 "><!--$-->q<!--/--><!--$--><!--/--></span></div><h4 data-hk="000000001100020000009b208126" class="text-body mt-0.75rem line-height-120% text-hazel-500 dark:text-mauve-500 select-none">Diagonals</h4><div data-hk="000000001100020000009b208127" class="flex flex-wrap gap-2"><span data-hk="000000001100020000009b2081280" class="
3162                                  relative grid place-items-center
3163                                  size-3rem rounded-full
3164                                  text-xl leading-none text-black dark:text-mauve-50
3165                                 bg-hazel-50 dark:bg-mauve-500/10 smooth-shadow-z-1"><!--$-->v<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081281" class="
3166                                  relative grid place-items-center
3167                                  size-3rem rounded-full
3168                                  text-xl leading-none text-black dark:text-mauve-50
3169                                 "><!--$-->w<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081282" class="
3170                                  relative grid place-items-center
3171                                  size-3rem rounded-full
3172                                  text-xl leading-none text-black dark:text-mauve-50
3173                                 "><!--$-->y<!--/--><!--$--><!--/--></span></div></div></div><h3 data-hk="000000001100020000009b20813" class="mt-4 mb-2 first:mt-0 text-sm text-hazel-500 dark:text-mauve-500 select-none">Right side</h3><div data-hk="000000001100020000009b20814" class="col-content-bleed flex flex-col gap-2 corner-radius-8 md:corner-radius-12 corner-shape-superellipse-2 bg-hazel-100 dar
3173k:bg-mauve-900 p-5 py-4.5 mb-2 last:mb-0"><div class="grid grid-cols-[0.25fr_1fr] gap-x-5 gap-y-4 items-start"><h4 data-hk="000000001100020000009b208150" class="text-body mt-0.75rem line-height-120% text-hazel-500 dark:text-mauve-500 select-none">Verticals</h4><div data-hk="000000001100020000009b208151" class="flex flex-wrap gap-2"><span data-hk="000000001100020000009b2081520" class="
3174                                  relative grid place-items-center
3175                                  size-3rem rounded-full
3176                                  text-xl leading-none text-black dark:text-mauve-50
3177                                 "><!--$-->d<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081521" class="
3178                                  relative grid place-items-center
3179                                  size-3rem rounded-full
3180                                  text-xl leading-none text-black dark:text-mauve-50
3181                                 bg-hazel-50 dark:bg-mauve-500/10 smooth-shadow-z-1"><!--$-->i<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081522" class="
3182                                  relative grid place-items-center
3183                                  size-3rem rounded-full
3184                                  text-xl leading-none text-black dark:text-mauve-50
3185                                 "><!--$-->j<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081523" class="
3186                                  relative grid place-items-center
3187                                  size-3rem rounded-full
3188                                  text-xl leading-none text-black dark:text-mauve-50
3189                                 "><!--$-->l<!--/--><!--$--><span data-hk="000000001100020000009b2081524" title="If your l has a looped tail, you'll have to kern it independently" class="absolute right-1 top-1 -translate-y-1/3 translate-x-1/3 cursor-help text-xs leading-none text-red-700/50 dark:text-red-300/50 select-none">*</span><!--/--></span><span data-hk="000000001100020000009b2081525" class="
3190                                  relative grid place-items-center
3191                                  size-3rem rounded-full
3192                                  text-xl leading-none text-black dark:text-mauve-50
3193                                 "><!--$-->q<!--/--><!--$--><!--/--></span></div><h4 data-hk="000000001100020000009b208153" class="text-body mt-0.75rem line-height-120% text-hazel-500 dark:text-mauve-500 select-none">Rounded</h4><div data-hk="000000001100020000009b208154" class="flex flex-wrap gap-2"><span data-hk="000000001100020000009b2081550" class="
3194                                  relative grid place-items-center
3195                                  size-3rem rounded-full
3196                                  text-xl leading-none text-black dark:text-mauve-50
3197                                 "><!--$-->b<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081551" class="
3198                                  relative grid place-items-center
3199                                  size-3rem rounded-full
3200                                  text-xl leading-none text-black dark:text-mauve-50
3201                                 bg-hazel-50 dark:bg-mauve-500/10 smooth-shadow-z-1"><!--$-->o<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081552" class="
3202                                  relative grid place-items-center
3203                                  size-3rem rounded-full
3204                                  text-xl leading-none text-black dark:text-mauve-50
3205                                 "><!--$-->p<!--/--><!--$--><!--/--></span></div><h4 data-hk="000000001100020000009b208156" class="text-body mt-0.75rem line-height-120% text-hazel-500 dark:text-mauve-500 select-none">Diagonals</h4><div data-hk="000000001100020000009b208157" class="flex flex-wrap gap-2"><span data-hk="000000001100020000009b2081580" class="
3206                                  relative grid place-items-center
3207                                  size-3rem rounded-full
3208                                  text-xl leading-none text-black dark:text-mauve-50
3209                                 "><!--$-->k<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b2081581" class="
3210                                  relative grid place-items-center
3211                                  size-3rem rounded-full
3212                                  text-xl leading-none text-black dark:text-mauve-50
3213                                 bg-hazel-50 dark:bg-mauve-500/10 smooth-shadow-z-1"><!--$-->x<!--/--><!--$--><!--/--></span></div><h4 data-hk="000000001100020000009b208159" class="text-body mt-0.75rem line-height-120% text-hazel-500 dark:text-mauve-500 select-none">Arches</h4><div data-hk="000000001100020000009b20815a10" class="flex flex-wrap gap-2"><span data-hk="000000001100020000009b20815a110" class="
3214                                  relative grid place-items-center
3215                                  size-3rem rounded-full
3216                                  text-xl leading-none text-black dark:text-mauve-50
3217                                 "><!--$-->h<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b20815a111" class="
3218                                  relative grid place-items-center
3219                                  size-3rem rounded-full
3220                                  text-xl leading-none text-black dark:text-mauve-50
3221                                 "><!--$-->m<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b20815a112" class="
3222                                  relative grid place-items-center
3223                                  size-3rem rounded-full
3224                                  text-xl leading-none text-black dark:text-mauve-50
3225                                 bg-hazel-50 dark:bg-mauve-500/10 smooth-shadow-z-1"><!--$-->n<!--/--><!--$--><!--/--></span></div><h4 data-hk="000000001100020000009b20815a12" class="text-body mt-0.75rem line-height-120% text-hazel-500 dark:text-mauve-500 select-none">Diagonals (desc)</h4><div data-hk="000000001100020000009b20815a13" class="flex flex-wrap gap-2"><span data-hk="000000001100020000009b20815a140" class="
3226                                  relative grid place-items-center
3227                                  size-3rem rounded-full
3228                                  text-xl leading-none text-black dark:text-mauve-50
3229                                 bg-hazel-50 dark:bg-mauve-500/10 smooth-shadow-z-1"><!--$-->v<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b20815a141" class="
3230                                  relative grid place-items-center
3231                                  size-3rem rounded-full
3232                                  text-xl leading-none text-black dark:text-mauve-50
3233                                 "><!--$-->w<!--/--><!--$--><!--/--></span><span data-hk="000000001100020000009b20815a142" class="
3234                                  relative grid place-items-center
3235                                  size-3rem rounded-full
3236                                  text-xl leading-none text-black dark:text-mauve-50
3237                                 "><!--$-->y<!--/--><!--$--><!--/--></span></div></div></div><!--/--><!--$--><aside data-hk="000000001100020000009b20820" style="grid-row:2" class="col-aside text-body line-height-160% text-hazel-500 dark:text-mauve-500 px-5 py-2 md:p-0 my-0">Pick one of each to act as the parent of the group. I chose the circled ones.</aside><!--/--></div>
3238<p data-hk="000000001100020000009b2110" >Now, these classes can be called anything, like straight-up just <code data-hk="000000001100020000009b2090" class="
3239        not-prose
3240
3241        px-0.35em
3242
3243        font-mono text-0.95em
3244
3245        text-[--prose-body]
3246        bg-hazel-100
3247        dark:bg-mauve-900
3248
3249        corner-radius-[0.75em]
3250        corner-shape-superellipse-2
3251
3252        [overflow-wrap:anywhere]
3253        box-decoration-clone
3254
3255        
3256       ">verticals</code> or <code data-hk="000000001100020000009b2100" class="
3257        not-prose
3258
3259        px-0.35em
3260
3261        font-mono text-0.95em
3262
3263        text-[--prose-body]
3264        bg-hazel-100
3265        dark:bg-mauve-900
3266
3267        corner-radius-[0.75em]
3268        corner-shape-superellipse-2
3269
3270        [overflow-wrap:anywhere]
3271        box-decoration-clone
3272
3273        
3274       ">diagonals-desc</code>, but when you tweak a bunch of them it's a bit too annoying so I just use the parent letter directly.</p>
3275<p data-hk="000000001100020000009b2120" >
3275The left and right classes are independent so we can set both sides to the same letter and it'll apply the right one.</p>
3276<!--!$--><figure data-hk="000000001100020000009b2172" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:1414 / 875"><!--$--><!--/--><img src="/assets/CGJQNuV5.webp" loading="lazy" draggable="false" class="
3277              block
3278              w-full
3279              corner-shape-superellipse-2
3280
3281              smooth-shadow-z-2.75
3282              smooth-shadow-color-from-hazel-a-1000
3283              smooth-shadow-color-to-hazel-a-900
3284              dark:smooth-shadow-color-mauve-1000
3285
3286              transition-transform,shadow
3287              spring-duration-[--flip-duration]
3288
3289              spring-bounce-20
3290              select-none
3291
3292              outline outline-retina -outline-offset-1
3293              outline-hazel-50/8
3294              outline-mauve-50/4
3295                 
3296                smooth-shadow-z-2.75
3297                cursor-pointer
3298
3299                corner-radius-8 md:corner-radius-12
3300
3301                hover:smooth-shadow-z-3 hover:scale-101
3302
3303                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
3304              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><figcaption data-hk="000000001100020000009b21740" class="
3305              text-hazel-500 dark:text-mauve-500 
3306
3307              px-5 py-2 md:p-0
3308              flex flex-col gap-2
3309              my-0
3310             col-aside" style=""><!--$--><!--/--><!--$--><span data-hk="000000001100020000009b217420" class="line-height-160% [--divider-margin:1rem] [&amp;>*]:text-hazel-500 [&amp;>*]:dark:text-mauve-500 [&amp;>*]:my-4 [&amp;>*:first-child]:mt-0 [&amp;>*:last-child]:mb-0 [&amp;_a]:underline [&amp;_a]:font-500 [&amp;_a]:text-[--prose-links]"><p data-hk="000000001100020000009b2150" >The letter <kbd data-hk="000000001100020000009b2130" class="uno-anmfza not-prose before: " >y</kbd> is part of the diagonals group in both left and right, where the parent is <kbd data-hk="000000001100020000009b2140" class="uno-anmfza not-prose before: " >v</kbd>.</p><p data-hk="000000001100020000009b2160" >Go letter by letter setting the parent per side.</p></span><!--/--><!--$--><!--/--></figcaption><!--/--></figure>
3311<!--!$--><figure data-hk="000000001100020000009b2212" class="not-prose r-sub my-8"><picture class="col-content-bleed" style="display:block;aspect-ratio:1414 / 875"><!--$--><!--/--><img src="/assets/C0dhPDjf.webp" loading="lazy" draggable="false" class="
3312              block
3313              w-full
3314              corner-shape-superellipse-2
3315
3316              smooth-shadow-z-2.75
3317              smooth-shadow-color-from-hazel-a-1000
3318              smooth-shadow-color-to-hazel-a-900
3319              dark:smooth-shadow-color-mauve-1000
3320
3321              transition-transform,shadow
3322              spring-duration-[--flip-duration]
3323
3324              spring-bounce-20
3325              select-none
3326
3327              outline outline-retina -outline-offset-1
3328              outline-hazel-50/8
3329              outline-mauve-50/4
3330                 
3331                smooth-shadow-z-2.75
3332                cursor-pointer
3333
3334                corner-radius-8 md:corner-radius-12
3335
3336                hover:smooth-shadow-z-3 hover:scale-101
3337
3338                active:scale-98 active:spring-duration-400 active:smooth-shadow-z-2
3339              " style=";height:100%;--flip-duration:200ms;transform-origin:center center"></picture><!--$--><figcaption data-hk="000000001100020000009b22140" class="
3340              text-hazel-500 dark:text-mauve-500 
3341
3342              px-5 py-2 md:p-0
3343              flex flex-col gap-2
3344              my-0
3345             col-aside" style=""><!--$--><!--/--><!--$--><span data-hk="000000001100020000009b221420" class="line-height-160% [--divider-margin:1rem] [&amp;>*]:text-hazel-500 [&amp;>*]:dark:text-mauve-500 [&amp;>*]:my-4 [&amp;>*:first-child]:mt-0 [&amp;>*:last-child]:mb-0 [&amp;_a]:underline [&amp;_a]:font-500 [&amp;_a]:text-[--prose-links]"><p data-hk="000000001100020000009b2200" >You can click and drag between letters to add or remove units from the pair.
3346<code data-hk="000000001100020000009b2180" class="
3347        not-prose
3348
3349        px-0.35em
3350
3351        font-mono text-0.95em
3352
3353        text-[--prose-body]
3354        bg-hazel-100
3355        dark:bg-mauve-900
3356
3357        corner-radius-[0.75em]
3358        corner-shape-superellipse-2
3359
3360        [overflow-wrap:anywhere]
3361        box-decoration-clone
3362
3363        
3364       ">@v</code> and <code data-hk="000000001100020000009b2190" class="
3365        not-prose
3366
3367        px-0.35em
3368
3369        font-mono text-0.95em
3370
3371        text-[--prose-body]
3372        bg-hazel-100
3373        dark:bg-mauve-900
3374
3375        corner-radius-[0.75em]
3376        corner-shape-superellipse-2
3377
3378        [overflow-wrap:anywhere]
3379        box-decoration-clone
3380
3381        
3382       ">@o</code> are the class names that we've set to every letter in its group.</p></span><!--/--><!--$--><!--/--></figcaption><!--/--></figure>
3383<p data-hk="000000001100020000009b2230" >You can search for common kerning pairs. Don't overdo it, <a data-hk="000000001100020000009b2220" href="https://typedrawers.com/discussion/comment/52058/#Comment_52058" >
3383it's fine to not cover uncommon edge cases</a>. There are too many permutations for you to be able to handle every single combination.</p>
3384<p data-hk="000000001100020000009b2240" >This is the one step that I think has the most potential to be improved further down the line. I'll be exploring ways of automating this process in later posts.</p>
3385<h1 data-hk="000000001100020000009b2250" id="interpolation-curves" >Interpolation curves</h1>
3386<p data-hk="000000001100020000009b2270" >Imagine we have a type family composed of multiple weights. If we set the stem width in Regular/400 to 80 units and adjust it up and down linearly by the same step size, it wouldn't really <em data-hk="000000001100020000009b2260" >look</em> linear to us – we have a harder time discerning dark tones from light ones, and need exponentially more contrast the darker we go.</p>
3387<aside data-hk="000000001100020000009b2290" class="r-aside text-md my-[--track-prose-margin] [--divider-margin:1rem] [&amp;>*]:text-hazel-500 [&amp;>*]:dark:text-mauve-500 [&amp;>*]:my-4 [&amp;>*]:line-height-160% [&amp;>*:first-child]:mt-0 [&amp;>*:last-child]:mb-0"><p data-hk="000000001100020000009b2280" >See the 0.33 to 0.5 from Steven's power laws on light sensitivity, and Ebner and Fairchild's 0.43.</p></aside>
3388<p data-hk="000000001100020000009b2310" >Since strokes/form and counterform blur together into a <em data-hk="000000001100020000009b2300" >typographic color</em>, we have to apply this here too.</p>
3389<p data-hk="000000001100020000009b2320" >I don't want to get super into the weeds in this one so I'll leave some of the key details here for you to research:</p>
3390<ul data-hk="000000001100020000009b2420" >
3391<li data-hk="000000001100020000009b2340" ><a data-hk="000000001100020000009b2330" href="https://www.lucasfonts.com/learn/interpolation-theory" >Luc(as) de Groot interpolation theory</a></li>
3392<li data-hk="000000001100020000009b2360" ><a data-hk="000000001100020000009b2350" href="https://web.archive.org/web/20170721200038/http://www.impallari.com:80/familysteps/index.php" >Impallari</a></li>
3393<li data-hk="000000001100020000009b2370" >Schneider: (Lucas + Impallari) / 2</li>
3394<li data-hk="000000001100020000009b2390" ><a data-hk="000000001100020000009b2380" href="https://typedrawers.com/discussion/comment/26280/#Comment_26280" >CSS Ogee by Abraham Lee</a></li>
3395<li data-hk="000000001100020000009b2410" ><a data-hk="000000001100020000009b2400" href="https://googlefonts.github.io/gf-guide/variable.html#the-axis-mapping" >Axis mapping in Google Fonts docs</a></li>
3396</ul>
3397<!--!$--><div data-hk="000000001100020000009b49002" data-rehype-pretty-code-figure="" class="uno-pkln7d group/code pm-block col-content-bleed  relative     " style="--flip-duration:200ms;transform-origin:center center"><div class="uno-b46tnc" style="right:calc(0.75rem + 0px);transform-origin:top right"><div class="uno-c9kunu"><!--$--><!--/--><!--$--><button data-hk="000000001100020000009b4900400" aria-label="Expand code" data-variant="regular" data-size="xs" data-shape="rounded-rect" class="uno-lwuarh group/b transition-font-weight,font-stretch,transform,shadow,padding text-size-body "><span class="*:shrink-0 font-600 invisible h-0" aria-hidden="true"><span data-hk="000000001100020000009b4900401" class="relative block size-4 i-md:fullscreen "></span></span><span class="*:shrink-0 group-active/b:scale-98 group-active/p:[font-stretch:75%]"><span data-hk="000000001100020000009b4900402" class="relative block size-4 i-md:fullscreen "></span></span></button><!--/--><!--$--><button data-hk="000000001100020000009b4900500" aria-label="Copy code" data-variant="regular" data-size="xs" data-shape="rounded-rect" class="uno-lwuarh group/b transition-font-weight,font-stretch,transform,shadow,padding text-size-body "><span class="*:shrink-0 font-600 invisible h-0" aria-hidden="true"><span data-hk="000000001100020000009b4900501" class="relative block size-4 [&amp;>*]:absolute [&amp;>*]:inset-0 [&amp;>*]:block [&amp;>*]:size-4 [&amp;>*]:leading-none [&amp;>*]:transition-opacity,transform [&amp;>*]:duration-150 [&amp;>*]:ease-out [&amp;>*]:[will-change:transform] [&amp;>*]:transform-gpu"><span class="i-md:content-copy  opacity-100 scale-100"></span>
3397<span class="i-md:check  opacity-0 scale-75"></span></span></span><span class="*:shrink-0 group-active/b:scale-98 group-active/p:[font-stretch:75%]"><span data-hk="000000001100020000009b4900502" class="relative block size-4 [&amp;>*]:absolute [&amp;>*]:inset-0 [&amp;>*]:block [&amp;>*]:size-4 [&amp;>*]:leading-none [&amp;>*]:transition-opacity,transform [&amp;>*]:duration-150 [&amp;>*]:ease-out [&amp;>*]:[will-change:transform] [&amp;>*]:transform-gpu"><span class="i-md:content-copy  opacity-100 scale-100"></span><span class="i-md:check  opacity-0 scale-75"></span></span></span></button><!--/--></div></div><div class="uno-29yrqi overflow-x-auto overflow-y-hidden "><div class="uno-ymqm64" style=";transform-origin:top left"><pre data-hk="000000001100020000009b4890" style="--shiki-light:#1f2328;--shiki-dark:#a9b1d6;--shiki-light-bg:#ffffff;--shiki-dark-bg:#1a1b26" tabIndex="0" data-language="ts" data-theme="github-light-default tokyo-night" ><code data-hk="000000001100020000009b4880" data-language="ts" data-theme="github-light-default tokyo-night" style="display:grid" ><span data-hk="000000001100020000009b2470" data-line="" ><span data-hk="000000001100020000009b2430" style="--shiki-light:#CF222E;--shiki-dark:#BB9AF7" >type</span><span data-hk="000000001100020000009b2440" style="--shiki-light:#953800;--shiki-dark:#C0CAF5" > StrokeCurveConfig</span><span data-hk="000000001100020000009b2450" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" > =</span><span data-hk="000000001100020000009b2460" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" > {</span></span>
3398<span data-hk="000000001100020000009b2510" data-line="" ><span data-hk="000000001100020000009b2480" style="--shiki-light:#953800;--shiki-dark:#73DACA" >  minWeight</span><span data-hk="000000001100020000009b2490" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" >:</span><span data-hk="000000001100020000009b2500" style="--shiki-light:#0550AE;--shiki-dark:#0DB9D7" >  number</span></span>
3399<span data-hk="000000001100020000009b2550" data-line="" ><span data-hk="000000001100020000009b2520" style="--shiki-light:#953800;--shiki-dark:#73DACA" >  maxWeight</span><span data-hk="000000001100020000009b2530" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" >:</span><span data-hk="000000001100020000009b2540" style="--shiki-light:#0550AE;--shiki-dark:#0DB9D7" >  number</span></span>
3400<span data-hk="000000001100020000009b2590" data-line="" ><span data-hk="000000001100020000009b2560" style="--shiki-light:#953800;--shiki-dark:#73DACA" >  minStroke</span><span data-hk="000000001100020000009b2570" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" >:</span><span data-hk="000000001100020000009b2580" style="--shiki-light:#0550AE;--shiki-dark:#0DB9D7" >  number</span></span>
3401<span data-hk="000000001100020000009b2630" data-line="" ><span data-hk="000000001100020000009b2600" style="--shiki-light:#953800;--shiki-dark:#73DACA" >  maxStroke</span><span data-hk="000000001100020000009b2610" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" >:</span><span data-hk="000000001100020000009b2620" style="--shiki-light:#0550AE;--shiki-dark:#0DB9D7" >  number</span></span>
3402<span data-hk="000000001100020000009b2670" data-line="" ><span data-hk="000000001100020000009b2640" style="--shiki-light:#953800;--shiki-dark:#73DACA" >  curvature</span><span data-hk="000000001100020000009b2650" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" >?:</span><span data-hk="000000001100020000009b2660" style="--shiki-light:#0550AE;--shiki-dark:#0DB9D7" > number</span></span>
3403<span data-hk="000000001100020000009b2690" data-line="" ><span data-hk="000000001100020000009b2680" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >}</span></span>
3404<span data-hk="000000001100020000009b2700" data-line="" > </span>
3405<span data-hk="000000001100020000009b2750" data-line="" ><span data-hk="000000001100020000009b2710" style="--shiki-light:#CF222E;--shiki-light-font-style:inherit;--shiki-dark:#9D7CD8;--shiki-dark-font-style:italic" >const</span><span data-hk="000000001100020000009b2720" style="--shiki-light:#8250DF;--shiki-dark:#7AA2F7" > strokeFromWeight</span><span data-hk="000000001100020000009b2730" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" >
3405 =</span><span data-hk="000000001100020000009b2740" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" > (</span></span>
3406<span data-hk="000000001100020000009b2800" data-line="" ><span data-hk="000000001100020000009b2760" style="--shiki-light:#953800;--shiki-dark:#E0AF68" >  weight</span><span data-hk="000000001100020000009b2770" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" >:</span><span data-hk="000000001100020000009b2780" style="--shiki-light:#0550AE;--shiki-dark:#0DB9D7" > number</span><span data-hk="000000001100020000009b2790" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span></span>
3407<span data-hk="000000001100020000009b2820" data-line="" ><span data-hk="000000001100020000009b2810" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >  {</span></span>
3408<span data-hk="000000001100020000009b2850" data-line="" ><span data-hk="000000001100020000009b2830" style="--shiki-light:#953800;--shiki-dark:#E0AF68" >    minWeight</span><span data-hk="000000001100020000009b2840" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span></span>
3409<span data-hk="000000001100020000009b2880" data-line="" ><span data-hk="000000001100020000009b2860" style="--shiki-light:#953800;--shiki-dark:#E0AF68" >    maxWeight</span><span data-hk="000000001100020000009b2870" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span></span>
3410<span data-hk="000000001100020000009b2910" data-line="" ><span data-hk="000000001100020000009b2890" style="--shiki-light:#953800;--shiki-dark:#E0AF68" >    minStroke</span><span data-hk="000000001100020000009b2900" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span></span>
3411<span data-hk="000000001100020000009b2940" data-line="" ><span data-hk="000000001100020000009b2920" style="--shiki-light:#953800;--shiki-dark:#E0AF68" >    maxStroke</span><span data-hk="000000001100020000009b2930" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span></span>
3412<span data-hk="000000001100020000009b2990" data-line="" ><span data-hk="000000001100020000009b2950" style="--shiki-light:#953800;--shiki-dark:#E0AF68" >    curvature</span><span data-hk="000000001100020000009b2960" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" > =</span><span data-hk="000000001100020000009b2970" style="--shiki-light:#0550AE;--shiki-dark:#FF9E64" > 1</span><span data-hk="000000001100020000009b2980" style="--shiki-light:#6E7781;--shiki-light-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic" > // luc(as) de groot fallback</span></span>
3413<span data-hk="000000001100020000009b3030" data-line="" ><span data-hk="000000001100020000009b3000" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >  }</span><span data-hk="000000001100020000009b3010" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" >:</span><span data-hk="000000001100020000009b3020" style="--shiki-light:#953800;--shiki-dark:#C0CAF5" > StrokeCurveConfig</span></span>
3414<span data-hk="000000001100020000009b3070" data-line="" ><span data-hk="000000001100020000009b3040" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >)</span><span data-hk="000000001100020000009b3050" style="--shiki-light:#CF222E;--shiki-dark:#BB9AF7" > =></span><span data-hk="000000001100020000009b3060" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" > {</span></span>
3415<span data-hk="000000001100020000009b3140" data-line="" ><span data-hk="000000001100020000009b3080" style="--shiki-light:#CF222E;--shiki-light-font-style:inherit;--shiki-dark:#9D7CD8;--shiki-dark-font-style:italic" >  const</span><span data-hk="000000001100020000009b3090" style="--shiki-light:#0550AE;--shiki-dark:#BB9AF7" > ratio</span><span data-hk="000000001100020000009b3100" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" > =</span><span data-hk="000000001100020000009b3110" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" > maxStroke</span><span data-hk="000000001100020000009b3120" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" > /</span><span data-hk="000000001100020000009b3130" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" > minStroke</span></span>
3416<span data-hk="000000001100020000009b3190" data-line="" ><span data-hk="000000001100020000009b3150" style="--shiki-light:#CF222E;--shiki-light-font-style:inherit;--shiki-dark:#9D7CD8;--shiki-dark-font-style:italic" >  const</span><span data-hk="000000001100020000009b3160" style="--shiki-light:#0550AE;--shiki-dark:#BB9AF7" > t</span><span data-hk="000000001100020000009b3170" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" >
3416 =</span><span data-hk="000000001100020000009b3180" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" > </span></span>
3417<span data-hk="000000001100020000009b3330" data-line="" ><span data-hk="000000001100020000009b3200" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" >    Math</span><span data-hk="000000001100020000009b3210" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >.</span><span data-hk="000000001100020000009b3220" style="--shiki-light:#8250DF;--shiki-dark:#7AA2F7" >min</span><span data-hk="000000001100020000009b3230" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >(</span><span data-hk="000000001100020000009b3240" style="--shiki-light:#0550AE;--shiki-dark:#FF9E64" >1</span><span data-hk="000000001100020000009b3250" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span><span data-hk="000000001100020000009b3260" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" > Math</span><span data-hk="000000001100020000009b3270" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >.</span><span data-hk="000000001100020000009b3280" style="--shiki-light:#8250DF;--shiki-dark:#7AA2F7" >max</span><span data-hk="000000001100020000009b3290" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >(</span><span data-hk="000000001100020000009b3300" style="--shiki-light:#0550AE;--shiki-dark:#FF9E64" >0</span><span data-hk="000000001100020000009b3310" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span><span data-hk="000000001100020000009b3320" style="--shiki-light:#6E7781;--shiki-light-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic" > // clamp to 0..1</span></span>
3418<span data-hk="000000001100020000009b3390" data-line="" ><span data-hk="000000001100020000009b3340" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >      (</span><span data-hk="000000001100020000009b3350" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" >weight</span><span data-hk="000000001100020000009b3360" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" > -</span><span data-hk="000000001100020000009b3370" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" > minWeight</span><span data-hk="000000001100020000009b3380" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >) </span></span>
3419<span data-hk="000000001100020000009b3460" data-line="" ><span data-hk="000000001100020000009b3400" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" >      /</span><span data-hk="000000001100020000009b3410" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" > (</span><span data-hk="000000001100020000009b3420" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" >maxWeight</span><span data-hk="000000001100020000009b3430" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" > -</span><span data-hk="000000001100020000009b3440" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" > minWeight</span><span data-hk="000000001100020000009b3450" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >)))</span></span>
3420<span data-hk="000000001100020000009b3470" data-line="" > </span>
3421<span data-hk="000000001100020000009b3580" data-line="" ><span data-hk="000000001100020000009b3480" style="--shiki-light:#CF222E;--shiki-light-font-style:inherit;--shiki-dark:#BB9AF7;--shiki-dark-font-style:italic" >  return</span><span data-hk="000000001100020000009b3490" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" > minStroke</span><span data-hk="000000001100020000009b3500" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" > *</span><span data-hk="000000001100020000009b3510" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" > ratio</span><span data-hk="000000001100020000009b3520" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" > **</span><span data-hk="000000001100020000009b3530" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" > (</span><span data-hk="000000001100020000009b3540" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" >t</span><span data-hk="000000001100020000009b3550" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" > **</span><span data-hk="000000001100020000009b3560" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" > curvature</span><span data-hk="000000001100020000009b3570" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >)</span></span>
3422<span data-hk="000000001100020000009b3600" data-line="" ><span data-hk="000000001100020000009b3590" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >}</span></span>
3423<span data-hk="000000001100020000009b3610" data-line="" > </span>
3424<span data-hk="000000001100020000009b3630" data-line="" ><span data-hk="000000001100020000009b3620" style="--shiki-light:#6E7781;--shiki-light-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic" >//</span></span>
3425<span data-hk="000000001100020000009b3650" data-line="" ><span data-hk="000000001100020000009b3640" style="--shiki-light:#6E7781;--shiki-light-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic" >//</span></span>
3426<span data-hk="000000001100020000009b3660" data-line="" > </span>
3427<span data-hk="000000001100020000009b3730" data-line="" ><span data-hk="000000001100020000009b3670" style="--shiki-light:#CF222E;--shiki-light-font-style:inherit;--shiki-dark:#9D7CD8;--shiki-dark-font-style:italic" >const</span><span data-hk="000000001100020000009b3680" style="--shiki-light:#0550AE;--shiki-dark:#BB9AF7" > Zephyr</span><span data-hk="000000001100020000009b3690" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" >:</span><span data-hk="000000001100020000009b3700" style="--shiki-light:#953800;--shiki-dark:#C0CAF5" > StrokeCurveConfig</span><span data-hk="000000001100020000009b3710" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" >
3427 =</span><span data-hk="000000001100020000009b3720" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" > {</span></span>
3428<span data-hk="000000001100020000009b3780" data-line="" ><span data-hk="000000001100020000009b3740" style="--shiki-light:#1F2328;--shiki-dark:#73DACA" >  minWeight</span><span data-hk="000000001100020000009b3750" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >:</span><span data-hk="000000001100020000009b3760" style="--shiki-light:#0550AE;--shiki-dark:#FF9E64" > 50</span><span data-hk="000000001100020000009b3770" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span></span>
3429<span data-hk="000000001100020000009b3830" data-line="" ><span data-hk="000000001100020000009b3790" style="--shiki-light:#1F2328;--shiki-dark:#73DACA" >  maxWeight</span><span data-hk="000000001100020000009b3800" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >:</span><span data-hk="000000001100020000009b3810" style="--shiki-light:#0550AE;--shiki-dark:#FF9E64" > 900</span><span data-hk="000000001100020000009b3820" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span></span>
3430<span data-hk="000000001100020000009b3880" data-line="" ><span data-hk="000000001100020000009b3840" style="--shiki-light:#1F2328;--shiki-dark:#73DACA" >  minStroke</span><span data-hk="000000001100020000009b3850" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >:</span><span data-hk="000000001100020000009b3860" style="--shiki-light:#0550AE;--shiki-dark:#FF9E64" > 27</span><span data-hk="000000001100020000009b3870" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span></span>
3431<span data-hk="000000001100020000009b3930" data-line="" ><span data-hk="000000001100020000009b3890" style="--shiki-light:#1F2328;--shiki-dark:#73DACA" >  maxStroke</span><span data-hk="000000001100020000009b3900" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >:</span><span data-hk="000000001100020000009b3910" style="--shiki-light:#0550AE;--shiki-dark:#FF9E64" > 207</span><span data-hk="000000001100020000009b3920" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span></span>
3432<span data-hk="000000001100020000009b4040" data-line="" ><span data-hk="000000001100020000009b3940" style="--shiki-light:#1F2328;--shiki-dark:#73DACA" >  curvature</span><span data-hk="000000001100020000009b3950" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >:</span><span data-hk="000000001100020000009b3960" style="--shiki-light:#0550AE;--shiki-dark:#FF9E64" > 1</span><span data-hk="000000001100020000009b3970" style="--shiki-light:#CF222E;--shiki-dark:#89DDFF" > /</span><span data-hk="000000001100020000009b3980" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" > Math</span><span data-hk="000000001100020000009b3990" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >.</span><span data-hk="000000001100020000009b4000" style="--shiki-light:#8250DF;--shiki-dark:#7AA2F7" >sqrt</span><span data-hk="000000001100020000009b4010" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >(</span><span data-hk="000000001100020000009b4020" style="--shiki-light:#0550AE;--shiki-dark:#FF9E64" >2</span><span data-hk="000000001100020000009b4030" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >)</span></span>
3433<span data-hk="000000001100020000009b4060" data-line="" ><span data-hk="000000001100020000009b4050" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >}</span></span>
3434<span data-hk="000000001100020000009b4070" data-line="" > </span>
3435<span data-hk="000000001100020000009b4150" data-line="" ><span data-hk="000000001100020000009b4080" style="--shiki-light:#8250DF;--shiki-dark:#7AA2F7" >strokeFromWeight</span><span data-hk="000000001100020000009b4090" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >(</span><span data-hk="000000001100020000009b4100" style="--shiki-light:#0550AE;--shiki-dark:#FF9E64" >50</span><span data-hk="000000001100020000009b4110" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span><span data-hk="000000001100020000009b4120" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" >  Zephyr</span><span data-hk="000000001100020000009b4130" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >)</span><span data-hk="000000001100020000009b4140" style="--shiki-light:#6E7781;--shiki-light-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic" > // 27</span></span>
3436<span data-hk="000000001100020000009b4230" data-line="" ><span data-hk="000000001100020000009b4160" style="--shiki-light:#8250DF;--shiki-dark:#7AA2F7" >strokeFromWeight</span><span data-hk="000000001100020000009b4170" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >(</span><span data-hk="000000001100020000009b4180" style="--shiki-light:#0550AE;--shiki-dark:#FF9E64" >100</span><span data-hk="000000001100020000009b4190" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span><span data-hk="000000001100020000009b4200" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" > Zephyr</span><span data-hk="000000001100020000009b4210" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >)</span><span data-hk="000000001100020000009b4220" style="--shiki-light:#6E7781;--shiki-light-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic" > // rounded to 36</span></span>
3437<span data-hk="000000001100020000009b4310" data-line="" ><span data-hk="000000001100020000009b4240" style="--shiki-light:#8250DF;--shiki-dark:#7AA2F7" >strokeFromWeight</span><span data-hk="000000001100020000009b4250" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >(</span><span data-hk="000000001100020000009b4260" style="--shiki-light:#0550AE;--shiki-dark:#FF9E64" >200</span><span data-hk="000000001100020000009b4270" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span><span data-hk="000000001100020000009b4280" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" > Zephyr</span><span data-hk="000000001100020000009b4290" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >)</span><span data-hk="000000001100020000009b4300" style="--shiki-light:#6E7781;--shiki-light-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic" > // rounded to 49</span></span>
3438<span data-hk="000000001100020000009b4390" data-line="" ><span data-hk="000000001100020000009b4320" style="--shiki-light:#8250DF;--shiki-dark:#7AA2F7" >strokeFromWeight</span><span data-hk="000000001100020000009b4330" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >(</span><span data-hk="000000001100020000009b4340" style="--shiki-light:#0550AE;--shiki-dark:#FF9E64" >300</span><span data-hk="000000001100020000009b4350" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span><span data-hk="000000001100020000009b4360" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" > Zephyr</span><span data-hk="000000001100020000009b4370" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >)</span><span data-hk="000000001100020000009b4380" style="--shiki-light:#6E7781;--shiki-light-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic" > // rounded to 64</span></span>
3439<span data-hk="000000001100020000009b4470" data-line="" ><span data-hk="000000001100020000009b4400" style="--shiki-light:#8250DF;--shiki-dark:#7AA2F7" >strokeFromWeight</span><span data-hk="000000001100020000009b4410" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >(</span><span data-hk="000000001100020000009b4420" style="--shiki-light:#0550AE;--shiki-dark:#FF9E64" >400</span><span data-hk="000000001100020000009b4430" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span><span data-hk="000000001100020000009b4440" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" > Zephyr</span><span data-hk="000000001100020000009b4450" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >)</span><span data-hk="000000001100020000009b4460" style="--shiki-light:#6E7781;--shiki-light-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic" > // rounded to 80</span></span>
3440<span data-hk="000000001100020000009b4550" data-line="" ><span data-hk="000000001100020000009b4480" style="--shiki-light:#8250DF;--shiki-dark:#7AA2F7" >strokeFromWeight</span><span data-hk="000000001100020000009b4490" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >(</span><span data-hk="000000001100020000009b4500" style="--shiki-light:#0550AE;--shiki-dark:#FF9E64" >500</span><span data-hk="000000001100020000009b4510" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span><span data-hk="000000001100020000009b4520" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" > Zephyr</span><span data-hk="000000001100020000009b4530" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >)</span><span data-hk="000000001100020000009b4540" style="--shiki-light:#6E7781;--shiki-light-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic" > // rounded to 99</span></span>
3441<span data-hk="000000001100020000009b4630" data-line="" ><span data-hk="000000001100020000009b4560" style="--shiki-light:#8250DF;--shiki-dark:#7AA2F7" >strokeFromWeight</span><span data-hk="000000001100020000009b4570" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >(</span><span data-hk="000000001100020000009b4580" style="--shiki-light:#0550AE;--shiki-dark:#FF9E64" >600</span><span data-hk="000000001100020000009b4590" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span><span data-hk="000000001100020000009b4600" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" > Zephyr</span><span data-hk="000000001100020000009b4610" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >)</span><span data-hk="000000001100020000009b4620" style="--shiki-light:#6E7781;--shiki-light-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic" > // rounded to 121</span></span>
3442<span data-hk="000000001100020000009b4710" data-line="" ><span data-hk="000000001100020000009b4640" style="--shiki-light:#8250DF;--shiki-dark:#7AA2F7" >strokeFromWeight</span><span data-hk="000000001100020000009b4650" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >(</span><span data-hk="000000001100020000009b4660" style="--shiki-light:#0550AE;--shiki-dark:#FF9E64" >700</span><span data-hk="000000001100020000009b4670" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span><span data-hk="000000001100020000009b4680" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" > Zephyr</span><span data-hk="000000001100020000009b4690" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >)</span><span data-hk="000000001100020000009b4700" style="--shiki-light:#6E7781;--shiki-light-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic" > // rounded to 146</span></span>
3443<span data-hk="000000001100020000009b4790" data-line="" ><span data-hk="000000001100020000009b4720" style="--shiki-light:#8250DF;--shiki-dark:#7AA2F7" >strokeFromWeight</span><span data-hk="000000001100020000009b4730" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >(</span><span data-hk="000000001100020000009b4740" style="--shiki-light:#0550AE;--shiki-dark:#FF9E64" >800</span><span data-hk="000000001100020000009b4750" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span><span data-hk="000000001100020000009b4760" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" > Zephyr</span><span data-hk="000000001100020000009b4770" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >)</span><span data-hk="000000001100020000009b4780" style="--shiki-light:#6E7781;--shiki-light-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic" > // rounded to 174</span></span>
3444<span data-hk="000000001100020000009b4870" data-line="" ><span data-hk="000000001100020000009b4800" style="--shiki-light:#8250DF;--shiki-dark:#7AA2F7" >strokeFromWeight</span><span data-hk="000000001100020000009b4810" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >(</span><span data-hk="000000001100020000009b4820" style="--shiki-light:#0550AE;--shiki-dark:#FF9E64" >900</span><span data-hk="000000001100020000009b4830" style="--shiki-light:#1F2328;--shiki-dark:#89DDFF" >,</span><span data-hk="000000001100020000009b4840" style="--shiki-light:#1F2328;--shiki-dark:#C0CAF5" > Zephyr</span><span data-hk="000000001100020000009b4850" style="--shiki-light:#1F2328;--shiki-dark:#9ABDF5" >)</span><span data-hk="000000001100020000009b4860" style="--shiki-light:#6E7781;--shiki-light-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic" > // 207</span></span></code></pre></div><div class="uno-o6onjg"><div class="uno-umj9di" style="width:0px;height:0px"><div data-hk="000000001100020000009b49006000" class="
3445              pointer-events-none absolute z-2
3446              bg-sine-from-hazel-100/90 dark:bg-sine-from-mauve-900/90
3447              bg-sine-to-transparent
3448              inset-y-0 left-0 w-24 bg-sine-dir-r
3449            " style="opacity:0"></div><div data-hk="000000001100020000009b49006001" class="
3450              pointer-events-none absolute z-2
3451              bg-sine-from-hazel-100/50 dark:bg-sine-from-mauve-900/50
3452              bg-sine-to-transparent
3453              inset-y-0 left-0 w-8 bg-sine-dir-r
3454            " style="--sine-bg-to-pct:50%;opacity:0"></div><div data-hk="000000001100020000009b49006010" class="
3455              pointer-events-none absolute z-2
3456              bg-sine-from-hazel-100/90 dark:bg-sine-from-mauve-900/90
3457              bg-sine-to-transparent
3458              inset-y-0 right-0 w-24 bg-sine-dir-l
3459            " style="opacity:0"></div><div data-hk="000000001100020000009b49006011" class="
3460              pointer-events-none absolute z-2
3461              bg-sine-from-hazel-100/50 dark:bg-sine-from-mauve-900/50
3462              bg-sine-to-transparent
3463              inset-y-0 right-0 w-8 bg-sine-dir-l
3464            " style="--sine-bg-to-pct:50%;opacity:0"></div><div data-hk="000000001100020000009b49006020" class="
3465              pointer-events-none absolute z-2
3466              bg-sine-from-hazel-100/90 dark:bg-sine-from-mauve-900/90
3467              bg-sine-to-transparent
3468              inset-x-0 top-0 h-24 bg-sine-dir-b
3469            " style="opacity:0"></div><div data-hk="000000001100020000009b49006021" class="
3470              pointer-events-none absolute z-2
3471              bg-sine-from-hazel-100/50 dark:bg-sine-from-mauve-900/50
3472              bg-sine-to-transparent
3473              inset-x-0 top-0 h-8 bg-sine-dir-b
3474            " style="--sine-bg-to-pct:50%;opacity:0"></div><div data-hk="000000001100020000009b49006030" class="
3475              pointer-events-none absolute z-2
3476              bg-sine-from-hazel-100/90 dark:bg-sine-from-mauve-900/90
3477              bg-sine-to-transparent
3478              inset-x-0 bottom-0 h-24 bg-sine-dir-t
3479            " style="opacity:0"></div><div data-hk="000000001100020000009b49006031" class="
3480              pointer-events-none absolute z-2
3481              bg-sine-from-hazel-100/50 dark:bg-sine-from-mauve-900/50
3482              bg-sine-to-transparent
3483              inset-x-0 bottom-0 h-8 bg-sine-dir-t
3484            " style="--sine-bg-to-pct:50%;opacity:0"></div></div></div></div></div>
3485<aside data-hk="000000001100020000009b4920" class="r-aside text-md my-[--track-prose-margin] [--divider-margin:1rem] [&amp;>*]:text-hazel-500 [&amp;>*]:dark:text-mauve-500 [&amp;>*]:my-4 [&amp;>*]:line-height-160% [&amp;>*:first-child]:mt-0 [&amp;>*:last-child]:mb-0"><p data-hk="000000001100020000009b4910" >Zephyr's custom curve.</p></aside>
3486<div data-hk="000000001100020000009b4930" style="grid-column:main-track-l-gutter-edge / -1" class="not-prose overflow-clip relative group/code w-full corner-radius-12 corner-shape-superellipse-2 bg-hazel-100 dar
3486k:bg-mauve-900"><div class="flex h-28 items-stretch gap-2 overflow-x-auto py-5"><div data-hk="000000001100020000009b49310" class="relative grid shrink-0 place-items-center overflow-clip text-sm [font-variant-numeric:tabular-nums] select-none bg-hazel-150 dark:bg-mauve-800 bg-sine-from-hazel-200 dark:bg-sine-from-mauve-750 bg-sine-to-hazel-150 dark:bg-sine-to-mauve-800 bg-sine -bg-sine-dir-4 corner-radius-3 corner-shape-superellipse-2 smooth-shadow-z-1 smooth-shadow-inner smooth-shadow-color-from-hazel-a-1000 smooth-shadow-color-to-hazel-a-900 dark:smooth-shadow-color-mauve-1000 first:ml-5 last:mr-5" style="width:27px;--sine-bg-from-pct:12.943478260869565%;--sine-bg-to-pct:13.143478260869564%" title="50: 27 units"><span class="relative z-1 text-[--prose-body]">50</span></div><div data-hk="000000001100020000009b49311" class="relative grid shrink-0 place-items-center overflow-clip text-sm [font-variant-numeric:tabular-nums] select-none bg-hazel-150 dark:bg-mauve-800 bg-sine-from-hazel-200 dark:bg-sine-from-mauve-750 bg-sine-to-hazel-150 dark:bg-sine-to-mauve-800 bg-sine -bg-sine-dir-4 corner-radius-3 corner-shape-superellipse-2 smooth-shadow-z-1 smooth-shadow-inner smooth-shadow-color-from-hazel-a-1000 smooth-shadow-color-to-hazel-a-900 dark:smooth-shadow-color-mauve-1000 first:ml-5 last:mr-5" style="width:35.53675431876924px;--sine-bg-from-pct:17.067514163656636%;--sine-bg-to-pct:17.26751416365664%" title="100: 36 units"><span class="relative z-1 text-[--prose-body]">100</span></div><div data-hk="000000001100020000009b49312" class="relative grid shrink-0 place-items-center overflow-clip text-sm [font-variant-numeric:tabular-nums] select-none bg-hazel-150 dark:bg-mauve-800 bg-sine-from-hazel-200 dark:bg-sine-from-mauve-750 bg-sine-to-hazel-150 dark:bg-sine-to-mauve-800 bg-sine -bg-sine-dir-4 corner-radius-3 corner-shape-superellipse-2 smooth-shadow-z-1 smooth-shadow-inner smooth-shadow-color-from-hazel-a-1000 smooth-shadow-color-to-hazel-a-900 dark:smooth-shadow-color-mauve-1000 first:ml-5 last:mr-5" style="width:49.070644631886864px;--sine-bg-from-pct:23.6056254260323%;--sine-bg-to-pct:23.805625426032304%" title="200: 49 units"><span class="relative z-1 text-[--prose-body]">200</span></div><div data-hk="000000001100020000009b49313" class="relative grid shrink-0 place-items-center overflow-clip text-sm [font-variant-numeric:tabular-nums] select-none bg-hazel-150 dark:bg-mauve-800 bg-sine-from-hazel-200 dark:bg-sine-from-mauve-750 bg-sine-to-hazel-150 dark:bg-sine-to-mauve-800 bg-sine -bg-sine-dir-4 corner-radius-3 corner-shape-superellipse-2 smooth-shadow-z-1 smooth-shadow-inner smooth-shadow-color-from-hazel-a-1000 smooth-shadow-color-to-hazel-a-900 dark:smooth-shadow-color-mauve-1000 first:ml-5 last:mr-5" style="width:63.63589505972418px;--sine-bg-from-pct:30.641978289721827%;--sine-bg-to-pct:30.84197828972183%" title="300: 64 units"><span class="relative z-1 text-[--prose-body]">300</span></div><div data-hk="000000001100020000009b49314" class="relative grid shrink-0 place-items-center overflow-clip text-sm [font-variant-numeric:tabular-nums] select-none bg-hazel-150 dark:bg-mauve-800 bg-sine-from-hazel-200 dark:bg-sine-from-mauve-750 bg-sine-to-hazel-150 dark:bg-sine-to-mauve-800 bg-sine -bg-sine-dir-4 corner-radius-3 corner-shape-superellipse-2 smooth-shadow-z-1 smooth-shadow-inner smooth-shadow-color-from-hazel-a-1000 smooth-shadow-color-to-hazel-a-900 dark:smooth-shadow-color-mauve-1000 first:ml-5 last:mr-5" style="width:80.1153928623702px;--sine-bg-from-pct:38.603088339309274%;--sine-bg-to-pct:38.80308833930928%" title="400: 80 units"><span class="relative z-1 text-[--prose-body]">400</span></div><div data-hk="000000001100020000009b49315" class="relative grid shrink-0 place-items-center overflow-clip text-sm [font-variant-numeric:tabular-nums] select-none bg-hazel-150 dark:bg-mauve-800 bg-sine-from-hazel-200 dark:bg-sine-from-mauve-750 bg-sine-to-hazel-150 dark:bg-sine-to-mauve-800 bg-sine -bg-sine-dir-4 corner-radius-3 corner-shape-superellipse-2 smooth-shadow-z-1 smooth-shadow-inner smooth-shadow-color-from-hazel-a-1000 smooth-shadow-color-to-hazel-a-900 dark:smooth-shadow-color-mauve-1000 first:ml-5 last:mr-5" style="width:98.98657791014296px;--sine-bg-from-pct:47.719602855141524%;--sine-bg-to-pct:47.91960285514153%" title="500: 99 units"><span class="relative z-1 text-[--prose-body]">500</span></div><div data-hk="000000001100020000009b49316" class="relative grid shrink-0 place-items-center overflow-clip text-sm [font-variant-numeric:tabular-nums] select-none bg-hazel-150 dark:bg-mauve-800 bg-sine-from-hazel-200 dark:bg-sine-from-mauve-750 bg-sine-to-
3486hazel-150 dark:bg-sine-to-mauve-800 bg-sine -bg-sine-dir-4 corner-radius-3 corner-shape-superellipse-2 smooth-shadow-z-1 smooth-shadow-inner smooth-shadow-color-from-hazel-a-1000 smooth-shadow-color-to-hazel-a-900 dark:smooth-shadow-color-mauve-1000 first:ml-5 last:mr-5" style="width:120.66854841137635px;--sine-bg-from-pct:58.19398473979533%;--sine-bg-to-pct:58.393984739795336%" title="600: 121 units"><span class="relative z-1 text-[--prose-body]">600</span></div><div data-hk="000000001100020000009b49317" class="relative grid shrink-0 place-items-center overflow-clip text-sm [font-variant-numeric:tabular-nums] select-none bg-hazel-150 dark:bg-mauve-800 bg-sine-from-hazel-200 dark:bg-sine-from-mauve-750 bg-sine-to-hazel-150 dark:bg-sine-to-mauve-800 bg-sine -bg-sine-dir-4 corner-radius-3 corner-shape-superellipse-2 smooth-shadow-z-1 smooth-shadow-inner smooth-shadow-color-from-hazel-a-1000 smooth-shadow-color-to-hazel-a-900 dark:smooth-shadow-color-mauve-1000 first:ml-5 last:mr-5" style="width:145.5871778253653px;--sine-bg-from-pct:70.2319699639446%;--sine-bg-to-pct:70.43196996394458%" title="700: 146 units"><span class="relative z-1 text-[--prose-body]">700</span></div><div data-hk="000000001100020000009b49318" class="relative grid shrink-0 place-items-center overflow-clip text-sm [font-variant-numeric:tabular-nums] select-none bg-hazel-150 dark:bg-mauve-800 bg-sine-from-hazel-200 dark:bg-sine-from-mauve-750 bg-sine-to-hazel-150 dark:bg-sine-to-mauve-800 bg-sine -bg-sine-dir-4 corner-radius-3 corner-shape-superellipse-2 smooth-shadow-z-1 smooth-shadow-inner smooth-shadow-color-from-hazel-a-1000 smooth-shadow-color-to-hazel-a-900 dark:smooth-shadow-color-mauve-1000 first:ml-5 last:mr-5" style="width:174.19830231915049px;--sine-bg-from-pct:84.05376923630459%;--sine-bg-to-pct:84.25376923630458%" title="800: 174 units"><span class="relative z-1 text-[--prose-body]">800</span></div><div data-hk="000000001100020000009b49319" class="relative grid shrink-0 place-items-center overflow-clip text-sm [font-variant-numeric:tabular-nums] select-none bg-hazel-150 dark:bg-mauve-800 bg-sine-from-hazel-200 dark:bg-sine-from-mauve-750 bg-sine-to-hazel-150 dark:bg-sine-to-mauve-800 bg-sine -bg-sine-dir-4 corner-radius-3 corner-shape-superellipse-2 smooth-shadow-z-1 smooth-shadow-inner smooth-shadow-color-from-hazel-a-1000 smooth-shadow-color-to-hazel-a-900 dark:smooth-shadow-color-mauve-1000 first:ml-5 last:mr-5" style="width:207px;--sine-bg-from-pct:99.9%;--sine-bg-to-pct:100%" title="900: 207 units"><span class="relative z-1 text-[--prose-body]">900</span></div></div><!--$--><div data-hk="000000001100020000009b4932000" class="
3487              pointer-events-none absolute z-2
3488              bg-sine-from-hazel-100/90 dark:bg-sine-from-mauve-900/90
3489              bg-sine-to-transparent
3490              inset-y-0 left-0 w-24 bg-sine-dir-r
3491            " style="opacity:0"></div><div data-hk="000000001100020000009b4932001" class="
3492              pointer-events-none absolute z-2
3493              bg-sine-from-hazel-100/50 dark:bg-sine-from-mauve-900/50
3494              bg-sine-to-transparent
3495              inset-y-0 left-0 w-8 bg-sine-dir-r
3496            " style="--sine-bg-to-pct:50%;opacity:0"></div><div data-hk="000000001100020000009b4932010" class="
3497              pointer-events-none absolute z-2
3498              bg-sine-from-hazel-100/90 dark:bg-sine-from-mauve-900/90
3499              bg-sine-to-transparent
3500              inset-y-0 right-0 w-24 bg-sine-dir-l
3501            " style="opacity:0"></div><div data-hk="000000001100020000009b4932011" class="
3502              pointer-events-none absolute z-2
3503              bg-sine-from-hazel-100/50 dark:bg-sine-from-mauve-900/50
3504              bg-sine-to-transparent
3505              inset-y-0 right-0 w-8 bg-sine-dir-l
3506            " style="--sine-bg-to-pct:50%;opacity:0"></div><!--!$--><!--/--></div>
3507<h1 data-hk="000000001100020000009b4940" id="further-reading" >Further reading</h1>
3508<ul data-hk="000000001100020000009b4990" >
3509<li data-hk="000000001100020000009b4960" ><strong data-hk="000000001100020000009b4950" >Designing Type</strong> by Karen Cheng</li>
3510<li data-hk="000000001100020000009b4980" ><strong data-hk="000000001100020000009b4970" >The Stroke: Theory of Writing</strong> by Gerrit Noordzij</li>
3511</ul></div></article></div></main></div><!--!$/e000000--></div><!--$-->
3511<script type="module" async src="/_build/assets/entry-client-B2KhNcgq.js"></script>
3511<!--/--></body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.