The Developer’s Guide To Fonts with Stephen Nixon

Welcome to Syntax.

Today, we have a really special guest, a type of developer we have not talked to before. In fact, typographer developer. We're gonna be getting into the nitty gritty of, 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.

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

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,

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 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?

There's there's kind of the, like, 5 year history, and there's the 30 year history, I guess. Wes don't know.

I I've always been really attracted to drawing letters and logos and kind of geometric problems, I Wes, kind of click nicely in my brain.

So to give the 30 year history, 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.

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 playing electric bass and some bands. So I was, like, drawing flyers by hand and trying to, like, copy those and hand them out.

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.

And there, I I realized that there were, like, living 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, you mean Helvetica or something? And Yeah. No. It turns out, like, I googled, like, Twin Cities type designers and, Eric Olsen of ProcessType came up, and he's a Minneapolis based font designer who's living and working and continuing to release really amazing projects. And, there's also Mark Simonson in Saint Paul.

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 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, most basic beginner questions. And he was, like, so patient and wonderful in responding and kind of walking me through, like, what fonts are, what type design is, why he is actually making new fonts, and, like, why anybody would want a new font, and how his latest release at that point was not actually, in fact, just similar to Helvetica.

And I I try to remind remind myself and remember that because I think that it's really hard once you're, like, really deep in the weeds of something to realize that an outsider doesn't see all of the differences that you do. Like, you literally your brain and your eyes completely change 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.

After graphic design major in college, I was really lucky to get a job at IBM as a visual designer for software.

I worked there for a couple of years, moved into a brand side on, IBM Watson at the time.

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.

Another revelation actually was that I I've realized that in The Hague, in the Netherlands, there is a master's degree program for type design Wes 12 11 or 12 students go every year and learn from some of the best type designers in the world, there in The Hague, how to make fonts. Like 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, at at one side, it was really exciting that it was a thing that you could do, but it on the other side, I didn't know if I had it in me. But luckily, 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

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

Yeah. I definitely have, some, basic questions because, I mean, I'm I'm mostly a dev with, like, light design. Sure. Most most of what I know is, like, font pairings

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

But going back to what Scott mentioned at the beginning, he mentioned you're the owner of a or what is TypeFoundry? What what is what does that mean exactly?

Yeah. Thanks.

The TypeFoundry business is a little bit like maybe the music business or the photography business.

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 and sell those to people.

Maybe you have a Bandcamp where people buy your album if if you're lucky or whatnot.

Maybe you're, you know, streaming via Spotify.

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 of making money. There's kind of the, original content that you sell and license to people to use, maybe for themselves.

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

And then some companies will come to type designers to say, like, hey. We're looking for something very specific for our brand, 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, like, really well spaced and considered. And maybe they wanna, you know, expand that into a full on typeface that they can use across 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, 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 interested in.

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

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, players as well.

Nice. So for you, your type foundry is literally arrowtype.com? Yep. Yeah. Initially, I I was I was googling, like, where is TypeFoundry? How do I find it? But Oh, Wes.

For you, it's AEROTYPE.com

is is your TypeFoundry. That's awesome. Yeah. Exactly. Like, like the pointy, directional, character, arrow. Yeah. Uh-huh. Not the aerodynamic, kind of. Oh,

yeah. Yeah. Aerospace. Yeah. I I first became aware of, aerotype from Future Fonts, actually. Future Fonts JS kind of, like, for me, the place where I learned that there's this whole world of Yeah.

Yeah. Like, indie font creators making really cool, interesting typefaces. In fact, it was the MDIO 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, 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, how do you make a font? You you just throw up an, an application and go to town with the pen tool?

Yes. In in a way, that is definitely a big part of it. You know, I think 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, what do you use? There are different, font editors as we call them.

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

Glyphs app is kind of sort of like sketch. If if you've used that, it's Mac only, but it's really nice, super fast to work with, allows some, like, really high quality stuff.

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

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.

So it's just a pen tool, similar to Illustrator or Photoshop or Keynote has a basic pen tool even. But, yeah, font editors give you a couple of extra options that make the pen tool really nice to use for drawing letters.

Okay.

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

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 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, they they were famous for 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 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.

So so how many, like, how many I I Node there's a distinction between a typeface and a font, but how many fonts have you made? Like, a font is the actual installable thing.

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 font or a typeface. A typeface is sort of the abstract notion of a work that might contain many things. So it's like an album or a book maybe.

And then a font is the individual, like, literal technical file that contains information from a typeface.

Traditionally, a font was a single style, like bold, italic, or hairline, whatever.

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,

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.

