Hey Tim,

One thing I'd like to drill into the heads of every budding UI designer out there is: typography is far less subjective than you think.

A lot of good typography is just analyzing letterforms. This is a major lesson from the typography unit of Learn UI Design (which opens tonight at midnight for new enrollments 🎉), and I want to explore it a bit now.

Let's take a look at some new fonts that all Mac users can download for free, thanks to Apple licensing them for Mac users!

(Here's how to do that☝️ 1. Open up the Font Book application, 2. select "Computer" on the side nav, then 3. click fonts that are grayed out that you want to download, and 4. press "Download" in the upper-right)

Here's my take on a few of them:

Canela

Starting with a doozy – Canela is beautiful! But before I wax poetic, let me be very clear about what I see:

• The horizontal parts of the letterforms are very thin, while the vertical parts are very thick. This is called "stroke weight contrast", and such a high stroke-weight contrast is instantly associated with luxurious, stately type.
• The serifs here aren't so much little tags that fly off the end of the letters are they are organic extensions of the letterform itself. The main stem of the B widens at the base, as if it's a physical pillar holding up a building! (The more fonts you see, the more you'll realize how unusual that is)

Overall, Canela walks this balance between the warmth of human handwriting and stately details. It makes me think of something literary, which is why I used it for project in one of the new video lessons in Learn UI Design.

Canela is currently #7 on Typewolf's Most Popular Fonts list – and no wonder! The only thing amazing here is that I can now use it for free.

Domaine Display

Speaking of Typewolf, the next font happens to be the one he used for his site!

When picking a font, you don't want to hammer your user over the head with the brand you're trying to convey. Instead, you want to convey your brand through the details.

And Domaine is a great example of a font with quirky details.

• Look at the descender on the "y" or the ascender on the "f". Loopy and swoopy. Despite this being a serif font, it clearly doesn't take itself too seriously – there's a little pizazz here.
• But it's not over the top. When I typed "GROOVY", I realized it didn't actually feel groovy! Why not? Well, the stroke weight contrast in the "O" and "V" feel too heavy, making the font a biiit more on the stately side (nice tie-in from above, eh? 😉)

Now let's look a slighty quirky sans-serif font from the batch...

Founders Grotesk

At first glance, it's plain and simple. But when we analyze the letterforms, we can start to pull out some of the details.

• The capital letters look pretty clean and simple, but look at how small the slit is in the "C". This is called a "narrow aperature", and it seems SOOO small as to be a fashion statement. Duly noted, Founders Grotesk, duly noted.
• The top stroke in the "a" is super chunky compared to the lower closed loop (the "counter") – and it's not just a case of HORIZONTAL-IS-THIN-VERTICAL-IS-THICK (like we saw above). This "a" is just an unabashadly awkward letterform.
• For more proof, look at the question mark. It's almost silly. I'd really hate to pick this font thinking I had something neat and staid, but the first time I typed a question, it feels like Scooby Doo in typographical form.

Are you getting the idea? We're literally just looking at the shapes of various letterforms, and trying to draw out different ideas.

Bonus Fonts

I'll throw a few more of my favorite new Mac fonts out there as a bonus. I highly recommend downloading them now.

Publico is a beautiful serif that feels modern, measured, and trustworthy – meaning it has no place in a newspaper, of course 😉. Nonetheless, The Guardian uses it to great effect. Their custom fonts are based directly on Publico.

​

And Graphik is – in my own opinion – simply a top-notch clean, simple sans serif. If you're looking for something truly neutral, you have to walk this careful balance between boring and opinionated. Graphik seems like a fantastic solution here, and I'd consider it for a project in a heartbeat.

Even in a quick review of a few new fonts, we've covered some critically important ideas in typography:

• Choosing fonts is more about analyzing letterforms than you would've guessed
• You don't want to hit your users over the head with your brand (think Comic Sans) – instead, you want subtle details to reveal the character you're trying to achieve
• High stroke-weight contrast can yield a stately, elegant appearance
• Uneven stroke-weight contrast, non-standard terminals (i.e. the ends of letterforms) and uber-narrow aperatures can feel quirky and weird

And a ton more like this is covered in Learn UI Design, which opens for new enrollments at midnight Pacific. The course has over 24 hours of video across 48 lessons, and I've recently updated the course with the most new content of any update yet. There are new videos on...

• Starting a Project: Brand & Goals​. If you don't know what the goals of your design project are, you'll only meet them on accident. These are some of the most important day-to-day lessons of design that I hadn't yet included in the course (and it's the ONLY free video from Learn UI Design that you can watch right now! 👉 WATCH IT HERE)
• Developer Handoff​. This lesson focuses on how you can make your design files easier for developers to implement quickly and accurately. It's the #1 most requested lesson since I launched Learn UI Design.
• Mobile: iOS. Covers the idiosyncratic patterns & ideas that define the iOS design language.
• Mobile: Android/Material Design. Likewise, the Material Design lesson goes deep into Google's own cross-platform design language.
• Introduction to Figma. Many students already use it, and Learn UI Design is slowly transitioning towards it, but Figma is taking the design world by storm and it's worth learning the ropes.
• Sizing. After reviewing literally thousands of your homework submissions, this struck me as one of the most important lessons I could add. Most elements in your UI have a "natural" size they would like to be at. This lessons covers the logic of how to size various elements in your designs.
• ​Truncating Text. Sounds boring, but as a UI designer, it's important to know your options of how to deal with long (dynamic or user-submitted) text. You could use a "Read more" button, you could truncate it, you could...

As a bonus for Learn UI Design students, I've recorded live webinars where I'll redesign student-submitted projects. These are finally compiled into the Live Redesign Vault, a new bonus for students:

• 32 redesigned student submissions
• Over 30 hours of narrated video
• The vault database lists all projects by main colors, typefaces used, platform, and brand

Any questions before enrollment opens tonight? Let me know – I'll be on-deck, answering everything that lands in my inbox 😎

Cheers,
Erik D. Kennedy