Podcast Awesome

The Story Behind the Sharp Icons: How a Whiteboard Idea Accidentally Turned into a Full Icon Set

Font Awesome Season 2 Episode 12

In this deep dive into the creation of Font Awesome's Sharp Icon Set, designers Jory and Noah share the behind-the-scenes story of transforming a casual idea into a reality. 

Jory recounts the unplanned inception of the Sharp Icon Set, initially just a bullet point on a whiteboard that evolved into a full-fledged project due to a promotional video. The discussion sheds light on the challenges they faced, such as maintaining consistency with the existing icon grid sizes and artboard constraints, while exploring the potential for new design directions in the future. Noah elaborates on his journey from Figma advocate to a pivotal member of the Font Awesome team, charged with defining the rules and styling for a sharp rendition of their iconic set.


Timestamp Summary

 | 0:01:04  | The idea of Sharp icons accidentally made it into a video.
 | 0:02:01  | Sharp icons originated during a brainstorming session.
 | 0:03:31  | The concept of sharp icons was included in the version six video.
 | 0:04:09  | We'd committed ourselves to Sharp icons, and Noah was hired to help.
 | 0:06:26  | Noah played a significant role in designing the Sharp icons.
 | 0:07:47  | Noah initially declined to help, but eventually joined the team.
 | 0:09:44  | Jory worked on the Sharp icons while quarantined with COVID.
 | 0:10:53  | Matt and Noah collaborated on copy and graphics for the Sharp icons.
 | 0:11:47  | The main challenge was adapting the icons to a different grid size.
 | 0:12:20  | The challenges of maintaining consistency between icon families.
 | 0:12:50  | Making design choices to ensure compatibility with existing designs.
 | 0:13:33  | The challenges of showcasing different icon families on the website.
 | 0:14:18  | Updating icon search to include references to Sharp & Classic styles.
 | 0:15:03  | Jory and Matt discuss the user-friendly design of the icon search tool.
 | 0:15:26  | The complexity of managing a large number of icons and styles.
 | 0:16:22  | How Noah got involved with the Sharp project and his initial work.
 | 0:18:22  | Noah and Jory's collaboration on a Figma event.
 | 0:19:22  | Noah explains how he joined the Sharp project.
 | 0:20:36  | Noah discusses the challenges of creating Sharp icons.
 | 0:21:24  | The visual density between rounded and sharp corners in icons.
 | 0:22:39  | Establishing constraints for the Sharp icon set.
 | 0:25:11  | Using Sharp icon sets and their suitability for different types of UI.
 | 0:26:37  | Sharp icons work well with stark and geometric typefaces.
 | 0:27:51  | Sharp icons may be suitable for fintech and professional themes.
 | 0:28:16  | The difference between icon families and styles in Font Awesome.
 | 0:30:38  | Choosing the right icon weight based on the legibility required.
 | 0:32:23  | New icons based on a mathematical shape called the super ellipse.
 | 0:32:51  | Good design should go unnoticed and guide the user intuitively.

Show Notes

Stay up to date on all the Font Awesomeness!

0:01:04 - (Matt): So tell me the backstory of the sharp icons. I seem to remember that the sharp icon set was an idea that accidentally made it into a video and then you were locked and loaded to create this icon set. Can you tell the story behind that?

0:01:24 - (Jory): We have so many ideas at Faun awesome that we think are good, and sometimes we get in the trap of announcing things before we've actually really figured out how we're going to do them. From version five moving into version six, we knew that we were doing the new duo tone styles and we were doing the new thin style. And if you know anything about fan awesome icons, they all have a slightly rounded corners on some of the sharper shapes. Our square icon is actually kind of a rounded square. It's a square with the edges have been sanded off.

0:02:01 - (Jory): And as an icon designer, I'm like, it's relatively easy to not do that rounding when you're building an icon. So in the back of our heads, we are always just maybe one day we'll do a version of Faun awesome that was a little more severe, doesn't have those rounded corners at one of our snuggles. And this was the last, it was the last day of the snuggle. So everyone had, was leaving on Friday and I think most people had already left.

0:02:25 - (Jory): And my flight, for whatever reason, was later that day. And we talked a lot about the version six launch and we were getting prepped to shoot the video for it and all that, and what the content was going to be in the video. And I believe it was Dave, Rob and I were in the back room at the office and we had a whiteboard up. And on the whiteboard, I'm sure there's a picture somewhere, but on the whiteboard we were just like putting little bullet points of everything that we could include in faun awesome six.

0:02:53 - (Jory): And we had the thin styles on the thing and we had, you know, XYZ, all the different features. And on a bullet point we just wrote sharp icons, just a single bullet point, and that was it. And then forgot about it. And then we were going to write the script for the video and include it in that. We decided, okay, we'll do the sharp icons. And we wrote in a little scene where Rob, the main character, comes out dressed in a tuxedo and talks about the new sharp family of icons. And he gestures to the wall and it scans up and they're all these coffee bags with the sharp icons on them locked in.

0:03:31 - (Jory): We were locked in. So it went from this mark on a whiteboard to being included in the video and for the video itself. Those bags, they have little graphics on them that say sharp, solid, sharp, regular. Like, I made little icons on those bags before we had done any sharp icons. Like, I actually didn't. We hadn't set any rules for the sharp icons yet. We're just like, I know they're gonna be sharp, so I look sharper.

0:03:55 - (Jory): Yeah. So little proof of concept. But then it was one of those things that just, I think it's a great idea and I think what we ended up with is fantastic, but it hung over our heads for a while that we had essentially promised something that we hadn't built yet.

0:04:09 - (Matt): I seem to remember one of the snuggles, it felt like a significant discussion on. We have to get these sharp icons done and it seemed like you were burdened by that. Like, I just, I don't know where I'm gonna find time to do this. We have to hire somebody.

0:04:28 - (Jory): That's what I remember because I was doing all the other icons for version six.

0:04:32 - (Matt): Yeah.

0:04:32 - (Jory): And helping with the website design and doing my job. And just the time I knew it was going to take, let alone one of our sharp styles done. We actually at that time, hadn't even decided fully yet how we were going to build the sharp icons. And the route we ultimately went down was to rebuild all of our classic style icons. And in the process of rebuilding them, we also then created the sharp versions.

0:05:02 - (Matt): Why do it when you can overdo it?

0:05:04 - (Jory): Why do it when you can overdo it? But ultimately what that has done is it has set us up for the future so that we now have all these source files that are editable in Figma and we've talked about how great that is and we did a whole config presentation on it. But the fact that we now have our classic icons and our sharp icons in figma itself means that if down the line we decide to do a semi sharp or a whatever, the lift is not nearly as big as if we had to start from scratch.

0:05:33 - (Matt): Yeah, dull sharp. You could do dull sharp.

0:05:36 - (Jory): We could do a dull sharp.

0:05:37 - (Matt): You can do a butter knife sharp.

0:05:39 - (Jory): Yeah, yeah, yeah.

0:05:41 - (Matt): Not a razor edge sharp.

0:05:53 - (Jory): A little bit earlier, you asked me a slightly leading question. The comment about at the snuggle being like, I don't know how I'm gonna do this by myself. And the ultimate answer to that was I didn't. And we did hire the wonderful, the magnificent, the inimitable Noah Jacobus to come on board and tackle those, or at least the start of those. It became a joint effort at one point, but Noah certainly was in charge of the initial rules and the visual styling and then I could take some of that and run with it.

0:06:26 - (Jory): But it was just such a huge relief and hugely, hugely helpful to have him on board and honestly, probably a good way to cut his teeth. Designing with faun awesome is like, oh, you know, how do you learn how to design in a faun awesome icon style? It's, well, you just redraw. I'm sorry, I'm so sorry, Noah. But hey, just take our existing icons and redraw them. You know, trace them. Here's a closet in a closet.

0:06:54 - (Jory): Put the time in the side. Benefit is that while redrawing them, you can make little tweaks here and there and make them more consistent.

0:07:02 - (Matt): Yeah, well, he has done a fantastic job and there's been a lot of talk about how he consulted on best practices for Figma and when you switched over and decided the best way to go, the best tool to use. And did he consult on any of the sharp stuff prior to coming on staff?

0:07:22 - (Jory): Yeah, he did. And Noah and I had been Internet friends for a little while and were always boosting each other's posts about icons and he was a really big Figma advocate and talked about how great Figma was for designing icons. As I was thinking about version six and I was thinking about the sharp icons, I was dipping my toes a little bit and trying some things out and I even was like, hey noah, would you be interested in consulting a little bit on the side to help with some of these?

0:07:47 - (Jory): And he was super busy at the time but did take a pass and he's like, hey, for these four icons, here's how I might do it, or whatever number of icons he did just as a favor, but at the time rejected me outright and said, no, I'm not going to help. I can't, I can't do this. I'm too busy. I'm very in demand.

0:08:07 - (Matt): Yeah.

0:08:08 - (Jory): But, you know, I think absence makes the heart grow fonder. And so I let it sit. I didn't press him too hard and after a little while came back and said, hey, we've kind of scoped the project a little more. You'd be interested in some free time to help out now. And he was like, actually, yeah, I can help out. And so he contracted with us for a little bit, helping out with some of the sharp icons and did such a fantastic job that we stole him away from his other company nice and convinced him to join us.

0:08:38 - (Matt): I remember when he was in the middle of that project and I would check in with him sometimes. Cause he's helping out with graphics for the blog and things. And I was like, hey, man, how's it going with that sharp icon project? That must be pretty tedious. Is this a bummer for you? I think I've heard him say before, it's sort of like that moment in a superhero movie where everything converged and he's like, I was made for this.

0:09:02 - (Noah): Yeah.

0:09:02 - (D): And so he was just like, no.

0:09:04 - (Matt): I'm having a great time. I love doing this, and that's awesome.

0:09:07 - (Jory): Yeah, I mean, I love it too. You know how you sometimes have very specific memories? I now associate building the sharp icons, and I don't want to take anything away from Noah because Noah did the bulk of the work. He set the styling, he did most of the icons. But once a lot of that styling was in place, I got sick with COVID And so I was quarantined up in my little guest room and just sat down and just worked because I was so bored just sitting on my computer. And I finished out the duo tone version of the sharp icons, which, oops, that has not even been released yet.

0:09:44 - (Jory): No, you can keep that in. It is done. We're hoping to release it soon. There's some technical things that we need to work out, but it's pretty often loaded. Yes, it's locked and loaded. I remember, but I just, like, I will always, whenever I think of that style, I will think of sitting in a bed. I plowed through all of the Clone wars animated series while building a bunch of sharp icons and just knocking it out.

0:10:11 - (Jory): I don't know that I would say it was a great experience because I was sick, but kind of was in a happy place. Just like focusing, watching Star wars, designing icons, sitting in the comfy bedroom. It's funny, you have an interesting, I think, take on the sharp icons because you wrote a lot of the copy for the emails. We wrote the blog posts and kind.

0:10:30 - (Matt): Of, that was kind of one of the first big projects for me.

0:10:32 - (Jory): Yeah, yeah.

0:10:34 - (Matt): It was really fun working with you guys. And Noah and I work pretty close together, sort of coming up with a general concept for the copy and some of our phrases that we used, a.

0:10:47 - (Jory): Lot of it was focused around fashion and being classy, right?

0:10:51 - (Matt): Yeah.

0:10:52 - (Jory): Good.

0:10:53 - (Matt): Yeah.

0:10:53 - (Jory): That tied into the video itself where I think I mentioned where it was a fun whip cut where we see Rob walking and you hear, like, it pans across a, like a divider wall or something. And you hear a zipping noise and rob steps out and he's wearing a full tuxedo, and he's like, in sharp family styles.

0:11:12 - (Matt): Yeah.

0:11:12 - (Jory): So good.

0:11:13 - (Matt): Yep.

0:11:14 - (Noah): Yeah.

0:11:15 - (Matt): That image worked perfectly for what we were trying to get across. So writing the copy was super fun. And of course, Noah did an awesome.

0:11:22 - (D): Job with all the graphics and stuff.

0:11:23 - (Matt): That was a really fun time.

0:11:35 - (D): What sort of challenges did you guys.