Right. Yeah. I mean, the fun thing about, variable fonts is that because they contain multiple styles within Node, you can do what's called interpolation if you've set it up in a certain way Wes the user can select 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 every font kind of approaches what access it has, like, according to the goals of that particular type base.

What I'm saying is that since I've made several variable fonts Mhmm. I could I could tell you I've made infinite fonts, and that there's many ranges. But really, I've I've made 2 kind of bigger open source projects.

5 original retail projects that I sell through Aero Type.

I've helped other foundries release or kind of do the QA building process of their fonts. So I guess many is is the answer.

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.

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.

I should look at your style sheet.

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

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.

But yeah. Fantastic. Very, very smart guy.

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

Yeah. I mean, the the basic reason that variable fonts really exist is or at least a big reason is that you can include multiple styles in 1 file and the font tends to have 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 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.

Whereas in something like 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 declaring whether a font is the italic version or the bold version, what Unicode ranges are there. Unicode 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, the Unicode number for lowercase Latin a is represented by this outline, this glyph or almost like 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.

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

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, weight 300, 400, 900. But I guess with variables, do you have weights in between that you can you can do, basically?

Uh-huh. Yeah. Exactly. Yeah.

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 that describes the font, not just the shapes. And so you can actually pack the shape information and that sort of interpolation weight range information, for instance, or stylistic range information into a single font file, and you can 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 using the variable font instead, if it exists, will usually start to save some kilobytes of of data.

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.

So Google Fonts is one place that's, like, been really pretty instrumental in moving forward variable fonts because JS you can imagine, they're serving, like, many millions of files, I guess, billions of font files. And so I don't know the the math that they've used, but they, 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, 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, like, a thing I always love JS an idea in a font JS, like, what if the font weight changed on Vercel, and that kind of added another element to sort of hint to somebody that they could click a link, say, or a button.

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

Yeah. Because people used to do that, but it was just going from bold to novel. And there are no animation there. There's no transition there. Yeah. I love I love a good Mike Rauch transition.

And so Same. The to to toot my own horn a little bit, the initial animation that says in variable in invariably interesting on this variable fonts Scott I o page is kind of my 1st major font project. It's called Recursive.

Oh, nice. And I I was working at that during that MA program I did for font design, and then I came out of that and started doing font development for Google Fonts, kind of shepherding fonts from design phase to production phase.

And, 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? 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.

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.

Is that stuff that you coded yourself?

No. That, I I did have a definite hand in it, but there was a team of people I was working with to come up with the visual design for that website and code the website itself.

So, yeah, it was really great to have, like, 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 the idea of a hover style being different on this font versus another font? Yeah. Or, like, how do you show what a casual axis JS? Because that was kind of something invented for this font project or this typeface.

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, the little sliders you can play with to really see exactly how the font change as it gets more mono, as it gets more casual, as it gets like, man, it's just so cool, and and it's so interactive.

So so folks of you out there who are looking for really neat interactive, inspiration and and just to see how this stuff works, it's really pretty incredible to take a look at.

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

Are variable fonts harder to design, or are, you know, the different stepped versions harder to design? I guess developer design is Yeah. Yeah.

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 blurriness there in any sort of a project between design and development.

In terms of a font, I think of design JS drawing the letters, making sure they have the right amount of spacing between them to look like they have an even amount of spacing in any combination.

That includes a phase called kerning, which is kind of introducing little, pnpm specific spacing adjustments for a font. And then there's the development Node, which is using often command line tools to say, like, build from the source file where you've drawn things to an output binary file like a dot OTF or dot TTF font.

For a long time before variable fonts were like publicly usable in their current iteration on the Wes, font designers had started to use interpolation to design typefaces.

You know, I I'm not perfect on the the history of it, but for instance, I believe it's a Matthew Carter font that was made in, like, 1991 for the Mac platform.

And it's kind of got like a Greek font look to it. But that was a super early version of essentially variable fonts called mass multiple masters.

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 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, 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 to lowercase a's, if depending how you've drawn it, you might get kinks in the outlines just based on how the math of linear interpolation between 2 shapes works. And so you might go in and fix those. So, yeah, there's kind of a lot of, like, techniques to understand to design a variable font where 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 draw a glyph with the exact same number and order of points so that font interpolation will smoothly or be able to at all interpolate between those 2 shapes.

So there there's like yeah. It's it's harder in some ways, but people designing fonts before variable fonts had, you know, deep expertise, of course, as well.

