13
0 Comments

FontDiscovery 🖼️ 30: Bring fun to your product with game-inspired design elements (Feat. Font Heritage Display)

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 Community 👋

I hope you had an excellent start to this week. This weekend I continued with my kitchen renovations and watched the Olympics. Did you watch it? Inspired by the Olympians, I thought it might be fun to talk about fonts, and design around the theme of games and interactivity this week. I hope you will enjoy it.

In This Issue...

  • Theme: Bring your game (Mario is running around in all the pictures. Can you find them all?)
  • Font of the Week: Heritage Display
  • Design Idea: Mascot
  • Color Inspiration: Team Lab

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%2F4e86f612-a340-4a3d-8701-3d2622df1b7c_1075x693.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%2Fada8bb73-6f8d-4566-bc9b-4953c5d91eee_1074x693.png

img: Sample Heritage Display, font is created by Daniel Schriër


Font of the Week

Bring Your 'A' Game

Sometimes, the most innovative result comes from combining two drastically different elements. Today we discuss a font that does just that, with calligraphy (Blackletter) and arcade gaming (pixelation).

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%2Fc43d07de-2638-4804-ad36-f1e887d1ad59_1075x694.png

image: 8-bit graphics screen; source: Pinterest

Looks Familiar?

This iconic, 8-bit graphics screen is synonymous with the beginnings of gaming. Due to the limitation of the hardware the graphics must take as little computer memory as possible. 8-bit made this possible, and as a result, it created a unique aesthetic that captured this early era.

Font Details

Heritage is two drastically different styles mixed together, Blackletter and pixelation.  The shape of the font comes from Blackletter, a style of writing developed from Western Europe in the 11th Century. ( If you want a quick review, check out this issue). The pixelation effect result from the way Heritage Display is created: it is designed on a 25 * 25 grid.

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%2F4e507708-6274-462f-be18-af1cb2f66229_1074x694.png

img: Blackletter calligraphy example; source: FontsInUse

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%2F82beba1d-fd92-4382-a020-c528de90ae4a_1074x693.png

img: Heritage Display being designed on 25 * 25 grid; source: Behance

How to use it for logos?

Heritage Display communicates vintage. Being a pixelated blackletter font, it has a unique vibe that is suited for a specific niche. When using, consider if its uniqueness and eccentricity are appropriate or your brand. If your brand has a unique spin on gaming, lifestyle, pop culture, tech, Heritage Display's kookiness can be an eye-catching addition to your graphics.

How to use it for marketing?

You can draw attention to your graphics with an updated color palette to grab attention. Typically, colors associated with pixel fonts and Blackletters are gaming-or medieval-themed palettes. It can be interesting to combine Heritage Display with colors not associated with either of these topics (for example, pastel colors). Heritage Display is not user-friendly for body-size copies and is best for header-size copies. It can pair with Merriweather Sans. It has only one weight.

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%2F49892a11-3e7c-430b-adb2-0caaa1b66e44_1074x694.png

img: Heritage Display paired with Merriweather sans. This pairing works because both fonts show calligraphic influences

Design Idea of the Week

Mascot

We connect Mickey Mouse with Disney. We like Nintendo because of Mario. Sometimes it is easier for your audience to connect with your brand or product with a mascot figure. Many different brands like Mcdonald’s, KFC, Microsoft Office have used mascots. It may even boost growth for your productMaybe a mascot is something you can consider?

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%2Ffb872c26-f961-473d-bcdf-2ea54cf5c74e_1074x694.png

img: Clippy, Microsoft’s controversial mascot; source: Microsoft

Color Inspiration of the Week

Team Lab

Can art ever be more than what's on a white wall? The answer is yes. Team Lab is one of the most famous interactive art collectives in Japan. Team Lab creates large, immersive exhibitions using combinations of lights and interactive technologies. Here you see one of the most well-known exhibitions featuring a pool of intractable koi fishes in the museum. Here is a video.

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%2F9144910e-9c00-424f-bfc1-fec036f4c621_1075x693.png

img: Team Lab’s colorful installation in Tokyo; source: Youtube

Creative Prompt

Try drawing a mascot for your project. Grab a pencil and sketch out the first thing that comes to your mind. It can be anything you want, and don't stress about it being perfect.

Thank you!

Thanks for being here for another week. Heritage Display 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%2F25fbd1a4-d3b8-4f22-a807-742a25c871db_1519x760.png

img: Heritage Display 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? 29 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 16 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments