arrowtype / recursive

Recursive Mono & Sans is a variable font family for code & UI
https://recursive.design
SIL Open Font License 1.1
3.31k stars 54 forks source link
font fontmake fonttools google-fonts type-design variable-font

Want (infrequent) updates on new fonts from Arrow Type?

💌 Sign up for the Arrow Type newsletter! 💌

📝 Follow @ArrowType on Instagram! 📝


Recursive Sans & Mono

Learn more on the Recursive web specimen →

Recursive Sans & Mono Repo Artwork

Recursive 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.

In 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.

Recursive 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.

Language Support

Recursive is designed with a modified Google Fonts Latin Expert character set, including numerous useful symbols for currencies & math (see the Character Set notes for more details), plus support for the following languages:

Abenaki, 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

License

When 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.

The Recursive project is licensed under the SIL Open Font License v1.1. 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.


Using the fonts

  1. Download the latest fonts from the Releases (Look under the "Assets" of the latest release, download the zip, and then open that zip)
  2. Install the fonts on your system

Installing fonts on your system

Mac

The easy way: open font files in Font Book, and click "Install Font".

The nice way:

Windows

Double-click the TTF file, then select "Install."

To install many static font files (these may work better in apps such as Microsoft Word and PowerPoint):

On the web

This is a big topic, but a couple of good guides are from MDN and from CSS-Tricks.

In 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:

@font-face {
 font-family: 'Recursive';
 src: url('path/to/font/<UPDATE_SPECIFIC_FONT_PATH>.woff2') format('woff2-variations');
 font-weight: 300 1000;
}

Then, you can use the font with both font-weight and font-variation-settings!

Notes:

Font usage in Code Editors

There are two primary ways to use Recursive in code editors:

1: Rec Mono for Code

Install 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.

2: Standard Recursive Mono desktop fonts

These 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!

To 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.

In 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:

So, you will pretty much be setting your editor to use either Recursive Mn Csl St or Recursive Mn Lnr St.

Settings for specific code editors, to use Recursive Mono desktop fonts:

⚙️ VS Code (Click to expand) In Settings, search `Font Family`, then specify the family you wish to use. For Recursive Mono Casual Regular: ``` "Recursive Mn Csl St", Menlo, "Apple Color Emoji", monospace ``` For Recursive Mono Linear Regular: ``` "Recursive Mn Lnr St", Menlo, "Apple Color Emoji", monospace ``` Then, if you want, you can activate OpenType features by searching in the settings for `fontLigatures`, then editing this in settings.json like this: ```json "editor.fontLigatures": "'ss01','ss05','dlig'" ``` (The above would give you a simplied `6` & `9`, a single-story `a`, and activate code ligatures.)
⚙️ Atom (Click to expand) In the menu bar, go to `Atom` -> `Stylesheet` and add in the following: ```css atom-text-editor { font-family: 'Recursive Mn Csl St'; /* This sets the font family*/ font-feature-settings: "ss01", "ss05", "dlig"; /* This sets OpenType features, if you want to set them. */ } ``` Use `font-family: 'Recursive Mn Lnr St';` to get the Linear family.
⚙️ Sublime Text (Click to expand) Go to `Sublime Text` -> `Preferences` -> `Settings` and set `font_face` to the specific PostScript name of the style you wish to use. For Recursive Mono Casual Regular: ```json "font_face": "Recursive Mn Csl St", ``` For Recursive Mono Linear Regular: ```json "font_face": "Recursive Mn Lnr St", ``` To control code ligatures or other OpenType features, set the `font_options` open, like so: ```json "font_options": ["ss01", "ss05", "dlig"], ``` So, the full settings might look something like this: ```json { "font_face": "Recursive Mn Lnr St", "font_size": 24, "theme": "Adaptive.sublime-theme" } ```

Variable Axes

Recursive has the following axes:

Axis Tag Range Default Description
Monospace MONO 0 to 1 0 Sans (natural-width) to Mono (fixed-width)
Casual CASL 0 to 1 0 Linear to Casual
Weight wght 300 to 1000 300 Light to ExtraBlack. Can be defined with usual font-weight property.
Slant slnt 0 to -15 0 Upright (0°) to Slanted (about 15°)
Cursive CRSV 0, 0.5, or 1 0.5 Always roman (0), auto (0.5), or always cursive (1)

Axis Definitions

Axis Definitions, Recursive

Advanced design recommendations

In 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:

Style range Recommended size Recommended use case
Casual 0 (Linear), Weight 300–800 (Light–ExtraBold) 8px to 72px General use (especially for longer text)
Casual 1 (Casual), Weight 300–800 (Light–ExtraBold) 14px to 72px General use (more personality)
Weights 801–900 (Black–ExtraBlack) 32px to 144px Headlines, display typography
Intermediate values of Casual and Slant 10px to 40px Good in text, but may not look as good in display sizes

Things to be aware of:

OpenType Features

Recursive is built with a number of OpenType features that make it simple to control a few handy typographic features.

OpenType Features in Recursive


Building the fonts

Set up the environment

To build, set up the virtual environment

virtualenv -p python3 venv

Then activate it:

source venv/bin/activate

Then install requirements:

pip install -U -r requirements.txt

Also:

pip install git+https://github.com/LettError/DesignspaceProblems

Build the fonts

The 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.

Note: There 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.

First, prep fonts

Before beginning, change your working directory to mastering.

cd mastering

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.

After 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. 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.

To build the variable font

To build the variable font, run:

# activate venv, install dependencies, cd mastering
version=1.085 # (replace version number)
python build.py --varfiles --version $version
python build.py --variable --version $version

To build the static fonts

To build all the static fonts, run:

# activate venv, install dependencies, cd mastering 
version=1.085 # (replace version number)
python build.py --statfiles --version $version
python build.py --static --version $version

To build all the fonts

If you want to build all of the sources, fonts, and WOFF2 versions of all of the fonts run:

# activate venv, install dependencies, cd mastering
python build.py --all --version 1.085 # (replace version number)

Get notifications (Mac only)

Add 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.

# activate venv, install dependencies, cd mastering
python build.py --all --pync --version 1.085 # (replace version number)

Making a GitHub release

First, build fonts with the mastering flow above. Then:

# navigate to the root directory of the project, then...

# update to latest font build directory
fontDir="fonts_1.085"
src/build-scripts/make-release/00-prep-release.sh $fontDir

Then, copy the latest variable font into your local Recursive Code Config repo to build updated Code fonts. Copy these into the newly-made directory fonts/ArrowType-Recursive-1.XXX/Recursive_Code.

Finally, go to the repo’s Releases page to make a new one.

Using the resources in this project for type design

This 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.

Using the project scripts in RoboFont

  1. Navigate to your robofont scripts folder in a terminal.

    1. In RoboFont's menu, go to Scripts > Reveal Scripts Folder
    2. Open a terminal window.
    3. Type cd, then copy-paste or drag-n-drop the scripts folder to get its full filepath. Hit return/enter.
  2. Make a symbolic link or "symlink" to the Recursive project scripts folder, src/00-recursive-scripts-for-robofont

    1. Still in the same terminal, type ln -s
    2. Copy-paste or drag-n-drop the src/00-recursive-scripts-for-robofont from Finder to get its full path. Hit return/enter.
    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.

So, this will look something like:

ln -s ~/FOLDER_PATH/robofont-scripts ~/FOLDER_PATH/recursive/src/00-recursive-scripts-for-robofont
  1. Update your Scripts menu in RoboFont with Scripts > Update Menu
    • If the Recursive scripts don't appear, you may need to restart RoboFont

Now, you can run the Recursive project scripts directly from the Scripts menu, or by opening them in the Scripting Window.

Contributing

See CONTRIBUTING.md for policies around contributing to the project.

Contributors