Find Perfect Font Pairings with this Web Font Generator

Text plays a big role in quality design. This definitely includes the web where typography affects readability. With the rise of webfonts it’s easier than ever to vary your page text and stand out from the masses.

If you can find the perfect font combos for your headers, page text, navigation, and other areas then you’ll be close to a great layout design.

Brandmark created this font generator as a free tool to help designers match typefaces. It runs in any browser and lets you pick from all of Google’s 500+ free fonts.

Read Also: 15 Best Font Pairing Tools for Designers

Here’s how it works: you select from three different types of font and change their size + style using the dropdown menus. These three font styles work as such:

• Title font – the main headline on the page.
• Accent font – a supplemental font for smaller features like pull quotes, subheadings, datetimes, etc.
• Body font – the font used for all the paragraphs and main page content.

Each font links out to the main Google Webfonts page where you can grab the CSS code to have your fonts embedded into any page. Easy. But this tool gets a lot more complex when you have hundreds of fonts to pick from!

Web typography has changed a lot over the years. Now with web fonts you can easily match typefaces to blend with your brand and your layout design.

With this tool, you can choose to compare certain default fonts and font variations you want to test against. This way you can decide with clarity which heading font will look best on your new blog.

My only complaint though, the page loads pretty darn slow.

Although it’s technically loading 500+ Google Webfonts together on the same page. No way that’s gonna be quick.

But aside from that, I have to say Brandmark made an excellent tool for web designers. Worth a test if you aren’t sure where to start with fonts for your newest project.