Yeah. Talk about deep expertise. I just looked at, Matthew Carter's, Wikipedia page. Yeah. This guy this guy's got the got all the hits.

Georgia, Helvetica.

Man, this is like a basically,

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

He's also yeah. He's he's a bit of a rare case in that he's kind of worked in basically every major technology of fonts.

Right? Literally, you know, back in the 14 fifties, Gutenberg invented, well, our sort of current current iteration of movable type Wes you 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.

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, yeah, then, like, after that, he moved into this whole period of prototype design where they were doing more of a film like process for, like, shining light through a clear piece of plastic with the letters on it. And, there were various, like, technical differences to drawing a font for that, 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 he's a pretty cool

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,

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, high highbrow.

Yeah. For sure. I I I noticed that in the recursive blog that you had 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?

So there's this whole, like, lineage and history of, sign painting Mhmm. In the US and other countries.

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.

It's got, like, some pretty wonky proportions, but it's, like, really geometric and beautiful and fun.

Ken Barber is a main designer at House Industries, and he's done, like, incredible hand lettering over the Yarn, lots of custom logos and things.

And, a style he frequently kind of riffs on is called, like, casual single stroke lettering. There's sort of various names for it. So that was something that I really enjoyed, like, exploring, you know, drawing casual lettering with a Vercel, and and then it's pretty hard to, like, turn into vectors because of how fluid and Scott of not straight all of those shapes are.

But it's really designed to be, like, kind of the easiest thing to hand paint well for a sign paint and project.

So there's a lot of hand painted signs in a city like New York Wes I live or, kinda any big city that if you start to learn to identify 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 literally were sign painters.

And 1 in particular, 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.

I think his family Wes, like, sign painters. And so he was sign painting from, like, you know, probably 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, 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 format was taken into, like, a monospace style of design. Yeah. And I love the sort of distortions that go into monospace fonts. Like, of course, they're monospace.

Most fonts give 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.

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 normally narrow eye. And so there's all these kind of things that happen to make a font be monospace.

And so I, yeah, kind of crunched these 2 ideas together and started to explore what if there was this casual style sign painting in a monospace sort of pattern.

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 too much flavor, I might call it, or, like, too much decoration in a monospace font made it really hard to think.

I'm 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, still, you know, I'm I'm not, like, fluent in React or something.

So, yeah, like, being able to think clearly when I'm looking at some code 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, 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, create a variable Wes, to interpolate between this, like, linear, very clear thing to a more casual, more brushy, expression.

And that is kind of the core idea behind the recursive project. Wow. That's so cool. You could definitely see

the the brush influence in the the more cat the more casual 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 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.

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.

I so some of the stuff I've seen before are, monospace fonts that are also, like, dyslexic friendly. And Oh, sure. Because I I guess with with dyslexia, if the characters look different, then it's easier for someone with dyslexia to not skip over those letters, and they can, like, read it more. Mhmm. Have you had experience making a dyslexic friendly font, or is that ever a consideration you make when you're when you're working on fonts?

Yeah. Thanks.

Dyslexia fonts are or, like, fonts intended to help with dyslexia Yarn, 1, like, a really cool field.

2, a lot of the time, like, type designers will sort 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, 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.

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, and she is dyslexic.

And the way she writes letters is like something she uses in her art a lot.

She does these really cool, like, large scale often murals where she takes a usually a black marker on a white background and just kinda has this, like, free form approach, like, wandering line. She'll write words that, like, kind of come into her head, and she draws, like, little motifs, like, kinda stick people in a specific way or different, like, sailboats, mountains.

Yeah. Just, like, really thought provoking, simple, beautiful, cool artwork. So she asked me, like, what might you do if 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.

And we worked together.

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.

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.

She has some, like, really neat attributes to her writing. I think partly motivated by, like, developing writing that she could find, like, distinct between different letters.

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 a kid and learning letters, you're taught a shape of an a, and then you, like, some some point a book comes along with the shape of an a that's, like, too Sanity, and you're like, I was lied to. This isn't an a.

And, yeah, like, there's a lot of little instances where fonts, because of their history, use shapes of letters that maybe aren't the most approachable or recognizable or differentiated.

And there's kind of like I don't know. It it all comes down to maybe philosophy and personal preference.

In the end, like, I think once you're familiar with the double story a and the double story g, they are more distinguishable from the single story Vercel. But that's just my, like, preference and experience that goes into thinking that way.

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 kind of geared towards maybe animation or playfulness or giving people the opportunity to 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.

And so yeah. And I I 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 did the things that we did to make sure letters were differentiated, you know, putting crossbars on the capital I, making sure the one has a flag.

