Under the Radar

00:00:00 ◼   ► Welcome to Under the Radar, a show about independent iOS app development. I'm Marco Arment.

00:00:05 ◼   ► And I'm David Smith. Under the Radar is never longer than 30 minutes, so let's get started.

00:00:09 ◼   ► So today I wanted to talk about fonts. It's something that I've been spending a lot of time thinking about recently with WatchSmith,

00:00:16 ◼   ► and it's a topic that I think is just interesting. That I think a font is in many ways the strongest sort of side of design

00:00:26 ◼   ► that a lot of developers like Marco and I deal with where I'm not an artist at all.

00:00:35 ◼   ► I'm just sort of drawing pretty pictures or making things pretty. I can lay out a UI and do the appropriate spacing and alignment and those kinds of things.

00:00:44 ◼   ► But the thing in my apps that is usually the most visually interesting is probably going to be the typography that I choose and use inside of it.

00:00:54 ◼   ► And honestly, for most of our apps, I feel like 80 or 90 percent of the UI is text.

00:01:00 ◼   ► And so if that's the case, the fonts and the type choices that you make for that is hugely impactful on the user's experience and the overall design and aesthetic,

00:01:12 ◼   ► and in any way the personality of your application. Those font choices you make are so big, and I feel like there's so many different approaches that you can take with font,

00:01:22 ◼   ► where out of the box you can just use the basic system font. And there's a lot of reasons and benefits of going down that road,

00:01:30 ◼   ► and you get all kinds of accessibility and dynamic text, and there's lots of things and heavy work that Apple has been doing in that range to make San Francisco,

00:01:40 ◼   ► their base system font, really good in so many circumstances. But if you go down that road, you get all these benefits,

00:01:46 ◼   ► but you also lose a lot of things in terms of personality and differentiation and making your app and your appearance feel unique and different and special.

00:01:58 ◼   ► And so I think it's just an interesting thing to talk about, because I went back and forth so many times on what fonts to use in WatchSmith.

00:02:05 ◼   ► In the end I sort of settled on the font called Decimal, which is by Jonathan Hoffler, and it's this sort of very watch-inspired font that's very...

00:02:16 ◼   ► It's supposed to evoke and be kind of derived from the kind of fonts that you would see on a traditional mechanical watch.

00:02:22 ◼   ► And there's actually, as a side note, there's a really... if you're looking for something to watch, the Netflix documentary Abstract has a whole episode about the design of this font,

00:02:30 ◼   ► which I just thought was really interesting. Especially if you're new to fonts, there's a really good discussion and explanation of a lot of the terms you'll hear when people are talking about fonts.

00:02:40 ◼   ► The simple things of serif and sans-serif, but even things like leading and kerning and... I think it's leading.

00:02:47 ◼   ► Yeah, it's fine.

00:02:48 ◼   ► Descenders and ascenders, and all the terms that you would see, these things that you pull out of UI font and you can ask it for all kinds of information about itself, gives some really good explanations.

00:02:59 ◼   ► So I'll link to that in the show notes. But anyway, that's the font that I chose, and I really like it. I think it works really well.

00:03:04 ◼   ► I think it works super well on the watch, and I think because it works super well on the watch, that's kind of the personality that I wanted to then bring over onto the phone.

00:03:14 ◼   ► But that's kind of the direction I went, and it's like, I like it, but I also had some feedback that people don't like it, and they wish that I just used the system font.

00:03:24 ◼   ► And that's complicated. I don't really know how to feel about that.

00:03:28 ◼   ► Yeah, fonts are tricky because when you use a custom font for an app's entire UI, basically when you replace the system font with your own custom font, it is a personality that you're adding.

00:03:42 ◼   ► The system font basically has no personality, ideally at least. Sometimes there's a couple of, in history there have been a couple of slight personalities imparted here and there.

00:03:51 ◼   ► I think the original Macintosh Chicago font had a certain personality that had more personality than system fonts tend to have.

00:04:01 ◼   ► But for the most part, system fonts tend to be as neutral and universal and therefore by definition bland as possible because they are used everywhere.

00:04:12 ◼   ► People shouldn't ever get sick of them, they shouldn't really ever notice the personality of the system font.

00:04:17 ◼   ► It should just kind of be a nice basic default that everything can use and that nobody will ever have a thought about.

00:04:25 ◼   ► And so the system font will never impart personality into your app. Custom fonts, simply by not using the system font, even if you pick another fairly bland one, you are making a personality choice with your app for sure.

00:04:40 ◼   ► And so some people are going to love that and some people are going to hate that.

00:04:43 ◼   ► And then beyond that, if you pick a font that has a strong personality, something where you wouldn't necessarily use this for any type of document or any type of text or any type of...

00:04:56 ◼   ► Something that has a point of view, a personality, like your Watchmyth font does, that's going to be even more polarizing and it's even harder.

00:05:06 ◼   ► You have to be even more careful with how and when you use something like that in an app because people expect the UI of an app to behave in standard ways and to look standard ways.

00:05:18 ◼   ► And if you don't match the standard, you have to have really good reason not to and it can backfire for some people.

00:05:24 ◼   ► And that's why you don't usually see a lot of apps using their own fonts. If they do use their own fonts, they don't always use them well.

00:05:32 ◼   ► And as a developer, you have to really be careful. It is a great way to add personality, but you might not always want personality in certain contexts and you have to make sure you're adding the right personality for the app.

00:05:45 ◼   ► So for instance, whenever I go to my dentist, they have these computer screens that run their dental management system, whatever it is.

00:05:53 ◼   ► They're always in the side of my field of view so I can see what's on the screen. And it's some horrible Windows app that's clearly custom made for the industry.

00:06:02 ◼   ► And there are certain dialogues that use Comic Sans. And I never feel good seeing Comic Sans on the system that is responsible for my dental health.

00:06:14 ◼   ► That's not what you want. There's nothing comedic about the situation.

00:06:23 ◼   ► There are ways that you can mismatch a font to the application. And so you have to be careful if you're going to choose this route to have a custom font.

00:06:31 ◼   ► And I think there's a good argument to be had not to have custom fonts these days. And I'll get to that in a little bit.

00:06:37 ◼   ► But if you're going to go down the route of having a custom font, you have to really make sure that you're choosing one where the personality is appropriate for the context in which the app is running.

00:06:46 ◼   ► Like what kind of app it is, what kind of people use it, what kind of mood or situation they might be in when they are using it.

00:06:54 ◼   ► And with my app, with Overcast, and I have lots of experience with custom fonts like back in Instapaper days.

00:07:01 ◼   ► Instapaper was using a whole bunch of custom fonts and you could pick them for all your different reading modes.

00:07:08 ◼   ► And it made a lot of sense for an app like that to have custom fonts because it's an app about reading and about good typography.

00:07:15 ◼   ► So giving people options of really good fonts is clearly something you should probably do.

00:07:21 ◼   ► After that I had the magazine. And the magazine was all set with Avenir Next.

00:07:26 ◼   ► Which at the time, the magazine launched in the iOS 6 era. And Avenir Next was a fairly new font to the system.

00:07:33 ◼   ► It was available in the system but almost nothing was really using it yet.

00:07:36 ◼   ► And it really had a really nice, I still love the Avenir Next family.

00:07:40 ◼   ► It was a great font for UI but it had a little bit of personality.

00:07:45 ◼   ► It was different from what you usually see, which at the time you'd usually be seeing Helvetica.

00:07:50 ◼   ► It was great to have this slightly different, fresh new kind of look.

00:07:56 ◼   ► And I set the whole app in Avenir Next and I don't remember exactly that.

00:08:01 ◼   ► I don't think I offered any kind of customization of the font in the magazine.

00:08:04 ◼   ► And I used that to give a publication a personality.

00:08:10 ◼   ► Lots of publications use custom fonts for their style.

00:08:14 ◼   ► In fact, The Guardian, the UK publication The Guardian, had an entire font custom made for them.

00:08:20 ◼   ► And it's really good. You can actually go buy it. I forget what it's called.

00:08:24 ◼   ► But it's from one of the same foundries as one of the fonts I bought for Instapaper.

00:08:30 ◼   ► And having that personality as a publication where your product is your words,

00:08:38 ◼   ► that can really impart a strong brand identity and really can help style the attitude that you want to show the world,

00:08:46 ◼   ► depending on what kind of font you choose.

00:08:48 ◼   ► So there's lots of cases where that makes a lot of sense.

00:08:51 ◼   ► With Overcast, I initially didn't have an option.

00:08:55 ◼   ► I just used this one custom font that I had bought called Concourse.

00:08:59 ◼   ► I really liked it because it had a personality, possibly a stronger personality.

00:09:07 ◼   ► I think a stronger personality than most neutral style apps should use.

00:09:12 ◼   ► But what I liked about it was that I wasn't, I'm not a neutral style person,

00:09:17 ◼   ► and I was injecting a whole bunch of personality into the app in other ways.

00:09:20 ◼   ► We actually did an episode about this a long time ago.

00:09:22 ◼   ► I was injecting personality into the microcopy, little text things here and there,

00:09:27 ◼   ► showing that I was just a person and not a big bland corporation making this indie podcast app.

00:09:34 ◼   ► That all kind of played into this image that I was working with.

00:09:37 ◼   ► I just want to do this freeform indie thing that's just one person and all that stuff.

00:09:45 ◼   ► So the font I chose was slightly informal, slightly playful, not to the degree of Comic Sans,

00:09:51 ◼   ► but a little playful.

00:09:53 ◼   ► It also had other properties that I really liked.

00:09:57 ◼   ► For instance, back then, keep in mind this was the days of the iPhone 5 size screen,

