What I know so far about typography

This post would not have made it out of the draft if I had let perfectionism win. Thank you Simon Sarris. Amazing things do occur on x.com – the everything app.

In my 1 and a half year at Mastra, I have worked on the marketing website, the docs and a couple of brand assets, specifically og images. I even create some of them myself in Sketch because making images is really fun. What this has exposed me to is fonts, lots and lots of them.

We currently use Inter, Tasa Explorer and Geist Mono on the website, blog, and docs. And Sorts Mill Goudy with Hack Grotesk for the tsconf.ai page. Types have been really fun to work with.

In my past time, I scour the web for dashing websites which includes marketing website and engineering blogs from mostly startups. What I recognize that sets the great from the meh apart is sometimes decisions regarding colors, spacing, accessible intefaces, animations, micro interactions, and other design choices, what I do think is a big driver is typography.

The right type can substantially elevate a brand. It is why I like Zed, Vercel, Linear, Paradigm and Firecrawl.

The right type can make you go wow. It can seize your breadth, stun you and enthrall you. I am not kidding, check out Yokai.

Typography is really important. Sometimes though, it can feel unintuitive. There are easy wins here and there that has made me better comfortable with type. Here are some of them.

When in doubt, use the Popular Typeface

Inter is ubiquitious and for good reason. It works, and it works well. You can do a lot with it, make it bold for headings, use the normal weight for body content, italic for emphasis and everywhere else you need. Sometimes, the boring choice is a good choice because written content on the web is only good as it is legible.

But just because it is utilitarian and commonplace doesn't mean you can't do a lot with it. And that leads me to the next point.

Play around with Tight Letters

Inter looked great on Vercel the first time I saw it. It looks magnifique on leerob's Emil's website but when I used it, it just did not look as great. Why is that? did i use inter instead of interVariable? was something wrong with my version from next? Nothing was wrong per se, I jus didn't know that headings look better when they are tighter. Letter spacing can improve a font in ways you wouldn't expect.

Here is a sample playground with controls for adjusting the letter spacing.

Do you see how much cleaner it looks when tight? There is still a lot I have yet to unearth in regards this but I am satisified with what I've gotten so far.

Sans-Serif is Okay Sometimes

Sans-serif is everywhere and I think it's because, it's easier to stick to one typeface than experimenting with multiple and having everything fall apart. It's a safe bet and sometimes, safe is alright. You don't have to be adventurous, or daring, if Inter, Commissioner, Satoshi, or Nunito does what you want from it, it's alright to use it everywhere.

Sometimes, Serif is the Better Choice

I have come to a realization that Serif fonts are required to break the monotony of the web. I agree with Rich Harris where they decided on a Serif font, the only downside though was that it wasn't readable enough. But I have come to understand from experimenting and seeing the works of various designers that Serif is required for personality, sometimes that extra classiness.

It doesn't all have to be so boring. It's why I've got PP Neue Montreal paired with PP Editorial New for my website. It gives it a persistent freshness, one that would not exist if I settled for the prosaic sans-serif.Once you evauluate what kind of brand experience you want to offer to your users, or what kind of feeling you want people to get, you'll realize that a bit of novelty is required.

Use One Typeface, Maximum Two

I tried playing around with multiple typefaces, a couple sans-serif and a serif, maybe some cursive for the footer section and they do not end up well. It is pretty difficult to build something cohesive when multiple types are fighting for prominence. A single typeface can do the job and maybe a Serif one to make things pop a bit more.

Overall, there is still so much I am learning about types, I have an obsidian document that contains a list of my favorite typefaces which I will publish soon, it's around 40 or so. Typography is fun, captivating and most importantly, it is a very important part of what I value as Craft. I am inclined to spend more time figuring it out.

Thanks for reading, and I hope this helps.

If you've found this useful, let me know on twitter.