Duck Tales: Duck Sans — designing a typeface that balances functionality and brand (ep.18)

In this episode, Mary (Senior Director, Brand), and Nirzar (AI Design Lead) discuss why we developed a new typeface, how we implemented it, and its role in communicating our personality.

Disclaimers: (1) The audio, video (above), and transcript (below) are unedited and may contain minor inaccuracies or transcription errors. (2) This website is operated by Substack. This is their privacy policy.

Mary: Hi everyone and welcome to DuckTales where we go behind the scenes at DuckDuckGo and discuss the stories, technology and people building privacy tools for everyone. I’m Mary. I work on the brand side here at DuckDuckGo. Today we’re talking all things typography and more specifically how we developed DuckSans, our new custom typeface. So I’m here with Nirzar who beyond being our product design lead for AI, he’s a real typeface nerd and complained about our previous default typeface for, I don’t know, like five years, five plus years. So we had him lead the effort so he will be able to answer all of our questions. Nirzar, thanks for joining.

Nirzar: But yeah, Hey, hi, I’m glad we’re talking about fonts.

Mary: First prop use of the conversation. All right, I’m jumping right in. For folks who are less familiar, why does a typeface matter? Why not just use the defaults? What is the benefit? What are you trying to do by creating a custom one?

Nirzar: Yeah, that’s a good question. I think there is nothing wrong with using defaults to be honest. Nowadays default typefaces for operating systems are very well designed. Take San Francisco, Sans for example, by Apple is very well designed typeface and it’s going to be fine. I think the main part of this is mostly about what our product is. DuckDuckGo is a search engine, have UI chat. Most of our product, although it seems like it buttons in Chrome, Windows, most of it is actually with text content, like we take search results or take the AI chat with Apple. So around like 80% of product surface that you’re seeing is typography. We spent so much time on like thinking about color, this, that, buttons, styles. I think typography and type setting kind of require that much attention as well because they take like most of your screen when you’re using it. The reason for not using defaults, I think it’s where kind of the brand maturity sort of goes into it’s something we wanna do to kind of associate a kind of a feeling, kind of a look that we want to encode in our brand. I mean, I can go into a lot more detail about this, but just the idea is like, you want to make... Yeah, but like, yeah, the idea is you’re basically kind of creating an ownable sort of like element. I think typography is as important as the blue color that you use and the brand colors that you use and everything else.

Mary: I know you could. I know you could. I think the search engine as a surface is a good point to bring up because, know, obviously, like I mentioned, I work on the brand here at DuckDuckGo. And when you look at the search engine, you’re often questioning, you know, how can I inject more personality? How can I inject more of our, you know, our over our affect into the product and make people know when they look at it that this is DuckDuckGo. This isn’t Google. This isn’t Bing. And there’s really not much you have to work with.

Nirzar: Right.

Mary: Obviously you have the logo, but the typeface makes a huge difference. And so, for folks who haven’t seen it, this is where we rolled it out first. So you might have noticed a difference, but this was kind of one of our key areas we were most focused on. Nirzar, we began the exploration, what were the factors you were considering? Because obviously there’s hundreds of thousands, if not millions of typefaces that have been customized to choose from. What were you looking for specifically?

Nirzar: Yeah. I think the process starts with just collecting what are the use cases that we have, obviously, and what are the goals we have. I think in speaking about the goals, I think the main and most important thing, goes without saying, is just legibility and readability of things. And when I say that, it’s a little bit different than designing type setting for a book or something where it’s going to be read in a very specific setting and control that, you know, the paper you’re going to print it on. Like for us, we are talking about across devices, across platforms, across different types of screen densities. Like there’s many, factors that come into play when like somebody is going to look at your work, the design work that we’re doing or the product and run work we’re doing. So I think just considering all of those, tying that with this making it like the most functional but at the same time having more character so there are these like opposing sort of challenges as well you can’t have a lot of personality because then readability suffers if you focus only on readability then personality suffers then you have something that is like that looks bland and default it is extremely readable but you can’t tell it is DuckDuckGo so we were kind of like talking about the challenges and the spectrum of where to land on personality versus readability. And yeah, I think that being the goal, I think that’s where we started our exploration at.

