The Developer’s Guide To Fonts with Stephen Nixon

I I've always been really attracted to drawing And 1 in particular, So, I guess, a simple way to say it is like So, yeah, like, being able to think clearly when I'm looking at some code often for the web, that's maybe 14 pixels And then there's a more custom contact route. So you can imagine how that would apply to photography as well. Maybe you're selling photos in a gallery or maybe you're commissioned to make photos for commercials and brands and things. So type is kinda similar to that. The he's a pretty cool SF Pro or Inter or something easily available, you'll see, like, the strokes are almost exactly the same width all around horizontal vertical. But if you look at the bold or especially like the black version of that font, you'll notice that, like, the horizontal strokes are noticeably thinner. And that's just because we have to preserve some white space there to make it a recognizable letter.

there's also Mark Simonson in Saint Paul.

And She has some, like, really neat And yeah. So that's kind of the thing I use most to draw the fonts. And for web developers, you've probably worked with SVG. Of of course, like, most

growing up in school, I had a lot of friends who were, like, very interested in football teams and stuff, and that was in South Dakota, which is next to Colorado. So, like, obviously, the Denver Broncos have the the coolest logo in the league.

you mean Helvetica or something? And Yeah. No. It turns out, like, I googled, like, Twin Cities type designers and, what access it has, like, according to the goals of that particular type base.

And I didn't really understand football, but I I liked to try to, like, draw logos. And then getting up more into high school, I got into We like to complain about it usually because a lot of effort is put into like, we don't just, like, click a button to slant everything. You if you slant the letter o,

and kind of geometric problems, I Wes, kind of click nicely in my brain.

I I realized that there were, like, living from a typeface.

So to give the 30 year history,

I guess as a

In fact, he's got a really good article I should mention about, like, using variable fonts when you want more control, and, like, there's a specific problem with the CSS cascade graphic design major in college, I was really lucky to get a job at IBM as a visual designer for software.

And it's by Vercel Unbacht, and that's just roles like screen name. But it's a really great look at, like, one kind of code ligatures.

a bit akin to, like, those specialized CSS techniques like the clamp scale or something, 1, like, a really cool and so as soon as I learned about that, I was like, I gotta do that someday. I would love to do that. But I don't know if, like it's kind of like it felt like joining the major leagues or something where, sign painting Mhmm. In the US and other countries.

is a developer who's, like, done a lot of really great blogging about font use on the web.

So a really great example of that is called Wackama Node

font designer, the tools I tend to And that is kind of the core idea behind the recursive project. Wow. That's so cool. You could definitely see building process of their fonts. So I guess playing electric bass and some bands. So I was, like, drawing flyers by hand and trying to, like, copy those and hand them out.

where if you really wanna control variable fonts, that's the way that I've found most useful to do it.

the little sliders you can play with to really see exactly how the font change as it gets more mono, as it gets more

as it gets like,

that was kind of something invented for this font project or this typeface.

casual,

to come up with the visual design for that website and code the website itself.

the idea of a hover style being different on this font versus another font? For a long time before variable fonts were like publicly usable TextEdit on Mac or Figma, you select the family and then the style name. So those exist as their own sort of separate data entries within a font. There's also things like there is a master's degree program for type design No. That, a demo code for a conference, code ligatures are in fact a bad idea because somebody would have a hard time typing what you've shown. Yeah. And so, like, in that case, I think they're a terrible idea.

like, and how to choose 1. I'm still I'm I'm still trying to figure that out. Yeah. Yeah. Yeah. Right.

This the if you're out there and you you really wanna get a good handle beyond the variable fonts dot I o, this recursive dot design,

rant against coding ligatures is a pretty fun read. And his main exception is that they So, yeah, it was really great to have, sort of pattern.

Matthew Butterick's, kind of. Oh, if depending how you've drawn it, you might get kinks in the outlines just based on how the math of linear interpolation maybe for themselves.

there's different names for, say, different applications like Microsoft Word has sort of just a single font family menu. And then within each font family, you might hit, like, command I or command b to make it italic or bold. Yeah.

Yeah. I mean, did the things that we did to But, of course, in a monospace font, the I is usually given like a bottom serif and maybe a top serif and the m and w are scrunched into like just as little of space as the And I tried coding with that pretty early on. You know, I I was coding little web demos and things and realized that for me actually having So, And then I found out that graphic design was a trade and and a job that people actually had, which kinda blew my mind. But I ended up going to school for that at the University of Minnesota in the Twin Cities.

the the basic reason that variable fonts really exist is Wow. But if something's full bolded, then it kinda starts to erode that, like, recognizability.

graphic I told you to make a new comic Sanity? And I was like, first of all, that's, like, like, the most incredible brief because people hate this font. So it's clearly a great font.

what's the appropriate amount of size for the body Scott? And, like, So and you can format was taken into, like, a monospace

rules that you learn.

Type type designers seem to just have a, like, a a different handle on design. And it's gotta be just because, when working with variable fonts. So I don't know if y'all do, like, notes, with show links. Yeah. Yeah. In fact, as you're as you talk, we've been pasting them in here. Cool. Okay. When it's Wes and I, Wes and I fight to see who can get it in 1st. And it seems like CJ JS just kind of taken that up because he got this one in before me. Good job. Good job. Well, there's a specific blog blog post that I should mention called boiling eggs

to make their typography better

on their website? Yeah. I mean, the easy answer is if you use a font from Aero Type, it's gonna elevate the game Yes. Right out of the gate. I am using name mono in my slides for my talk in Amsterdam in a couple weeks. So yes. Yeah. I'm really honored by that. That's really cool. Nice. Well, there you go. You got the 80/20 solve. Yes.

what, like, type makes up such a huge part of our design. Because we're using the best fonts. Yeah. Yeah. You're using the best fonts. That's it. Do you have any, like, 80/20 kind of, like, what are what are the small things that people can do

Maybe if it's just an article, you could bump it up a little further. And you definitely wanna have enough line spacing between those. You want your columns of text to not be too wide.

Yeah. I mean, I think that the, It's called Children of Time by Adrian Tchaikovsky.

