Tong Family

One thing that comes up a lot for me is starting new companies. We normally don’t have a lot of resources, so it is just me sitting starting at a new Google Doc, Google Slide or Hugo website template trying to figure out what fonts and treatments to use.

Finding Google Font equivalent to Brandon Grotesque: Cabin

Fortunately, many tools make this much easier, so here are the steps I usually take:

1. First, find a site or a treatment that you like or that your boss has said you should be looking at, so now your mission is to figure out the fonts and colors on that site.
2. You should download Fonts Ninja as a browser extension. Then go to a site you like, click on Fonts Ninja and it will give you the font name. In this particular case, let’s take Brandon Grotesque
3. Most of the time on good sites, they are using sites that cost money, so the next thing to do is to take the font they are using and figure out what a similar free Google Font is. You want to use Google Fonts because with things like Google Workspace, you can only use Google Fonts. So in our case we are looking for an analog. In this case, Typewolf is your friend if you are looking for alternatives. But if you do a Google search looking for Google fonts like Brandon Grotesque you get to Similarfont.io and you learn Brandon Groteque was created by Hannes von Dohren in 2009 inspired by the 1920s geometric sans-serif fonts and it tells you the most similar fonts are Cabin and Josefin Sans. I actually think Cabin is a good choice. There is no easy way to find a similar font, so I use Google-fu for this. And it’s nice the Rike Mahnke thinks the same thing.

Now find fonts to go with it: Serif Josefin Slab Medium

One of the things I learn along time ago was that typically you use Sans Serif for headlines and then serif fonts for the body text. So off to find a nice serif font that goes with Cabin:

1. This is another google-fu exercise, google fonts that work with Cabin is a good start. And I got another Typewolf that suggest Sabon and Typ.io suggests Raleway, Graphik, Arial, Arvo, Dancing Script and Josefin Slab. Also I saw a Figma post that suggest Ubuntu and Raleway. Then there is VEV Design that suggest Montserrat. Finally Many Pixels suggest Lobster which is a fun logo font combination. Lastly, I looked at Page Cloud which suggested PT Sans or Roboto Condensed for headlines with Cabin, the opposite of what I was looking for.
2. So then comes the exercise of getting out Google Docs and Slides and seeing what works, I looked at them all and Raleway actually does look nice although it is san serif font, the other one I like is Josefin Slab Medium adds a nice old look to your text while for a more modern look it is Raleway, Arvo and Arial look ok.

That wasn’t so hard was it.

Looking at Logos and special characters

OK, the next thing is sometime you want logo type, for instance and nice ampersand can look really good if distinct. In this case, you might find a logo which is an image so you can’t find the font type:

1. There are some great toolslike Font Squirrel but I had great luck with My Fonts, you just feed it an image URL, tell it where to look and you get matches.
2. It is hard to find an exact match, but Pinnacle JY Alternates Book is pretty close. Fulgora Biaco sort of leans the wrong way. FF Madona is closer but without the flourish. Jack Yan of New Zealand has this huge set of fonts by the way. Even using What Font Is doesn’t give very much.
3. I couldn’t find much on Pinnacle JY Alternates,but Pinnacle JY Pro I tried and then looked at similar fonts at WhatFontis, but this wasn’t much use.
4. So then I tried FF Madona free alternatives and this didn’t work.
5. So this was the hard part, look at all 1600 fonts and their ampersands, then try to find something similar with a nice flourish.
6. I came up with Logo font Pinnacle PY to Alic,e Playfair Display,, Niconne, Jim Nightsahde, Aref Ruqaa Ink and Gwendolyn. The closest to me looked like Alice so not exact but there you have it.

Getting the colors right with the color slurper

So now that the fonts are there, so go to Google Docs and then you can choose the color and the plus sign and pick the correct color from the other website.

Spacing and Kerning hacks

The last thing that professionals play is that they can set the letter spacing and sometimes they tighten and widen it. Note that this is different from kerning which is adjusting particular pairs of letters. There is no easy way to do this with Google Docs, so I just have to insert some small spacing between the letters with 12 points and then a spacing with 6 points in between them and you get a nice half space.

And there you have it, pretty close pretty quickly. Good enough with Google Docs anyway. With a website things are different with CSS but here’s a good hack for documents. Good luck!