Robin Rendle
• San Francisco, California

MD Nichrome

MD Nichrome is a new type family from Mass-Driver and boy howdy does it look wondrous. I love the marketing website for it with all the flashy-as-hell animations showing just how flexible Nichrome is. Some of those animations are made with a python library called Cold Type. Never heard of it before, but sure looks neat.

Gah! If you scroll down the page to the blue section the background starts to fuzz a bit like an old TV which I absolutely adore. It gives this sense of texture and age, which basically all websites lack. It’s a small detail but it’s perfect for the look and feel of Nichrome.

Double gah! Look at that footer.

Of course I hit Inspect Element and scrolled around a bit, noticing that—huh—isn’t it neat that today you can see the design tokens of modern websites like this?

:root {
  --black: #000000;
  --night: #112233;
  --cobalt: #3050FF;
  --rhubarb: #D46379;
  --tangerine: #FA935E;
  --straw: #DCCC9C;
  --sage: #CCCEC3;
  --off-white: #EEEAE5;
  --v-margin: 100px;
  --h-margin: 75px;
  --gutter: 25px;
  --text: var(--black);
  --background: var(--off-white);
  --wght: 92;
  --slnt: 0;
}

These are CSS custom variables and I just wrote about how neat they are for the CSS-Tricks newsletter—but!—I didn’t think about how it’s like a sneak peek into the visual rules of a website.

You can take a look at mine on this very website, too:

:root {
  --color-background: #111;
  --color-border: #222;
  --color-title: #fff;
  --color-text: #bbb;
  --color-subtext: #777;
  --color-faded: #444;
  --color-link: #fe7b53;
  --color-backgroundNav: #000;
  --spacing: 20px;
  --base-font-size: clamp(100%, 1rem + 0.5vw, 21px);
  --font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --header-height: 45px;

  @media screen and (min-width: 767px) {
    --header-height: 50px;
  }
}

I’m doing some whacky stuff I shouldn’t be doing with the --header-height variable in my global.scss file. But it’s neat you can do even that in the first place (even if I shouldn’t be because it makes for some weird-lookin’ and fragile CSS)!

Anyway. MD Nichrome rules. CSS custom properties rule. That is all.