Yeah. The the, like, u doesn't have a tail for instance, so it can't really be as confused with the n.

Lots of little touches like that.

It's also right to make it. Yeah. I I actually have dyslexia.

Okay. And I can say from experience, you know, I wasn't sure quite how much of that was, like, bunk science either.

Right. Yeah. But recently

yeah. Claude 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.

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

Mhmm. And I will say, I've never tried a dyslexic friendly font in my entire life until this, and I could 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.

Mhmm. I forget. I I definitely recognize this kind of general type of font. I know that I think there's a font called something like dyslexia Yeah. Pro or something. I don't know.

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 one thing that I I think is pretty obvious is that when you get into, like, type designers' websites, they all look awesome.

Type type designers seem to just have a, like, a a different handle on design. And it's gotta be just because, 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 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.

Yeah. I mean, I think that the, like, the number Node thing that it's just kind of graphic design, typography rules that you learn.

Like, just clear hierarchy is probably, like, the single biggest thing. You wanna kind of think about, like, what's the appropriate amount of size for the body Scott? And, like, often for the web, that's maybe 14 pixels ish, maybe 16 pixels.

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.

There's a lot of rules, I think, for designing books that if if you read a kind of slightly more traditional typography guide like the elements of typography, it'll give you rules, like, oh, you should never use more than 55 characters for a column of text as a general guideline.

That's pretty tight.

Like, you know, I think that if you if you look around the web, you'll just kind of see that things I think are more around, like, 75 characters to 85 characters probably. This is somewhat of a guess, like, trying to remember, like Yeah. Way back. But, yeah, starting with that body size and, like, making it appropriate for, 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 trying to make sure that your other elements, like, have a clear separation from that in a in a good hierarchical sense.

So, I guess, a simple way to say it is like observe closely how font sizes are related and and how margins are used and how much spacing is between lines on something like Notion or medium 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.

Yeah. How how do you feel about, like, like, type scale calculation? So I recently made a fluid type scale app for myself.

And and so a lot of these use, like, a ratio, 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? I would love to get your eyes on my, type calculator sometime.

I feel like there are things that I love and then things that I am sort of, like, I don't think it's necessarily worth it.

So and that that's influenced by my kinda history, I guess. I was at IBM when they kind of, like, revised their whole design system approach. And I've I liked what they were doing a Scott, and it kind of coincided with 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 I think the best approach to a basic font scale is just working in rems as much as possible so that the root m of your website make your body size 1 rem and maybe that's 16 pixels or maybe that's 14 pixels.

And then if you almost as much as possible base everything on that base unit, it's becomes kind of easy. Like, you just say, like, oh, I've got a headline.

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.

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 musical notation to, like, go from my base size? It's just like, if you work in rems and units of, like, 0.25, 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, that maybe starts to become a bit impractical or, like, silly to work in REMS all the time for things like viewport sizes, 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, I think one thing that's kind of akin to that that I am a big fan of is using a fluid type scale. So 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,

mine for the base font size would be, 1 rem, comma, and then the the the ideal Mhmm. One is the middle value.

And you calculate that by calculating the slope of the line, 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 rem. So either way, you get the 2 ends, like you said, and you do some linear algebra to get the, the middle value.

Yeah.

Yeah. I I yeah. That 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 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, 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.

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.

Like, if you look at the size of a font that's used in your text messaging, 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.

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.

Yeah. I I and I think it makes sense to scale fluidly between those if, it's feasible.

I'm sure, like, 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.

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?

Yeah.

Well so I guess a good answer is, like, using it's really easy on the web, unfortunately, to run into instances that I would call, like, faux bolding or faux italics. Yeah. Yeah. And so kind of training yourself to understand

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,

chunking onto it Yeah. However it wants to. Yeah. Mhmm. And then same, yeah, with a faux italic. So, like, for a faux bold, the browser, 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.

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.

If you look at, like, a low contrast letter a in like maybe the regular weight of 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.

Wow. But if something's full bolded, then it kinda starts to erode that, like, recognizability.

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 an italic font is like very carefully made and considered by type designers.

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, maybe the upright version looks nicely, like, elliptical or round. But if you just hit it with a skew transformation, it kinda looks pointy in the upper right hand and lower left hand corners, then too flat in the opposite corners.

So there's a lot of con correction going into that. But if it's full italicized, then you just kind of get the, like, shapes that the type designer maybe didn't intend.

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

You wouldn't italicize the Mona Lisa. You know?

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