Mary: Mm-hmm. You. Yeah. Was there something about the DuckDuckGo personality you wanted to bring out in particular? I mean, as folks know, we have a duck for the logo. Like there is a whimsical element to the brand that but you don’t want to go as far as like comic sans by any means. Like what were you most looking to play up when you talk personality? What was your goal?

Nirzar: Thank. Yeah. Yeah, I think it’s a very difficult challenge. I mean, definitely our brand is kind of, I don’t know, I really like it. It’s very quirky and sometimes goofy and derpy as well. But at the same time, we also care about trust and other things which are kind of, can seem very opposite point of view. But for me, it was more about like bringing a little bit of sort of pluck to it. So, and like the way it kind of gets codified into the shapes of the letters is more about like how certain things, what is the angle at which you cut the corners on a terminal of C for example, or the way you look at DuckSans Q, it’s very sharp and it’s very straight, but then you and other letters kind of complement the roundedness and friendliness into it. So it kind of like the, the kind of characters you’re looking for kind of trickle down into these like very specific things about shapes. Yeah, I mean, it’s not perceptible like right away when you look at it, but it is thought out. There’s thought behind all of these things.

Mary: Yeah. Mm-hmm. Hmm. That makes sense, yeah. But there is, yeah, definitely. I mean, even thinking about when you talk about it being standardized versus like when you change certain shapes, you’re making it less uniform in some ways. You’re making them certain things stand out. Like we spent a lot of time, I remember deciding how big to make the dot on the eye. And we were like, no, like a little bigger actually. And so it’s like to your point about it not being immediately perceptible. I think when you take a step back and you see it all together, maybe you notice something that doesn’t look quite as uniform, quite as standard.

Nirzar: Yes.

Mary: Which is what the brand is going for. But it is funny when you end up fighting or not fighting, discussing the I dot on the letter.

Nirzar: Yeah, I mean, it might, like, I really think, I think if you don’t work in typography or in design in general or brand, you might think that we’re just like fighting over or discussing non consequential things. But actually, what I care about mostly is having meaning to it and not just doing it for the sake of doing it, but actually like putting meaning behind, codifying values and trust and all of these things into visual like artifacts.

Mary: Yeah. Yeah. Yeah. Yeah, so let’s get into a little bit how we found and started creating DuckSans. So DuckSans is based off of Pangea. Do you remember how you found Pangea or how you came across it?

Nirzar: I don’t quite remember but so Pangea is a typeface that was designed by Fontwork. It’s a type foundry in Germany. I remember using a Fontwork typeface few years ago on a project. So I basically like I have a that’s my like thing that I do in free time go to type foundries and look at that.

Mary: Yeah. Don’t tell people this. It’s too revealing.

Nirzar: But yeah, I think there has been a renaissance in type foundries recently. I think there’s a huge amount of work that is happening. And there’s a third wave of typography coming in, and digital typography particularly. There’s a lot of experimentation going on, variable typefaces, or even just doing very whack things, which are very cool in the last four or five years. So I was very excited to take on a typography project. I was like going through the Rolodex that I have for all the type boundaries to look at what is happening everywhere. Yeah, I think that’s, but I think particularly Pangea caught my eye just because how versatile it looked on the surface. It’s a variable typeface, but it’s just designed for scalability. And it also had a little bit of character to begin with before we customized it as well. But I think those were the kind of two things we are looking for is like something that is like durable, scalable and something that has character at the same time.

Mary: Mmm. Yeah. Did you feel that Pangea, sort of as a base, represented a lot of that legibility concerns? So we customized Pangea, so that’s where we ended up with DuckSans. There’s customizations and things we built in. What specifically, from your perspective, were we trying to achieve with the customization? Is it bringing out more character, or do you see it more as an engineering changes?

Nirzar: Yeah, we can get to engineering in just a bit. But before that, I think when I say scalability, I mean like literally scalability. We have a eight point gray link somewhere in the footer and we have large billboards. So like it’s really difficult to find like a silver bullet solution that can fit both of these cases. So I Pangea scales really well in terms of it’s actually two different typefaces, is specifically designed for to be used on large scale. This is what we call display typefaces. And we have a product layer which is specifically designed for legibility, readability, screen rendering. It can be readable on like 8.6 GB or anything like that. It’s just like made specifically for that. So this is what I mean by those two things. So that’s like part of, a little bit part of the customization. The font engineering is like a lot more deeper.

Mary: Hmm. Yeah. Yeah, before we get into that, we, know, like to your point of like these nuances are things we notice, but not everyone would like we wouldn’t we one of the things we did was we tested this. So we did some pre testing with users or we’d show them our previous default and this one in different contexts. And I will say I was really surprised by the overwhelming preference for this new font. I was curious, like, were you surprised and what can you what can you share about the testing?

Nirzar: I was definitely surprised seeing a statistically significant difference between to grow test typefaces that are very similar. I mean, we tested what, like 2050 typefaces. But I think seeing that much difference in like perception was very, actually very comforting on the project itself and also like for me. Because I think it’s something that you are like so akin to, like if you use the product a lot and like you’re not gonna see it in one second like it’s it’s a longitudinal thing if you’re using something for 10 years and like suddenly the dot on the eye changes you’re going to notice it like you’re immediately going to notice it the last typography work that I did was with Wikipedia and I was like very contentious because there’s such a huge sort of like your eyes are kind of like dead set on like how it should look and if you think that it’s very very apparent exchange. But capturing that in the setting that we did was actually a surprise because you’re kind of showing a little bit of the context because of the constraints we had. It’s not something that you want to use and watch somebody use, get their feedback on these things. But yeah, mean, maybe people are a little bit more sensitive to these things right now than before. So I think that’s what kind of points it to me.

Mary: Yeah. Hmm. Yeah, I would believe that. And I mean, we tested it across like read, like, you know, you’re more functional, like readability, clarity, but also like, which is more memorable, which even just which do you prefer? Which do you which has more personality and overall, you know, to your point, like you could argue that two grotesque fonts, they look very similar, but people really did have a preference. And I think we’re really happy to see that it aligned with a lot of what we also felt was stronger and better represented the brand.

Nirzar: Yeah, I think that helped us a lot moving forward because I think it’s very difficult to kind of have similar things that both have trade-offs. I think research really helped us.

Mary: It. So what have I not asked you about the design of the typeface that you want to share? Because I’m sure there’s things I have not asked you. Because I want to ask you about the engineering effort. Because obviously from our standpoint, there are a lot of improvements we made to the readability of the typeface. But what have I not asked that I should?

Nirzar: I don’t know, I think... It’s really important to kind of like, like typefaces have become important. I think a lot of companies like Facebook and Google and everyone started investing into typography very recently. And there’s like wave of thing about like, everything started looking very similar to each other because it was all like indexed on how readable it is. And you can make an argument being like, the logical conclusion to a modern typeface is what everything should look like. I think that’s something that I struggled with personally as well, is to kind of like, how do we kind of break apart from it, but how do we also serve the function that typography is supposed to do? But I don’t know, I think it’s a spectrum. I think you and I worked on the spectrum a lot to figure out where we should land.

Mary: Mm. Yeah. Rest in peace, Rubear.

Nirzar: But yeah, Ruben is good. But yeah, I don’t know. It’s not a question that you didn’t ask. But I think it’s something that I think it’s worth calling out in this conversation, being like, hey, did you just make something that seems like everything else that is happening? And I think it’s the same with all logo as well. It’s like we can’t make our duck very much look like any other software company logo, but I love that we kind of keep that quirkiness and like deal with all its quirks like on everyday life when we are working with it.

Mary: I know he can only look right. He only has one. He can only see one direction. In terms of where we go from here for the typeface, you know, marketing, you know, one use case we’ve talked about is like where you can bring out more personality and characters when you’re doing marketing, advertising, things like that. Like, I think what we focus on was the product use case. But I imagine that there’s a lot of future work still to come when it comes to bringing like even amplifying that character more. Is there anything you’re particularly excited about or is it just a bigger effort to undertake that is upcoming?

Nirzar: Exactly. I think it’s more about having the capacity to, the capacity and foundation in the typeface to be something different for different scales and purposes. And that’s what we kind of like, I think we achieved that with DuckSans because like, if it’s not in a experimental enough, like identifiable, I think we have a great foundation in the structure of typeface to kind of like drive that chain forward. Like we have to keep those options open. So I think this extensibility, this property of extensibility is really important. And I think, yeah, I’m like super excited to like tomorrow figure out like, maybe we can do something weird with a of letters. And when it is used, I like 200 point size on a billboard and I think that can still carry the essence of main typeface but as a version that is made for particular use cases. I think just having that optionality itself is kind of like really good.

Mary: Hmm. Yeah, that’s a great point. I think my favorite is we have a normal ampersand and then we have an ampersand that looks like a duck, which we have yet to use. So you’re hearing it here first. Easter egg. It’s an Easter egg that has yet to be put anywhere. I don’t know. All right. Let’s talk a little bit about engineering. Let’s do Mohammed Proud here. Can you talk a little bit about what the engineering effort was like to get this on the SERP. Like I remember hearing about these like hour long calls where in my imagination you were like, Mohammed, add a space here. Like it was like, I was imagining you both like sort of custom fiddling and like changing the font manually. Was that what was happening or what was the process of typesetting this font?

Nirzar: Yes, it’s an Easter egg, I think if you find it. Yeah. Yeah, so the type setting part is actually took the longest time as well. I mean, like, yeah, you’re right. We were on calls for hours kind of figuring out how to implement and how to make use of it. The things that we were kind of working on an improvements from the status quo where things like using new rendering methods on web, something called like anti-aliasing and corners, painting on windows, our previous life was particularly broken on windows. I was very, whenever there was a curve anywhere, pixel part. But we were kind of like figuring out what are the best methods and the most modern methods to render on screens. The other part that we obviously have to think about, we are a website and an app at scale. Performance is key important metric for us. So just thinking about how we can reduce the load time, we are basically kind of improving upon a typeface, but new features mean more footprint. We definitely don’t want to delay page rendering in any way. If not, we have to make it better because we are now looking at this part of the software. So we’ve been working on optimizing how we can optimize the delivery of font files. So that goes into just insane amount of splitting our Unicode ranges from WAF2 files into this file and that file, basically having particular letters, let’s say your page is Greek, we just want to load the extra letters from the other character set into the main one, and not actually the separate typeface that has Greek in it. So just optimizing, optimizing this to the point of like just being like very bespoke about all of this because again, it’s like millions of users like everyone loads this all the time. So like being really on point and really getting into like the nitty gritty. Like I remember like working with Christoph from Fontwork where we are trying to separate characters for Cyrillic, but we even went further and we want to load only the accents not even the actual letter because we are like the a is the same but the accents are different so like let’s even split that out and there are these a lot of font engineering techniques like font work helps us in optimizing.

Mary: Yeah. Mm-hmm. Hmm. Is this like, is this trial and error that you’re finding this out or are you deep in some Reddit threads on type implementation?

Nirzar: Actually, yeah, I would have thought it would have been easy to find guidance on, this is, we are talking very specific things for very specific software. I didn’t find, because most people would give up on level two of optimization. We kind of went a little bit overboard. Actually, we went overboard that after we figured out our page, our search results are going to come after the point at this point. So, we’re like, we like this.

Mary: Hmm. Yeah. You. That’s amazing. Okay, I’m taking this completely out of this project. How many fonts do you think you have downloaded on your computer? Like, not even related to this, just generally, like how many custom fonts exist in your device?

Nirzar: I don’t know. Thousand? I want to say more than thousand? Hundred percent, yeah.

Mary: That was, that is insane. All right, any final words from you Nirzar on typeface, DuckSans, anything?

Nirzar: No, I mean try it out give us thought I was very happy like some of the community members noticed and actually said nice things about change which is a bit rare on the internet but it’s always good to see that. But yeah it’s like I’m like more excited to kind of like now propagate this more in other parts of the brand the word mark and things as well in the future. Also my typography professor would be proud.

Mary: Very proud. All right. Do you want to do you want to finish off by plugging your new album or should we leave that? All right. Thanks, everybody, for listening. Tune in next week. Yeah.

Nirzar: Oh my god, who’s that? Hey.

This is a public episode. If you would like to discuss this with other subscribers or get access to bonus episodes, visit insideduckduckgo.substack.com