Recursive Demo

The idea is to test Recursive in different contexts and under different circumstances. I'm particularly interested in the following:

  1. How do make a text follow a named instance?
  2. How the different named instances and OpenType features work together
  3. How does the monospaced family work with code?
  4. Does the monospaced fonts affect tools like Highlight.js or Prism?
  5. How does the font work at larger sizes?

How do we add named instances to the text?

There are two ways to woork with variable fonts predefined instances. The first one only works if you're generating classes for the instances. For example, the following code will use the recursive-b025-sans-casual-bold pre-defined instance

<h2 class="recursive-b025-sans-casual-bold">How do we add named instances to
the text?</h2>

So, in theory, we just select the class associated with the named instance and add it to the element or to a parent container like div, section or article and that's all we need to do.

Another option is to use CSS Custom Propertiesto define the default for properties and then use font-variation-settings to set them all at once. Because of a limitation of cascading font-variant-settings, this is the best way to do it if you don't want to re-write the entire rules every time any individual value changes.

:root {
  --vf-mono: "MONO" 0;
  --vf-casl: "CASL" 1;
  --vf-slnt: "slnt" 0
  --vf-ital: "ital" 0.5;
  --vf-weight: 400;
  font-weight: var(--vf-weight);
  font-variation-settings:    var(--vf-mono),
                              var(--vf-casl),
                              var(--vf-slant);
                              var(--vf-ital);
  }

The hardest way to use a variable font is to modify font-variation-settings for all the axes that don't have a corresponding CSS property. In the example below, font-weight represents the wght axis but all the other axes need to go inside font-variation-settings either because they are custom axes (MONO and CASL) or because we want to avoid conflicts (slnt and ital).

.byline-credit {
  font-weight: 300;
  font-variation-settings: "MONO" 0, "CASL" 0, "slnt" -15, "ital" 1;
}

You can combine the variable font rules with additional classes for OpenType features or other elements of your design and layout.

Does it work with syntax highlighters?

I modified the styles for Prism.js to acommodate Recursive Mono as the default font for highlighted code. We put Recursive first in the font-family and we add a set of default values for font-variation-settings. You can see the results throughout this document as the modified Prism syntax highlighter is in use.

Note: In the example I also removed prefixed attributes for brevity sake.

code[class*="language-"],
pre[class*="language-"] {
  color: #657b83; /* base00 */
  /* add Recursive to the font stack */
  font-family: Recursive, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;

  /* To handle variable font */
  font-weight: 400;
  font-variation-settings: "MONO" 1, "CASL" 0, "slnt" 0, "ital" 0.5;

  line-height: 1.5;

  /* Change tab size to 2*/
  tab-size: 2;

  hyphens: none;
}

How about longer text?

The following example uses the sans serif version of Recursive to layout a longer piece of content. It takes advantage of multiple predefined instances and classes to make a more playful reading experience.

How to Move Spheres
and
Influence
People

Marko Kloos

Illustrated by: John Picacio

Edited by: George R. R. Martin

Card, Turning

The first time it happens, she’s in P.E. class, because of course it has to be P.E.

It’s fashionable to hate P.E., and most of the other girls at Mapletree Academy claim they do, but T.K. really doesn’t mind it. It’s only twice a week, and they mostly stick to sports she can do with her one working arm. She knows she could easily get out of P.E. by pulling the Cripple Card (although she never calls it that; her parents and teachers would flinch in horror at her own insensitivity toward herself, go figure), but she doesn’t because she likes to run around even if she’s not very good at it. She also doesn’t want to give her stuck-up classmates the satisfaction of being able to shoot her pitying glances as she sits on the sidelines and eats Goldfish crackers while doing her math homework. Truth be told: it’s the only time during the week when T.K. doesn’t feel like everyone’s pussyfooting around her disability.

They’re playing dodgeball that day, at the end of the class. T.K. is pretty good at it considering she can only use one arm, even if she gets nailed by the ball a little more than the other girls. But this session is a shooting gallery, with her as the target. Again. It’s just two girls who are targeting her specifically—and her left side, too, where she can’t block—but they’re stealthy about it so Mrs. Williams, the P.E. teacher, doesn’t come down on them. For some reason, Brooke MacAllister has decided that if T.K. wants to play with the varsity, she can take the hits too. And for this week, she seems to have recruited Alison Keller to be her wingman, because T.K. is getting targeted fire from two angles. Mapletree has a special version of dodgeball where you have to crank out five push-ups on the spot if you get hit. Mrs. Williams wanted to give her a waiver on the push-ups, but T.K. refused the special treatment. She’s not strong enough for one-armed pushups, but she can do crunches just fine, so she does those instead. And today, she’s doing a lot of crunches courtesy of Brooke and Alison. In the middle of her fifth set, a ball comes in and beans her on the left side of the head just as she is coming up from a crunch.

