This post is part of our Summer of AI Fun series, where we bring you our favourite FUN AI-powered sites and resources! Every site is FREE to use with no account needed!
We’ve already witnessed AI generate and improve the text content of WordPress pages, but can it help by offering assistance with visual styling? Font selection, and in particular using a group or ‘family’ of complementary fonts is an important aspect of page design – Fontjoy can help!
FontJoy.com
The fontjoy homepage shows a large default heading, a medium heading and two paragraphs of text. On the left you can see the names of the three fonts used.
How to use fontjoy
1: Start by editing the default text on the homepage to be something related to your site or the document you’re going to create. We’ve added introductory information about this summer of AI Fun series. Next, click the GENERATE button to update the set of fonts used. The site uses machine learning to suggest three individual fonts that will ‘complement’ each other:
2: Click GENERATE again to replace all three of the suggested fonts, until you’re happy. Here are additional results returned for our example:
3: If you like one of the fonts returned (but not the others), LOCK the one you like by clicking the lock icon on the left. Here we’ve locked the ‘passion one’ large heading font. Now when the GENERATE button is pressed, only the unlocked fonts are updated, to complement the locked font:
4: If you find one of the fonts is ‘close; to what you’re looking for, but not quite right, click the setting slider icon next to the lock icon. Our medium heading font is currently ‘libre franklin’ – Here are the visually similar fonts suggested when clicking ‘settings’. The page shows the most visually similar at top left:
5: We’ve arrived at a set of three fonts we’re happy with:
6: To create a font set with more visual contrast, move the ‘contrast slider’ at the top of the page towards the right then click GENERATE. Below, we’ve asked for a paragraph font that contrasts more with the currently locked heading fonts:
7: In the same way, move the contrast slider to the left if you’d like the fonts to contrast less with each other:
Enjoy playing with fontjoy!
The art of typography is exactly that. For a short introduction, try this video:
For a full, detailed introduction to typography, try this FREE YouTube course:
——————
This post is part of our Summer of AI Fun series. Watch for more throughout July and August!