A plea to graphic designers, brand agencies and the ilk. Please consider the web when you choose your font and your colours. Why is it in 2022 that the web is still an afterthought?
Too often, I have seen a style guide or brand package delivered with some obscure font – that you guessed it – does not readily come with a google font or adobe web font easily accessible.
Same for colours – A focus on PMS, CMYK, no mention of Hex colour profiles. Not that big a deal; I can find that out but shouldn’t it be part of the guide?
Then I have to tell my client that I’ll have to find the closest match for their brand font. You see, often, these obscure fonts come with a web-specific license that hasn’t been paid for, and that is outside of their budget for a website.
SO WHAT DO WE DO?
At our end – as the web designers – we’re fortunate to have a large selection of options available through google fonts and adobe fonts to find a suitable match. We also have access to fonts via our Envato Elements subscription.
After searching all of the above for the named font and finding no direct match, I then use Adobe Fonts to search by image. It saves a lot of time compared with scanning visually for matching serifs and unique identifiers. Here’s how simple it is:
(slider with examples below)
1. We start with an image with the font we want to match. Try to find an example with many different letters, especially vowels and letters with specifically different identifiers you want to keep. V, M, W, G, O are examples of common letters with differences you want to look for.
2. Upload your image by clicking Search by image under the search field.
3. Once uploaded, you need to select a line of text for Adobe to check against.
4. Now, Adobe will ask you to check the spelling. It got it wrong for me on the example below, but you simply correct that and proceed.
5. Now Adobe fonts throws up fonts it thinks are a match. And sometimes, especially given a font like the handwritten one below, it may be more about feel than accuracy. And sometimes, you may need a variety of font weights for your web project, which is also a consideration when choosing a match.
6. Here, I’ve selected the ones I want, and I simply activate the fonts I want on the right, visit the font family and activate them in my web project to come in via my Astra Pro adobe fonts add on – More on that another time.
This font wasn’t a great match, but it will do for my purposes. Many other fonts I have tried to match have had greater success.
As always, I hope you find this somewhat helpful. And designers, if there is a logical reason you don’t choose compatible fonts for the web, can you let me know. I’m super curious.
Previous
Next