just clear hierarchy is probably, thing to hand paint well for a sign paint and project.

how his latest release at that point was not actually, in fact, just similar to Helvetica.

most basic beginner questions. And he was, like, so patient and wonderful in responding and kind of walking me through, like, what what do you use? There are exploring, typography guide like the elements of typography, kinda history, I guess. I was at IBM when they kind of, like, revised their whole design system approach. And

And I I try to remind remind myself and remember that because single stroke casual sign painting, you will still see it. Yeah. I had a couple of classmates and Node in particular who were, like, very good at this. They or, like, if you see a site that looks good, copy what's working. It takes time to kind of gain gain a sense of what that is maybe.

to go and meet Eric Olson, and I kind of, like, brought a little, like, podcast recording setup because I was kind of obsessed with podcasts back then too. And I just asked him, like, all of the silliest, yeah, I I I don't actually have a good answer to that. I think there's a few fonts that And is not something that comes for free to me maybe. So I thought, okay, I have to clearly strip this back a little bit. And, design, typography in how you can perceive the things you're interested in. And so that's actually kind of a constant gap, you know, when you're a web developer or a a visual designer or a UX designer or a font designer that I I think it's useful to remember, just in, like, how you communicate.

You may know Proxima Nova. I feel like Proxima Nova public knowledge of fonts has exploded in the last 15 years as well. But, yeah, back then, like, I I was really lucky Mhmm. I forget. I I definitely recognize this kind of I asked her to kind of, you know, write some pangrams essentially, write other glyphs that would or other symbols that would appear in a font.

outline scale fluidly without kinks. And that's the major difference, I guess. You also have to know a few things to be able to and we'd like you to help us make it. Maybe an agency has come up with, like, a really cool idea for a logo or a word mark, but they need some help in refining it into something that really is solid

And it's kind of got like a Greek font look to it. But that was a super early version interested in.

and a black weight and then interpolate the weights in between from there. For a long time, they would do sort of a secondary process or many secondary processes to, like, slash slash looks better if the slash slash is, like, kind of turned a little bit together.

So there there's like yeah. It's it's harder in some ways, but If you had a website that was using many styles like fifteen or Wes, then variable fonts would save you quite a lot of data and maybe start to actually impact page load time and such.

lowercase a's, other information sort of along for the ride to make the font work. So there are things like font names that exist in a font, and cut the letter out of a piece of steel, and then you use that to, like, hammer into, I think, a piece of copper or brass. And then you filled that with lead, and that was what created a piece of a font.

or be able to at all interpolate between those 2 shapes.

that font interpolation will trying to make sure that your

a glyph with the exact same number and order of points so whatever.

draw

I I Node there's a distinction between a typeface and a font, but how many fonts

But Mhmm. Definitely. Once you learn some of the little tips and tricks about where to put the points on on a curve, it it can get a little little easier. In fact, I just made, the Canon Films logo into the Syntax logo the other day as a Nice. A pen tool exercise. I was like, I I have to do this. Like the Canon Photography

drawing up a poster for what the movie would be without having a script or anything. They just make a poster and then sell it based on the poster and then have to make the movie in a couple months.

So so how many, like, how many

So groups has a cool logo. Yeah. Yeah. Yeah. Kinda looks like an arrow type logo almost. Oh, yeah. Yeah. I can see that. It's fun to twist logos.

have you made? Like, a font is the actual installable thing.

they they were famous for

So so the the I know my my experience with the pen tool ESLint the past, it's been a little bit of struggle.

logo? No. The Canon Group Films is the, the film production group that, they they produced, like, a whole bunch of, b movies from the eighties. And,

maybe intermediate coder that I often So Google Fonts is one place that's, like, been really pretty instrumental in moving forward variable fonts because

Yet again, I've derailed my train of thought. No. Hey. It's all good. Let's actually get in here. To prevent you from derailing,

the the thing that as a, binary file like a dot OTF or dot TTF font.

Although a lot of the things work without you having to think about it too hard, which is also really nice and a a huge advantage.

a syntax

good and bad arguments against

at that point, ran a Twitter poll and, like, asked people to reshare it, please, And, yeah, like, there's a lot of little instances where fonts, because of their history, use Mhmm. I could I could tell you I've made infinite fonts, font designers, which also, again, another thing that blew my mind. I we had a project to look into a historical font and a new font. And I was like, hold up. New fonts? Like, species of spider. And so, like, they're, like, a highly evolved civilization of spiders.

I do think that they can is is your TypeFoundry. That's awesome. Yeah. Exactly. Like, like the pointy, directional, But 25% revival of accidents or really standard Sanity as used in, like, the Vignelli signage for the New York subway system. Oh, yeah. Yeah. So that's, like, a nice project. And and Klim does, like, probably the best job of anyone of, like, communicating the story behind the font and, like, the design around the fonts. So that's really beautiful stuff.

Personally, like, And so yeah. And I I

kind of with the options like, I hate them, I love and then things that I

a bit like But it's really designed expression.

first Node, how do you feel about ligatures in coding fonts?

I so some of the stuff I've seen before are,

field.

monospace fonts that are also, like, dyslexic friendly. And Oh, sure. Because I I guess with with dyslexia,

not skip over those letters, and they can, like, read it more. Mhmm. Have you had experience

Yeah. Thanks.

if the characters look different, then it's easier for someone with dyslexia to

making a dyslexic friendly font, or is that ever a consideration you make when you're when you're working on fonts?

projects that I sell through Aero Type.

Nice. You you touched on variable fonts. Can you talk about, like, technically, how JS a web developer we would use them? Because I've only recently stumbled across them. Like, we have MDIO on the Syntax website.

5 original retail

she is dyslexic.

letters is like something she uses in her art a lot.

like, sailboats, mountains.

and she draws, like, little motifs, like, kinda stick people in a specific way or different,

and So it's just a pen tool, similar to Illustrator or Photoshop or to New Yarn or from South Dakota, you know, I I was, like, totally captured by these mosaics in the subway system. And there's,

and just kinda has this, like, fonts are, what type design is, why he is actually making new fonts, and, like, why anybody would want a new font, and I was considering whether to go to the trouble of making ligatures in recursive, ish, maybe 16 pixels.

the way she writes you can include multiple styles in 1 file and the font tends to have

other elements, like, have a clear separation from that weight range information, for instance, or stylistic range information into a single font file,

it'll give you rules, like, oh, you should never use more than 55 characters for a column of text Yeah. I I yeah. That MA program I did for font design, and then I came out of that and started doing font development for Google Fonts, enjoyed. So The, has 10,000,000,000, Oh, nice.

Like, you know, I think that You know, I I'm not perfect on the the history of it, but for instance,

in a in a good hierarchical sense.

kind of slightly more traditional assigns a specific kind of number value to every character in most languages that are commonly used. And so, yeah, font has a whole table for saying, like, He's also yeah. He's he's a bit of a rare case in that he's kind of worked wonder is, like, am I getting this equal to or less than symbol in the right order or the wrong order? And so that is my very favorite coding literature just that, like, converts, like, greater than or equal to and less than or equal to I like that too. Yeah. To the, like, more handwritten looking version.

as a general guideline.

That's pretty tight.

Yeah. Way back. But, yeah, starting with that body size and, like, making it appropriate for, on the other hand, like, there are people with dyslexia who say, like, I prefer reading this font, and it works for me. And so that's really cool when it when it does.

if you if you look around the web, you'll just kind of see that things I think are more around, like, 75 behind fonts like Comic Sans and Papyrus. And I guess, I only remember the meme fonts right Node. Yeah. Yeah. Several others that are maybe more, Ken Barber is a main designer at House Industries, and he's done, like, incredible hand lettering

friendly font in my entire life until this, and I could

experience,

Yeah. Pro or something. I don't know.

I would love to know what this is. But either way, it's, like, kind of weighted heavier towards the bottom of every character.

AI, the the Claude l l m, they have one of their 3 fonts is a dyslexic friendly font. Okay. What is it? Let's see. It's it's just named dyslexic friendly. It does not even have a name. Oh, interesting.

It's it seems like they maybe have adapted that. Yeah. Okay. Let's get into typography for the web for a little bit Sure. Beef before we run out of time here. So

Mhmm. And I will say,

one thing that I I think is pretty obvious is that when you get into, like, type designers' websites, they all look awesome.

I've never tried a dyslexic

Yeah. The the, like, u doesn't have a tail for instance, so My biggest experience with that is that in 2020, I was approached by an incredible artist named Chantal Martin to make a font based on her handwriting, like, the single biggest thing. You wanna kind of think about, like, I sort of think of them as

you know, I wasn't sure quite how much of that was, like, bunk science either.

Lots of little touches like that.

much easily

read it, and I've kept it. That's great. Okay. It's the only one that I I've ever Yeah. Tried and noticed. Yeah.

of, like, what's working and what's not or what could be improved further. Yeah. But I've also designed it in in ways that, like, suit my preferences and, like, aesthetic sensibilities.

And, you know, also rooted in New York, I decided to have like, I have different categories. I decided to make those categories, like the

have something that you

It looks good. Looks really good. Yeah.

it's a city with, like, a lot of highs and lows, but that is one of the, like, beautiful parts of it for sure to me. Yeah. I actually I'm I'm working on an app for my my dance practice stuff.

I think that, like, whenever you, asked me, like, what might you do if Well so I guess a good answer is, like, making your website look good, check out Indie Foundry. There's some really amazing stuff, and it's it's a little more original than just, like, blasting out whatever

like, a b with the circle and then a green background, like, you know, like the Oh, cool. Yeah. The train stops. But maybe name, and it's it's, like, some weird math. I had to do linear algebra to get that value. Yeah. And then the upper value is what? Like, for me, it's 24 pixels for the base font size, which might even be a bit big. So, like, 1.38

literally whatever. I think I'm using system font for that. Alright. Well, I'll take a look. Yeah. In that regard, last rapid fire question. What is your favorite font of all time? Future Fonts, actually. Future Fonts JS kind of, like, for me,

love and work on all the time, like, having a favorite is almost impossible, I guess.

Being an kind of immigrant, character that a user types with the character that's represented on the screen.

kind of geared towards maybe animation or playfulness or Maybe you're, you know, streaming via Spotify.

When you look at something like Helvetica, like, there's a lot of it's kind of the the I think maybe a lot of people have this experience, like, when you're And it was this idea of using interpolation to allow a user to dial in the weight across or the width they desired for a font. So yeah. It really since, like, the early nineties, literally people have been designing fonts with interpolation as a process that allowed them to say draw a regular Yeah. Just, like, really thought provoking,

shapes of letters that maybe aren't the most thing that's verging on a sick pic is, Dash by various people, like, coming up together with how you could demonstrate the kind of purpose behind these things. I had a lot of ideas in mind, but how do you, like, actually show I've definitely heard Maybe you have a Bandcamp where people buy your album if if you're lucky or whatnot.

I was lied to. This isn't an a.

In the end, like, I think once you're there were various, like, technical in basically every major technology of fonts.

a kid and learning letters, And then you'd arrange it and print it by stamping paper on it. So Matthew Carter grew up, and I think his dad maybe was a punch cutter. And so Matthew Carter, like, learned how to design type by cutting it into steel. I could be getting the history wrong. But, You can never, I think the best approach to a basic font scale is just working in rems as much as possible their channels and products and interfaces and things. Wow. So that yeah. So, like, type JS in a really cool place in the last 10 years and that, like, I've helped too much flavor, I might call it, or, like, too much decoration in a monospace font made it really hard to think.

attributes to her writing. I think partly motivated by, like, developing writing that she could

you're taught a shape of an a, and then observe closely how font sizes are related and and how margins are used and how much spacing is between lines on something like Yeah. Thanks.

and experience that goes into thinking that way.

preference That one is based on named Sanity, which is in turn based on the named tile mosaics of the New York subway system.

get some of the like good vibes from Chantel's artwork into something like a website or a video or a flyer or whatever they wanted to make.

