Reviewing Nabla: Open Sourced Color Font Creating Many Visual Potentials 

Dancing Script Cover

Welcome to Typogram’s FontDiscovery newsletter, written by your resident font and design nerd, Hua. Want to learn more about font and design? Subscribe FontDiscovery to get weekly doses of learning and inspiration♪


In This Issue…

How to Use Nabla for Logo, Branding & More


Font of the Week

About Nabla

Recently Google fonts debuted a brand new set of color fonts on its platform.

You may be wondering: what are color fonts?

It sounds strangely familiar but also vaguely new. We already encounter these in our daily lives. An example of well-known color fonts: emojis.

https://substackcdn.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%2F9c9617a4-4f0f-44fd-a36b-773098879f4b_1136x852.png

Emojis from iOS; source: Business insider

Color fonts are unique fonts that embed information about colors in their files, such as multiple colors, gradients, or shadows. Most normal, non-color fonts (most of the fonts we encounter) are incapable of storing these color specifications.

Nabla is inspired by isometric computer games like SimCity (2013), and Civilization VI (2016). Nabla gives a fun, 3D, almost retro vibe that is perfect for creative projects about gaming and technology. It is also a variable font. Users can manipulate style elements like depth and highlights.

Font Details

  • One weight color font
  • upper and lowercase characters
  • Isometric perspective
  • Variable font: Extrusion, highlight, and color palette can be manipulated through CSS or supporting software

Isometric perspective

https://substackcdn.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%2F370676bb-af01-4b4f-9ec2-39c5365a20da_716x462.png

https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F108f9dd5-3576-47e1-ac06-413cbef08a92_564x400.gif
Depth or extrusion of the letter can be manipulated
https://substackcdn.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%2F211e1592-785e-4be3-983f-aee9879b87b9_1064x532.png
Pre-determined color palettes of Nabla, source: Google Fonts

How to use Nabla for logos?

Nabla is perfect for logos for gaming and creative tech projects. It is pretty legible in small sizes, as long as the color is not too bright to cause readability issues.

How to use Nabla for marketing and branding?

Nabla is an awesome display font for graphics for marketing and social media. The benefit of color fonts makes it easy to create striking graphics and presentations.

Where are color fonts supported?

You can use Nabla in Adobe Illustrator and Photoshop. You can also use access the color and variable font features using CSS. In Figma and Canva, it is not currently supported.


Design Idea of the Week

Adobe Figma?

Last week, Adobe announced a deal to acquire the UX design and prototyping tool Figma for 20 billion dollars. Figma is a design and prototyping tool that is fastly becoming the industry standard in the UX and UI industry. My co-founder, Wenting used to work as Adobe. Here are her thoughts on this news.


Color Inspiration of the Week

This week, enjoy colors from Vermont, USA!

Lapis Lazuili #525A7F | Denim  #6382B5 | Pale Pink #F3D0CB | Spinach #525A33

https://substackcdn.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%2Fa2ebcf26-3880-460f-a79f-d5ef948ca074_1518x760.png


Typography Jargon Buster!

Faux Font Style

Faux Styles happen when text editors or web browsers fake a font style because the original font does not have one. For example, a faux italic, or a “fake” italic, is created by browsers when the web fonts used lack italic styles. Avoid Faux versions if the appropriate styles are available.

https://substackcdn.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%2Fabbf6d51-d150-4ec0-92ee-4d5c6402fe73_822x398.gif

Want more typography jargon buster? Check out this post!


Creative Prompt

Create something with Nabla!


Thank you

…for reading and hanging out here this week.

https://substackcdn.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%2F3a5161ca-0ce3-4206-aefa-f6f08c18afd5_1012x506.png

If you enjoyed the posts here, subscribe to get updates from Typogram's blog!