What I know so far about Typography

In my 2 years at Mastra, I have worked on marketing websites, docs and a couple of brand assets like OG images. I create them with Sketch and I generally enjoy making images. All these work has exposed me to lots of types.

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.

Mastra recently moved to Greed

In my past time, I scour the web for impressive websites which includes marketing websites and engineering blogs from mostly startups. What I recognize that sets the great from others is decisions regarding colors, spacing, accessibility, 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. A couple of these brands that immediately come to mind are: Zed, Vercel, Linear, Paradigm and Firecrawl.

The right type will make you go wow. It will seize your breath and enthrall you. That's how I felt when I saw Yokai for the first time.

Typography is important but it can feel unintuitive. There are some rules I've gathered over time that has brought some success. Here are some of them.

When in doubt, use the popular Typeface

Inter is ubiquitious and for good reason. It works. You can do a lot with it, make it bold for headings, use it for body content, italic for emphasis and everywhere else you need. The web is a medium of communication, that means a lot of content has to be read. A legible, egalitarian typeface makes the experience comfortable. Inter might be boring as I've heard some designer say but boring can be good. Written content is only good as it is legible after all.

Play around with tight letters

Inter looked great on Vercel the first time I saw it. It looks comfortable on Emil's website but when I used it, it just did not look as great. Why was that? did i use Inter instead of InterVariable? was something wrong with my version from Google fonts? Nothing was wrong per se, I just didn't know that headings look better when they are tighter. Letter spacing is a quick win with sans-serif used in headings. The more compact it is, the more pronounced the content.

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

Do you see how much cleaner it looks when compact? There is still quite a lot to do but this is a easy win I am satisified with.

Sans-Serif is okay, sometimes

Sans-serif is everywhere and for good reason. I avoided serif fonts because I didn't know how to pair them correctly. I leaned towards consistency, rather than a synthesis that could go wrong. Tt's easier to stick to one typeface than experimenting with multiple and having everything fall apart. It's a safe bet and safe is alright. You don't have to be adventurous, or daring. Tf Inter, Commissioner, Satoshi, or Nunito does what you want from it, it's alright to use it everywhere.

Sometimes, Serif is the better choice

Serif fonts are required to break the monotony of the web. I agree with Rich Harris on Svelte and why they decided on a Serif font. The singular downside was that it wasn't readable enough. I have also come to understand from experimenting and seeing the works of various designers that Serif is required for personality and that extra classiness.

Web content doesn't have to be 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 evaluate 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 sprinkle of novelty is not too bad.

I now use Newsreader

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 it did 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 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 40 favorite typefaces from my adventures around the web. I have also started Details in Typography by Jost Hochuli 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.