I worked with Chantel to make sort of a new comic sans that was a variable font project. We did some really fun, like, exploratory axis Grilletype. They made, like, GT America, for instance, Wes developers have some familiarity with what's happening under the hood there. If you've ever, like, literally kind of moved points around or curves around in an Pnpm, tools for making fonts have gotten quite good. And really, like, on the development side, they've gotten a lot better too, which I've been particularly of the the like, that's where my head's at. And I have Would you like to share what those are? giving people the opportunity to type of font. I know that I think there's a font called something like dyslexia I'm sure, like, There's there's kind of the, like, 5 year history, and there's the 30 year history, I guess. Wes don't know.

maybe philosophy and personal preference.

I think that it's it's becomes kind of easy. Like, you just say, like, oh, I've got a headline.

doesn't see all of the differences that you do. Like, you literally your brain and your eyes completely change to

really hard once you're, like, really deep in the weeds of something to realize that an outsider Oh, nice. And I I was working at that during that are really inspirational to me.

Yes. Wes. Perfect. That's a a great little you wouldn't steal a car commercial.

identifying type on the web, you mean? Or Or just in general. Like, it could be, like, something to

So there's a lot of con correction going into that. But if it's full italicized, then

You wouldn't italicize the Mona Lisa. You know? I don't know, kind of fudge a little bit. So they don't include the exact, like, 1 teaspoon of this Oh. 1 gram of fat, 1 tablespoon of this. It's more of a paragraph of text where it says, like, salmon in the oven at 450 degrees for 12 minutes, and it'll be good. That's awesome.

TypeScript or or just work with TypeScript general.

And that's the maybe the real reason not to do it aside from it just not looking as nice. And then full italics are similar where

you just kind of get the, like, shapes that the type designer maybe didn't intend.

Like, for So I do kind of split the idea of making fonts into a design and a development set of processes. There's obviously, like, a lot of my current font is name Node. It's kind of the one of the main 5 typefaces that are I've published and are things that I'm, like, continually working to improve.

maybe the upright version looks nicely, like, elliptical or round. But if you just hit it with a skew transformation, axis JS? Because

Yeah. Yeah. It's a it's a slap in the face to a a tech designer.

create, we have some 3 rapid fire questions here, which Excellent. Alright. These are supper club questions. So,

Do you have any favorite, like, type tools that you use that are, like, maybe web based? how to recognize that is a useful thing. And it's something that I even, you know, still walk into definitely some of the time because you don't necessarily expect it. And to be clear, that's, Mhmm. For the audience who might not know course. Yeah. That's if if you are bolding a font that you're loading that doesn't have a bold variant or it's not a variable font. And so the browser is, like, just, like,

Sure.

that contains information understanding the He's he's kind of the Wes pnpm everything. Yeah. Wild. He's kinda the Tony Hawk of, world.

Traditionally, a font was a single style, theming kind of option.

And then a font is the individual, like, literal technical file for the Mac platform.

hairline,

like bold, italic, or There's so many. I don't know. Oh, Node TypeScript, if if you know fonts, you already know them, but, like, every one of their fonts is so creative and wonderful. So of something like 750 responded said, like, I wouldn't code without them. So I was like, perfect. Alright. I'm gonna add them as an option, to Recursive.

font or a typeface. A typeface is sort of the abstract notion of a work that might contain one you know, I don't read as much as I want to, but, sci fi book that, like, was wonderful.

Today, there are variable fonts which can contain many styles within a single file. And so that's kind of a fun concept that's,

Yeah. Yeah. Exactly. In day to day conversation, it doesn't really matter for the most part if if you say font or typeface.

I'd say that most type designers in casual conversation would probably often say that they're designing

been something I focused on a lot. And I forget what your actual question was. Oh, it was just, like, how many have you Node, really? I I'm just curious, like, because I'm sure it's a big undertaking to even make one.

The big ones that I've used are Robo Font and Glyphs.

And then between them, you draw what are called off curve points, and those kind of provide tension to the to the path to make it a curve.

drawing a glyph in a font, like, a a shape in a font is so similar to that because we're using usually cubic Bezier curves to draw. There's a whole theory to, like, you draw the on curve points.

different, kind of destroy the point of Unicode, which is to Yeah. Assign a specific Done some really great projects and just has such a good eye for design. I I know he was I think he comes from a development background.

allows some, like, really high quality stuff.

Yes. In in a way, that is definitely a big part of it. You know, I think

sort of like sketch. If if you've used that, it's Mac only, but it's really nice, super fast to work with, Right. Yeah. I mean, the fun thing about, a different amount of width to a skinny letter like I or lowercase l than they would to a wide letter like m or w Wes there's more strokes and you need more space.

that I would call, like, faux bolding or faux italics. Yeah. Yeah. And so kind of training yourself to between 2 shapes works. And so you might go in and fix those. So, yeah, there's kind of a lot of, like, generate those intermediate weights as new sources, and then, I don't know, fix things up as as they went. Like, when you're interpolating And so it's, like, very near and dear to my heart because Yeah.

understand general a Minneapolis based font designer who's living and working and continuing to release really amazing projects. And, is is the answer.

chunking onto it Yeah. However it wants to. Yeah. Mhmm. And then same, yeah, with a faux italic. So, like, for a faux bold, familiar with the double story a and the double story g, they are more

essentially, I think, sort of duplicates the the shapes and moves them over by a little bit, and that makes it wider. Maybe they're adding a little bit of an outer stroke to that kind of combination as well. And so things just kinda look a little, like, blobby and blurry and not as good as they would if you're using, like, a dedicated bold style.

the browser,

But if you're coding on your own, they're kind of a nice adaptive technology, I would say. So quickly check how a font looks and works.

How do I type the huge greater than or equal to sign? Yeah. Yeah. Where's that on my keyboard? Yeah. Right. Yeah.

ligature that somebody might want.

shape from it. Yeah. I think that's a nice approach. It's also

happens to have them. You know what n MDI

adjust how it looks. You know? So that way, it's Scott, like, creating an entirely new

Oh, Mark Simonson. Mark Simonson. Okay. Yeah. Yeah. You got it. He's one of my, one of my heroes and, initial inspirations.

if you take the Fira Node approach where you've, like, really changed the shape of things or I did this in recursive, make your body size avenue of making retail fonts JS we call it is creating original content that people will license to use for their business, large or small.

IO does for their ligatures

I'm kind of a fan in that capacity I forget what's the what the technique is called right now. It's like a fluid type scale with gates kind of on either side. Yeah. I know there's a CSS. Yeah. Yeah. The clamp. Yeah. So you clamp like, so for instance, Node.

if the font you like, letters and logos She doesn't write in lowercase as much in her artwork or actually from what I understand her day to day writing, but she also wrote the lowercase.

the things that are happening. Yeah. Yeah. So and Yeah. I think in that case, MDIO is a really good compromise because it does, like, subtly improve the overall shaping. And it kinda like you know, the double bar, the or kind of similar there, that looks a little better if the bars are scooched together. Or, like, HTTPS GTSD.

I should have looked that up before. This is Mark.

And I I mean, I didn't have a reason for it. But now I think that's my reason JS I show code and teach code a Scott, so I want people to be able to see

Yeah. And I I never used ligatures.

So the the coding font I use is called Anonymous Pro. I don't know if you've you've heard of that one. I feel like I have, but who's it by?

a bunch of other, like,

record companies and stuff. So I always, like, I follow him, and I always see his magical. Yeah. Yeah. It's super cool. Yeah.

Wes of that. I I, like, never thought about that until you just said that, but I I have a buddy who does sign painting in Detroit. He did, like, Chanolah's and man, it's just so cool, and and it's so interactive.

the the brush influence in the the more cat the more casual incredible to take a look at.

But, yeah, it makes so much sense that you say that looks great. Yeah.

Yeah. And you were talking about finding the balance of, like, a monofont for coding.

For you, it's AEROTYPE.com

an application and go to town with the pen tool?

Yeah. Like, indie font creators making really cool,

arrow. Yeah. Uh-huh. Not the aerodynamic,

the place where I learned that there's this whole world of Yeah.

yeah. Yeah. Aerospace. Yeah. I I first became aware of, aerotype from yeah. Claude

fonts and all that stuff. Yeah. Yeah. Yeah. They do a Scott of cool, type work over there. So yeah. So okay. Let's get into, like, font making itself. You you mentioned that the tools are are getting a lot better. Like, technically,

interesting typefaces. In fact, it was the MDIO

how do you make a font? You you just throw up an, JS the the font that we use for our brand on syntax. So, that's where we first found that. And and I actually found AeroType through my buddy at at Goodhertz. They use Oh, yeah. The Wolf Wolfpack,

of course, they're monospace.

to interpolate between this, like, linear, very clear thing to a more casual, more brushy, people designing fonts before variable fonts And code ligatures very specifically, most of the time, like, totally kind of override that with a different shape. And so that's kind of, like, maybe approachable or recognizable or differentiated.

still, you know, I'm I'm not, like, fluent in React or something.

style of design. Yeah. And I love the sort of distortions that go into monospace fonts. Like, Yeah. I I and I think it makes sense to scale fluidly between those if, it's haven't gotten a lot of feedback from, like, people with dyslexia using the font, but it's definitely, like, in that range. We we

create a variable Wes,

CJ, earlier you said you're like a developer with a bit of design. I'm kind of a designer with a bit of development and a lot more since then, but, or at least a big reason is that JS you can imagine, they're serving, like, many millions of files, I guess, billions of font files. And so free form approach, like, wandering line. She'll write words that, like, kind of come into her head, there, a little like, my my insider baseball take on that is that it's a smart way to approach it because Like,

in a monospace that made me think like, well, what I want is more akin to maybe, like, an SF mono type of design Wes things are somewhat geometric, but maybe the sides are flat and give a lot of space around letters and make things really crisp and clear. And then, Wes, what if I, like, proportions, but it's, like, really geometric and beautiful and fun.

I'm like, the number Node thing that

And so I, yeah, kind of crunched these 2 ideas together and started to explore what if there was this casual style sign painting this glyph or almost like And, simple, beautiful, cool artwork. So she business is a little bit like maybe the music business or the photography business.

their last name, but they're Pnpm d on Instagram.

Pnpm And the 1st place I would say that I kind of learned about this was from a type company called House Industries, and they've made incredible projects. Like, I think their biggest hit is Neutra Face, which everyone's seen. I guess, like, the Shake Shack logo uses Neutra Face.

Sure. I mean, a a recent

Yeah. I guess, Node from Klim type foundry is like a font I maybe Yeah. So in that case, like, code ligatures can be a nice thing. But if it changes the representation entirely, I can definitely imagine people being confused following a web tutorial.

And that's kind Whereas in something like make it a compressed file in a way that saves data. So if you're using usually more than 2 or 3 styles on a website find, like, distinct between different letters.

d is I I can't really pronounce that kind of added another element to sort of hint to somebody that they could click a link, say, or a button.

It's just like a really beautiful

wish I had made or something.

And they've kind of, like, collected a bunch of recipes that are easy to make often command line tools to say, like, build from the source file where you've drawn things to an output I I did have a definite hand in it, but there was a team of people I was working with 2, a lot of the time, like, type designers will sort but it's a really declaring whether a font is the italic version or the bold version, what Unicode ranges are there. Unicode you know, drawing casual lettering with a Vercel, and and then like, actually support every conceivable If you look at, like, a low contrast Scott of not straight all of those shapes are.

graphic design.

that that period of time. You should also check out, Steven's YouTube channel.

And that's such a wild concept, an article that's, like, I strongly disagree with, but it's by an otherwise wonderful person, many

with a Sick Pick and Shameless Plugs? Wes, my sick pick, a couple of books that I've, using characters to 85 characters probably. This is somewhat of a guess, like, trying to remember, like there in The Hague, Right. Yeah. But recently

Yeah. Well, it's it's super good. Yeah. Yeah. Give Steven a follow on all the places. Check out Aero Type. Again, I'm using,

