This guide will help make the quotes or words in your gifs consistent, harmonious, and most of all — pretty!
How will you know which fonts work well together and which ones don't?
↓ FIND OUT HOW TO PAIR FONTS UNDER THE CUT ↓
If any of you might notice, I know I've discussed the difference between fonts and typefaces in this post, but for this one, I'll just use the term 'font' even if I probably meant typeface so nobody come for me please 😂
Kinds of Fonts
Before we dive in and start downloading fonts, let's first discuss the kinds of fonts, starting with these two:
Serifs have serifs.
A serif is a small line attached to the end of a bigger line in a letter or symbol. Think Times New Roman, Baskerville, and Didot.
Sans Serifs have no serifs.
‘Sans’ is old French for 'without’. So, sans serif means without serifs. Think Arial, Century Gothic and Comic Sans.
NOTE: There are a variety of styles under serif and sans serifs, but this guide (hopefully) won't dive in too deep. This is just a tiny guide that will help you make prettier gifs. ✨
Script
Script fonts are the ones that are cursive or in longhand. They often look handwritten with a brush.
TIP: Script is best used for headers (big text). Avoid using them as body text (small text) or in long sentences and paragraphs because it won't be very readable.
〰️
Each of the following tips will help add contrast, create consistency and establish harmony in your font pairings.
[1] Limit the # of styles
Don't use too many fonts. Fonts are like introverts. They work best with just a friend or 2 😂
This would also depend on the style, which will be explained in the next tip.
[2] Opposites attract
Don't pair fonts with similar styles like this:
❌ Century Gothic + Montserrat are both Sans Serifs.
❌ Baskerville + Didot are Serifs.
❌ Lavanderia + Bakery are Script fonts.
Even if both fonts look good individually, it just wouldn't work.
It's like if two of the most beautiful people in the world became a couple. They both look good, but their beauty is overpowering each other. There has to be a balance, you know?
Do pair different styles instead:
[3] Avoid conflict
This tip is similar to [2].
Don't:
❌ pair similar font styles
❌ pair an attention-grabbing font with another attention-grabbing font
❌ pair distinctive fonts together such as these:
Notice how they would both keep fighting for the spotlight, destroying the harmony of your texts.
Do pair a distinctive font with a neutral font, like this:
[4] Sans Serif + anything but Sans Serif
Here's a fun tip: When you're too lazy to think about what to pair your serif / decorative / script font with, just pair it with a clean sans serif font. It's what I did in the Do examples in [2] and [3] if you haven't noticed 😂
[5] Pair a font with itself
Opposites attract, and it works with just one font family as well! Play with a single font family's weight and styles.
Do pair a thick sans serif font with its lighter relative (as seen below: Montserrat Bold + Montserrat Light).
Do pair a regular serif font with its italic sibling (as seen below: Baskerville Italic + Baskerville Bold).
TIP: Play with the tracking (letter spacing) and capitalization (lower or uppercase) too. See Montserrat Bold and Baskerville Bold above.
I prefer to increase the tracking whenever the text is bold and/or in all caps to make it easier to read.
[6] Don't mix moods
Fonts have moods. They have traits (i.e. loud, friendly, trendy, timeless). They can be used to convey feelings (i.e. happy, sad).
For example, avoid pairings such as this:
There is nothing about the two fonts above that unite them. They have different vibes — nothing in common.
Though mixing personalities work in friend groups, it doesn't work very much with fonts.
〰️
With all that said, I know some of the tips might contradict each other, and some probably won't always work. It all depends on the font. Just see what looks good to you, and if you're unsure, then come back to this post :)
Please like/reblog if this has helped you and feel free to hit me up for any questions and concerns! ♥︎
〰️
REFERENCES:
reuxdesignco
visme
undullify
FREE FONT SOURCES:
Google Fonts
Open Foundry
awwwards.
Font Squirrel
dafont