“Ow!”

T.K. glares in the direction of the ball’s origin and spots Brooke, who gives her a curt and jock-like “Sorry!” without even the slightest tone of apology in her voice. T.K. doesn’t want to make anything of it, so she doesn’t even look for Mrs. Williams, but she has her limits, and Brooke’s attention is starting to poke at the edges of them. She finishes her crunches and gets back up to rejoin the ranks. Another ball shoots past her face, so close that she can practically smell the rubber, and she ducks and flinches. This one came from the other side of the court, from Alison’s direction, but Alison pretends to not notice T.K.’s glare as she conspicuously picks another target. T.K. grabs a ricochet off the gym floor and chucks it at Alison, but it misses her by a foot and smacks into the mats lining the wall behind her. Alison looks over to T.K. and smirks, which only serves to crank up the dial of T.K.’s Pissed-Off-O-Meter another notch. She can’t really complain about them throwing balls at her, because that’s what the game is about. But getting singled out for no good reason takes the fun out of it.

“One minute,” Mrs. Williams shouts from the sideline. “Wrap it up, ladies!” Then she turns around and checks her cell phone. T.K. groans.

“Don’t you—” she calls over to Brooke, but Brooke does, and so does Alison. Of course they were waiting for the opportunity for one last cheap shot. Alison’s shot hits T.K.’s right thigh and bounces off. Brooke’s ball comes in a flat arc, and T.K. knows that she’ll take the stupid thing right on the bridge of her nose.

That’s when the thing happens.

Later, she’ll puzzle about what triggered it. She’s hot and sweaty, angry at Brooke and Alison, hurting from the shot to the bare skin of her leg, and the muscles on her left side, the one with the paralysis, are taut enough to snap, which is what happens when she overexerts herself. But she knows that she feels a swell of fresh anger, and something goes snap in her brain. There’s a hot, trickling sensation, like someone just opened the top of her skull and poured a cup of coffee directly on the back side of her brain and down her spinal column. T.K. raises her hand to keep the ball from hitting her in the face, even though she knows it’s too late for that. But then the strangest sensation follows the hot trickle. She can feel the ball not three feet in front of her face—its roundness, the way it displaces the air around it—and she gives it a tiny little shunt with her mind, and it’s the best feeling she’s ever had, like finally scratching an itch you couldn’t get to for an hour, only a hundred times better. The ball—the one that was about to give her a nosebleed—hooks ever so slightly to the left and whizzes past her left side, close enough to her ear that she can hear it whistling through the air.

Nobody notices. T.K. isn’t even sure that Brooke saw the ball didn’t fly true, that it made a little skip at the end of its arc. There are still half a dozen other balls in the air, and there’s a lot of movement and yelling, kids paying attention to throwing or not getting hit. But she is dead sure that she caused that little skip, because she knows that for just that half second, the ball was in her control, and that it went precisely where she had wanted it to go.

 

They hit the showers and get dressed, and T.K. is too amazed and shaken to seek out Brooke and Alison to bitch at them. Now that P.E. is over, nobody pays attention to her anymore. In the first few weeks after she joined the class, her awkward-looking one-handed maneuver to get back into her bra and shirt got some interest from the other girls in the locker room, but that’s old hat now, and she finishes up and leaves as quickly as she can.

And multicolumns?

The biggest question, for me, when working with this font in multiple columns is whether the monospaced font works as well as the sans serif version for this type of content. The example below uses the monospaced family for two-column layout.

How to Move Spheres
and
Influence
People

Marko Kloos

Illustrated by: John Picacio

Edited by: George R. R. Martin

Card, Turning

The first time it happens, she’s in P.E. class, because of course it has to be P.E.

It’s fashionable to hate P.E., and most of the other girls at Mapletree Academy claim they do, but T.K. really doesn’t mind it. It’s only twice a week, and they mostly stick to sports she can do with her one working arm. She knows she could easily get out of P.E. by pulling the Cripple Card (although she never calls it that; her parents and teachers would flinch in horror at her own insensitivity toward herself, go figure), but she doesn’t because she likes to run around even if she’s not very good at it. She also doesn’t want to give her stuck-up classmates the satisfaction of being able to shoot her pitying glances as she sits on the sidelines and eats Goldfish crackers while doing her math homework. Truth be told: it’s the only time during the week when T.K. doesn’t feel like everyone’s pussyfooting around her disability.

They’re playing dodgeball that day, at the end of the class. T.K. is pretty good at it considering she can only use one arm, even if she gets nailed by the ball a little more than the other girls. But this session is a shooting gallery, with her as the target. Again. It’s just two girls who are targeting her specifically—and her left side, too, where she can’t block—but they’re stealthy about it so Mrs. Williams, the P.E. teacher, doesn’t come down on them. For some reason, Brooke MacAllister has decided that if T.K. wants to play with the varsity, she can take the hits too. And for this week, she seems to have recruited Alison Keller to be her wingman, because T.K. is getting targeted fire from two angles. Mapletree has a special version of dodgeball where you have to crank out five push-ups on the spot if you get hit. Mrs. Williams wanted to give her a waiver on the push-ups, but T.K. refused the special treatment. She’s not strong enough for one-armed pushups, but she can do crunches just fine, so she does those instead. And today, she’s doing a lot of crunches courtesy of Brooke and Alison. In the middle of her fifth set, a ball comes in and beans her on the left side of the head just as she is coming up from a crunch.

“Ow!”

T.K. glares in the direction of the ball’s origin and spots Brooke, who gives her a curt and jock-like “Sorry!” without even the slightest tone of apology in her voice. T.K. doesn’t want to make anything of it, so she doesn’t even look for Mrs. Williams, but she has her limits, and Brooke’s attention is starting to poke at the edges of them. She finishes her crunches and gets back up to rejoin the ranks. Another ball shoots past her face, so close that she can practically smell the rubber, and she ducks and flinches. This one came from the other side of the court, from Alison’s direction, but Alison pretends to not notice T.K.’s glare as she conspicuously picks another target. T.K. grabs a ricochet off the gym floor and chucks it at Alison, but it misses her by a foot and smacks into the mats lining the wall behind her. Alison looks over to T.K. and smirks, which only serves to crank up the dial of T.K.’s Pissed-Off-O-Meter another notch. She can’t really complain about them throwing balls at her, because that’s what the game is about. But getting singled out for no good reason takes the fun out of it.

“One minute,” Mrs. Williams shouts from the sideline. “Wrap it up, ladies!” Then she turns around and checks her cell phone. T.K. groans.

“Don’t you—” she calls over to Brooke, but Brooke does, and so does Alison. Of course they were waiting for the opportunity for one last cheap shot. Alison’s shot hits T.K.’s right thigh and bounces off. Brooke’s ball comes in a flat arc, and T.K. knows that she’ll take the stupid thing right on the bridge of her nose.

That’s when the thing happens.

Later, she’ll puzzle about what triggered it. She’s hot and sweaty, angry at Brooke and Alison, hurting from the shot to the bare skin of her leg, and the muscles on her left side, the one with the paralysis, are taut enough to snap, which is what happens when she overexerts herself. But she knows that she feels a swell of fresh anger, and something goes snap in her brain. There’s a hot, trickling sensation, like someone just opened the top of her skull and poured a cup of coffee directly on the back side of her brain and down her spinal column. T.K. raises her hand to keep the ball from hitting her in the face, even though she knows it’s too late for that. But then the strangest sensation follows the hot trickle. She can feel the ball not three feet in front of her face—its roundness, the way it displaces the air around it—and she gives it a tiny little shunt with her mind, and it’s the best feeling she’s ever had, like finally scratching an itch you couldn’t get to for an hour, only a hundred times better. The ball—the one that was about to give her a nosebleed—hooks ever so slightly to the left and whizzes past her left side, close enough to her ear that she can hear it whistling through the air.

Nobody notices. T.K. isn’t even sure that Brooke saw the ball didn’t fly true, that it made a little skip at the end of its arc. There are still half a dozen other balls in the air, and there’s a lot of movement and yelling, kids paying attention to throwing or not getting hit. But she is dead sure that she caused that little skip, because she knows that for just that half second, the ball was in her control, and that it went precisely where she had wanted it to go.

 

They hit the showers and get dressed, and T.K. is too amazed and shaken to seek out Brooke and Alison to bitch at them. Now that P.E. is over, nobody pays attention to her anymore. In the first few weeks after she joined the class, her awkward-looking one-handed maneuver to get back into her bra and shirt got some interest from the other girls in the locker room, but that’s old hat now, and she finishes up and leaves as quickly as she can.

How does it work at larger sizes?

I'm intrigued by the casual (CASL) axis in Recursive. Would it lend itself to large size display-type work?

In the example below:

This is an example

This is an example

This is an example

And the corresponding code looks like this:

<div class="example example3">
  <h2 class="recursive-b025-sans-linear-bold">This is an example</h2>

  <h2 class="recursive-b025-sans-casual-bold">This is an example</h2>

  <h2 class="recursive-b025-mono-casual-bold">This is an example</h2>
</div>