NYT Cooking has a recipe book called No Recipe Recipes.

beautifully written book and yet pretty accessible.

that's it for the rapid fire questions. Let's get into sick picks and shameless plugs. Did you come prepared

lobster on their website.

Yeah. Cool.

If you wanna, you know, hit that 80/20 rule of making your font, over the Yarn, lots of custom logos and things.

Yep. Don't have enough time to make shorter videos. But No. I mean, it's cool to see the process. I love watching YouTube skateboarding where it's just people, like, practicing skateboarding Oh, yeah. In a park or something. And so my thought is, like, well, if I'm making fun, so I might as well, like, share snippets of it when I'm doing something that I think is interesting.

name Node. Name Sanity looks great. Thank you so much for coming on the show, man. It's it's been a blast. Yeah. Thank you for answering our our dumb questions about typography.

Alright. Peace. Peace.

Shameless plug, name Node.

uses on Google Fonts or whatnot. Yeah. You're throwing Poppins on it and calling it a day. Not Google Fonts is very wonderful, and I appreciate them a lot too, of course. Oh, yeah. But there was a specific time when there was, like, what, like, 12 fonts on Google Fonts. And because of that, everybody had

Awesome. Well,

and kinda easy to, So it's it's a a fun read or a fun audible listen, in my case. Cool. The other book that I really

Please check it out. I have free trials of my fonts on my website.

why you shouldn't just skew a font to make it italic. And you you kinda talked about that. So, yeah, definitely. If you want a visual for that, that's exactly what I'm talking about. Nice. Sick. And I think, in general, the process of making fonts, you kinda detail that here. You have, like, hour long videos. You're kinda just building fonts as well. Right?

Mhmm. And it's about I believe it's a Matthew Carter font that was made in, like, 1991

Yeah.

Yep. It was the

they were intrigued by my explorations ESLint type and tech and, invited me to join. So I did that. And then kind of after that, I was able to transition into more of a full time job making fonts. Wow. That's amazing. I hope you're ready to

I didn't know if I had it in me. But luckily,

answer some basic and silly questions about That's perfect. That I talked to today. Yeah.

Yeah. I definitely have, some,

Wes early on, I had imagined that, like, oh, you'd probably just boot up Creative Cloud, download the Adobe font making app, and then make it there probably because there's not a very big market for making fonts, Adobe doesn't have a font making app, and so, other recommendation I'd heard that are just so helpful. So, like, the number Node trick I or I don't know, technique I ever learned for visual design is it's helpful to work in units of 16 or 8. So

12 11 or 12 students go every year and learn from some of the best type designers in the world, of essentially variable fonts called mass multiple masters.

Yeah.

Yeah. Is there a coding font that you use or you prefer?

But going back to what Scott mentioned at the beginning, he mentioned you're the owner of a

and sell those to people.

Nice. So for you, your type foundry is literally arrowtype.com?

Some of the time, it can be the full time thing. And then there's a few font foundries who are are definitely bigger and and then a few kind of for the type industry colossal, to to toot my own horn a little bit, the initial my, like, explorations in recursive, and then Type A Tech is a foundry I really look up to. They make incredible work. Yeah. So that's that's a font I really like.

original content that you sell and license to people to use,

or what is TypeFoundry? What what is what does that mean exactly?

players as well.

There's kind of 2 main tracks of making products and selling them. So if you're a musician, for instance, you might make albums

Yep. Yeah. Initially, I I was I was googling, like, where is TypeFoundry? How do I find it? But Oh, Wes.

a dev with, like, light design. Sure. Most most of what I know is, like, font pairings

And it's really easy on the web, unfortunately, to run into instances

of making money. There's kind of the, I also make fonts for brands and Most fonts give approach.

basic questions because, I mean, I'm I'm mostly

I sometimes get off track. No. It's okay. We we like a rambly answer, honestly.

weight

Exactly. To get back on the track, I was I was trying to answer is, like, the reason variable fonts exist is they've got lots of information techniques to understand to design a variable font where

300, 400, 900. But I guess with variables, do you have weights in between that you can you can do, basically?

Yeah. I say honestly, looking at the site you mentioned, Variable Fonts Scott I o, I think, like, it's it's there's an animation right now where, like, every letter is getting wider and fatter. And so I'm guessing that the way we've defined this thing is we've defined, like, how much wider can

it get. So, like, without variable, you potentially would have just, like,

using the variable font instead, if it exists, will usually start to save philosophically That's a super cool font that's like a handwriting font kind of like monolinear font designers had started to use interpolation to design typefaces.

it's pretty hard to, like, turn into vectors because of how fluid and another planet where there JS, like, a super advanced, how to make fonts. Like So I use that font, make sure letters were differentiated, you know, putting crossbars on the capital I, making sure the one has a flag.

Jen Ramirez, is, like, one of the best type designers I know. He grew up Scott of almost a Matthew Carter star maybe. He grew up in Mexico.

to be, like, kind of the easiest It's at AeroType on YouTube. Yeah. There, I drew a lot of the drawing process of fonts and just kinda share it. Yeah. Yeah. Before the show, I I saw your short on, where she takes a usually a black marker on a white background many things. So it's like an album or a book maybe.

like, I love working with a brush pen to kind of draw that at small scale.

And so I started doodling. Like, what if a casual single stroke Eric Olsen of ProcessType came up, and he's it's just kind of rem, then it's gonna work really nicely. And, of course, like, there's reasons to use other units. I I'd say that, like, you know, your max margin or sorry, your max column width as you're designing a responsive website, like,

single stroke lettering. There's sort of various names for it. So that was something that I really enjoyed, like,

So there's a lot of hand painted signs in a city like New York Wes I live or,

Yeah. Talk about deep expertise. I just looked at, Matthew Carter's,

had, you know, deep expertise, of course, as well.

Wikipedia page. Yeah. This guy this guy's got the got all the hits.

After

And the whole time, I was, like, drawing lots of lettering on the side because it I still had this, like, real passion for drawing letters even though I was also interested in web development and UX and UI design.

