Fork of the Recursive font for kitten.sh
kitten.sh
1# Tail Recursive Sans & Mono
2
3> [!NOTE]
4> This is a fork of the [Recursive font by ArrowType](https://github.com/arrowtype/recursive) with
5> slight modifications for [my personal site](https://kitten.sh) ([repo](https://tangled.sh/@kitten.sh/kitten.sh))
6
7For the Recursive Font, learn more on the [Recursive web specimen →](https://recursive.design)
8
9To create Tail Recursive, the original Recursive files were (hastily) imported into Glyphs. The main goal
10was to remove slab-style serifs on ascenders for the Recursive Sans styles and make a few changes to
11its most text-like mode. The `MONO` axis was renamed to a standard `wdth` axis with a range of 100-140%.
12
13All credit for the original font goes to [Stephen Nixon from ArrowType](https://github.com/arrowtype/).
14
15---
16
17<p align="center">
18<strong>Want (infrequent) updates on new fonts from Arrow Type?</strong>
19 </p>
20<p align="center">
21💌 <strong>Sign up for the <a href="https://arrowtype.com/" target="_blank">Arrow Type newsletter!</a></strong> 💌
22</p>
23<p align="center">
24📝 <strong>Follow <a href="https://instagram.com/arrowtype" target="_blank">@ArrowType</a> on Instagram!</strong> 📝
25</p>
26
27---
28
29Recursive Sans & Mono is a variable type family built for better code & UI. It is inspired by casual script signpainting, but designed primarily to meet the needs of programming environments and application interfaces.
30
31In programming, “recursion” is when a function calls itself, using its own output as an input to yield powerful results. Recursive Mono was used as a tool to help build itself: it was used to write Python scripts to automate type production work and to generate specimen images, and it was used in HTML, CSS, and JS to create web-based proofs & prototypes. Through this active usage, Recursive Mono was crafted to be both fun to look at as well as deeply useful for all-day work.
32
33Recursive Sans borrows glyphs from its parent mono but adjusts the widths of many key glyphs for comfortable readability. Its metrics are *superplexed* – every style takes up the exact same horizontal space, across all styles. In this 3-axis variable font, this allows for fluid transitions between weight, slant, and “expression” (casual to strict letterforms), all without text shifts or layout reflow. Not only does this allow for new interactive possibilities in UI, but it also makes for a uniquely fun typesetting experience.
34
35### Language Support
36
37Recursive is designed with a modified Google Fonts Latin Expert character set, including numerous useful symbols for currencies & math (see the [Character Set notes](https://github.com/arrowtype/recursive/tree/main/docs/00--character_set_for_google_fonts) for more details), plus support for the following languages:
38
39```
40Abenaki, Afaan Oromo, Afar, Afrikaans, Albanian, Alsatian, Amis, Anuta, Aragonese, Aranese, Aromanian, Arrernte, Arvanitic (Latin), Asturian, Atayal, Aymara, Azerbaijani, Bashkir (Latin), Basque, Belarusian (Latin), Bemba, Bikol, Bislama, Bosnian, Breton, Cape Verdean Creole, Catalan, Cebuano, Chamorro, Chavacano, Chichewa, Chickasaw, Cimbrian, Cofán, Cornish, Corsican, Creek, Crimean Tatar (Latin), Croatian, Czech, Danish, Dawan, Delaware, Dholuo, Drehu, Dutch, English, Esperanto, Estonian, Faroese, Fijian, Filipino, Finnish, Folkspraak, French, Frisian, Friulian, Gagauz (Latin), Galician, Ganda, Genoese, German, Gikuyu, Gooniyandi, Greenlandic (Kalaallisut), Guadeloupean Creole, Gwich’in, Haitian Creole, Hän, Hawaiian, Hiligaynon, Hopi, Hotcąk (Latin), Hungarian, Icelandic, Ido, Igbo, Ilocano, Indonesian, Interglossa, Interlingua, Irish, Istro-Romanian, Italian, Jamaican, Javanese (Latin), Jèrriais, Kaingang, Kala Lagaw Ya, Kapampangan (Latin), Kaqchikel, Karakalpak (Latin), Karelian (Latin), Kashubian, Kikongo, Kinyarwanda, Kiribati, Kirundi, Klingon, Kurdish (Latin), Ladin, Latin, Latino sine Flexione, Latvian, Lithuanian, Lojban, Lombard, Low Saxon, Luxembourgish, Maasai, Makhuwa, Malay, Maltese, Manx, Māori, Marquesan, Megleno-Romanian, Meriam Mir, Mirandese, Mohawk, Moldovan, Montagnais, Montenegrin, Murrinh-Patha, Nagamese Creole, Nahuatl, Ndebele, Neapolitan, Ngiyambaa, Niuean, Noongar, Norwegian, Novial, Occidental, Occitan, Old Icelandic, Old Norse, Onĕipŏt, Oshiwambo, Ossetian (Latin), Palauan, Papiamento, Piedmontese, Polish, Portuguese, Potawatomi, Q’eqchi’, Quechua, Rarotongan, Romanian, Romansh, Rotokas, Sami (Inari Sami), Sami (Lule Sami), Sami (Northern Sami), Sami (Southern Sami), Samoan, Sango, Saramaccan, Sardinian, Scottish Gaelic, Serbian (Latin), Seri, Seychellois Creole, Shawnee, Shona, Sicilian, Silesian, Slovak, Slovenian, Slovio (Latin), Somali, Sorbian (Lower Sorbian), Sorbian (Upper Sorbian), Sotho (Northern), Sotho (Southern), Spanish, Sranan, Sundanese (Latin), Swahili, Swazi, Swedish, Tagalog, Tahitian, Tetum, Tok Pisin, Tokelauan, Tongan, Tshiluba, Tsonga, Tswana, Tumbuka, Turkish, Turkmen (Latin), Tuvaluan, Tzotzil, Uzbek (Latin), Venetian, Vepsian, Vietnamese, Volapük, Võro, Wallisian, Walloon, Waray-Waray, Warlpiri, Wayuu, Welsh, Wik-Mungkan, Wiradjuri, Wolof, Xavante, Xhosa, Yapese, Yindjibarndi, Zapotec, Zarma, Zazaki, Zulu, Zuni
41```
42
43## License
44
45When you are considering using a font, the font license is one of the first things you should look for and read. It outlines how you agree to use the fonts, and font licensing is different between different type projects & type foundries.
46
47The Recursive project is licensed under the [SIL Open Font License v1.1](OFL.txt). This is a free software license that permits you to use the font software under a set of conditions. Please refer to the full text of the license for details about the permissions, conditions, and disclaimers.
48
49---
50
51## Using the fonts
52
531. Download the latest fonts from the [Releases](https://github.com/arrowtype/recursive/releases) (Look under the "Assets" of the latest release, download the zip, and then open that zip)
542. Install the fonts on your system
55
56### Installing fonts on your system
57
58#### Mac
59
60The easy way: open font files in Font Book, and click "Install Font".
61
62The nice way:
63- In Finder, navigate to the folder `<yourusername>/Library/Fonts`
64- Drag this to the Finder sidebar, or while the folder is highlighted, use **File > Add to Sidebar** to do so
65- Now, you can manage new font files just like normal files! Drag in fonts. Enclose them in folders to more easily organize families. To deactivate fonts, you can either remove them from this folder or (if you might want them later) right click and "Compress" them into zip files.
66
67#### Windows
68
69Double-click the TTF file, then select "Install."
70
71To install many static font files (these may work better in apps such as Microsoft Word and PowerPoint):
72- Go into the `static_fonts` folder, then into the mono or sans `static_otf` folder.
73- Open Font Settings, then drag-and-drop these font files into the Font Settings window.
74
75### On the web
76
77This is a big topic, but a couple of good guides are [from MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide) and [from CSS-Tricks](https://css-tricks.com/one-file-many-options-using-variable-fonts-web/).
78
79In general, you should link in the font with `@font-face`, being sure to use `font-weight: 300 1000;` to specify the font's weight range:
80
81```
82@font-face {
83 font-family: 'Recursive';
84 src: url('path/to/font/<UPDATE_SPECIFIC_FONT_PATH>.woff2') format('woff2-variations');
85 font-weight: 300 1000;
86}
87```
88
89Then, you can use the font with both `font-weight` and `font-variation-settings`!
90
91Notes:
92
93- `MONO` and `CASL` are "unregistered" axes (not currently in Microsoft's official listing of variation axes and specs), so these tags must be used in all-caps and controlled via `font-variation-settings`.
94- You will eventually be able to also use the property `font-style` to control `slnt` and `CRSV` axes, but these have some browser support issues (as of Oct 2019, but tools are rapidly evolving to better support variable fonts, so this will improve over time!) For now, these work best in `font-variation-settings`.
95- One weird trick: you can use CSS custom properties to more easily control `font-variation-settings` – read more about this technique in [Pixel Ambacht's fantastic tutorial on it](https://pixelambacht.nl/2019/fixing-variable-font-inheritance/).
96
97## Font usage in Code Editors
98
99There are two primary ways to use Recursive in code editors:
100
101#### 1: Rec Mono for Code
102
103Install the `Rec Mono` fonts (found in the “Recursive_Code” folder of release downloads). These have code ligatures & several stylistic sets pre-applied so they will work by default in most code environments & apps. These are also named & configured in a way that enables their use in code themes that utilize italic & bold styles. If you wish to configure specific features in `Rec Mono` fonts (such as a dotted `0` or single-story `g`), see [Recursive Code Config](https://github.com/arrowtype/recursive-code-config).
104
105#### 2: Standard Recursive Mono desktop fonts
106
107These fonts are built in a more traditional way than the "Code" fonts above, so they may render slightly better in some contexts. There are pros and cons, though: Code ligatures work better in the "Code" fonts, in many monospace-only apps. On Mac before macOS 11, these do not work in themes with Italic styles – see above for “Code” fonts that do. And, the "Code" fonts allow you a bit more customization, if you want it!
108
109To use the standard decktop fonts, install the desktop `Recursive Mono` fonts (found in the “Recursive_Desktop” folder of release downloads). Then, activate them & set OpenType features if your code editor allows this. Instructions for three editors follow.
110
111In summary, open the editor settings and set the font family. These family names are shortened because long font names can cause errors in some environments. The main abbreviations are as follows:
112- Metrics:
113 - `Mn` means _Mono_ (monospace/fixed-width)
114 - `Sn` means _Sans_ (proportional/natural-width)
115- Styling:
116 - `Csl` means _Casual_
117 - `Lnr` means _Linear_
118- `St` means _Static_ (as opposed to _variable,_ like the full Recursive variable font)
119
120So, you will pretty much be setting your editor to use either `Recursive Mn Csl St` or `Recursive Mn Lnr St`.
121
122
123#### Settings for specific code editors, to use Recursive Mono desktop fonts:
124
125<details>
126<summary><b><!-------->⚙️ VS Code<!--------></b> (Click to expand)</summary>
127
128In Settings, search `Font Family`, then specify the family you wish to use.
129
130For Recursive Mono Casual Regular:
131
132```
133"Recursive Mn Csl St", Menlo, "Apple Color Emoji", monospace
134```
135
136For Recursive Mono Linear Regular:
137
138```
139"Recursive Mn Lnr St", Menlo, "Apple Color Emoji", monospace
140```
141
142Then, if you want, you can activate OpenType features by searching in the settings for `fontLigatures`, then editing this in settings.json like this:
143
144```json
145 "editor.fontLigatures": "'ss01','ss05','dlig'"
146```
147
148(The above would give you a simplied `6` & `9`, a single-story `a`, and activate code ligatures.)
149
150</details>
151
152<details>
153<summary><b><!-------->⚙️ Atom<!--------></b> (Click to expand)</summary>
154
155In the menu bar, go to `Atom` -> `Stylesheet` and add in the following:
156
157```css
158atom-text-editor {
159 font-family: 'Recursive Mn Csl St'; /* This sets the font family*/
160 font-feature-settings: "ss01", "ss05", "dlig"; /* This sets OpenType features, if you want to set them. */
161}
162```
163
164Use `font-family: 'Recursive Mn Lnr St';` to get the Linear family.
165
166</details>
167
168<details>
169<summary><b><!-------->⚙️ Sublime Text<!--------></b> (Click to expand)</summary>
170
171Go to `Sublime Text` -> `Preferences` -> `Settings` and set `font_face` to the specific PostScript name of the style you wish to use.
172
173For Recursive Mono Casual Regular:
174
175```json
176"font_face": "Recursive Mn Csl St",
177```
178
179For Recursive Mono Linear Regular:
180
181```json
182"font_face": "Recursive Mn Lnr St",
183```
184
185To control code ligatures or other OpenType features, set the `font_options` open, like so:
186
187```json
188"font_options": ["ss01", "ss05", "dlig"],
189```
190
191So, the full settings might look something like this:
192
193```json
194{
195 "font_face": "Recursive Mn Lnr St",
196 "font_size": 24,
197 "theme": "Adaptive.sublime-theme"
198}
199```
200
201</details>
202
203---
204
205## Variable Axes
206
207Recursive has the following axes:
208
209| Axis | Tag | Range | Default | Description |
210| ---------- | ------ | ------------ | ------- | --------------------------------------------------------------- |
211| Monospace | `MONO` | 0 to 1 | 0 | Sans (natural-width) to Mono (fixed-width) |
212| Casual | `CASL` | 0 to 1 | 0 | Linear to Casual |
213| Weight | `wght` | 300 to 1000 | 300 | Light to ExtraBlack. Can be defined with usual font-weight property. |
214| Slant | `slnt` | 0 to -15 | 0 | Upright (0°) to Slanted (about 15°) |
215| Cursive | `CRSV` | 0, 0.5, or 1 | 0.5 | Always roman (0), auto (0.5), or always cursive (1) |
216
217### Axis Definitions
218
219Axis Definitions, Recursive
220
221- **Monospace** `MONO` - 0 to 1. Adjusts the glyph widths from proportional or “Sans” (0) to fixed-width or “Mono” (1).
222
223 *Recommended use:* In general, the proportional design is more readable in text and UI, while the monospace design is more appropriate for code and text in which letter disambiguation is especially critical (e.g. passwords, ID numbers, tabular data, etc).
224
225- **Casual** `CASL` - 0 to 1. Adjusts the expressive style or “genre” of the glyphs. In Recursive, this goes from from Linear (0) to Casual (1).
226
227 *Recommended use:* The Linear style shares a similar structure to fonts classified as *lineal*, merging aspects of humanist sans with rationalized, compact, flat-sided letterforms. This regular, familiar structure makes it appropriate for long-form text requiring focus (e.g. paragraphs, full code documents, and punchy headlines). The Casual style is inspired by single-stroke casual signpainting, but drawn for small sizes. It is most useful in shorter-form text where a warm and inviting tone is desired (e.g. blog post headlines, store signage, and computer terminals).
228
229- **Weight** `wght` - 300 to 1000. The overall thickness of letters and the darkness of text composed with them. Notably, in Recursive, the weight axis does not affect glyph width. A bold weight takes the same amount of space as a light weight, even at in proportional styles of the `MONO` axis.
230
231 *Recommended use:* Differences in weight can provide emphasis in text, show user interaction, or adjust the tone of communication. For light text on dark backgrounds, 400 (“Regular”) tends to be appropriate for text and code. For dark text on a light background, it can be beneficial to adjust the weight upwards to 500 (“Medium”).
232
233 *Why isn’t it a Grade axis?* See [Issue #365](https://github.com/arrowtype/recursive/issues/365)
234
235- **Slant** `slnt` – 0 to -15. The "forward lean" of letters. Note: `-15` (negative 15) corresponds to a 15° clockwise slant, due to type design's roots in geometry. If the Italic axis is at its default value, going past a slant of `-13.99` will activate "cursive" letters, converting them to more-handwritten forms such as the simplified, "single story" `a` and `g`.
236
237 *Recommended use:* Use Slant as a secondary way to emphasize text or vary typographic tone. In text, it can be useful to use a partial slant of around -9, while at display sizes, you can expect the most precise outlines at either 0 or -15. You can also animate from `0` to `-13` without letterforms or glyph widths changing, which is great for things like hovered links or buttons.
238
239- **Cursive** `CRSV` – 0, 0.5, or 1. Controls the substitution of cursive forms along the Slant axis. "Off" (0) maintains Roman letterforms such as a "double story" `a` and `g`, "Auto" (0.5) allows for Cursive substitution, and "On" (1) asserts cursive forms even in upright text with a Slant of 0.
240
241 *Recommended use:* Use Cursive as a tertiary way to emphasize text, or as a way to have more control over animated text (e.g. a hyperlink that slants upon user interaction can by styled with Cursive 0 or 1 to prevent the abrupt changes of glyph substitution).
242
243
244### Advanced design recommendations
245
246In general, Recursive is intended for small-to-medium sized usage, particularly on screen. However, it is useful to understand which stylistic ranges work best in what contexts. A few guidelines worth knowing:
247
248| Style range | Recommended size | Recommended use case |
249| ---------------------------- | -------------------------------- | --------------------------------------------------- |
250| Casual 0 *(Linear)*, Weight 300–800 *(Light–ExtraBold)* | 8px to 72px | General use (especially for longer text) |
251| Casual 1 *(Casual)*, Weight 300–800 *(Light–ExtraBold)* | 14px to 72px | General use (more personality) |
252| Weights 801–900 *(Black–ExtraBlack)* | 32px to 144px | Headlines, display typography |
253| Intermediate values of Casual and Slant | 10px to 40px | Good in text, but may not look as good in display sizes |
254
255
256Things to be aware of:
257- If you use weights 300–800 for large text, it may look good to slightly reduce letter-spacing (also called _tracking_).
258- The heaviest weights of Recursive are _really heavy_, so they need to be a little larger to remain legible.
259- Casual and Slant axes look great with intermediate values at text sizes, but they are mostly intended to be used at either fully "on or off" values, with intermediates available to allow animated stylistic transitions. If you are setting type at large sizes, avoid intermediate `CASL` and `slnt` values. If you stick to named instances in design apps (e.g. `Mono Casual Bold Italic`, etc), this is handled for you automatically.
260- The Casual Italic instances are drawn to work well in text but are also the most expressive styles of the family – try them at large sizes to show off their wavy stems and really make a statement! 🏄♂️🏄♀️
261
262
263## OpenType Features
264
265Recursive is built with a number of OpenType features that make it simple to control a few handy typographic features.
266
267
268
269
270---
271
272## Building the fonts
273
274### Set up the environment
275
276To build, set up the virtual environment
277
278```
279virtualenv -p python3 venv
280```
281
282Then activate it:
283
284```
285source venv/bin/activate
286```
287
288Then install requirements:
289
290```
291pip install -U -r requirements.txt
292```
293
294Also:
295
296```
297pip install git+https://github.com/LettError/DesignspaceProblems
298```
299
300### Build the fonts
301
302The fonts are built with the `mastering/build.py` script. This script can build everything (`python build.py --all`), or a subset of the fonts. To view all the options, type `python build.py -h` to see all options. The recommended build process is detailed below.
303
304*Note:*
305There are sub-scripts for just prepping the source files (`mastering/prep_fonts.py`), building the source files (`mastering/build_files.py`), generating the variable font (`mastering/build_variable.py`), and generating the static fonts (`build_static.py`). These scripts can be handy if you just want to do one thing to the build files. Each takes a set of command line arguments, all documented (type `python <script_name> -h`) to view the documentation.
306
307**First, prep fonts**
308
309Before beginning, change your working directory to `mastering`.
310
311```
312cd mastering
313```
314
315`python build.py --files` is the first step. This will generate all the files needed for building the variable and static fonts. You will likely want to give the font a version number with this command (`python build.py --version 1.085 --files`). To prep only files for the variable font, use `python build.py --varfiles`, or to prep only files for the static fonts, use `python build.py --statfiles`.
316
317After the files have been generated (do note that the static instances take a bit of time to generate), you will want to look at the `mastering/build/static/CFF/checkoutlines.txt` file. This is the report (edited to remove issues that do not need attention) from [checkoutlinesUFO](https://adobe-type-tools.github.io/afdko/AFDKO-Overview.html#checkoutlinesufo). Issues found in this report should be cleaned up in the static UFOs. Many issues are due to overlap removal. Nothing is perfect, overlap removal algorithms included.
318
319**To build the variable font**
320
321To build the variable font, run:
322
323```bash
324# activate venv, install dependencies, cd mastering
325version=1.085 # (replace version number)
326python build.py --varfiles --version $version
327python build.py --variable --version $version
328```
329
330**To build the static fonts**
331
332To build all the static fonts, run:
333
334```bash
335# activate venv, install dependencies, cd mastering
336version=1.085 # (replace version number)
337python build.py --statfiles --version $version
338python build.py --static --version $version
339```
340
341**To build all the fonts**
342
343If you want to build all of the sources, fonts, and WOFF2 versions of all of the fonts run:
344
345```bash
346# activate venv, install dependencies, cd mastering
347python build.py --all --version 1.085 # (replace version number)
348```
349
350**Get notifications (Mac only)**
351
352Add option `--pync` (`-p` for short) to the script call to get Mac notifications, which may be helpful if you are working on other tasks while a build runs.
353
354```bash
355# activate venv, install dependencies, cd mastering
356python build.py --all --pync --version 1.085 # (replace version number)
357```
358
359### Making a GitHub release
360
361First, build fonts with the mastering flow above. Then:
362
363```bash
364# navigate to the root directory of the project, then...
365
366# update to latest font build directory
367fontDir="fonts_1.085"
368src/build-scripts/make-release/00-prep-release.sh $fontDir
369```
370
371Then, copy the latest variable font into your local [Recursive Code Config](https://github.com/arrowtype/recursive-code-config) repo to build updated Code fonts. Copy these into the newly-made directory `fonts/ArrowType-Recursive-1.XXX/Recursive_Code`.
372
373Finally, go to the repo’s Releases page to make a new one.
374
375## Using the resources in this project for type design
376
377This project has included a large amount of research (contained in `docs/`), and contains many small tools (contained in `src/00-recursive-scripts-for-robofont` that may help you if you are designing variable fonts with UFOs in RoboFont.
378
379### Using the project scripts in RoboFont
380
3811. Navigate to your robofont scripts folder in a terminal.
382 1. In RoboFont's menu, go to *Scripts > Reveal Scripts Folder*
383 2. Open a terminal window.
384 3. Type `cd `, then copy-paste or drag-n-drop the scripts folder to get its full filepath. Hit return/enter.
385
3862. Make a symbolic link or "symlink" to the Recursive project scripts folder, `src/00-recursive-scripts-for-robofont`
387 1. Still in the same terminal, type `ln -s `
388 2. Copy-paste or drag-n-drop the `src/00-recursive-scripts-for-robofont` from Finder to get its full path. Hit return/enter.
389 3. Check that it's there by running `ls` to list files. You should see `src/00-recursive-scripts-for-robofont` as one of the items listed.
390
391So, this will look something like:
392
393```
394ln -s ~/FOLDER_PATH/robofont-scripts ~/FOLDER_PATH/recursive/src/00-recursive-scripts-for-robofont
395```
396
3973. Update your Scripts menu in RoboFont with *Scripts > Update Menu*
398 - If the Recursive scripts don't appear, you may need to restart RoboFont
399
400Now, you can run the Recursive project scripts directly from the Scripts menu, or by opening them in the Scripting Window.
401
402## Contributing
403
404See [CONTRIBUTING.md](CONTRIBUTING.md) for policies around contributing to the project.
405
406## Contributors
407
408- Design by Stephen Nixon, with
409 - Lisa Huang
410 - Katja Schimmel
411 - Rafał Buchner
412- Font Mastering with Ben Kiel
413
414+ Many other advisors and reviewers
415