6
0 Comments

FontDiscovery 🖼️ 22: Look stronger and with better ux

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 there! 👋

Hope you had a relaxing long weekend! Did you do anything fun? comment here or dm me on Twitter what you did. I would love to hear about it! I hope you have a wonderful rest of the week.

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%2Fe6d628dc-91f9-476f-a170-d57502cdde36_1074x1584.png

img: sample of Millimetre. Millimetre is named this way because it was constructed based on the meter metric system


Font of the Week

Future Gazing with Millimetre

In the 1960s, Aldo Novarese created a font that became an integral part of pop culture. Microgramma and Eurostile dominated Sci-Fi stables like the Star Trek Franchise. Since then, these square-looking geometric sans serifs have defined the way science and technology brands communicate visually.

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%2F429a59ab-1ad5-415f-b647-00ca7f69161d_1320x330.jpeg

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%2Fb87fb298-6db6-4b0f-980b-8c5e6c7be380_541x224.png

img: Microgramma or Eurostile Wide (top) and Microgramma(bottom) being used on Star Trek; source: fontshop, reddit

Millimetre is a type of sans serif called geometric sans serif (similar to Jost, which we covered previously). Instead of taking inspiration from calligraphy, geometric sans serifs are derived from geometric shapes with very little contrast in strokes. If we look carefully at Millimetre, we’ll notice the spaces inside the letter are more square than round.

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%2Fd9a4333e-7af9-4c82-8c02-50d921998e22_1074x694.png

img: Millimetre “O” compare to Helvetica “O”. Millimetre is a lot more square in shape

This rectangular trait adds extra strength visually to the normally round, soft shapes. It communicates the retro-futuristic, technological, and Sci-Fi vibes pre-established by its ancestors like Microgramma. Sci-Fi, tech, and hardware brands love these square-shaped fonts because of these extra doses of stability and strength.

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%2Fa30c9ade-d088-4135-b242-a8bfb113b3e4_1075x694.png

{img: companies that use square-looking geometric sans serif as part of their branding.}

Font Details

  • Four weights, no italic styles
  • Square shapes inside the letter communicate strength
  • High and low crossbars on capital letters in light and regular weight communicate retro

General Usage Tips

  • Add extra letter spacing if using the bold version
  • Avoid: using this font for body size text. It is not optimized for small sizes

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%2F1a88cd05-fd1d-4656-b1b3-29973fcdbdef_1349x462.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%2F41de4f4e-50cb-4332-977d-69b88f6697e8_1075x694.png

img: top–details of the font showing square shape and crossbars; bottom–various weights of Millimetre

Specific Usage Tips

How to use it for logos?

  • Communicates strength, reliableness, techy, and retro-future
  • Bold is more suited for logos because you can read each letter once the logo is scaled down, whereas extra bold can break down

How to use it for marketing?

  • The shapes of letters of this font vary with different weights. Regular and light communicates retro more than the bold and extra bold
  • You can choose to communicate retro with regular and light, communicate strength and sci-fi with bold and extra bold

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%2Fb101bba0-b358-4d50-9a01-f7d434700a26_1075x694.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%2F00092222-2a6b-4043-abbe-38c4ea2dfca0_1075x694.png

img: top–Millimetre used for election event, bottom–Millimetre used for digital art event poster; source: FontsInUse


Design/Marketing Idea of the Week

Grid as a tool

Modern design can be traced back to a movement called Swiss Style. One of the most vital imprints Swiss Style had left is the idea of using grids to create layouts for cleanness and readability. In design, “form follows function.” Layouts are the perfect example of this: different layouts suit different purposes. A layout that has space for a full-width image is better optimized to showcase your product. Similarly, layouts with multiple columns are probably better for testimonials because it allows you to bring various perspectives together.

Think more about the intent when you are choosing which layout to use for your projects. Are you trying to showcase one specific product, or are you trying to showcase multiple products? For items on the page, what are their relationships with each other and the information presented? Thinking about answers to these questions will help you create a more effective visual experience for your audience.

https://cdn.substack.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%2F7f1b1b5f-1520-412e-a8f6-9a56aab4dceb_2222x1108.gif

img: grid with a big placeholder for displaying hero image is great for showcasing product


Color Inspiration of the Week

Today we have a beautiful palette from Balangan Beach, Bali, taken by Andrew. Andrew is currently based in Hong Kong and works on a newsletter called Coffeehouse, where he shares nice ambient work tracks. Thank you for your contribution!

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%2F04a91753-6a6d-48ad-affd-aa7f2a3f56c7_1075x694.png

img: Balangan Beach is one of Bali's most scenic spots; source: Andrew.


Creative Prompt

Can you create a visual for Twitter or Instagram using Millimetre, grid technique, or the color palette we featured today?

Thank you

…for reading and hanging out here this week! Millimetre 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%2Fc43d0352-0eb0-45f7-a040-ea00f97f7adf_1518x760.png

img: Millimetre 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
Just crossed $2000 on my first indie app. Here’s what I’ve learnt 26 comments I bootstrapped a cohort-based writing course to 1,400 members in 6 months (while working full-time). AMA! 17 comments Seeking feedback on MVP. Is value prop obvious? 15 comments The Best Collection of 99+ Tools for Product/UI/UX Designer, Maker & Indie Hackers 7 comments Download Product Hunt Upvoters List in 2 Mins 7 comments Roast My Idea: Widget to track order progress 4 comments