0:11:38 - (Matt): Face building this icon set? And in hindsight, is there something you maybe would have done differently or approached differently?

0:11:47 - (Jory): The trickiest thing, I think, was that our icons are all designed on a very particular grid size. And so in hindsight, if we knew we were working on sharp icons in the future, we might have chosen a slightly different grid size. And who knows? Maybe in the future we will. But we had these current icons that fit their artboards and worked on their particular grid. And to make certain pieces of them, sharp would have basically taken elements of those icons and thrown them outside of the artboard.

0:12:20 - (Jory): So we had to come up with a few solutions for the icon to remain consistent between our different families. We had to cheat things a little bit in some cases, like, instead of what was once a pointer icon or something like that, like a cursor icon where in the classic style the tip is rounded, but it fills up our artboard. And in the case of the sharp, if we were to completely sharpen that point and remove the radius from it, suddenly that becomes super long.

0:12:50 - (Jory): You can't obviously see you're listening right now, but like that point, then it becomes unbalanced, so the angle becomes a bit too severe. So in some cases, we end up chopping the angle off so we have more of a blunt tipped edge. And in other cases, we actually ended up changing the entire angle of things. So we had to do that to be kind of backwards compatible with our existing designs. Moving forward, if we were to build a new family from scratch, and we knew that we wanted both a sharp and a rounded variant of it, we would probably make some different choices as far as artboard size, frame size, or grid or certain choices we might make differently, knowing what we know now.

0:13:33 - (Jory): And the same was true when we did the thin style, because something that worked well at the solid weight might feel a little wonky at the thin. And that's because we were being additive in our design process versus knowing where we were, knowing all of our constraints from the get go. Another kind of tricky thing with the sharp icon has nothing to do with the icons themselves, but more with how we display them on our website and how we have these icon previews that will pop up when you click on when you're searching for an icon. And we had to figure out how we could showcase all of our different icons within these one little preview where initially we've introduced this concept of a family, whereas before it was really just different styles.

0:14:18 - (Jory): So you could maybe have four toggles and toggle between the solid, the regular light and the thin, whereas now we have the Duotone family and we have the Sharp family. So we want those to be super accessible and easy for folks to find and to play around with. And so we had to update our icon search to include references to sharp and ways to toggle between sharp and classic and all that. That was another tricky complication. I think we solved it elegantly by adding a dropdown for only the families, but letting the styles themselves remain as little togglable buttons.

0:14:54 - (Jory): And then we have at the top of our icon search there you can swap between different families pretty easily as well.

0:15:00 - (Matt): Yeah, that's a great tool.

0:15:02 - (Jory): Yeah.

0:15:03 - (Matt): So, yeah, it's interesting what seem like little tools, little visual things that help you navigate and find what you're looking for are so involved. As a non tech, non design person myself, you see how much goes into these projects and how it can take up several splits worth of work to get it right.

0:15:22 - (Jory): Find the right amazing, copy the code, download them.

0:15:26 - (Matt): Yep.

0:15:26 - (Jory): And it gets more complicated. The more styles we add, the more icons we add. When we were dealing with 200 plus icons in fauna. Awesome. Four in one style. That's a different picture than our one little search.

0:15:40 - (Matt): Yeah.

0:15:40 - (Jory): What do we currently have? Over 30,000 icons? 1 billion icons. I mean, I did do the math at one point because we now have the ability to add little modifiers to every single icon.

0:15:55 - (Matt): So there's indeed we do.

0:15:57 - (Jory): It's a lot.

0:15:58 - (Matt): It's a lot.

0:16:22 - (D): So we have talked a bit in the past about your involvement with sharp and when you came on board, Jori kind of said, okay, here you go, here's sharp. Can you get it across the finish line? Maybe you can tell us a little bit about the background of when you started chatting with Jory. And I know that you guys connected over Figma and you made some recommendations and things. How does that all fit together?

0:16:54 - (Noah): Yeah, I'd known Jory a little bit online as both being icon presences. I think we had originally met both through designing stuff for Cotton Bureau back in the day actually was how we first got connected. I was working at my previous job and I had been working on a sharp set of icons for myself, something that I hadn't seen done super well in the past. I got the itch to design an open source set of icons for myself, and so I decided to set some constraints for it of things that I thought were interesting, and I thought I hadn't really seen small, sharp icons done very well. So I thought I would take a crack at it and worked out really well. It was received really well, and it was around that time that I was also starting out as a community advocate for Figma, which is a volunteer position, but they oftentimes either focus on a subject area or perhaps a particular locale.

0:17:52 - (Noah): So there's maybe an advocate in Lisbon who will organize community figma events, and they get support from the company for different things and stuff like that. So I had a group focused on iconography, and I was looking for for speakers to guest on certain events and talk about different things. And so I reached out to Jory, because not long before that, I had given him some advice on how icons in Figma could work, and so we'd reconnected that way.

0:18:22 - (Noah): We did a whole event together, piggybacking off of what we had talked about before. He presented on why faun awesome was switching to Figma and all the benefits of it and everything like that, and the method of how we handle that whole system and some of the things that we talked about in our config talk, but at a much earlier stage, broke that ground of how would we organize and handle an entire new family? And that was something that we had talked about at that point, too.

0:18:54 - (Noah): And I did a little test with Jory at the time. He sent me over a fake. My file was like, what would you do if you were going to sharpen these things? What are some best practices? What are some advice? And it was actually at that point that the idea of doing a small contract project for sharp came up and the timings didn't work out because I was busy with Figma stuff and my normal job and everything else I passed on at the time. I don't really have time. I don't know.

0:19:22 - (Noah): It wasn't until a few months later, probably, that kind of looped back around as an option, because sharp hadn't really moved much yet past that point, just because it's such a monumental project, and there were a lot of rule decisions that had to be made. And so it had stalled out a little bit. We were able to reconnect and get that off the ground, and a lot of things had opened up in terms of time for me. So I was able to take it on and discover a little bit more of what a great opportunity that would be to expand it into a full time thing. But yeah, it was a really interesting confluence of events of me having worked on a sharp thing in my spare time and figuring out a lot of those quirks, getting them under my belt, and then also having this figma thing and reconnecting with jewelry about switching everything to Figma and all this kind of perfect storm of opportunities coming together.

0:20:13 - (D): So that project really was the meat and potatoes of what you worked on initially when you first came on, you're cranking those out.

0:20:22 - (Noah): It was the first year of work, maybe a little bit less than that, but yeah, I was almost fully working on sharp. Wow.

0:20:32 - (D): What did you learn from.

0:20:36 - (Noah): Giving a.

0:20:36 - (D): Crack at your own set of icons that were in a sharp flavor and a sharp look and feel? What were you able to bring to the font awesome project that you had learned? Maybe through trial and error or figuring out best practices and stuff. What did you bring with you?

0:20:53 - (Noah): One of the biggest things is actually some differences in visual density when you've got rounded corners versus sharp corners. And to make a rounded version of a star and a sharp version of a star feel like they have the same amount of visual weight if they were next to each other, and how to deal with some of that when you have to extend the point points of the sharp star, you know farther than you might to get them to feel a little bit different because of the different way the corners are handled.

0:21:24 - (Noah): And that was really tough because a lot of times when you're running into the bounding areas of an icon, you can't go beyond that. A lot of times you can't extend things to sharp points. And so learning when some things can be sharpened and look really nice, but when to chisel things off or bevel things off, make them feel consistent, dancing that line between actual sharp, but more suggestions of sharp that will actually work in the icon constraints that you have.

0:21:51 - (Noah): And also just like changing things from largely circular forms into square forms and how that can mess with proportions between elements and that can be a tough nut to crack. So having done a lot of that already, I figured out how to mitigate some of that coming into font awesome a little bit in terms of some of the base shapes and how they relate to each other that I could then use as reusable elements through a lot of the other stuff that helped save some time.

0:22:26 - (D): Yeah, you know, it can be challenging to talk about this stuff when we're talking about a visual medium and we're having a conversation about it.

0:22:33 - (Noah): Yeah, maybe we can provide a handout.

0:22:38 - (D): There you go.

0:22:39 - (Noah): Yeah, yeah.

0:22:39 - (D): Handout for people to follow along as we're talking about it. Talking about constraints, when you and Jory started working together and you had learned a lot about working on your own set, and again, maybe this doesn't translate verbally or whatever, but how do you come to a consensus on what constraints ought to look like for the project? Can you talk a little bit about that process and how you guys came to an agreement on what would be the constraints for the set?

0:23:11 - (Noah): Yeah. Thankfully, with working on sharp, a lot of constraints were already handled in that they had to be very closely related to fawn. Awesome. Classic. And so it was like, okay, the icons will all have to be the same size as their classic counterparts. We're not going to switch up the metaphors or make this folder look like it's from a different angle or something like that. It wasn't as much like creating something brand new as translating it into a different dialect or something. Maybe.

0:23:42 - (Noah): Would it be an apt analogy where it's these two things need to look like they belong together, but there's enough of a distinction. So a lot of that came down to lots and lots and lots of testing where we made a sample set. I think it was maybe some stuff from our date and time category that we started with. So it was a lot of watches and clocks and calendars and some things that use a lot of our core shapes. So a lot of, like, circles and squares and basic rectangle, basic stuff, and then duplicating it and trying out multiple versions of the same thing and seeing like, what feels the best or what, and trying not to paint ourselves into a corner, I guess, of whatever the stylistic change is, wouldn't work.

0:24:25 - (Noah): There'd be too many edge cases and wouldn't work for everything. So it's a lot of taking all those icons, seeing maybe this corner, what would this corner treatment feel like? How sharp do we want to get with some of these corners? How are we going to handle really curvy stuff? Like, I know we've talked about, if we had a circle, are we going to try to give it faceted edges? How far do we want to push this? Is it going to be unusable or super ugly?

0:24:52 - (Noah): Yeah. Yeah. And so finding that balance, seeing what the extremes are and trying to find a middle way in between, that's going to work. So, yeah, it was a lot of testing and a lot of discussion and just like throwing stuff at the wall and seeing what worked.

0:25:05 - (D): Yeah, that makes sense.

0:25:07 - (Matt): So if we were to talk design.

0:25:11 - (D): And ui, and this is very subjective to what somebody's building and their preferences and things, but do you have any thoughts on where would somebody want to use a sharp icon set? What kind of site or in what kind of situation or ui might a sharp icon set look good?

0:25:32 - (Noah): Mm hmm. I know something we've talked about before, both here on the podcast and on the blog and other areas too, is a lot of times icons are. They often should be, I should say, very closely related to typographic choices. Cause they're often paired together both in function and a lot of times in proximity in EOS two. A lot of times you'll see them together in the navigation and they're like right up next to each other.

0:26:03 - (Noah): Or a lot of times in tab bars on apps, you'll have icons that have text labels. And so they need to oftentimes work very closely together and either are doing the same job or very similar jobs. So a lot of times if you're working on something that has a very stark and sharpened sort of typeface, something that has squared off terminals, or it's very geometric and angular with not a lot of softness to it, sharp icons can work very well in concert with that. And that kind of lends it a vibe, stability.

0:26:37 - (Noah): A lot of times, something that doesn't have some of the more softness or more playful aspects of some of the rounded icons or some. Yeah, as you mentioned, that's very subjective. I've had clients in the past call any icon that had any sense of roundness to. Oh, this is childish. They had a fair point that that vibe wasn't necessarily good for their product. But I've seen a lot of sharp icons used to good effect for like museum wayfinding or art galleries. I've seen that. I've seen some very classy ones used for wedding invitations.

0:27:10 - (Noah): Anything where you maybe want to add a little bit more stark geometry or elegance or the feeling of something that isn't going to roll over on its rounded corners. Yeah, right. It works well. Yeah, yeah.

0:27:24 - (D): It reminds me of when we were working together on some of the marketing stuff. One of the themes that we came across was the idea of dressing sharp. So you've got a bow tie like tuxedo, so you're trying to add a little bit of respectability, levity or professionalism or something like that to the feel of it. So it seems like that icon set maybe would lend itself towards, I don't know, fintech type stuff as well, maybe.

