16
8 Comments

FontDiscovery 🖼️ 35: Speak with Simplicity and Frankness, feat. Nunito

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 are having an awesome start to the week. If you are new to the newsletter, welcome! Thanks so much for being here.

The past weekend was productive for me. I got to have a nice chat with my co-founder, Wenting, about this mini tool we are launching. Wenting has been building a typeface finder tool using the content of this newsletter. You can read about how she is building it with no-code/low-code tools here.

Our startup has been following the no-code scene. In case you didn’t know, a no-code tool is a type of software that allows you to build apps quickly, without much code (for example, like Notion, task management app). On the other hand, low-code is with a little bit of code, like the site builder Webflow. You can create a website, but you can also embed custom code as well to make it extra fancy.

It’s amazing how much you can do with no-code and low-code tools nowadays. As someone who is constantly looking for a fast way to build, no-code is always on my radar. I would love to hear about your favorite no-code tools!

Now let’s dig into this week’s issue.

In this issue

  • Theme: Simplicity
  • Font of the Week: Nunito
  • Design idea: Big Bold Type
  • Color Inspiration: Black & White

Nunito-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%2F4b9e27e5-3af1-418f-828e-beb9dd8408fc_716x462.png

img: sample of Nunito


Font of the Week: Nunito

The Simple Sans Serif

We talked a lot about sans serif in this newsletter. Sans serifs are the favorites of digital screens. They are aesthetically pleasing and UX-friendly.

There are four basic classifications of sans-serif typefaces:

  • Grotesque: the first generation of sans serifs, with a lot of (wonky) visual character
  • Neo-Grotesque: rework the design of Grotesque and make shapes and curves of letters less awkward.
  • Humanist: focus on the calligraphic influence
  • Geometric: focus on the geometry of letters

About Nunito

Nunito is a neo-grotesque sans serif. Many sans serifs we use every day, like Helvetica and Arial, are in this category. They are super popular to use because they communicate simplicity and straightforwardness.

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%2F40a07a69-9b1f-4bc8-bb29-17a2f1a6a59a_716x462.png

img: Helvetica was so popular that it even inspired a feature-length documentary. The posters for the documentary are pictured here. many people buy these type-specimen posters as decoration art.

Font Details

If you want something that looks simple, open, and approachable, Nunito has your back. Nunito Family has two stylistic variations: rounded and normal:

  • Nunito: The “rounded” version has round cap strokes and communicates a heightened sense of warmth. It lacks the crispness of the regular sans serif.
  • Nunito Sans: The “normal” version gives you the straightforward, simple tone offered by the Neo-Grotesque types.

https://cdn.substack.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F86c07679-c8ad-4e87-8f91-3d07bdd22267_716x462.png

img: Nunito vs Nunito sans; I secretly prefer the rounded version of Nunito more because it feels extra inviting to read.

How to use it for logos?

Nunito communicates simplicity, openness. The “rounded” cap adds an extra sense of warmth. Bold, semi-bold are fantastic for logos. The Extra Light and Black weights might not work for logos because the graphics could become illegible under small scales

How to use it for marketing?

A significant benefit about Nunito is that it has seven weights. Nunito is excellent for more complex projects like app interfaces, where you need more information structures. Wenting used Nunito as the UI and logo typeface for Font Playground because it is versatile with many different weights, and its rounded stroke caps give warmth to her app. However, don’t use the thinner weights like Light, Extra Light, for body copy, as they will break down.

https://cdn.substack.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F6644ffd1-0198-4d5b-a5bc-c4336ab0a548_716x462.png

img: Nunito used for Wonderbox, IOS game; source: wanderbox


Design Idea of the Week

Big Bold Type

Are there any simple hacks that will make anything look good? Sometimes, you just run out of creative ideas and that’s totally ok. Designing with big, bold types is for those times. If you run out of creative ideas, an interesting experiment you can try is blowing up the copy so that the words become the central part of the graphic. It’s simple, bold, and grabs the attention of your audience right away.

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%2F1dd62840-8e3e-4c96-adea-cb1d6200a50c_716x462.png

img: graphics with big bold type design; source: graphicdesignjunction, everydayposter


🌱Jargon Buster!

Font Style

Normal, italicized, oblique styles of the font.

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%2Fd40e8c4e-56a2-4e19-863a-ccd426dfe292_716x462.png

img: font styles


Color Inspirations of the Week

Black & White

In fonts, simplicity can mean without decorations, like sans serif. How does the idea of simplicity translate to other areas, like colors?

A black and white palette can be the answer. Using an extremely limited palette, like black and white, helps people focus on the core information and visuals. It prevents distraction and communicates a message of simplicity and modernity. Brands like MoMa, Uber, Squarespace all use only black and white exclusively.

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%2F794aba60-cf48-444e-b317-9b1a042bcb37_716x401.png

img: Squarespace branding; source: squarespace


Creative Prompt

Can you create a design with a big bold type design? I would love to see what you create via Twitter or Email.


Thank you!

Thanks for being here for another week. Nunito is available here. It is designed by Vernon Adams.

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%2Fa309bdd4-3292-4c3e-bd8e-3016eaab1833_1518x760.png

img: Nunito 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.

  1. 2

    Fascinating article. I have always been interested in fonts and type in general. But I have never had time to explore it or learn its intricacies.

    I personally love Gotham and use it all over the place. Love how it works in different contexts.

    Gotham Presentation Slide

    That is a presentation I did pre-pandemic.

    I LOVE minimalist font-heavy designs.

    But one place I have always struggled to use fonts properly is in web designs. I do not like the small font size a lot of designers use in templates/designs. So that is the first thing I try to do is change it. But I always struggle to get the text to look good in a responsive design. Something that looks good on a large screen fails miserably on a smaller screen and vice-versa.

    Any thoughts on how to make a font-heavy design work on responsive sites and at larger font sizes? How to make it look good while maintaining readability across all the devices?

    1. 2

      Thanks so much for sharing your thoughts, Prashant! Totally agree, Gotham is a great typeface. Thanks for sharing the example, I love the way you used it there!

      I definitely understand your struggle when it comes to type on responsive web designs. One thing I can say about that is creating a really good grid and have a really good grid and typography system so that you can maintain the structure and consistency while having a little flexibility for design, adjustments as you move from different sizes.

      I also find it helpful to pay attention to small details when working on responsive projects. For example, if you increase the font-size for a header as you move desktop > mobile, maybe you need to adjust letter-spacing and line-height and so on. Small details really help typographic projects look good.

      awwwards has a good collection on the subject, sharing it here in case that's helpful:
      https://www.awwwards.com/responsive-typography-a-roundup-of-the-best-articles-and-tutorials.html
      Grid Systems in Graphic Design by Josef MĂĽller-Brockmann is also a really good book on grid with lots of typographic examples!

      1. 1

        awwwards has a good collection on the subject, sharing it here in case that's helpful:

        Wow! That is a detailed list. Thanks for that. I will check it out.

  2. 2

    Nunito seems like a beautiful font, thanks for sharing ❤️

    1. 1

      Thanks Harrison! I'm glad you enjoyed it!

  3. 1

    AnyFont lets you install — well — any font in TTF, OTF, or TTC format on your iPhone or iPad via a configuration profile. After installation, you can use these fonts with Word, PowerPoint, Pages, Excel, Numbers, Keynote, and others that employ the device's font book. dafonts review

  4. 1

    This was a delight to read. Thank you!

    1. 1

      Thanks so much, Michele! I'm glad you enjoyed it : )

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 47 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 27 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments How I Launched FrontendEase 13 comments