8
0 Comments

FontDiscovery 🖼️ 19: Tips on using the Font EB Garamond

I am a designer and bootstrapping founder building Typogram, a brand design tool. As part of running Typogram, I create this weekly digestible visual guide with fonts, colors and design ideas to help founders, creators, and makers step up their game in branding and marketing.


Hi There 👋

How’s your week going so far? Last week was productive for me. I wrote a new post on the blog about visualizing ideas for branding. I also finally bought this video game on my wishlist. I ended up spending many hours last weekend playing it. I normally use the weekend to think up content ideas and work on writing, but it was a nice change. (I’ll probably spend more time on it this weekend...) I hope you have a wonderful week. Don’t forget to come up to the surface for some air 🧘

In This Issue

  • Fonts: EB Garamond, a classic font perfect for any layout
  • Design Idea: Ransom note!
  • Color Inspiration: Silver Cave in Guilin, China

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%2Fb1e126e6-0ba4-40fa-b6c7-47001a8c858f_1432x924.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%2Fd441647e-df34-48f3-81be-67a561b32f36_1074x693.png

img: sample of EB Garamond


Font of the Week

Defining a Style

While we don’t know when Claude Garamond was born (1), we do know that he created one of the most timeless, classic fonts that have ever existed: Garamond. Well-known for its grace and elegance, Garamond is one of the most popular fonts of all time. In fact, it was so popular that it became its own category: many similar-looking fonts created during that time were collectively Garamonds.  A staple for book covers, posters, it’s timeless and classic.

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%2Fe6b8b5fb-6bc9-49df-8ff3-37991e6c6b6b_1075x693.png

img: Different Garamonds created by different makers.  source: dailytypespecimen, wikiCommons

Can You Read the Problem

Garamond is considered an old-style serif. Typical characteristics of old-style serifs: Organic strokes, upright designs, and structures resembling handwriting with a pen.

Initially designed for print media, Garamond has excellent readability on books but is not well-adapted to screens. Garamond has a relatively small x-height ( height of the lowercase x). As a result, some white space of the letter becomes muddled and blurred out on screens.

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%2F074a4d77-6438-4021-a543-2d96339c35dc_1075x694.png

img: diagram showing x-height. The x-height of Garamond is significantly smaller than Helvetica at the same size

Enter EB Garamond

Just as people were desperately looking for a screen replacement, EB Garamond came to the rescue. A faithfully executed revival of the original Garamond, EB Garamond greatly improves the readability for screens at 12-point reading size while retaining elegance. Like Garamond, EB Garamond is an old-style serif with organic strokes and handwriting-like influence.

Font Details

  • Five weights, two styles (regular & italic)
  • Variable font format
  • It has small caps (Small caps are uppercase letterforms molded into lowercase sizing, making these special uppercase letters optimal for readability at small sizes. Small caps are used for captions or labels on websites.)

General Usage Tips

  • Many weights make it is easy to create more complex, dynamic layout for websites and books
  • Use small caps in designs with small size capital letters, like labels and captions

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%2F1d4ddfde-9132-410f-a7d9-9b86b0435e99_1572x1014.gif

img: gif illustrating how small cap is used

Specific Usage Tips

How to use it for logo?

  • Communicates classic, tradition, and grace
  • Perfect for publishing companies, or brands with a focus on editorial or tradition

How to use for marketing and branding?

  • Great for landing pages, editorial storytelling, books, or publishing projects
  • Distinctive italic style is perfect for emphasizing the message

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%2F096144fe-6921-42f5-b8ac-6011b61a35ff_1075x694.png

img: EB Garamond being used on internet.org (now archived), source: FontsinUse


Design/Marketing Idea of the Week

Ransom Notes

You are probably no stranger to this. A design tactic we see commonly used is the ransom note: a jumbled bunch of letters collaged together to produce a harsh mixture of voices meant to conceal the identity of the sender. With its roots back in the late 19th century (2), when printers mixed up different font styles on the same page, the ransom note has remained relevant in pop culture, even today, especially in the underground culture.

Is the ransom note tactic something you can use for your projects?

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%2F8f660a4e-19a2-4845-8795-0c6da7fbd4c6_1600x1282.jpeg

img: ransom note design being used as a cover for the Sex Pistols, a UK punk rock band, source: eli.com


Color Inspirations of the Week

Every week we feature beautiful photos from our subscribers and community! This week we have a funky palette from the Silver Cave, a Karst Cave in Guilin, China. Wenting is a UX designer based in New York City. Thanks for the photo, Wenting!

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%2Fc67ac668-36a0-4969-8cce-f3a972a96faf_1075x694.png

img: Silver Cave in Guilin, China. source: wentin

Interested in contributing an image? email me your image for a chance to be featured!


Creative Prompt

Can you create a Twitter visual with EB Garamond, ransom note, and the color palette from this week?

Thank you

…for reading and hanging out here this week! EB Garamond 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%2F1b0846f0-462e-45cc-b1f3-729fab861232_1519x759.png

img: simple infographic of EB Garamond


I share tips like these every week. If you like this series, you can subscribe here. You can also read previous issues on Typogram's blog.

Have more questions about design and fonts? Please email me at [email protected] or find me on Twitter at @HuaTweets.


Sources:

  1. https://en.wikipedia.org/wiki/Claude_Garamond
  2. Heller, Steven. 100 Ideas that Changed Graphic Design.
Trending on Indie Hackers
After many failed product attempts I bootstrapped a file uploading service to 1K MRR in 6 months - AMA! 50 comments Twitter 101 for Indie Hackers 17 comments Do you crosspost your articles on multiple platforms? 11 comments Catching up to my main competitor Veed 10 comments I've teased this project for a while. Initial thoughts on this landing page? 7 comments I built an NFT Guide site. Feedback welcome! 7 comments