Picking the Perfect Font
Copy is 50% if not more of your website. But how do you choose the right font for your design?
Also, if you’re unfamiliar with typography terms, check out this article.
1. What is the tone you want to set?
“Identify the feeling you want the brand to convey. A great brand communicates on an emotional wavelength, so make that feeling your bedrock.”
Often time, visual designers find it easier to find the right photos (or even colors) to set the tone. So let’s start there to inform how you will pick your fonts.
If you have a moodboard of images (or the actual images), add 1-3 to your Style Tiles.
Of those images, which image would you use for the homepage image? That one image is going to set the tone of the website.
How does that image match the message or purpose of the design? Why did you pick it? Design can also be defined by what it is not. What did that one image have that the others didn’t? Like Gene Wilder of Willy Wonka says, “Strike that. Reverse it.”
Every typeface has its own personality. Maybe it’s serious, casual, minimalist, playful, artistic, or elegant. Imagine that you are describing the image to me and explain why you picked it. Then pick 1-3 qualities or characteristics that this image has.
Who will be looking at this website? Are they older or younger? How does the image you pick make them feel? Do they need to feel like they are in an art gallery or a fun design studio?
Your homework:
Select 1-3 images for your design.
Pick 1 image that would be used for your homepage.
Why did you pick that image? Define 1-3 qualities or characteristics of the photo.
Who is looking at the website? How do they need to feel?
2. Typeface Research
Typeface is the design and font is a specific size and style of a typeface. I’m a digital girl so I always say font, heh. This paragraph typeface is Suisse and the font is Suisse normal 18px 100 weight -.02em letter-spacing with 1.4em line-height. In CSS it would read:
font-family: 'SuisseRegular'; font-style: normal; font-size: 18px; font-weight: 100; letter-spacing: -.02em; line-height: 1.4em;
Before picking the font and font styles, you’ll need to find a few typefaces to experiment with. I probably spend just as much time (if not more) picking the right font per project as picking the right images. I encourage you, if you haven’t done this before, to spend at least an hour researching fonts... per project! As you start developing your style, you’ll probably have a few go-to’s that define your style.
My Research:
Check out WordMark.it it takes all of your fonts on your computer and then shows it to you on one page.
How to download fonts from MOST websites but promise you will purchase the font if you use it!
Internet Gems on ilovecreatives is officially my go-to now! We document all the fonts and you can click on the fonts to view more of them.
Typewolf - Go down rabbit holes, click on similar fonts, suggested font pairings.
The Definitive Guide to Free Fonts and Guide to Typekit is worth the investment. I’ve used these PDFs (updated regularly) on almost every project. Often times, I’ll purchase a font, but sometimes there’s an alternative that works. Picking typefaces using the Squarespace Style Editor is one of the most frustrating ways to find fonts. Sometimes I’ll go through it, but I find using these PDFs is way easier.
Siteinspire - Click-through to the websites and inspect the font styles!
Pinterest - Pinterest is a great place to look for print layouts. I find a lot of inspiration from print, here is my layout board. Check out the video called Finding Inspo on how I use Pinterest to search for vintage magazine layouts.
Gabriel suggested this Instagram account called @type__type.
During your research, take screenshots of the fonts in layout and the CSS font styles. Think about how you would use the font in your layout. Squarespace organizes text into categories like Body Text, Navigation, and Headings (1, 2, and 3). Just because there are multiple categories, doesn’t mean you have to have a different font for each. Sometimes, my typeface is the same for everything, but I use different font styles.
If you have Figma (which if you are serious about freelancing, this is a must in your toolkit), start adding your screenshots into a document.
Your homework:
Start the clock for 30 minutes. Go for an hour to really dig deep.
Find 3-10 typefaces that you would like to use.
Take screenshots of them.
Download the trials or fonts.*
3. Play Time!
Before I start playing with fonts, I typically have an idea of what the content and copy will be. This is where the Site & Content Inventory page helps. If your client hasn’t given you copy, please refrain from using Lorem Ipsum. Even if you think “I’m not a copywriter” — please just try! Or shoot, use Chat GPT 😅. Typography, especially for headlines, is so much more impactful when you use real sentiment.
When I play, I start with the homepage. Is there a logo? Typically Squarespace clients use a type-based logo and I think it’s the easiest place to start. What is in the nav? Is there a tagline or header text to help the user understand what the site is all about? What is the body copy?
Once you have these homepage elements, place them in a Figma. Don’t worry too much about the rest of the homepage yet, just start with the top. The first thing the user will see. If it’s a minimal site, then feel free to add a few more elements of the homepage.
Your homework:
Start the clock for 30 minutes. Go longer for an hour if you need it.
Play with different font combinations in your Style Tiles. Tweak all the variants of that typeface (size, weight, letter-spacing, line-height, color).
Create multiple comps of the variations because honestly who can remember all of the different combinations?
Pick the fonts that you think will look best. Add your progress to Discord and get feedback from the community.
4. Tweaking Fonts
Once you have a good idea of which fonts you want to use, you can start adding them to the site. I would like to note that I will often change the fonts when I’m in Squarespace. Sometimes, I’ll even go through another research and play phase if I don’t feel like it’s quite there.
Your homework:
Remember this guy? Just copy and paste the text: www.ilovecreatives.com/style-guide 😉 .
If your fonts are custom, here’s how to install custom fonts.
Once your fonts are added, start playing again!
Finding the right fonts is part of the design process. It’s not easy and it deserves your time. Take advantage of Discord and get feedback. It’s the fastest way to learn!
5. Build your Typography Style
I’m completely self-taught so it’s hard to for me throw out typographic jargon to communicate how I pick fonts. What I have noticed is that I’ve subconsciously created guidelines that define my typographic style, which inherently is a reflection of my design style.
You’ll begin adding guidelines to your own typographic style as you progress as a designer. Typewolf takes this really far with his Checklist. Not everyone is going to have the same checklist and sometimes the rules change based on the project or where you are as a designer. Design is subjective after all!
Here are some examples of my Typography Guidelines. I typically follow these, but there are always exceptions. Also, these are just my personal opinions, this doesn’t mean I’m suggesting you follow mine!
Avoid looking like a Squarespace Template since most of my clients are sensitive to this:
Try not to use Bold Futura All Caps
Try not to use Karla
Buy, ahem INVEST in fonts!
Be extreme with font sizes: 12px for H3 or 40-60px for H1
Stick to mono-color fonts unless there’s a damn good reason to add more.
Have a good amount of margin/padding around paragraphs.
Don’t use all lowercase characters, it looks childish.
It’s OK to use the same fonts all the time.
Stick to 1-2 fonts per website.
If you’re over a font, try playing with font styles to re-energize it! That’s what we did with Romana.