Fonts
DIY Branding ②
✧ 5 min read ✦
People who ☯︎ “do the work” ☯︎ when it comes to their branding reap the benefits (read: sales, traffic, generally being inspiring). Worst case? You don’t do it yourself, but you at least understand wtf your hired design help is talking about.
Ok ⏤ Let’s do this ✓
Cool brands use cool fonts, imo.
Most people who find themselves on my website are partial to an eye-catching font that makes you say “ooft, bold, but it just *works*”. Even if you end up with a fairly safe choice, I’ll lay out how to make it designer-y.
Today I’m going to use Kin Euphorics → as a case study example for my points.
Onward! ↓
① Identifying fonts you like
Odds are, you’ve seen a brand or website(s) who’s fonts you just DIG. For me? Kin Euphorics → was one that I swooned over.
When it comes to fonts and DIY branding, I think copycatting the pairings is actually fine. If you were planning to go down the path of stealing their whole aesthetic? Not so much.
So how did I find out what font they’re using?
I could have used any of the following:
¹ Taken a screenshot and dropped it into WhatTheFont →
² Utilised this easy Chrome extension →
³ or by using the built-in Chrome inspector →
I figured out it’s called ‘Ogg’ by Sharp Type. Pretty, huh?
② Premium vs. free fonts
When I say free fonts, I usually mean Google Fonts or your run-of-the-mill web fonts like Arial, Helvetica, etc. By premium, I mean ones you pay for on Creative Market 🔗 →, MyFonts 🔗 → or get as part of your subscription to Adobe Fonts 🔗 → (formerly Typekit).
If you use something like Squarespace, you have the benefit of the whole catalog of Adobe Fonts 🔗 → to use freely, which is super cool.
Everyone can access Google Fonts easily. Often with a Squarespace site for example, the thing that makes it look ‘template-y’ is that most themes use the classic thin Helvetica font. It’s saturated.
Hot Tip ☟
If you go with a premium font, however, it’s important to establish what fonts you’ll use when you can use a custom one, like on your Flodesk emails, your mobile phone apps to create stories or even your emails from Gmail.
For example 〰 if your heading font is Acumin Pro Wide Extra Bold/800, then you might decide that on your Flodesk emails 🔗 → you’ll use Titling Gothic Extra Bold and on your Gmail you’ll use Arial Black.
If your font is on Typewolf 🔗 →, often he’ll suggest the nearest match on both Adobe Fonts and Google Fonts.
③ Uh-oh, the font I’ve found is expensive
So Kin Euphorics use a veeeeery trendy designer font called 'Ogg' by Sharp Type → that’s had lots of attention from designers and blogs. As your web designer, I’d recommend you went for the regular+italic and webfont+desktop font combo, which would clock in at around US$200-400.
If you’re head over heels with it, you might just bite the bullet and get it.
For most of the solopreneurs and startups I work for, the bottom line is important and you’re open to alternatives. So, most fonts I recommend to clients cost no more than $20 on Creative Market and you get the font file for your computer.
Have a scroll on the popular fonts on Creative Market and see what you find that comes close. I actually typed in “Ogg” into the search, and some clever cookies have obviously put the keyword into their product descriptions.
④ Font contrast: size matters, sorry
Being brave really pays off here. It can feel dramatic to bump up your heading sizes, but it really helps the people looking at your website (or any other designed content) to focus their eyes.
By making your headings unignorable, people will actually read them and then they’re more likely to read the smaller text below it.
Contrast is one of the 7 principles of design 🔗 → and something I think about a tonne. It’s also trending in web design 🔗 → as we move more and more towards mobile-first design (and being friendly to clumsy thumbs).
⑤ My Pinterest board of my fav 100+ fonts
Sometimes the best thing to do is save ❉ all the things ❉ that your eyes love and see them at a glance. Not sure where to start? I also love websites like Typewolf 🔗 → or Fonts In Use 🔗 →
Next up:
Design elements! Think borders, patterns, illustrations and that kinda thing. Seeya then.
S.O.S: Help me, Katie
If you’re feeling out of your depth when it comes to branding, your website, or bringing it all together, my 1:1 options may help: