DAY 01 | EPISODE 01 | QUICK CLIP 07

STEP 5: CHOOSE FONTS

Paul Davenport

  Paul Davenport  |    04:44

Carefully selected Fonts can make impactful and sometimes dramatic influences on the way customers interpret your brand. Since Fonts can be slow to load, website designers try to use no more than two Typeface on a website, this is often know as a Font Pairing.

Here we give you a sample of Fonts to pair, then later today, in Episode 4, we give you hundreds of Fonts to choose from. We'll take a closer look into the types of things designers are looking for when choosing a Font Pair. We'll get our bots to sprinkle some magic on your chosen Font Pairing by getting them to do the hard work and optimise line height and letter spacing for your entire Palette of 25 Fonts Headings and Styles, that will be ready to use right around your website.

   AI Website Transcript 

"This is where we choose your first heading font. Heading fonts are similar to what you'd use in Microsoft Word or Google Docs and are essential for SEO. My recommendation is to opt for a more conservative header font for now. In a moment, we'll select a display font, which is more eye-catching. In this onboarding, you'll have just two fonts to work with, but after you sign up and in episode four (right after the Colors episode), we'll customize all your fonts. Our AI Website Bots will assist with everything, including line height and letter spacing, ensuring a consistent look across your site. This user-friendly approach makes it accessible even if you're not a designer.

Here's a sneak peek of what our AI Website Bots do—adjusting line height and letter spacing and applying it to all your fonts. This ensures they work seamlessly together, which is especially helpful when considering font pairings, something we'll cover in episode four.

Now, while we're here, I want to show you the Page Editor. All the fonts we design (which we'll do in episode four today) are locked down, just like the Colors. This is advantageous because a website often has various content editors, including those from different companies like marketing or content agencies. You don't want them messing up your brand guidelines by adding inappropriate colors or fonts. MOBLE's platform allows you to lock down the styles area and even permissions so that editors can only use what we design, ensuring your brand consistency.

I'll select 'Roboto Condensed' for now, knowing that I can update it properly in episode four, which is coming up soon. You can also look forward to another episode where I'll use AI to design a tourist events website. It will generate various images and showcase a font pairing with 'Philosopher' for the display font and 'Jost' for the heading font, a delightful combination you'll see more of in episode four.

Feel free to select any of these fonts; we've chosen a streamlined variety to keep you focused during this onboarding stage. I'll choose 'Roboto Condensed' and move on to the next step, which will give us a preview of how the website is coming together. You can see the heading font on the right, and we'll proceed to choose our display font. Let's hit 'Next' and make our display font selection.

For now, I'll choose 'Space Mono' to provide a quick preview. After hitting 'Preview,' you'll notice the updated display font, and you can see how it impacts the entire theme we're about to create. 'Anton' looks pretty good, but keep in mind it's not the final choice for episode four. Let's move forward."

Key Takeaways:

  1. Choose a conservative header font for now; a display font will be selected later.
  2. In episode four, customize all fonts with the help of AI Website Bots.
  3. AI Website Bots ensure font consistency across your site, saving time and effort.
  4. Fonts and colours are locked down to maintain brand guidelines.
  5. Upcoming episodes will explore font pairings and more font options for customization.

More Quick Clips