Do you have any favorite, like, type tools that you use that are, like, maybe web based?

Yeah.

Like, for

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

Sure.

I guess as a font designer, the tools I tend to end up using a lot warp tools that I use to, like, quickly check how a font looks and works.

So a really great example of that is called Wackama Node Oh. Specifically the beta version. So Rol ESLint is a developer who's, like, done a lot of really great blogging about font use on the web.

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

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

something something something CSS cascade.

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 a bit akin to, like, those specialized CSS techniques like the clamp scale or something, where if you really wanna control variable fonts, that's the way that I've found most useful to do it.

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.

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, we have some 3 rapid fire questions here, which Excellent. Alright. These are supper club questions. So, first Node, how do you feel about ligatures in coding fonts?

Oh, nice.

I was considering whether to go to the trouble of making ligatures in recursive, back when I was starting to design that project.

And, at that point, ran a Twitter poll and, like, asked people to reshare it, please, kind of with the options like, I hate them, 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.

But 25% 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.

Personally, like, I sort of think of them as a bit like a syntax theming kind of option.

I do think that they can the the thing that as a, maybe intermediate coder that I often 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.

I've definitely heard good and bad arguments against code ligatures.

If you want a an article that's, like, I strongly disagree with, but it's by an otherwise wonderful person, Matthew Butterick's, rant against coding ligatures is a pretty fun read. And his main exception is that they kind of destroy the point of Unicode, which is to Yeah. Assign a specific character that a user types with the character that's represented on the screen.

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 philosophically not a a thing that he likes. So what I kind of come down to thinking is if you're creating web tutorials or 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.

But if you're coding on your own, they're kind of a nice adaptive technology, I would say. So I'm kind of a fan in that capacity if the font you like,

happens to have them. You know what n MDI IO does for their ligatures is they, like, don't actually combine the shapes. They just adjust how it looks. You know? So that way, it's Scott, like, creating an entirely new

shape from it. Yeah. I think that's a nice approach. It's also a little like, my my insider baseball take on that is that it's a smart way to approach it because if you take the Fira Node approach where you've, like, really changed the shape of things or I did this in recursive, You can never, like, actually support every conceivable ligature that somebody might want.

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.

Yeah. And I I never used ligatures.

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

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 slash slash looks better if the slash slash is, like, kind of turned a little bit together.

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.

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

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? I should have looked that up before. This is Mark.

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

Node.

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

Yeah.

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

So I use that font, so I can kind of get understanding 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.

It looks good. Looks really good. Yeah.

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

And so it's, like, very near and dear to my heart because Yeah.

Being an kind of immigrant, 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, 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.

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 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, Yeah. Name Sanity might be a good good option there because I'm just using, 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?

Oh, jeez.

I think that, like, whenever you, have something that you love and work on all the time, like, having a favorite is almost impossible, I guess.

So, yeah, I I I don't actually have a good answer to that. I think there's a few fonts that are really inspirational to me.

And that's kind of the the like, that's where my head's at. And I have Would you like to share what those are? Sure. I mean, a a recent thing that's verging on a sick pic is, Dash by Typotech and, Pnpm d is I I can't really pronounce their last name, but they're Pnpm d on Instagram.

That's a super cool font that's like a handwriting font kind of like monolinear approach.

Mhmm. Petra d is another person who inspired 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.

Yeah. I guess, Node from Klim type foundry is like a font I maybe wish I had made or something.

It's just like a really beautiful 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.

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? Grilletype. They made, like, GT America, for instance, GTSD.

Yeah. They've got some good ones there.

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

Yeah. Cool.

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

with a Sick Pick and Shameless Plugs? Wes, my sick pick, a couple of books that I've, enjoyed. So one you know, I don't read as much as I want to, but, sci fi book that, like, was wonderful.

It's called Children of Time by Adrian Tchaikovsky.

Mhmm. And it's about another planet where there JS, like, a super advanced, species of spider. And so, like, they're, like, a highly evolved civilization of spiders.

And that's such a wild concept, but it's a really beautifully written book and yet pretty accessible.

So it's it's a a fun read or a fun audible listen, in my case. Cool. The other book that I really appreciate in a totally different light is, NYT Cooking has a recipe book called No Recipe Recipes.

And they've kind of, like, collected a bunch of recipes that are easy to make and kinda easy to, 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.

Yeah.

Shameless plug, name Node.

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

I also make fonts for brands and graphic design.

If you wanna, you know, hit that 80/20 rule of making your font, 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 has 10,000,000,000,

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 lobster on their website.

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

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,

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?

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.

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