So, Steven, what's up? Thank you so much for having me, Scott. It's really exciting to be here. Yeah. Steven and I talk on IG sometimes, I worked there for a couple of years, moved into a brand side on, IBM Watson at the time.

and, I'm I've been following his typefaces and his font progress on there and all sorts of different typography information. So I was really stoked

And we're gonna be picking Steven's brain about all things typography in the web, getting deep into variable fonts.

when you had mentioned me in the comments, Steven, that you were aware of syntax. Long time long time lurker. Yep. Yeah. So let's let's get into it. 1st and foremost, like, what's your background? How did you get into type? How did you get into type design?

of question how much scientific rigor is put into those projects. A lot of the time, there's just not, like, you know, a scientific study done at a large scale saying, like, does this actually help on average people with dyslexia to read? But, Oh. Specifically the beta version. So Rol ESLint

if you've set it up in a certain way Wes the user can select It's got, like, some pretty wonky back when I was starting to design that project.

What I'm saying is that since I've made several variable fonts Oh, jeez.

every font kind of approaches musical notation to, like, go from my base size? It's just like, And we worked together.

and that there's many ranges. But really, I've I've made 2 kind of bigger open source projects.

exactly the weight they want between, say, regular and bold if the font includes that axis, stylistic range. Or there's, like, other variable axes you can put into a variable font, like, width is a common Node, but literally were sign painters.

I love that you're using MDIO, by the way. Mass Driver is super cool.

I should look at your style sheet.

And I believe by default, we have, like, all the font files. We have we have regular, we have bold, we have italic, and then, like, there's a bunch of them. But when I was using Figma, there were some design files that say, like, you need the variable file. So, yeah, technically, how do we use it, and how do they how do they relate? And to be clear, CJ, on top of that, we are only loading the variable. The other ones are just kind of there along for the Node for some reason.

Yeah. So variable fonts Scott I o is a website that talks about using variable fonts. So that's got lots of, like, examples and practical tips that The TypeFoundry She does these really cool, like, large scale often murals

are arranged pretty thoughtfully in a way that is probably a little easier to follow than a podcast, but I can definitely touch on some highlights.

But yeah. Fantastic. Very, very smart guy.

1 rem,

And and it's a limited screen space. So it makes sense that your base font size for body Scott is gotta be kinda small, like, I don't know, 12 to 14 pixels probably.

comma, and then the the the ideal

that is the one thing that I am a big fan of and I feel like is probably worth the trouble. Because if you think about it, like, Right? Literally, you know, back in the 14 fifties, Gutenberg invented, character, so I can kind of get kinda any big city that if you start to learn to identify

And you calculate that by calculating the slope of the line, Yeah. Name Sanity might be a good good option there because I'm just using,

Yeah.

that's usually a pretty small font size. And, yeah, it's pretty okay for most people. And usually, maybe a website will be a bit bigger. But then if you're, like, sitting 3 feet away from a desktop screen, it's pretty natural and you've got a lot more space often.

Like, if you look at the size of a font that's used in your text messaging,

Mhmm. One is the middle value.

It makes sense to bump it all up a lot more. Maybe even to 24 pixels, you know, to kind of give people the ability to sort of sit back and enjoy the website.

feasible.

when you're looking at a phone, it's usually prime kind of close to your face, like a foot and a half away maybe.

rem. So either way, you get the 2 ends, like you said, and you do some linear algebra to get the, the middle value.

is the kind of thing that I would normally look at and say, like, that is silly and not worth the trouble. But I think

they, some kilobytes of of data.

and that made it worth investing in. But as a designer, I just love the idea that, like, oh, I can do more with a font file. I can animate it or I can create something that somebody could animate. So, it kinda looks pointy in the upper right hand and lower left hand corners, then too flat in the opposite corners.

and I think his family Wes, like, sign painters. And so he was sign painting from, like, you know, probably Mhmm. Petra d is another person who inspired And so Same. The variable fonts is that because they contain multiple styles within Node, Yeah. They've got some good ones there.

I don't know the the math that they've used, but I suppose looked at the numbers and said, like, oh, if we shaved off x percent of file size, we could save x number of dollars,

like, a thing I always love JS an idea in a font JS, like, what if the font weight changed on Vercel, an italic font is like very carefully made and considered by type designers.

so that the root m of your website Dyslexia fonts are or, like, fonts intended to help with dyslexia Yarn,

type calculator sometime.

I feel like there are things that is represented by this outline, font editors as we call them.

I would love to get your eyes on my,

And and so a lot of these use, like, a ratio,

am sort of, like, I don't think it's necessarily worth it.

I've I liked what they were doing a Scott, and it kind of coincided with that maybe starts to become a bit impractical or, like, silly to work in REMS all the time for things like viewport sizes,

1 rem and maybe that's 16 pixels or maybe that's 14 pixels.

and that that's influenced by my being a very little kid. And he he's so good at it. It's it's gorgeous seeing him work. And so I was kind of there in the Hague studying type design, and we all had to come up with, thesis projects and lots of inspiration around. But I I was kind of experimenting with fresh painting signage and, And fear of code is always gonna have more ligatures than you. So in a way, it's pretty smart as a font design choice to say, like, I'll improve the spacing of these symbols that happen a lot, but I won't change the shape so that they look better but in a subtle way that, like, doesn't make people feel left out, I guess.

and some of them do it in, like, musical scales. Right? Like a Oh, Scott. 4th or a major 3rd. But, like so what they'll do is is take a font size. They'll start at a base size and then multiply it by, you know, 5 quarter

or Yeah. 5 over 4. Whatever that is. A bunch of, like, floating point numbers for font sizes. Yeah. How how do you feel about that type of math to go into it? Do you think that's, like, a good strategy? Today, we have a really special guest,

Man, this is like a basically, Okay.

yeah, then, like, after that, he moved into this whole period of prototype other foundries release or kind of do the QA distinguishable from the single story Vercel. But that's just my, like, I won't code without them, or never heard of them, some some sort of spread of options like that. And at least at that time, maybe they were more in vogue.

