Recursive Mono & Sans 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,recursionis when a function calls itself, using its own output as an input to yield powerful results. github.com
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.
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 900; to specify the font's weight range:
Here is how you can initially call League Spartan in your css, provided your webfont is in the same directory as your stylesheet:
@font-face {
font-family: 'Recursive';
src: 'path/to/font/file/rec-mono_xprn_wght_slnt_ital--2019_09_30.woff2' format('woff2-variations');
font-weight: 300 900;
}
html {
font: 150%/1.5 'Recursive', Verdana, sans-serif;
}
h1 {
font-size: 350%;
/* mehrere Settings in einer Anweisung, sonst annulieren sie sich! */
font-variation-settings: "wght" 700, "slnt" -7, "XPRN" 0.4, "MONO" 0.1;
}
p {
font-variation-settings: "wght" 333, "slnt" -6;
}
/* der „Code“-Text hier ebenfalls in der „Recursive“ */
pre {
font-size: 80%;
font-family: "Recursive", Monaco, monospace;
font-variation-settings: "wght" 500, "MONO" 1;
}