00:10:01 ◼   ► I wanted to be able to fit a lot of words per line.

00:10:07 ◼   ► The font I chose is actually pretty narrow.

00:10:10 ◼   ► It's a much narrower font than the system font.

00:10:13 ◼   ► So you can usually fit one or two extra words on a line before you have to wrap the line.

00:10:18 ◼   ► So again, this was a practical consideration of this font is a good choice,

00:10:23 ◼   ► not only do I like the way it looks, but also it has this wonderful narrowness

00:10:27 ◼   ► without looking like a condensed font.

00:10:30 ◼   ► So it just works better in the context of the map.

00:10:32 ◼   ► You can fit more words, etc.

00:10:35 ◼   ► And it also had really good licensing terms.

00:10:37 ◼   ► It was really inexpensive and I didn't have to pay per copy,

00:10:40 ◼   ► I didn't have to renew it every year.

00:10:42 ◼   ► So there was again a practical business side as well.

00:10:44 ◼   ► Fonts are licensed under all sorts of terms.

00:10:47 ◼   ► Some of them you have to pay per year and I don't usually love that.

00:10:51 ◼   ► Some of them you have to pay per download or for certain numbers of downloads

00:10:55 ◼   ► and I'll never do that.

00:10:57 ◼   ► So there's all sorts of considerations with that.

00:11:00 ◼   ► Ultimately though, no matter what I would pick,

00:11:04 ◼   ► there's always people, with the exception of the magazine,

00:11:07 ◼   ► but I think that just because I didn't run long enough,

00:11:09 ◼   ► with Instapaper people were always asking for more fonts. Always.

00:11:13 ◼   ► And with Overcast, pretty much from the beginning,

00:11:16 ◼   ► I would have lots of requests for just giving a system font option.

00:11:21 ◼   ► And the world has changed a lot in the last ten years

00:11:25 ◼   ► since we've been making apps or whatever it's been, twelve years, oh god.

00:11:28 ◼   ► But one thing that has changed is that the system font has gotten a lot better

00:11:33 ◼   ► and a lot more capable.

00:11:35 ◼   ► And things have gotten more complicated with things like dynamic text,

00:11:38 ◼   ► with what are the Swift icons called, Longest Last Year?

00:11:42 ◼   ► SF Symbols.

00:11:43 ◼   ► Yes, SF Symbols, yeah.

00:11:45 ◼   ► Not Swift, I guess San Francisco.

00:11:48 ◼   ► But anyway, so things have gotten more complicated in that world

00:11:53 ◼   ► and there are certain downsides of using custom fonts

00:11:56 ◼   ► where it gets harder if you're customizing it,

00:12:00 ◼   ► or certain things that you just will not be able to address.

00:12:03 ◼   ► For instance, in Overcast, the font I use does not have

00:12:08 ◼   ► a lot of Eastern European characters in it.

00:12:11 ◼   ► So it has no Cyrillic and there's a certain, I think there's,

00:12:15 ◼   ► there's certain characters that are used in certain other Eastern European languages

00:12:19 ◼   ► that are not part of one of the extended ASCII or something sets.

00:12:25 ◼   ► There's some kind of various characters that's really,

00:12:27 ◼   ► in parts of the world or certain languages,

00:12:30 ◼   ► my font doesn't cover all the characters

00:12:32 ◼   ► and so then the system falls back to itself for those characters

00:12:35 ◼   ► and then it looks all weird because it's interspersing San Francisco characters

00:12:38 ◼   ► into the concourse fonts.

00:12:40 ◼   ► There's all sorts of practicality issues like that with using custom fonts

00:12:44 ◼   ► that sometimes it's the wrong choice.

00:12:47 ◼   ► Yeah, though, it's like, while you've been talking,

00:12:51 ◼   ► I've been sitting here in Overcast, flipping back and forth,

00:12:53 ◼   ► because you have a setting that you can switch between concourse and San Francisco,

00:12:58 ◼   ► and when I switch it to the system font, it doesn't look like Overcast anymore.

00:13:04 ◼   ► Yeah, it loses all personality.

00:13:06 ◼   ► It just becomes, well, this could be any app.

00:13:12 ◼   ► There's no, I think personality is the right word for that,

00:13:15 ◼   ► where it's like, do you want, I guess it's the do you want to have a personality

00:13:20 ◼   ► that people remember or that is distinctive,

00:13:23 ◼   ► and that when they open the app, it's like, oh, I remember, this is this app.

00:13:28 ◼   ► Or do you want it to be something where it is no personality.

00:13:32 ◼   ► It's like you're trying to be someone who's memorable

00:13:35 ◼   ► or someone who you forget the moment you walk away from them.

00:13:41 ◼   ► You're at a cocktail party and you meet somebody,

00:13:43 ◼   ► and then there's the kind of person who might leave an impression,

00:13:46 ◼   ► and there's the kind of person who you just forget you were talking to

00:13:48 ◼   ► as soon as you walk away.

00:13:50 ◼   ► It's like, which kind of app are you trying to make?

00:13:52 ◼   ► If you're trying to make an impression, if you're trying to be distinctive,

00:13:56 ◼   ► then there's a certain amount of flamboyance that you need to have in your app design

00:14:01 ◼   ► that is going to actually leave an impression,

00:14:03 ◼   ► because otherwise, it could be anything.

00:14:10 ◼   ► The thing that's tricky I find with this is it isn't that it looks bad.

00:14:14 ◼   ► If I put Overcast into San Francisco, it doesn't look bad.

00:14:17 ◼   ► It looks great. It looks totally fine.

00:14:23 ◼   ► It is the vanilla ice cream that you would expect.

00:14:28 ◼   ► Vanilla ice cream, if you were trying to find consensus among--

00:14:34 ◼   ► You had 20 people, and you needed to all agree on one ice cream flavor

00:14:39 ◼   ► that you were going to buy and that everyone would enjoy the most.

00:14:43 ◼   ► It's almost certainly going to be vanilla.

00:14:45 ◼   ► But vanilla is probably everyone's second choice.

00:14:50 ◼   ► Everyone else is going to have a different first choice from what they would prefer,

00:14:53 ◼   ► but everyone's second choice is probably vanilla,

00:14:55 ◼   ► because that's where you get that consensus from.

00:14:57 ◼   ► It's because it's inoffensive, because it's fine.

00:15:00 ◼   ► It's not something that leaves an impression. It's just pleasant.

00:15:04 ◼   ► It's so tricky.

00:15:06 ◼   ► It's coming from the top of my mind now, because I've had it just like you did.

00:15:09 ◼   ► A couple of people would be like, "I love WatchSmith,

00:15:12 ◼   ► but I wish it didn't have this custom font.

00:15:16 ◼   ► I wish you'd just give me the option to flip it over to San Francisco,"

00:15:20 ◼   ► which I kind of get that they want to use the app in a way that they prefer.

00:15:25 ◼   ► And anytime you make a polarizing choice,

00:15:28 ◼   ► they're obviously being polarized the other way.

00:15:30 ◼   ► I'm sure there's people who love the font and like it,

00:15:33 ◼   ► but I'm not going to hear about them nearly as much as the people who like the app

00:15:36 ◼   ► but don't like the font.

00:15:38 ◼   ► But in some ways what they're saying is it's a weird interaction,

00:15:43 ◼   ► because it's like, "I like you, and I like being around you,

00:15:47 ◼   ► and I want to be with you, but I don't like your face."

00:15:50 ◼   ► It's a little bit offensive to me, and I wish it was more generic.

00:15:54 ◼   ► Maybe you could just wear a mask or something,

00:15:58 ◼   ► because it isn't hard for me to change the font,

00:16:01 ◼   ► especially the way that I built all my type system.

00:16:04 ◼   ► It's just a setting that I could easily switch over.

00:16:08 ◼   ► And now all of a sudden it's San Francisco,

00:16:11 ◼   ► and now it's San Francisco rounded.

00:16:12 ◼   ► It's not hard, but it's kind of offensive in a way.

00:16:16 ◼   ► It's like, "I don't like your personality,"

00:16:19 ◼   ► and it's hard to not take that in a personal way

00:16:21 ◼   ► when someone says, "I like your app, but I wish it had a different font."

00:16:25 ◼   ► It's easy for me to fix, and so part of me wants to consider it,

00:16:28 ◼   ► but there's also part of me that's like, "No, that's the personality.

00:16:31 ◼   ► That's how I chose to make this app, and if it doesn't work for you, I'm sorry."

00:16:37 ◼   ► But also, it's kind of mean.

00:16:41 ◼   ► If that's the thing that's preventing you from using the app,

00:16:47 ◼   ► you're either really stuck on something,

00:16:51 ◼   ► and that's just the way your brain works,

00:16:53 ◼   ► and it's not going to work out,

00:16:55 ◼   ► or you're just kind of being nitpicky in a way that is actually not constructive.

00:17:01 ◼   ► Yeah, and this is the risk of any kind of personality that you add to your app.

00:17:07 ◼   ► Anything that you do that deviates from the boring blandness of the defaults,

00:17:12 ◼   ► whether it's design or the way you write your language, your text in there,

00:17:17 ◼   ► or your color choices, or your font choices.

00:17:21 ◼   ► All of those things are ways that you can deviate from "standard UI"

00:17:27 ◼   ► and add personality, but every time you add personality,

00:17:30 ◼   ► you are running the risk of it not landing right with some people.

00:17:36 ◼   ► The more personality or the stronger personality that you add in any of these choices,

00:17:41 ◼   ► the more people it will turn off.

00:17:43 ◼   ► But if you do it well, also, the more people who will love it for that.

00:17:47 ◼   ► And so it's tricky. Over the years I have thought with Overcast,

