2
0 Comments

FontDiscovery 🖼️ 89: Color Fonts & Adobe Figma?

I'm Hua, a designer and bootstrapping founder building Typogram, a brand design tool. We just launched our pre-order, check it out!⭐


Hi Everyone 👋

I spent most of last weekend relaxing and trying to catch up on tech news, where I learned about Adobe's planned acquisition of Figma, as well as the new color fonts on Google Fonts. We will talk about both today. Without much ado, here is our issue!


In This Issue…


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.

Emojis from iOS; source: Business insider

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

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

img: 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
img: 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 enjoy this series, you can subscribe here:

Have more questions about design and fonts?
Please email me hua@typogram.co or find me on Twitter at @HuaTweets.
You can also read the past issues on our brand new archive!.

on September 23, 2022