FontDiscovery 🖼️ 24: "&" Tips about using the Font Saintjean to Hack Design

FontDiscovery 🖼️ 24: "&" Tips about using the Font Saintjean to Hack Design

Plus a simple idea to make your visual look good & color inspirations from Legos!

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

How is your week going? There was a major heatwave last week in NYC. The whole week was so hot and humid! I had to buy two standing fans because I have no AC. I hope you are staying cool wherever you are.

Stay hydrated and happy Pride!

In this issue:

Theme: Micro. This week, we look at everything small.

Fonts: Saintjean, a font with only ampersands and lots of them!

Design idea: The Object Poster

Color Inspiration: The Colors of Legos

FontDiscovery%20%F0%9F%96%BC%EF%B8%8F%2024%20Get%20Creative%20by%20Starting%20Small%2033a5e2c909bb471e9acaeea29b9a35ca/no24cover-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%2Feac4b41b-b4ab-4606-b1d5-4c59370851a4_1075x693.png

img: sample of Saintjean


Font of the Week

This week, we focus on micro-scale things by tackling a single character: ampersand. What I am about to tell you next might make a good story for your next dinner party.

The ampersand symbol had been spotted first as anonymous graffiti in the ancient ruins of Pompeii. While the exact date of the sighting is unknown, we know the symbol’s appearance was a ligature, a character created from two or more letters joined together. In this case, it was “e” and “t” from the Latin word, “et”, meaning “and.”1 The appearance of “&” has not changed much since then.

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%2Fcfed758c-525b-4601-9010-ae800b6f2271_670x348.png

{img: graphic explaining how “&” come to be; source: wikipedia}

Why are we talking about this?

Today’s font, Saintjean, is unique because it is a font with only ampersands and, lots of them. It contains no other letters or characters.

That’s right. Any letters you press on your keyboard, you will get a different ampersand. Each ampersand is in a different style, so you can easily find one that matches the specific style you are looking for.

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%2Fe12fe5b1-b0f9-4d3d-9ddc-2e37c5f7602b_1576x1012.gif

{img: each letter is a different ampersand in Saintjean}

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%2F05578b26-af5b-4ce2-be5c-ef5a2d9d02ba_1075x693.png

{img: all the ampersands in the font, including letters, punctuation, numbers, and other characters. }

Why do I need this?

Creative hacks. Saintjean gives you more options when it comes to using ampersand. If you create a landing page or a logo with an ampersand, using a decorative, eye-catching ampersand can be a good tactic to get more attention. Also, if the ampersand in your current font is not to your liking, Saintjean is extremely handy. It offers you a fantastic little catalog of the ampersand to choose from. You can pick your unique toppings.

Here are some of my favorites from this collection. I also paired them with specific fonts to give you an idea of what you can do with them.

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%2Fedee5c91-335d-4528-aecf-a20aff81bf14_1074x693.png

img: left - Oregano with original ampersand; right - with a different ampersand from Saintjean

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%2Fe0751794-f038-4352-ad9d-ab1de771a7de_1074x693.png

img: This one I especially love (lowercase h ampersand). It’s a little illustration of an ampersand king giving away an ampersand, paired with the font Nunito.

Font Details

  • Features over 250 functional and decorative ampersands.
  • Each ampersand is unique and accessible by typing different letters.

Specific Usage Tips

How can I use it for logos?

Each ampersand is fun and communicates something different. Some are more illustrative and fun, some are more calligraphic and warm, and some are more suited for editorial. If you are choosing ampersands for your logo, you can either pick one that completely blends in or stands out. To blend in, you might want to choose a “&” that matches the thickness and contrast of your logo font so that things look balanced and consistent.

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%2F018cd8b7-383e-47e7-8ef0-477f14530adf_1075x693.png

img: one last example of the original ampersand being swapped out to a Saintjean ampersand. left - original; right – the Saintjean ampersand blends in because the strokes are consistent with the original font.

How can I use it for branding and marketing?

In a visual like social posts, playing with the scale of the ampersand can create the graphic punch. It adds extra flairs that attract attention to your message. Lastly, if you choose an illustrative ampersand, make sure it works on a smaller scale.

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%2F616bf2e0-a5df-407d-8bd2-673acde43be1_1074x693.png

img: if there is too much detail, the logo could break down


Design Idea of the Week

The Object Poster

Do you need a simple trick that makes any visual look good? *The object poster might be it. Sachplakat2,* or the object poster, was an idea that originated from Germany and became super popular in the design and advertising world in the early 20th Century. This type of poster, often featuring one central subject, uses scale to create drama, tension, and emphasis. The subject can be placed diagonally in the center, to keep the graphic interesting, help guide the viewer's eyes across the graphic.

Can your next marketing piece incorporate this idea?

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%2F7d56bfee-4d72-478e-9633-c09acc397c1e_713x529.png

img: object poster examples


Color Inspiration of the Week

The Colors of Legos

Continuing the theme of micro, we look at lego bricks this week. In this handy guide, the color palette of lego’s brick collection is organized based on rarity. If you love data and want to learn more about the specifics of lego colors, check out this fabulous article about the colors of lego bricks.

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%2Fbc098c0c-82c4-48a7-a9ef-771b82fc5c5f_1121x588.png

img: color palette of Lego’s brick collection; source: brickarchitect


Creative Prompt

Can you create a visual for Twitter or Instagram using Saintjean, poster object technique, or the color palette we featured today?

Thank you

…for reading and hanging out here this week! Saintjean 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%2F8e6fb5d5-e00f-4729-b8e9-897470458c58_1518x760.png

img: Saintjean infographic


If you enjoy this series, you can subscribe here:

Have more questions about design and fonts? Please email me or find me on Twitter at @HuaTweets. You can also read the past issues on Typogram's blog.

 
Share this