5
0 Comments

FontDiscovery 🖼️ 36: A Font for Coding and Editorial

I'm Hua, a designer and bootstrapping founder building Typogram, a brand design tool. As part of running Typogram, I create this digestible weekly guide with fonts, colors, and design ideas to help founders, creators, and makers step up their game in marketing and get creative!


Hi Everyone 👋

Hope you had a nice weekend. Thanks so much for joining us for another issue. How is your week so far?

You may remember last week I told you about this mini font tool Wenting is building using Retool. We have finished building it and you can see the app here. Wenting also shared her building process. We build this super quickly so the UI is very minimal.

I also published a post on Typogram’s blog about how to choose colors. If that is something you struggle with, feel free to check it out. We’ll also talk a little about these color ideas in this week’s newsletter.

Just a few days ago, a horrible storm happened here in NYC. It flooded homes, cars, and roads. It even shut down public transportations. Many properties were damaged. I hope wherever you are, you are taking care of yourself and your loved ones.

On to this week’s issue!

In This Issue

Theme: Branding & Editorial

Font of the Week: Xanh Mono

Design idea of the Week: Brand Story

Color Inspiration of the Week: Primary Brand Color

cover-0.png

https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fe377b467-e934-44a2-b860-d78a6b7812a8_716x462.png

img: sample of Xanh Mono - Do you have a friend who could profit from the weekly design tips, just like you do? Please consider forwarding or sharing FontDiscovery with your friend by clicking on the button down below.


Font of the Week

All About Xanh Mono

Sometimes monospaced fonts don’t feel the most exciting. They seem humble and functional. They are coding fonts that live in code editors and excel sheets. Xanh Mono completely breaks this stereotype. It brings elegance to your design with pronounced editorial-looking serifs that are not seen in other monospaced fonts.

https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F97d6e0b9-f643-4bc9-8589-90967cc5bda5_716x462.png

img: IBM Plex Mono is a monospaced font we have covered in the past.

Font Details

The Xanh Mono is a transitional serif. This type of serif has slight contrast in strokes and "ball terminals" on some of its lowercase letters, like "a" and "y." These ball terminals give your tone an extra class and grandeur. Xanh Mono has one weight and two styles: regular and italic.

https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F23979227-3f34-4639-add0-ceaa69649ee6_716x462.png

img: ball terminal on lowercase

How to use it for logos?

Xanh Mono has a contemporary, classic voice. The large serifs on the letters remind me of magazine editorials targeted towards a sophisticated audience. It's perfect for a classic or heritage brand.

How to use it for logo and marketing?

Xanh Mono is fantastic in headers and display sizes. I especially love the italic because it is a true (cursive) italic. This italic is excellent for headers and call-outs on marketing graphics. The ball terminals appear more frequently in the italic lowercase to give an extra expressiveness. Because Xanh only has one weight, it is best to pair it with another font, like Roboto or Plex Sans for projects like landing pages.

https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F5cda8dfe-1cfd-46fe-950b-ed072815c25b_716x462.png

img: graphic comparing normal, italic, and oblique. Xanh Mono has a truly italic because the italics are cursives.

https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F80864728-cdea-4f68-abe2-13c62a567f91_1349x462.png

img: true italic lowercase letters of Xanh Mono

https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F8630bc4b-9d1e-4c53-8005-add66cf0cf4d_716x462.png

img: Xanh Mono is paired with Plex Sans here.

As a coding font?

Because of its large serifs, I find Xanh Mono uncomfortable to stare at them for hours when I’m coding.  If you want to dig deeper into coding fonts, here is a great article you might like that reviews several good monospaced fonts for coding.


Design Idea of the Week

Brand Story

A brand story is a narrative that you create that encompasses the facts and feelings created by your brand. It's what customers believe about the product based on the signals your brand send. Everything you do in your brand, like the visual materials, social presence, and customer experience, can all contribute to these signals.

For example, if you have a startup, how you set out to start your business, what it means to you, what values you want to bring to your customers can all be part of a brand story of making and creating independently.

https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fbdba4c37-8c81-408d-bb50-22ecdb69c8ed_1508x1556.png

img: a homemade comic explaining branding


Color Inspiration of the Week

Primary Brand Color

Primary brand color is the main color used on marketing graphics, websites, signages, and other visual materials. Typically, this is the main color that is associated with your brand. For example, the primary brand color for Coca-Cola is red.

https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F4c3723e2-2652-4c6d-9b3e-0a7919d8b716_1012x506.png

img: red has been a successful branding color coca-cola. When we think of Coca-Cola, we immediately think of this red.

To find primary brand color:

There are a couple of approaches you can take:

  1. Look at what similar brands in your niche are doing.

  2. Research about what brand personality different colors are associated with.

  3. Create mood boards of things or values inspired or associated with your brand. I wrote more about this process here.


🌱 Jargon Buster!

Serif

Serifs are letters with "serifs," which are small lines attached to the end of letter strokes.

https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fd1b871da-272f-4ac1-80d7-52cd4c527721_1518x759.png

img: serifs are the blue parts of the letters


Creative Prompt

Can you write a brand story for your business?


Thank you!

Thanks for being here for another week. Xanh Mono is available here. It is designed by Yellow Type, Lam Bao, and Duy Dao.

https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F88bfe2be-f474-4f2b-ad0f-1854b2175085_1518x759.png

img: Xanh Mono infographic


If you enjoy this series, you can subscribe here:

Have more questions about design and fonts? 
Please email me [email protected] or find me on Twitter at @HuaTweets.
You can also read the past issues on Typogram's blog.

Trending on Indie Hackers
What you are currently working on? 115 comments IH invite system is broken 28 comments How this Reddit marketing tool used itself to grow to $5k/MRR 24 comments Roast my 3D landing page! 13 comments I'm 19, and I made $11,000 with Notion products. AMA! 11 comments I don't know what to do on indie hackers anymore. 2 comments