What the Font?! My Five Fave Font Sites

Photo by Raphael Schaller on Unsplash

What the Font?! My Five Fave Font Sites

Sites to make your words look pretty

Christine LuBean's photo
Christine LuBean
·Sep 20, 2022·

4 min read

Subscribe to our newsletter and never miss any upcoming articles

Today, I’m going to be sharing the sites I use to select fonts for my websites and other projects, as well as one site I use to make sure my font sizes work for responsive designs and accessibility.

Font Resources for Your Next Project

1. Fontjoy

Fontjoy is one of my most used tools for web design. This site generates font pairs through machine learning, assisting you in selecting typography that matches your brand identity. The best part is you can lock-in the fonts you like and then continue generating different fonts until you find a pair that works well together.

https://fontjoy.com/

2. fontpair

If you’re worried you don’t have a designer's eye to pick fonts that look well together, so the first site I linked isn’t something you’ll use, try out fontpair. This site has hundreds of font pairings from Google Fonts that look great when used together. You can look for a specific font to see what works well with it, or you can browse through the categories until you find a pairing that works for your project.

https://www.fontpair.co/

3. Font Squirrel Font Identifier

Sometimes I see a font when browsing the internet that would work perfectly for one of my designs. Sure, you could use the WhatFont chrome extension to discover what the font is, but if the font is in an image, the extension won’t work. That’s when Font Squirrel’s Font Identifier comes in. You upload the image, and run the matcherator. It’s not perfect, so you might not find an exact match, but it will give you fonts that are similar. I also use it to find free fonts alternatives if the font I want to identify ends up being a pricey paid font.

https://www.fontsquirrel.com/matcherator

4. coolLabs Fonts

Most of the fonts I use end up being from Google Fonts. I like how simple they are to use—just select the fonts, copy the html that links to the font stylesheets, and then add the font-family property with the font’s name.

The one thing I don’t like about Google Fonts is the fact that Google isn’t so privacy friendly, since their business model is to give out free things in exchange for data analytics it can sell to companies.

coolLabs is an alternative to using the Google Fonts stylesheets, and it’s main focus is to be privacy-friendly. It’s also really easy to implement through changing part of the Google Font API URL to coolLab’s API URL. Everything else works the same, so you can still use Google Fonts without giving Google your information.

https://fonts.coollabs.io/

5. Fluid Type Scale

I LOVE fluid typography, and clamp() is probably my favorite CSS function to use out of all the functions available. Watching the font size scale with the viewport changing sizes is so satisfying.

Another great thing about clamp is as long as you don’t set a fixed font base size, it still works and looks great no matter how large the user increases their font size. I like to set my base font size as 62.5%, as the default browser font size is 16px. This keeps the font scalable, but it also helps with making rems and ems easier to understand since you’re multiplying with 10s rather than 16s.

Clamp() can be tricky to use, though. So I like to use a generator to eliminate figuring out exactly how to get the sizes I want. There are plenty of generators online to help with this, but I prefer Fluid Type Scale because from the ones I’ve used, it’s the most versatile. You can set your base font size, choose which viewport sizes you want to the font to scale with, and you get to see how it looks in the font of your choice. Once you’re happy, you can copy the CSS variables it automatically generates for you. It’s super simple to use, so this is definitely a tool you’ll want to add to your web development toolbox.

https://www.fluid-type-scale.com/


That’s it for today’s recommended font bookmarks. Keep your eye out for my next issue on Monday next week! If you use any of these sites, feel free to let me know what you think.

And if you like what I’ve shared, please give me a subscribe and/or share this newsletter with your friends. I love sharing all the cool things I find on the internet, and I’d be very grateful if you can help me find more readers to share my discoveries with.

Until next time!

Christine “Banana” LuBean


Thanks for reading Banana's Bookmarks! Subscribe for free to receive new posts and support my work.

 
Share this