00:17:51 ◼   ► "Should I just go to the system font for everything?"

00:17:54 ◼   ► It would make certain things easier.

00:17:57 ◼   ► There are features of the system font that my custom font doesn't have.

00:18:01 ◼   ► I love the way it raises the colon when you have a timestamp,

00:18:04 ◼   ► so you have hour, colon, minutes.

00:18:06 ◼   ► And if you have a colon between two numbers in San Francisco,

00:18:10 ◼   ► it changes the colon from being aligned to the bottom of the line

00:18:13 ◼   ► to being aligned to the middle of the line.

00:18:15 ◼   ► So it looks way nicer.

00:18:17 ◼   ► There are features like that that San Francisco gets

00:18:19 ◼   ► that my custom font just doesn't get or doesn't have

00:18:22 ◼   ► and probably won't have or can't get because it's not worth

00:18:26 ◼   ► the author of the font making all these custom features

00:18:28 ◼   ► for this one thing that is mostly not used in apps.

00:18:31 ◼   ► So there are lots of advantages to me using the system font.

00:18:35 ◼   ► Also, it would just be easier when I'm designing the app

00:18:39 ◼   ► to only have one font to test.

00:18:41 ◼   ► I do, like whenever I have to make any kind of design change to the app,

00:18:45 ◼   ► making a new UI or resizing things or changing the text in something,

00:18:49 ◼   ► I have to test it in both fonts to make sure it fits and looks right

00:18:53 ◼   ► and flows right and all that other stuff.

00:18:56 ◼   ► And it would be nice to not have to do all that.

00:18:59 ◼   ► There's also issues with dynamic text sizing that I'll get to in a moment.

00:19:03 ◼   ► But first, we are brought to you this week by Linode.

00:19:07 ◼   ► Whether you're working on a personal project

00:19:09 ◼   ► or switching your enterprise's entire infrastructure

00:19:11 ◼   ► or serving a bunch of fonts off your site, who knows?

00:19:13 ◼   ► Linode has the pricing, support, and scale that you need

00:19:15 ◼   ► to take your project to the next level.

00:19:17 ◼   ► They have 11 data centers worldwide so far,

00:19:20 ◼   ► including their newest one in Sydney, Australia,

00:19:22 ◼   ► and they regularly add more.

00:19:24 ◼   ► All of them feature their enterprise-grade hardware,

00:19:26 ◼   ► S3-compatible storage option, and Linode's next generation network.

00:19:29 ◼   ► So Linode delivers all the performance you expect

00:19:32 ◼   ► at a surprisingly good price.

00:19:35 ◼   ► I've been with Linode myself for about almost a decade now,

00:19:37 ◼   ► I think eight or nine years, something like that,

00:19:39 ◼   ► and they are wonderful. They host all my servers,

00:19:41 ◼   ► all the Overcast stuff, my blog stuff.

00:19:43 ◼   ► It is just a great web host,

00:19:46 ◼   ► and I've been with them for all this time

00:19:48 ◼   ► because they've been great the entire time.

00:19:50 ◼   ► They have great service, great support, and really good pricing.

00:19:53 ◼   ► You can get started today on Linode with a $20 credit,

00:19:56 ◼   ► and you'll get access to everything I just said,

00:19:58 ◼   ► the native SSD storage, 40-gigabit network,

00:20:01 ◼   ► fast CPUs, revamped cloud manager.

00:20:03 ◼   ► Of course, you get root access to your server.

00:20:05 ◼   ► You can install whatever applications you might need.

00:20:07 ◼   ► They have APIs to automate things.

00:20:09 ◼   ► All this starts at just $5 a month.

00:20:12 ◼   ► There's so much at Linode. You've got to check it out.

00:20:15 ◼   ► It's a great host.

00:20:16 ◼   ► So go to linode.com/radar

00:20:18 ◼   ► and use promo code "undertheradar2020"

00:20:21 ◼   ► when creating a new account,

00:20:22 ◼   ► and you'll get a $20 credit towards your next project.

00:20:24 ◼   ► Once again, that's linode.com/radar

00:20:27 ◼   ► and the promo code "undertheradar2020" for that $20 credit.

00:20:31 ◼   ► Our thanks to Linode for their support of this show

00:20:33 ◼   ► and all of Relay FM.

00:20:35 ◼   ► So another thing, you know,

00:20:36 ◼   ► when you have a custom font,

00:20:38 ◼   ► certain things become your problem

00:20:40 ◼   ► that the system would otherwise do for you.

00:20:42 ◼   ► Dynamic typesizing support,

00:20:44 ◼   ► which I'm telling you, you know,

00:20:46 ◼   ► do as I say, not as I do.

00:20:47 ◼   ► Overcast is not very good at dynamic type yet,

00:20:50 ◼   ► and that's mostly because I have just not done a good job

00:20:53 ◼   ► of migrating to, like, new auto-layout APIs over time.

00:20:57 ◼   ► Basically, you know, a lot of Overcast's main UI layout code

00:21:01 ◼   ► is still from 2014 when I first wrote it,

00:21:03 ◼   ► and so a lot of it predates dynamic type

00:21:05 ◼   ► and it's just harder to do things like

00:21:07 ◼   ► the self-sizing table view cells

00:21:09 ◼   ► I still have to adopt and everything.

00:21:10 ◼   ► So anyway, so my app is not great at this,

00:21:12 ◼   ► but if you do everything with, you know,

00:21:14 ◼   ► the current day standards

00:21:15 ◼   ► and you use the system fonts and everything,

00:21:17 ◼   ► stuff like dynamic text sizing,

00:21:19 ◼   ► it just becomes easier or automatic.

00:21:21 ◼   ► And so if you're gonna take on the burden

00:21:23 ◼   ► of having a custom font,

00:21:24 ◼   ► you're gonna have to do a lot of that stuff manually.

00:21:27 ◼   ► The way I do it in the app is

00:21:29 ◼   ► I actually have an appearance manager class,

00:21:32 ◼   ► and the way that, on the regular system font,

00:21:35 ◼   ► UI font kind of APIs,

00:21:37 ◼   ► there's calls like system font for style,

00:21:41 ◼   ► headline, body, title, stuff like that.

00:21:43 ◼   ► I replicate that call in my appearance manager,

00:21:46 ◼   ► and so I get to define there

00:21:48 ◼   ► what it means to be a headline font,

00:21:51 ◼   ► what it means to be a body font,

00:21:53 ◼   ► and I have methods like font for size, you know, caption one,

00:21:58 ◼   ► with fixed point size or with point size adjustment,

00:22:02 ◼   ► and those calls will either call the system API directly

00:22:07 ◼   ► or it'll use my own font

00:22:09 ◼   ► and use the font descriptor API

00:22:11 ◼   ► to basically modify point sizes.

00:22:13 ◼   ► Like, it'll see what the system would have served

00:22:15 ◼   ► and then inject my font instead at the same point size

00:22:18 ◼   ► or at the same point size, plus one or minus one,

00:22:21 ◼   ► something like that.

00:22:22 ◼   ► So you can do all this in a,

00:22:24 ◼   ► you can have like a customizable font architecture

00:22:26 ◼   ► in your app without much change to your code.

00:22:28 ◼   ► You basically need one,

00:22:29 ◼   ► some kind of like appearance manager or class like that,

00:22:31 ◼   ► where all your fonts that you reference in the app,

00:22:34 ◼   ► you pull through that,

00:22:35 ◼   ► and then that can decide whether to use the system API

00:22:38 ◼   ► or create your own custom font with those same attributes.

00:22:42 ◼   ► So it really isn't too hard to do this on the API side.

00:22:45 ◼   ► The main cost of it is like having multiple designs,

00:22:48 ◼   ► basically, and having to test multiple designs

00:22:50 ◼   ► and make them in the first place and make sure they look good.

00:22:53 ◼   ► -Yeah, and I think in general, that's good advice,

00:22:55 ◼   ► and I think increasingly,

00:22:56 ◼   ► you always do anything related to appearance

00:22:59 ◼   ► through some kind of intermediary,

00:23:01 ◼   ► 'cause it's exactly the same thing

00:23:03 ◼   ► when you're dealing now with like light mode and dark mode.

00:23:06 ◼   ► It's like, anytime you call a color,

00:23:08 ◼   ► you shouldn't be just like,

00:23:09 ◼   ► you shouldn't be saying like UI color dot white

00:23:11 ◼   ► or UI color dot black.

00:23:12 ◼   ► It should always be like appearance, you know,

00:23:15 ◼   ► appearance dot text color or whatever it is.

00:23:18 ◼   ► Like, even if to start with,

00:23:20 ◼   ► you're not supporting dark mode,

00:23:21 ◼   ► even if you're not to start,

00:23:22 ◼   ► like you're not actually,

00:23:23 ◼   ► if it's just a, initially,

00:23:25 ◼   ► it might just be a proxy to something else.

00:23:27 ◼   ► Giving yourself that flexibility will just,

00:23:29 ◼   ► it's just so helpful,

00:23:31 ◼   ► and it will help you, honestly,

00:23:33 ◼   ► the biggest thing too is it's like at first,

00:23:34 ◼   ► like initially you might think,

00:23:35 ◼   ► oh, like, but it's quicker to just do it this way.

00:23:37 ◼   ► It's like ultimately it's gonna be so much quicker

00:23:39 ◼   ► to actually like be able to iterate on your design

00:23:42 ◼   ► and tweak things and change things

00:23:44 ◼   ► if you start to centralize them, you know?

00:23:46 ◼   ► So if you want to be like, hmm, I wish this, you know,

00:23:48 ◼   ► I want to tweak this background color slightly

00:23:50 ◼   ► so that like rather than being white,

