Phil Pluckthun is the creator of Dank Mono, a new monospaced programming font with ligatures. He is also a core contributor to Styled Components, a component-based CSS Library. Tune in to hear a discussion on how Phil got involved with design, how he become a core contributor to the styled-components library, and how and why he started working on Dank Mono.
Today we are joined by Phil Pluchthun, creator of the programming font Dank Mono and core contributor to the styled-components library. Phil will be talking about his work in design and programming, styled components, the process of making a font, and finally some advice to anyone who wants to make a font of their own.
So what are styled components? It's a new component-based CSS and Jest library. It's all about using these small styled components that you put in instead of HTML. It's nice because you don't have to create a whole new component that renders for some simple styling.
Phil talks about as a developer he's always been in a role where he's had to work closely with designers and provide feedback for them. Over time he started to work more with design projects, and as he worked for small startups without a lead design, he found himself filling that role.
Dank Mono is Phil's first font, He's always enjoyed typography, and as he's gone along it starting turning out better than he thought. When he started, he just wanted to make some ligatures for Operator Mono, but there were some terms in there that would prevent him from ever being able to share it.
In the beginning, Phil was doing every letter from scratch. He started with an h because it has an excellent shape that can be reused with many letters. Halfway through he learned that Glyphs app supports components, so he had to start over after a week!
Phil encourages anyone who is not entirely satisfied with the fonts available to think about what they'd want to change. He recommends to start with Glyphs app and watch and read its related talks and tutorials and to start with a single letter to see how you like it!
"Phil Pluckthun, Creator of Dank Mono" Transcript
John Lindquist: ... Alright, I'm here with Phil Plickthun. Phil, can you go ahead and introduce yourself for us?
Phil Plickthun: Hiya, I'm Phil. I am the co-contributor of styled components. I work for Formidable here in London and recently I've started creating this new font, Dank Mono.
John Lindquist: Shout out for Dank Mono, I absolutely love it. It's my daily driver font these days. So thank you for making it
Phil Plickthun: Oh, thank you. Oh no, thank you for using it.
John Lindquist: Oh, thank you first.
John Lindquist: So people can get to know you a little bit, what's kind of your programming background, what was your first programming job?
Phil Plickthun: Well, I started working for a web game company, so my first job was actually in Berlin and I was working for a smaller startups doing some kind of mobile apps.
Phil Plickthun: They've been doing some kind of interesting geocaching stuff.
Phil Plickthun: They had this idea that is basically Pokemon Go but without AR and quiz questions so that was my first job and then it kind of went on for me ...
John Lindquist: That sounds challenging.
Phil Plickthun: ... going through a lot of jobs.
Phil Plickthun: Well, it was, the only challenging part about it really though was my first job and it was more getting to know how it works, to work with more people and like, bigger projects.
Phil Plickthun: And it was fairly relaxed. We were only seven people in total. And the other six have worked together for a year before that.
Phil Plickthun: I was basically the first external employee so to speak.
John Lindquist: Oh, okay. That must've had its own challenges.
Phil Plickthun: Well, it was interesting. I mean, the six have been buddies for a year and they've known each other for a very long time, so it was kind of like getting to know them better, getting closer. Yeah, but it was really fun.
John Lindquist: Right, right.
John Lindquist: So you mentioned you were a core contributor to styled components, can you kind of give us a run down of what styled components is real quick? And then why you got on the team and what's your involvement with it?
Phil Plickthun: So, style components is one of these newer component based ESS in JS libraries. So basically it's CSS and Java Script are all focusing on creating small components that you put in instead of elements and instead of inline styles and it was created by Max Stoyberg and Glen Maddon and I've come in shortly after and, basically my idea - and why I was getting involved in that project - was they had a lot of interesting ideas and at the same time I was searching for a CSS in JS project that was easier to use, that basically had this nice developing experience, so that definitely kind of hit that kind of area in that spot that they wanted to get to with star components, and they had this really interesting issue open the repository which was one of the first ones they've created and it just said 'Babel transform'.
Phil Plickthun: And the idea was how can we transform how you write style components in Babel to make it more efficient and more performant? And I kind of got to talk to them and I was like this actually is what I wanted to create - as a new CSS in JS library - but you know, who needs another new CSS in JS library? True, as true now as it was back then.
John Lindquist: Right. Yup.
Phil Plickthun: Well, we didn't right jump onto that issue but they were like "Well, what about if you try it out? If you get involved?"
Phil Plickthun: So I kind of coded up with prototype for it into the previously already existing Babel plugin for style components. And, well to be honest, it didn't work out that well. So we're still not fully there to have this kind of pre-processed CSS in JS via style components that, it's an effort that I'm still working on, and less so currently, but it's interesting that original issue that got me to work with them is still - kind of - present and not solved.
John Lindquist: Yeah, I just started using styled components in the past couple of months and I just love the idea that I don't have to create a component for every single div or span or button that you know just needs some styles. I want it to be reusable and I want it to have styles but I don't want to create a whole new component (with rendering and everything in there) where I can just kind of add those inline styles inside the back tics. It's kind of changed, even changed the way I think about react projects like oh these are just styled components. [crosstalk 00:04:16]
Phil Plickthun: It's in components.
John Lindquist: Right.
Phil Plickthun: I mean I didn't always think about it that way, even as a co-contributor when I first looked at it I didn't think it was actually quite that nice. You have to really sometimes, at least for some people you have to get into it and you have to write it a couple of times to understand why it's actually more productive, or why it's nicer.
John Lindquist: Yeah and I kind of went in going, I went in thinking I would be doing styled components around a lot of existing components rather than just the core HTML elements. I thought 'Oh I'll just write some sort of container, I'll write some sort of custom button or whatever, then I'll style it.'
Phil Plickthun: Yeah, it's interesting it's easy to go overboard with that.
John Lindquist: Yeah and I kinda flipped my mindset over the past little while, well lets start with style components at the lowest level where they're the div's and the spans and then write the bigger components around the styled components. Anyway just a thought I had.
John Lindquist: So what's your design background then, as far as what got you into the CSS and JS, and kind of led you into about thinking about [inaudible 00:05:25]
Phil Plickthun: Well interestingly I think a lot of web app and web app developers go through a similar journey, but as I progressed from different start ups and different projects, I always found myself in roles that involved myself being a kind of designy position, where I was still a developer but where I had to communicate closely with a designer, or there was no additional designer, the designers wanted a lot of feedback, all these kind of similar positions, so over the time I just had to work on more design parts of certain projects, and over time, as I joined smaller start ups that had smaller teams there was maybe no lead designer that was there, basically every day working on the app.
John Lindquist: Right, so you started as just pure developer and over time gained the design side.
Phil Plickthun: Yeah well I would still describe myself as mostly a developer, I mean my open source work's definitely more in Java Script libraries or on the development side, but I really enjoy working on design every now and then and jumping in and helping out. I'm definitely not a designer, I mean the hours that a designer has put in over their career to just get to that level where they're at, I could definitely not say I know any of the theory that they know, but interestingly over some projects I've tried to acquire an eye for little details, and having an eye on some of the design side of things.
John Lindquist: Yeah I've always been amazed when I actually sit down next to a designer and watch over their shoulder and watch them work - just how much skill and training - and how technical it really is when sometimes I think 'Oh they just pickup a pencil and draw something in Photoshop.' Well that's totally wrong.
Phil Plickthun: Yeah it's kind of like that isn't it. You always think it's mostly thinking of some concepts and a lot of developers think why can't we use certain editors and certain tools to make our coding faster, and at the end of the day I believe that most of the time coding is probably spent thinking - or not really writing - or you think as you write, something like that, but it's interesting to see how it's actually the opposite for designers, they can get a lot of productivity by just going, and they can go to a prototyping phase separately. Well a lot of developers I know do the thinking and coding part separately. Or they don't do it separately but at the same time.
John Lindquist: Right, or a design can be a therapeutic or doodling, where coding doesn't have that side of it. Usually we go on long walks or take naps I guess.
Phil Plickthun: Yeah I guess for designers it's really common to first collect some concepts and really go about things a little more slowly, whereas for a lot of apps if you have a design, if you have clear idea and you're not working on a hard problem you can just code away for a longer time.
John Lindquist: Yeah - so just a tangent of a question - have you worked with any designers and showed them how to use styled components?
Phil Plickthun: I actually have, there's one in particular and he has pretty good basic coding skills and he really knows CSS well and he's worked with [inaudible 00:08:41] and then he's never worked on [inaudible 00:08:43] not even Java Script and this was still something that he didn't really like to touch. But the idea was to create a component library and he could jump in from time-to-time and make sure things were correct - or absolutely pixel perfect - and so basically I've just sat down with him and I've shown it to him and he didn't really like it to be honest, but he actually grew fond of the idea.
Phil Plickthun: We didn't end up actually working together on that component library, but I think he did end up picking that up with some other colleagues in another project.
John Lindquist: OK, yeah I'll have to try that sometime and see what a designer would think about it. So just with Dank Mono did you have any experience with font creation before you got the idea to create your own font.
Phil Plickthun: I mean, to be honest not really, this is kind of a first for me, but as I went along it went more well than expected. So I really enjoy typography in general, and I've actually recently only started to think about it again. So we've started this website for an event called Component Did Smoosh - a comedy adventure in London about Java Script. And we've created a site for it and basically that was way that I discovered Adobe Typekit and I realized 'Oh! I can use all of these nice fonts that I always look at and thought I could not afford on this site!' And that was kind of the [inaudible 00:10:06] where I tried to rediscover all of these fonts that I've previously discovered and was basically just looking at, being like "Huh, yeah! That's a cool font!" And just tried them out on that side.
Phil Plickthun: I basically had this old idea of creating some ligatures and [inaudible 00:10:25] until I found out that from a license point of view that's something I could never even share.
John Lindquist: Yeah, you can't fork a font I guess.
Phil Plickthun: No, there's like a couple of terms in there that say you can't modify and redistribute it, not even in non-commercial sense, or in any way. So it wouldn't even be OK to send it to a friend or something like that, and maybe a bit unsure about the entire thing.
John Lindquist: [crosstalk 00:10:50] I've never really looked at the terms.
Phil Plickthun: Yeah I've been using it for a while, I've actually read the license eventually and that is where I found out OK I couldn't - I mean even if I added some ligatures - that would be something I couldn't really share. And so that was an idea that I was thinking about for a longer time, and then when I looked at Adobe Typekit - and what I was really enjoying - to try different fonts [inaudible 00:11:18] was the one we ended up using, and when I tried out all these fonts that's kind of when the idea came back. I was looking at some mono-spaced fonts and I was remembering 'You wanted to create some ligatures to operate [inaudible 00:11:31].'
Phil Plickthun: You know I couldn't do that back then but what if I used the apps I know and created one from scratch? I kind of tried to create a couple of letters, and it kind of worked out, which is interesting. So the app I was using was [inaudible 00:11:49] and it was really great to play around with ligatures and smaller things, but the more I read about it, the more I realized it's actually a really approachable tool, which I guess makes sense, since a lot of typographers are not really spending most of their time at the computer drawing the fonts there, but are sketching it beforehand and kind of copying it over.
John Lindquist: Wow, I can't imagine sketching a font out. It just doesn't ...
Phil Plickthun: I mean the first letters I ...
John Lindquist: ... yeah. I have terrible handwriting.
Phil Plickthun: ... Oh yeah same here. I think I haven't written a handwritten letter in years.
John Lindquist: Can you give us (real quick for people who are listening) just a quick definition of ligature and mono-spaced font?
Phil Plickthun: Oh sure so monospace font, as in a font you would use in a code editor which has the same width for every single glyph so you have that nice table spacing where every single glyph in the next row would be at the same column - as the same position - as the one above. Ligatures have really become more popular ever since [inaudible 00:12:49] and a couple of fonts before that, Pragmata Pro is another really nice one in fonts that really spend a lot of time on making these symbols that span across a couple of letters and [inaudible 00:13:01] and so on across there so that they can convey a better meaning of area functions and stuff like that. I think that the community's still pretty divided on whether they like it or not. A couple of people really love it, a couple of people really dislike it.
John Lindquist: Yeah I meet people who write code with non mono or just regular sans serif fonts.
Phil Plickthun: Oh really? I've actually never seen that to be honest.
John Lindquist: And I would never, ever consider doing that, but it helps them read it somehow, or that's just how they prefer it? I dunno I'm a fan of ligatures, I think they help convey that meaning. An arrow should look like an arrow not an equal sign and a greater than sign. I dunno, personal preferences.
Phil Plickthun: I mean Operator Mono is being a font that is primarily being marketed to developers, but a font that is inspired by typewriters to have that mono spaced typewriter-like feel is actually pretty far from that. I mean I can kind of see how someone can get used to writing in, I dunno a random, sans serif, non-monospace font every day, but I think a lot of these things developers have gotten really used to having their IDE or editor set up really nicely, having a nice syntax theme, and only I think in the last years fonts have become a thing that people care about - at least in the community I am in, and in the [inaudible 00:14:32]community especially - with Operator Mono.
John Lindquist: Do you have an editor theme that you recommend to go along with Dank Mono, to be the perfect setup?
Phil Plickthun: Right now I'm using Pale Knight. I dunno if that's a name. There is one by Ken [inaudible 00:14:47] for - I think he made it for [inaudible 00:14:50] which is called Gucci Shark Bytes-something.
John Lindquist: Gucci Shark Bytes-something, got it.
Phil Plickthun: Something you'd expect from Ken, should be easy to find. I think if you just type in Gucci syntax or something it should be easy to find.
John Lindquist: I'll have to check that out.
Phil Plickthun: I could be completely wrong about the name I just realized it, this is just I guess what I would expect Ken to name a syntax theme.
John Lindquist: Yeah I always stick with the super high contrast themes, just because I do a lot of video recording and presentation-type stuff with code. When I look at the much lower contrasts, that look really pleasing to my eye, I wish I could use those more, but I don't want to get too used to them if I'm always gonna be going back to high-contrast versions I think.
Phil Plickthun: It's the same for me, I really like colorful, high-contrast type themes, and I can't really look at the colorful themes all day long. I guess that's the annoying part of it I guess.
John Lindquist: So with the creating your own font was there any surprises along the way or was it just kind of smooth sailing the entire time?
Phil Plickthun: I mean the interesting thing is that in the beginning I was always creating every single glyph from scratch. I was starting at all the letters and I did some of the lower-case letters first. I think I started with the 'h' because it was recommended somewhere that's the one that has this really nice shape that repeats for a couple of letters that you can reuse. And so I was starting to design other letters and continued with the 'n' since that's just cutting off that vertical stem from the 'h'. And I was then going on to do more and more of these, until I found out that the glyphs app actually supports components, they're actually called components, so I didn't have to actually copy over things, so I had to basically start over after half a week.
John Lindquist: Oh that sounds frustrating. Oh I don't know, maybe it was a relief that it has components, I don't know.
Phil Plickthun: It definitely paid off, yeah, it was so funny that it was just there called 'components' and I'm like, well I know components. Well that's handy! And I kind of sent some drafts over to Ken after I had a couple of letters, and I didn't really expect much, I was just talking to him like "Hey, you know, what if Operator Mono was a bit more of a developer-focused font, and actually ligatures eventually." And so I send him over a couple of glyphs and surprisingly a lot of them still look pretty similar to what the font looks like now. So that must be pretty much fifty - or more - iterations ago, and Ken is a very cheerful person and probably nice guy to talk to if you ever need a project, and he was amazed and he really told me I should follow this up and do the entire font, and I should try it.
John Lindquist: So a couple of questions around that. Just how many - just to get an idea - how many glyphs are there when creating a font like this? Like how many individual characters did you have to draw?
Phil Plickthun: So after you do the letters and the common symbols, you really move onto diacritics, which obviously means a lot of the glyphs are automatically assembled. So you open 'a' and the umlaut dots above it, that would be automatically assembled, so once all of these are assembled I think then it has 480-something glyphs right now. So that's 480 for the regular and 480 again for the italics. If I'd have to estimate it, I would have to say it's probably around 250 or more. I'm not quite sure to be honest. It's so easy to lose track.
John Lindquist: So should I hold down the alt key and just start typing and see what comes out? I feel like I'm missing 180 of these glyphs that you're talking about that you probably spent a lot of time on, I dunno, like alpha and omega and all the ...
Phil Plickthun: Oh! Funny story, Greek letters is something I haven't even started on.
John Lindquist: I don't encourage you to I mean it's just ...
Phil Plickthun: There's just a lot of symbols and glyphs to go through, I mean after all of the letters you realize, 'OK, I have to do the common curling symbols, and then there's ten more, and then there's ten more, and then there's some more.' And after a while it just starts to accumulate and accumulate, it's easy to loose track over them.
John Lindquist: So I have to ask, how hard was it to create the period?
Phil Plickthun: The period ... I think I'm still not happy with it to be honest. So maybe with a grain of [crosstalk 00:19:42] still tweaking a couple of things. I think that's still one of these components that's reused, I think just called 'dot' or 'circle' because it's not gonna [inaudible 00:19:53] zoomed and stretched in a couple of parts. So I think that actually was one of the hardest, because I didn't want it to just be around and it has this kind of really subtle, kind of, rectangle look to it now. Which is impossible to see when you're using the font normally, so I dunno if it was worth it. I think I spent a couple of hours on the period alone.
John Lindquist: So now I'm gonna have to bump my font size up to 180 just so I can appreciate all of the tiny details you put into it.
Phil Plickthun: Please do, I mean if you appreciate every single word I know that at least someone knows.
John Lindquist: Aw, man. And just kind of, a related question, how in the world do you choose version numbers for your releases? Is there some sort of [inaudible 00:20:41] for fonts?
Phil Plickthun: Well, I mean the interesting thing is ...
John Lindquist: I think you [inaudible 00:20:48] at seven.
Phil Plickthun: It's 0.480 right now, I forgot the version number, but um, the thing is a lot of these fonts that I was looking at, they have [inaudible 00:21:01] numbers, which is great, but the glyph app - as amazing as it is, as powerful as it is - it allows you to only input two numbers, and I was kind of thinking about how to [inaudible 00:21:15] place two numbers that is essentially just one in the hundreds and one with the major version. I didn't want to actually use the major version for now, in case someone looks at the version and thinks 'OK, one point something means it's kind of done.' And so I started out having a version 001 ...
John Lindquist: So you don't think it's done right now?
Phil Plickthun: No! Not at all. I actually think ...
John Lindquist: It's gorgeous ...
Phil Plickthun: Oh thank you, I have the [inaudible 00:21:46] repository open and I'm encouraging everyone to go there and open some issues. I would do that but I've moved it over to Spectrum now. Either way there's a lot of smaller issues coming in. I mean one of the bigger ones is, for example, the Greek letter support, which is one of the things I definitely didn't want in the first release, as I still wanted some early feedback. And there's some smaller things, like some certain ligatures have been requested to be added, certain symbols didn't render well on certain screen resolutions and sizes, so I don't think it's close to be done. And I was kind of surprised that there's lots of people who've jumped onto liking the font and going to the site and buying it early on, and I actually only released it early because after I tweeted out this kind of small [inaudible 00:22:33] screen shot, and this assembly of a couple of glyphs and letters, people actually reacted really well to it. And after a while it hit 1000 likes and I thought, 'OK, I kind of actually have to release it now.' People actually want to use it.
John Lindquist: Social pressure ...
Phil Plickthun: The pressure was definitely kind of rising at that point, because I thought 'OK, I cannot go away and work on this for months now until I actually decide to release it eventually.
John Lindquist: Yeah, never tweet anything you don't intend to release or else the pressure will just get to you.
Phil Plickthun: I mean, I did think about releasing it already at that point, I mean one or two releases, but I wanted to take it slow at the same time, so that part didn't work out.
John Lindquist: Yeah, I think a lot of people think, 'I see a color theme, I can tweak this color theme to make it exactly the way that I want.' Is there any equivalent there for someone who would be like "I see this font, I can just go in, it's gotta be just as easy as tweaking a color theme or something like that.
Phil Plickthun: Yeah I mean I wanna encourage everyone, I wouldn't say it's as easy as picking a couple of new colors. I feel like even picking a couple of new colors for a syntax theme is quite hard, and I've tried to create a syntax theme before and I'm not that good at it, but I do want to encourage some people to at least try it. As developers we spend a lot of time looking at our screens, looking at the same font for hours on end, for weeks and for months, and it's clearly necessary for us to put some time into our environment to make us happy and maybe to make us more productive because we'll have spent more time looking at it, because it's not as annoying, because you're fixing the small problems, and maybe at that point you're hitting a kind of roadblock, and maybe you really can't find a font that you like.
Phil Plickthun: And I've been using Operator Mono for a while but after a while I've repeatedly thought what if this small letter didn't look this way. Or what if this was a little more fun. What if it just didn't look as much like a type written font out of a typewriter. And lastly of course the ligatures. And I mean if you're thinking that then I would definitely recommend doing your own font. It's definitely fun and if you do some research I can only recommend starting with Glyphs App, reading their tutorials, watching some of their videos and talks, and I would say getting started with just a single letter is something you could try out in an evening or an afternoon, and if you end up liking it, like I did, then you might end up working on it for, I dunno, maybe a couple of hours, maybe a couple of weeks or months. It's definitely really fun.
John Lindquist: Awesome, that's great to hear. So do you have any plans for future fonts, or for a serif version of Dank Mono or Dank Serif or Dank Sans Serif?
Phil Plickthun: I don't think at the moment, I mean we've already talked about that the font is not really done, I don't really want to start anything new right now. People have already requested the font in different weights, which I wanted to avoid for a little longer, since that will involve me redrawing every single glyph that I've done so far.
John Lindquist: Oh really so the heavys and the lights are all ... those aren't just math re-renderings? It's a redraw and everything?
Phil Plickthun: You can actually transform them to make them thicker, but that will mess up a couple of shapes in a really subtle way. I guess increasing things is obviously a bit tricky when you're at a corner and it's obviously being a bit squished together. And glyphs has a nice trick - if you create just two weights of the same style of the font, you can kind of interpolate that, so it takes the two of them and it kind of figures out how to make different weights. But even for that I'd [inaudible 00:26:21]to create a second weight so I have to probably redraw a lot of glyphs.
John Lindquist: Alright is there anything you'd like to say before we wrap it up?
Phil Plickthun: Well I really want to say thank you for having me.
John Lindquist: My pleasure. Where would people go to buy your font?
Phil Plickthun: That would be dank.sh, really short domain.
John Lindquist: Yeah, that's a great get, nice domain. Thank you so much Phil for joining us, pleasure having you here.
Phil Plickthun: Thank you again for having me.
John Lindquist: And have an excellent day.
Phil Plickthun: Cheers.