differences to drawing a font for that, like, a wide variety of screens and probably flexing it a bit between, say, desktop and mobile is is a really good place to start. And then that's kind of led to a lot of, like, even just 1 person type foundries like myself. A lot of the time, it's like a side gig for people.

shining light through a clear piece of plastic with the letters on it. And, appreciate in a totally different light is,

design where they were doing more of a film like process for, like, normally narrow eye. And so there's all these kind of things that happen to make a font be monospace.

guy, and he's Yeah. Yeah. I need to read, Just Just My Type again. It's like a book about history. True. Yeah. I read it I've read it, like, 2011 or whenever it came out. I forget. And, it's definitely one of those ones. It's, if you're out there and you wanna learn some typography history, it it's a wild book. That's a fun one. Yeah. It just kinda tells the stories,

that, you know, Matthew Carter pioneered. And then he kind of moved into this digital font era, and today, he's making variable fonts. So, yeah, he's a And, And, a style he frequently kind of riffs on is called, like, casual

Georgia, Helvetica.

making sure they have the right amount of spacing between them to Grilltytype has been a big inspiration. They make, like, mini sites for each of their projects that are, like, really fun and cool. Who is that?

That includes a phase called kerning, which is Uh-huh. Yeah. Exactly. Yeah.

In terms of a font, I think of design JS drawing the letters, well, our sort of current current iteration of movable type Wes you There's a lot of rules, I think, for designing books that if if you read a 0.25,

kind of introducing little,

pnpm specific spacing adjustments for a font. And then there's the development Node, which is using Another revelation actually was that I I've realized that in The Hague, in the Netherlands, not a a thing that he likes. So what I kind of come down to thinking is if you're creating web tutorials or If you want a Yeah.

look like they have an even amount of spacing in any combination.

in their current iteration on the Wes, Yeah. Or, like, how do you show what a casual that describes the font, not just the shapes. And so you can actually pack the shape information and that sort of interpolation

blurriness there in any sort of a project between design and development.

like, type scale calculation? So I recently made a fluid type scale

Yeah. How how do you feel about, like, app for myself.

Notion or medium And there's kind of like I don't know. It it all comes down to

Yeah. Because people used to do that, but it was just going from

Is that stuff that you coded yourself?

So, yeah, I was really lucky to have some support and actually, like, doing the many hours of work it takes to, like, go from essentially a prototype to something that's usable by a lot of people.

they found out about my variable font project and said, like, oh, hey. Do you wanna actually, like, finish that and publish it as an open source project? kind of shepherding fonts from design phase to production phase.

Yeah. And you your recursive demos are are really cool. The recursive dot design site has a lot of, like Thank you. Really incredible demos.

animation that says in variable in invariably interesting on this variable fonts Scott I o page is

Nice. And I guess you could animate that with, key frames too. Like, animate the Mhmm. For sure. That's that's cool.

bold to novel. And there are no animation there. There's no transition there. Yeah. I love I love a good Mike Rauch transition.

It all seems extremely complex given that there's so many different variables at play here.

inspiration and and just to see how this stuff works, it's really pretty

Are variable fonts

you know, the different stepped versions harder to design? I guess developer design is Yeah. Yeah.

harder to design, or are,

So so folks of you out there who are looking for really neat interactive, Okay. And I can say from

the and, like, really well spaced and considered. And maybe they wanna, you know, expand that into a full on typeface that they can use across

number for lowercase Latin a

Unicode smoothly end up using a lot warp tools that I use to, like, it can't really be as confused with the n.

if you were making it in a website, it would be this SVG sort of is the the letter a. But that's a weird metaphor and that that's not how a font file is arranged exactly unless it's an SVG font. But I don't know.

mine for the base font size would be,

or when you're constraining columns. But Yeah. For a type scale, definitely, just working in REMS is is great. And so, yeah, I think, like, But maybe you also make money from companies coming to you and saying, like, hey. We need a track for our car commercial that rocks really hard. So, like, can you help us compose that? So you've kinda got those different avenues of at at one side, it was really exciting that it was a thing that you could do, but it on the other side, Glyphs app is kind of you can do what's called interpolation

I think one thing that's kind of akin to that that I am a big fan of is

if you work in rems and units of, like, Because when a font designer is making a bold style, they end up adjusting a lot of the specific contrast of the strokes that make up a letter.

I don't know. How does 3 REMS look? And if it's too big, so things are overflowing to a egregious amount, maybe you scale it back to 2.5.

And then if you almost as much as possible base everything on that base unit, something something something CSS cascade.

But working in those REMS make it makes it really convenient because then you don't have to think like, oh, what's a scale where I'm using Typotech and,

using a fluid type scale. So

typographer

developer. We're gonna be getting into the nitty gritty of,

Welcome to Syntax.

designing typefaces,

typography on the web, all sorts of cool stuff. So with us today is Steven Nixon. He's the owner of a type foundry, ARO Type.

a type of developer we have not talked to before. In fact,

high highbrow.

Yeah. Like, hand painted some of the letters. Yeah. Is that process typical, or is that just like a creative exploration? Is that something you you chose to do for that one specifically? is they, like, don't actually combine the shapes. They just It's also right to make it. Yeah. I I actually have dyslexia.

Yeah. For sure. I I I noticed that in the recursive

So there's this whole, like, lineage and history of,

blog that you had

really nice to use for drawing letters.

Keynote has a basic pen tool even. But, yeah, font editors give you a couple of extra options that make the pen tool you, like, some some point a book comes along with the shape of an a that's, like, too Sanity, and you're like,

a in like maybe the regular weight of And then some companies will come to type designers to say, like, hey. We're looking for something very specific for our brand,

letter kind of my 1st major font project. It's called Recursive.

So we talked about some of the things we should do on site, and I guess we're kind of getting into things we shouldn't do or or things you don't prefer doing. So what what are some of your biggest, pet peeves when it comes to web type? Or what are some things we shouldn't do? Some things maybe you've come across that you hate every time you see it?

getting up to, like, a production system on a really sprawling website, or, like, a big enterprise website, that could be a huge lift in the long order. Yeah. Depends.

Yeah.