00:23:52 ◼   ► it's gonna be like a beige.

00:23:53 ◼   ► It's like, well, if you have like UI color dot white set

00:23:56 ◼   ► everywhere or like undefined in your application,

00:23:58 ◼   ► then it's just, who knows?

00:23:59 ◼   ► Like it's gonna be this giant pain

00:24:01 ◼   ► to go through and change.

00:24:02 ◼   ► So, you know, for fonts or for anything,

00:24:04 ◼   ► always like use an appearance manager

00:24:06 ◼   ► because otherwise you're gonna sort of go crazy.

00:24:08 ◼   ► And then I think it also does,

00:24:09 ◼   ► like has the benefit of if you do decide

00:24:11 ◼   ► you want to fall back to the system font,

00:24:13 ◼   ► or do you want to kind of like have this

00:24:15 ◼   ► more generic version of your application

00:24:17 ◼   ► that it is relatively easy to do,

00:24:18 ◼   ► that you're not necessarily like having to

00:24:20 ◼   ► go through and do this giant find and replace

00:24:23 ◼   ► or kind of complicated thing where

00:24:25 ◼   ► you kind of built it in from the start.

00:24:27 ◼   ► And so like definitely like something worth doing.

00:24:30 ◼   ► Just in general, like do that.

00:24:33 ◼   ► But there's something else that I was thinking about too

00:24:35 ◼   ► is if you are gonna go down the road of a custom font,

00:24:37 ◼   ► some things that you might want to consider

00:24:38 ◼   ► when you're looking for a font,

00:24:40 ◼   ► because I think like it's easy to just like,

00:24:43 ◼   ► you can just like go on the internet

00:24:44 ◼   ► and there's like thousands or hundreds of thousands of fonts.

00:24:48 ◼   ► And many of them now have like fairly

00:24:50 ◼   ► permissive licensing even, like there's lots of

00:24:52 ◼   ► kind of open source fonts that are available,

00:24:55 ◼   ► like things that you don't necessarily

00:24:56 ◼   ► even have to pay a licensing fee.

00:24:58 ◼   ► Like some of there, there are certainly some

00:24:59 ◼   ► that come from like type foundries that,

00:25:02 ◼   ► you know, have a licensing fee,

00:25:03 ◼   ► whether one time or yearly or per user.

00:25:05 ◼   ► There's even lots and lots of open source fonts.

00:25:08 ◼   ► - Yeah, I will say for a quick reference here,

00:25:10 ◼   ► a quick warning here.

00:25:11 ◼   ► The right to use a font on your computer

00:25:13 ◼   ► is usually not the same right as

00:25:15 ◼   ► the right to embed it in an app.

00:25:17 ◼   ► So make sure you're buying the right kind of license.

00:25:20 ◼   ► And embedding something in an app

00:25:22 ◼   ► is generally going to be more expensive

00:25:23 ◼   ► than whatever it would cost you to run on your computer.

00:25:26 ◼   ► - Yes, exactly.

00:25:27 ◼   ► It isn't like, oh, I bought this font

00:25:28 ◼   ► for like $50 from something.

00:25:31 ◼   ► It's like now I can like put it in my app

00:25:33 ◼   ► and use it everywhere.

00:25:34 ◼   ► Like no, that is going to be,

00:25:35 ◼   ► you probably have to do that

00:25:36 ◼   ► and then additionally license it,

00:25:38 ◼   ► free for use and just for the distribution rights.

00:25:42 ◼   ► But if you do pick a font,

00:25:43 ◼   ► like some of the things that I've run into

00:25:45 ◼   ► that you might definitely want to check into

00:25:46 ◼   ► is so what you were saying about extended character sets,

00:25:49 ◼   ► seeing if it's relevant for your application,

00:25:51 ◼   ► like how good is their coverage

00:25:53 ◼   ► into additional character sets

00:25:54 ◼   ► or is it just like they've done A through Z

00:25:57 ◼   ► and the numbers and a few punctuation characters

00:25:59 ◼   ► and like that's it.

00:26:00 ◼   ► Like in which it is entirely possible

00:26:02 ◼   ► if it's a font that like some designer created

00:26:04 ◼   ► for a very particular use

00:26:06 ◼   ► that may have been all they needed for their use

00:26:08 ◼   ► and then they're just like publishing this subsequently.

00:26:10 ◼   ► So like check into that.

00:26:12 ◼   ► Look at the number of weights they have for the font.

00:26:15 ◼   ► So it's in theory, oh, I just need like regular and bold

00:26:19 ◼   ► and it's like you can probably get away

00:26:21 ◼   ► with just regular and bold,

00:26:22 ◼   ► but often it's really nice and useful

00:26:24 ◼   ► from a design perspective

00:26:25 ◼   ► to have some kind of gradation in between there

00:26:28 ◼   ► to have a lighter,

00:26:30 ◼   ► so sort of a lighter weight