0:27:49 - (Noah): Uh huh. Yep, yep.

0:27:51 - (D): So sometimes I can feel a little bit confused about the difference between an icon family and a style and where the line is there, because clearly within fauna awesome classic, we've got lots of different weights, we've got fawn awesome light all the way up to what is it solid and everything in between. So what's the difference between the fawn awesome families and the styles, first of all?

0:28:16 - (Noah): Yeah, absolutely. Again, it's very closely linked to the way the typefaces are handled and a lot of the different jobs that typefaces have to do, whether they're being used for headlines or body copy or it's something that's going to be more of a display typeface that's only going to be really used as like a big, punchy one or two words thing. So the icon weights are the styles use those interchangeably because they're similar to the way that fonts handle. Weights can be used for a lot of those different things, too. So we knock families into, and it's a little bit tough because font awesome.

0:28:53 - (Noah): The two font awesome families, classic and sharp, are very closely related to each other stylistically, and they're essentially using the same base, but they both have two different approaches, which, you know, one being softer and one being sharper. So those are the way that the families are broken down, but then within each of those are different visual densities, they perform different functions.

0:29:18 - (Noah): For example, solid and duotone are going to work really well. If you need an icon at a really small size, just because it's very bold, it has very thick cutouts and separations between elements. And so if you make it small, it'll still stay pretty legible. Whereas if you wanted to have some sort of a design that feels much more open and light and airy and a lot more white space, and you want to have icons that are a little bit bigger but aren't going to really have people zero in on them right away or draw a ton of attention, then you might want to scale that back to light or thin or something that is going to fit in with that feeling of being a lot more open, but also not make a huge visual punch. If that isn't what you're going for, that also is not going to work really well at a small size because the lines are so thin. So it's a balance between what impact does this need to have versus legibility, and that goes along with the typefaces that you're using where you might have a really big bold headline, or if you have copy that is small but you want it to be legible, you might also make that be a little bit thicker and a little bit more prominent, whereas the bigger as the type gets, you can make things bunch more closely together or use thinner line weights without sacrificing legibility. So it comes down to some of those factors.

0:30:38 - (D): Again, super subjective.

0:30:41 - (Noah): Yes.

0:30:41 - (D): I mean, two point, there are some things you just should not pair together, but yeah. Do you have favorites yourself? Like good combinations of a typeface and style of icon that you like to see together?

0:30:56 - (Noah): I actually really like, and maybe this is a sneak peek for some things coming down the pipe, but I really like taking certain interesting letter forms and basing icons off of those. So maybe this is more of a small batch secret thing that we can use for later. But there is a class of typeface, either grotesque or neo grotesque typefaces that I really like because they're usually a little bit chunky, a little bit more squat and extended, but they're oftentimes based on a mathematical shape called the super ellipse, or more colloquially known as a squircle.

0:31:38 - (Noah): If you're, if anyone's familiar with that, or it's basically the shape of any kind of app icon on your phone if you're looking at your home screen, it's like the way that the corners are rounded. It's not a perfectly rounded rectangle. There's a little bit of weird math stuff going on in there. And so there we do have a set that will be coming that based entirely on that mathematical shape taken directly from a typeface that I really like. And so that basic geometry, that foundational stuff, it really honest, like almost subliminal level, it like helps tie some of the icons of the type together. And it works with a slightly number of typefaces that kind of followed that aesthetic.

0:32:18 - (Noah): That's one that's really been really scratching an edge for me recently.

0:32:23 - (D): Nice. We've had chats about this before. It's come up where good design basically should in a sense, like, go unnoticed. When you see it, there isn't anything that should necessarily really stand out. You're not like trying to make a statement or whatever. Someone who is skilled in pairing these kinds of things together, it should just work. When you look at it visually, your eye should follow something in a certain direction. Like in Ui, somebody's going to know what comes next, what they need to do.

0:32:51 - (D): When it comes to the user, unless you're a creative or designer, it may just totally go over your head.

0:33:07 - (Matt): Ow, ow, ow, ow, ow, ow, ow, ow, ow, ow, ow, ow, ow, ow, ow, ow, ow, ow, ow, ow, ow.

People on this episode