8
0 Comments

FontDiscovery 🖼️ 42: Font for Multilingual Support

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! Last week I told you I started a new project, indiegrow. It has now been a week since launching and I have been having a lot of fun running it. I have shared two things with indiegrow subscribers: how to write a good comment for social media and three resources for startup founders. I thought I also let you know about it if that’s helpful.

On to our issue this week!

In This Issue

  • Theme: Worldly 🌎
  • Font of the Week: Noto Sans
  • Design Idea of the Week: Web Typography
  • Color Inspiration: Rock forest in Kunming, China

cover.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%2Fca56695d-e711-4e63-b5eb-d9b4253e7d96_716x462.png

img: sample of Noto


Font of the Week

The Accessible Noto

Noto is one of my favorite open-sourced font family of all time due to its extensive language support. Noto is a joint project by Google, Adobe, and Monotype to eliminate “Tofu,” which is the box that shows up when there is a missing character. Noto has italic styles, multiple weights, and widths, 3,741 glyphs, and supports 800 languages.

For this newsletter, we will focus on Noto Sans, which is the sans serif, and in my opinion, the most useful for projects. Noto also has serif and monospaced versions. Both are fantastic for pairing and for projects as well.

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%2F829e5459-b988-4110-836f-e0a8079a0662_1075x694.png

img: white square or “Tofu” happens when there are missing glyphs. source: quora

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%2F5c1c40da-22c3-40bd-a754-bfbf75631971_1349x462.png

img: some styles of Noto family. Be sure to check out all the different languages

Font Detail

  • Humanist Sans serif with calligraphy influence
  • Support for numerous languages

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%2Ff2dd0337-1921-4430-b329-fdaf6f010b1a_1075x694.png

img: Noto sans comparing with Helvetica, another commonly used humanist sans serif

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%2F9096f760-5bce-4a07-8059-8fc57c7e0197_1075x694.png

img: Noto language support, source: kevin’omalley

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%2F19853f53-3549-42b8-8ebf-cbbb97a5706e_1075x694.png

img: all the languages that Noto support; source: Monotype

How to use it for logo?

Noto Sans communicates openness and has a neutral tone. The bolder versions are great for logos. Avoid using Thin, Extra Light, or Light for logos, as they may be illegible in small sizes.

How to use it for marketing?

Noto support over 800 languages and you can find the Noto font of the language you need. Noto Sans has a neutral tone. If you want to be bolder, You can pair it with a decorative or flashy serif, like Playfair Display, or Bluu Next. It can also pair with Noto serif to stay neutral.

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%2F6e2bad45-619b-4da1-9565-4129045300cb_716x462.png

font-example-2.png

img: Reddit is a forum/ discussion site. The homepage uses IBM Plex Sans for the link titles and most of the interface. The body text of posts is set in Noto Sans. source: FontInUse

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%2F13949137-ed38-4a70-a24e-5fa795335fd3_1075x694.png

img: Noto sans pairing with Bluu Next


Design Idea of the Week

Web Typography Resources

Last week I received an email from a reader asking about web typography. I thought this might be a good chance to share some resources. These three articles do a great job explaining web typography fundamentals, as well as the granular details.

This one does a great job of giving an overview of what makes great web typography for your projects, like scale.

If you have time and want a more in-depth read, Prowebtype is a great resource that gets into the thorny technical details (with CSS snippets). It also has a chapter on variable fonts.

A handy little list that shows you shortcuts for special characters like curly quotes, accents, and other nice details, because what makes a project great is all those special little things.


Color Inspiration of the Week

Rock Forest in Kunming, China

Last week, UN’s Biodiversity conference took place in Kunming, China. Hope you enjoy the week with this amazing gift from nature with these calming, earthy colors.
Rock #8F8F83 | Rock Highlight #D3E2D9 | Rock Interior #DCB783 | Sand #E5D0A9

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%2F6506d4a6-5793-46ca-9e82-8f48b8a8bd86_1074x694.jpeg

img: Kunming, China. source: allthatsinteresting


Typography Jargon Buster

Grotesque

seen around 1815

Grotesque sans serif got its name from the Italian word grottesco, meaning “belonging to the cave” because this sans serif had an overly simplistic appearance. Grotesque sans serif is the first generation of sans serifs, with a lot of weird (wonky) visual traits.

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%2F2f60ad49-4e94-4318-b56a-770eb3e20fed_1600x800.png

img: darker grotesque is an example of the funky grotesque sans serif


Creative Prompt

Try creating a social media graphic with Noto Sans!


Thank you!

Thanks for being hanging out here this week. Noto Sans is available here.

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%2Fd82e703a-58e9-43d4-beac-a6d1a09a62e4_1519x760.png

img: Noto sans 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
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 49 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 28 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 15 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments