About CheckFont

Why I built this tool

I wanted a faster, more intuitive way to preview fonts throughout a website without manually tweaking settings in Figma or a site builder. That’s where this tool comes in. Now, you can pick your heading and body fonts, choose a color scheme, and instantly see how everything looks in a variety of commonly used website sections. This means less guesswork, fewer back-and-forth iterations, and more time to focus on the creative aspects of your work.

How it works

I have tried to keep this tool super simple to use while allowing enough functionality to enable quick, solid font decisions. On each page you will see a set of low-fidelity website section layouts. These layouts will have your current font and color scheme settings applied to them. You can change these settings using the toolbar.

The toolbar

You can select your chosen fonts and color scheme using the bottom toolbar, which is present on all pages that have layout previews available.

Selecting fonts

The 'Heading' and 'Body' pills show the fonts that are currently being applied to heading and body text on website element previews on the site. Clicking on either of these will open up a modal where you can change these settings. This modal allows you to search for specific Google Fonts, browse fonts by category as well as change line height and letter spacing values applied to heading or body elements in your layout previews. The small arrow buttons link to the actual Google Font page for the currently selected font.

Setting color scheme

On the far right of the toolbar you will see a small button with the text 'Aa' within it. This shows you the current background & font color combination applied to preview elements. Clicking on this will open up a modal where you can change your color settings. You will be able to choose from a list of font/background color combination presets or set your colors manually if you wish to do so.

Resetting your settings

If you wish to reset your font and/or color settings, you can do so in one click using the reset buttons to the right of the toolbar. The top one will reset your font settings and the bottom one will reset your color scheme.

Setting are saved automatically

Any changes you make to your both your font and color scheme settings are automatically saved and applied to when you load a new page. This allows you to browse multiple layout preview categories without having to reapply your settings every time you load a new page.

Upcoming updates

I plan on consistently adding new content and features to this tool to further improve your ability to efficiently test different fonts for your web and UI designs. Currently, the list of upcoming additions includes:

• Adding more layouts to existing website element categories as well as adding new categories
• Adding a 'Text size' scaling feature that would allow users to adjust the size of heading and body elements on website element previews
• Improving the mobile experience as much as possible

‍

If you have any suggestion for how I could improve this tool, or notice any issues with its current functionality, I would love to hear from you. Please feel free to reach out at hello@adrianraath.com