A great design starts with the right font and the right colours, but free doesn't always mean free to use. Here are 11 free font and colour tools designers use, with the licence facts you need before you download anything.
Chapters: 0:00 Intro 0:22 1. Google Fonts: open source fonts 0:48 2. Fontjoy: generate font pairings 1:12 3. Typewolf: best free Google Fonts 1:33 4. Font Squirrel: fonts for commercial work 1:54 5. DaFont: browse by theme, check the licence 2:18 6. Fontsource: self host fonts with npm 2:38 7. Color Hunt: hand picked palettes 2:58 8. Adobe Color: build palettes and check contrast 3:17 9. ColorSpace: palettes from one colour 3:32 10. CSS Gradient: make gradients and copy the code 3:49 11. Realtime Colors: test colours and fonts together 4:08 4 tips to use these tools like a pro 4:38 Wrap-up
Notes: - Free to download is not always free for commercial use. Check the licence of the exact font you choose, every time. - Keep a note of where each font came from. - Pair a heading font with a body font, and keep it to two fonts. - Try the 60-30-10 rule: 60% main colour, 30% secondary, 10% accent.
This video is general information, not legal advice.
Which tool will you try first? Tell me in the comments.
This video introduces 11 free tools for selecting fonts and colors in design, emphasizing the critical importance of checking licenses to ensure fonts are free for commercial use rather than just personal projects. It provides a curated list of resources for designers and developers to create professional visual identities.
A great design starts with the right font and the right colors,
but free does not always mean free
to use. Some fonts are only free for personal projects,
and using them in a video or a client
project can cause problems.
So here are 11 free font and color tools that designers use,
with the license facts you need before you download anything.
Number one, Google Fonts.
Its FAQ says all Google fonts are open source and without cost.
And that you can use them commercially even inside
a product that is sold.
You can use them in a logo too.
The most common license is the SIL Open Font license.
Type your own preview text, filter by language, and pick a family.
If you only remember one site for fonts, make it this one.
Number 2. FontJoy.
Hit generate, and it suggests a font pairing
for your headline and your body text.
The site says it uses a neural net to make the pairs.
Lock the font you like, then keep generating until the others fit.
The text is editable, so try your own brand name.
FontJoy shows the font names,
so check each font license before you use it.
Number 3.
TypeWolf Not sure which fonts to pick?
TypeWolf lists the 40 best free fonts on Google Fonts,
in the author's opinion.
It says they are all open source and free for commercial use.
A star marks the families that are friendly for body text,
and the free fonts guide has
recommended pairings, so you do not have to guess.
Number 4, FontSquirrel.
Its whole idea is handpicked free fonts
that are licensed for commercial work.
Some downloads are marked off-site,
which means the font is hosted elsewhere.
There is a license filter on the site
and a web font generator tool in the menu.
Even here, read the license of the exact font you choose.
Number 5.
Da Font
Browse by theme, like script, retro, and horror.
Number 5.
Da Font
But look at the labels.
Some fonts say 100% free, and others say free for personal use.
The font's own FAQ says the license shown is just an indication.
So read the README file or ask the author.
And if no license is listed, that does not mean the font is free.
Number 6.
Font Source.
This one is for web developers.
It packages open source fonts as npm packages so you can
self host them. For example,
one npm install command adds a font to your project. The site
has a preview field where you type your own sentence
and a filter for variable fonts.
Now Colors.
Number 7.
Color Hunt.
It shows handpicked palettes of 4 colors which you can sort as New,
Popular or Random, filter
by color or by tags like Pastel, Retro, Neon and Night.
Hover over a color to see its hex code.
Color Hunt is made by Galsheer and it has a Chrome extension too.
Number 8.
Adobe Color.
Pick a base color, choose a harmony like complementary or triadic,
and it builds a balanced palette.
You can upload an image to extract its colors,
and there is a contrast checker and a color brightness preview.
You can build palettes right on the page
and saving them goes to your Adobe library.
Number nine, color space.
Just enter one color and it generates palettes around it.
There is also a gradient tool
and a newer option that builds a gradient from three colors.
It is a quick way to turn a single brand color into a full set.
10. CSS Gradient
Pick your colors, add stops, switch between linear and radial,
and copy the CSS code with one click.
The site describes itself as a way
to create free gradient backgrounds for your website.
There is even a maximum compatibility option for very old browsers.
Number 11. Real-time colors. The best way to test everything together.
Set your text, background, primary, secondary and accent colors.
Choose fonts for headings and body
and see them on a real-looking website instantly.
The site says it is free forever and you can export to CSS,
Tailwind or SCSS.
Four tips to use these rules like a pro.
1. Pair a heading font with a body font and keep it to two fonts.
Check your contrast so text is easy to read on its background.
Adobe Color has a contrast checker.
3. Try the 60-30-10 rule.
60% main color, 30% secondary, and 10% accent.
And 4. Check the license before you download.
And keep a note of where each font came from.
That is 11 free font and color tools.
Remember, free to download is not always free for commercial use.
So check the license every time.
Save this video for later and tell me in the comments
which tool you will try first.
See you in the next one.
