Finding the perfect fonts is both an art and a science, and the right fonts can really help your site stand out from the noise of a billion websites online today.
The 3 Big Font Mistakes
Let's kick off with the 3 big font mistakes that you need to avoid at all costs.
If you make these mistakes, people will land on your site and something will feel slightly "off" to them, whether they consciously know the reason or not. And because of that, they'll be much less inclined to want to do business with you.
Here they are:
- Using too many fonts. This is a mistake that creative people make all the time. The fact is that online, more fonts equal confusion not creativity. You need just 4 fonts for your entire site -- a headline font, a body text font, a button font (which is normally the same as your body text font), and another font for special occasions, or to draw attention.
- Using fonts that don't match your brand. If you're a law firm, you wouldn't use a flowy, spiritual-looking font. And similarly, if you're a healer, you probably wouldn't use really traditional blocky fonts that a bank might use.
- Using too many font sizes. In our experience, 6 headline sizes and 3 body font sizes give you 9 font sizes in total -- all of the flexibility you need to build a professional website that positions you well. In case you think that's not a lot, just take a look at Amazon. It's got a billion pages, but only 6 headline and 3 body text styles. So it's not about having a hundred sizes of text -- it's about using a great selection of them, consistently.
How to change your fonts in Heroic
Your Heroic starter site came with a beautiful font-palette already built in for you to use, so that's one thing you don't have to worry about. Your fonts are already beautiful. But what if one day you decide that you want to change things up and try some different fonts?
With any other platform, it's a long, tedious and time-consuming process. Hours of work.
But with Heroic, all I have to do is go to the Global Fonts page, and adjust the font there, and then the font adjustment just happens everywhere.
- Go to Global Styles
- Click on Header Styles
- Adjust your headline properties as you like. All changes made here will be reflected across your entire site
Font Pairings
If you're not sure which fonts to use, try our new Font Pairings feature. Simply click Global Styles in the left panel and look for Font Pairings at the bottom of the panel.
Here, you'll choose from our crafted Header and Paragraph pairings to instantly give your site a well-designed look and feel.
The 6 Global Headline Styles and What They're Used For
Website headlines come in six main sizes.
The largest (called "H1") is reserved for single use on any given page and gives Google the biggest clue about what to expect from a page. The next size down (called "H2") should be used as a sub-headline throughout your page, to indicate different sections or ideas.
The next size down (called "H3") is usually reserved for the rare case where a sub-sub-headline or sub-section divider is needed to help format and organize any given section.
The next three, H4, H5 and H6 are rarely used except for reference websites that need to go into many layers of hierarchy.
On this page you're able to control the format of any of your headlines throughout your entire site.
Making a "one-off" font or size change to a piece of text
We don't recommend making a headline or a text element a different size or font than your Global Font Styles, because consistent (and limited) font styles across your site help limit confusion, enhance your site's performance, and make your site look much more professional.
But sometimes you need to make a "one-off" update. For example, you might have a landing page that requires much larger text than the rest of your site, so it doesn't make sense to have that headline size as part of your Global Styles.
Or you might have an oversized headline on your home page, but nowhere else. Again, it might not make sense to have that headline size as part of your Global Font Styles.
If you need to make one piece of text in particular a different size or style than your Global Styles, here's how to do that.
- Select the text you wish to update
- Click the A icon
- Adjust your font or size as desired