00:26:31 ◼   ► and to have kind of a medium weight.

00:26:33 ◼   ► Like it just gives you a lot more flexibility

00:26:35 ◼   ► and it's one of those things that often

00:26:37 ◼   ► if you start off with a font

00:26:38 ◼   ► that only has like two weights or one weight,

00:26:41 ◼   ► you're just kind of going to back yourself

00:26:43 ◼   ► into a corner with design

00:26:44 ◼   ► that you probably don't want.

00:26:46 ◼   ► Also check if the font has like small caps support.

00:26:50 ◼   ► Like not all fonts do

00:26:52 ◼   ► and like fake small caps often look kind of weird

00:26:56 ◼   ► and so if you're a little,

00:26:57 ◼   ► but I found increasingly there's so many places in an app

00:27:00 ◼   ► where like good small caps

00:27:02 ◼   ► can actually just really look really nice visually

00:27:04 ◼   ► and be really nice and legible.

00:27:07 ◼   ► So it's something that I think it's worth looking into

00:27:09 ◼   ► if your font that you're sort of playing with

00:27:11 ◼   ► actually includes that.

00:27:13 ◼   ► And then I think otherwise it's like sort of just,

00:27:17 ◼   ► is it a good font?

00:27:18 ◼   ► Is it thoughtfully designed

00:27:20 ◼   ► and is it sort of balanced

00:27:21 ◼   ► and has like given this the interesting things

00:27:23 ◼   ► of like the kerning,

00:27:24 ◼   ► which is how a font is,

00:27:26 ◼   ► arranges certain characters

00:27:28 ◼   ► and how sort of the pairings,

00:27:30 ◼   ► like at its simplest,

00:27:32 ◼   ► a font could just put the same amount of space

00:27:33 ◼   ► between every character.

00:27:35 ◼   ► But what a good font will do is have kerning,

00:27:37 ◼   ► what's called kerning tables,

00:27:38 ◼   ► where for different fonts

00:27:41 ◼   ► have different amounts of space between them,

00:27:42 ◼   ► because of the shape of them.

00:27:44 ◼   ► Like the way a D with a roundedness

00:27:46 ◼   ► might be stacked up next to an A

00:27:48 ◼   ► that's like falling away from it

00:27:50 ◼   ► is different potentially

00:27:52 ◼   ► than if you put like two Ms next to each other

00:27:54 ◼   ► or an R and an M where,

00:27:56 ◼   ► like if you put them together,

00:27:58 ◼   ► or an R and an N even worse,

00:27:59 ◼   ► where if you put them too close together,

00:28:01 ◼   ► now they look like an M.

00:28:02 ◼   ► So you have a thoughtfully designed font

00:28:05 ◼   ► will take this all into consideration

00:28:07 ◼   ► and you just kind of have to

00:28:08 ◼   ► play with the font a little bit

00:28:09 ◼   ► to get a sense of is this thoughtfully designed

00:28:11 ◼   ► and like actually intentionally done,

00:28:13 ◼   ► or is this the kind of thing where it's

00:28:15 ◼   ► someone's design project and it's a font

00:28:17 ◼   ► that's intended not necessarily for display in an app,

00:28:20 ◼   ► but it's something that's designed for design.

00:28:22 ◼   ► That like you go into Photoshop

00:28:23 ◼   ► and you're going to be individually aligning

00:28:25 ◼   ► individual characters or things,

00:28:26 ◼   ► like where it's a different kind of design

00:28:29 ◼   ► than necessarily would work well.

00:28:30 ◼   ► And then also make sure that it looks good

00:28:32 ◼   ► at small sizes as well as big sizes.

00:28:35 ◼   ► That like it's something that you want to have a font

00:28:37 ◼   ► that scales well between the both of those things.

00:28:40 ◼   ► And I think if you kind of keep those in mind,

00:28:42 ◼   ► I like custom fonts.

00:28:44 ◼   ► I think they're fun.

00:28:45 ◼   ► I really encourage people to use them

00:28:46 ◼   ► or just experiment with them.

00:28:48 ◼   ► I think especially like it's easy to use the system font,

00:28:51 ◼   ► but I think you lose personality.

00:28:53 ◼   ► And I like personality in apps.

00:28:55 ◼   ► Like I'd rather download an app that has some personality

00:28:57 ◼   ► than an app that was just totally generic.

00:28:59 ◼   ► But you know, maybe that's like that's me.

00:29:01 ◼   ► And that's like the way that I roll

00:29:03 ◼   ► and I'd rather not eat vanilla ice cream, I suppose.

00:29:05 ◼   ► (laughing)

00:29:07 ◼   ► - Great.

00:29:09 ◼   ► I couldn't put it better myself.

00:29:11 ◼   ► Thank you for listening everybody

00:29:12 ◼   ► and we'll talk to you next week.

00:29:14 ◼   ► - Bye.

00:29:15 ◼   ► [ Silence ]