We’ve all been there – whether you’ve just had a copywriter come in to re-create all of your copywriting on your website, or if you’re just a huge talent and can write it yourself, you’re at a crossroads with how to emphasize text without swaying from your font hierarchy.
This blogpost is coming from the bottom of my heart – we’ve noticed a lot of individuals recently searching for different ways to place emphasis on certain text and/or paragraphs within their PDFs or other branded collateral and on their website design. Let’s start off with what the solution is NOT:
Making your text bigger is the default go-to when you want to place emphasis on something you’ve said and want someone to read more of. Understandable, right? Yes, makes total sense!
But in the design-world, this isn’t the right way to go about it. Here’s what actually happens when you decide to increase the font size of one area (or paragraph) within a document or website:
Based on this article written in 2014, people read websites in three different ways:
When your font size is larger than other elements or outside of the font hierarchy (i.e. making a paragraph font your largest when this should be your heading), you are breaking these three ways of reading websites because it creates less horizontal space and distracts the readers train of thought.
Attached below is an example font hierarchy we provide to our branding clients. Although not to scale in this document, this outline is supposed to show you how each font is supposed to be sized in order to create emphasis with your text.
Your main header should be your biggest font on your website or documents. This font is served as your most important, main heading text. This is what most copywriters would tag as an <h1> for your SEO. Our eyes are drawn to larger text, so it makes sense that the main heading would be the largest.
Your second largest font should be your subheading. This serves as “supplemental” information to your main heading. So, it’s not as important, thus, it shouldn’t be as big.
Lastly, is your paragraph or body font. This will be your smallest text because it’s likely going to also contain the most. This is super important when speaking on font sizing in documents or website – the more text you are going to have = the smaller the font basis should be. Here’s what I mean by that:
This is a snippet from our about page. Our main heading is most important, so we used the biggest font to indicate this section is about “meeting the team”.
The supplemental information to “meeting the team” is who we are meeting – thus, my name (Chloe Thomas) is written in our subheading font, along with my title at Chloe Creative.
Lastly, we have the most text, which is all about me and my bio. This is in our paragraph font because hence the length, there would be paragraphs of information. If this text were in our main heading font, it would be way too large, span most of the screen, and be incredibly hard to read.
Another default mechanism of placing emphasis on your internal content is to insert a new font. Most of the time, this is a script font, that individuals suggest. In some font hierarchy’s, script fonts make sense because it complements your brand suite. In some other cases, it may defer away from your brand and cause distraction.
Whichever scenario your brand falls in, it’s important to never add a new font that is outside of your font hierarchy. Here’s what I mean:
Using the same font example from above, the fonts are as follows:
When wanting to place emphasis, we’d recommend to not add in an additional font outside of the above, such as Playfair Display Bold. We don’t recommend this tactic because it causes brand inconsistency, and disconnect. As much as it seems unimportant, fonts have a large connection between. We love this simple article that uses some popular brands to deem the importance.
So, what should you do instead?
If you feel like something isn’t highlighted enough or given the emphasis you desired, consider changing the layout of the design before anything else.
This essentially is what user experience is all about: making users go toward or interact with certain content based on the user journey. In this case, we’d likely change the section design to place more importance on the text desired, or if a branded collateral piece, restructure the page in a way that creates more importance on the certain text.
Notice we didn’t say bolded here – when you bold a font, you are essentially altering the font styling. Although italicizing or underlining is also a form of font styling, bolding a font changes the font weight, which can change how the type looks.
Consider this example:
They are the same fonts, but create a different effect, right?! This goes into one of the first points in the article of not swaying away from your font hierarchy – font weight is included in that!
We’ve recently released our Instagram Brand Guide freebie to help guide you through ways to use your brand correctly on Instagram. If you are just feeling at a loss with Canva and creating graphics in general, consider our Canva guide, How to Put Your Brand to Good Use.
If you’re someone who is absolutely confused by all of it, apply to work with us and we’ll clear up everything within your brand from your mission statement, target audience, 3 & 5 year goal setting, messaging and all visual assets.
© Copyright 2018 – 2024 Chloe Creative Studio. Privacy Policy. Terms. North Carolina. Photography by Sara Coffin Photo. Designed by Us :)
