How to Keep Your Website’s Typography Consistent


Typography is another design element that can make or break a brand and creative entrepreneur.

When was the last time you took a deep look at your brand to see if your typography was consistent throughout?

Does your brand have a consistent typography or does it scream HELP!

Okay, maybe we need to start with the basics so we don’t overwhelm you: What is typography? Thanks to Practically Typography, they’ve helped us define this word, “Typography is the visual component of the written word.”

So, what does that mean in Layman terms? Typography is an art. When you take regular text and add creativity and art you get typography.

Example: When you write out our design studio’s name, B&M Design Co., it’s plain, old text. However, when you write it like this—B & M Design Co—it completely changes. It changes from text to typography.

Now, that we’ve established what typography is, we want to share how to keep your typography consistent as your brand and business develop. Keeping the typography consistent gives your website a polished look and feel and encourages visitors to stick around.

Alright, let’s dive in!

WHY ESTABLISH CONSISTENT HEADERS:

Keeping your website headers’ typography consistent is a wonderful way to establish your brand’s typography. If you use too many fonts it can confuse your audience. We recommend using one to three fonts, and the same style of fonts for the same type of information to keep it clean and consistent.  

To do this, establish an orderly system of your styles and fonts and keep it consistent throughout. You need to define your website’s typography for Header1 (H1), Header2 (H2), Header3 (H3), body copy, etc. In Squarespace, you can establish your text’s style in the backend to give LIFE to your blog posts, landing pages’ content, and another text you may have on your site. Establishing a style will keep your typography consistent.


HOW TO ESTABLISH CONSISTENT HEADERS:

To establish the same look and feel throughout your Squarespace website, follow the step-by- step guide below. Establishing the consistent typography in the beginning stages of creating your Squarespace’s website, will give your brand a cohesive look and feel.

Step 1:
Once you’re logged into Squarespace, select the Design tab.

Squarespace Website Design Tab.png

Step 2:
Scroll down until you see “Site Styles”.

Squarespace Website Site Styles.png

Step 3:
From here, you can set your website’s fonts, colors and other items.

Screen Shot 2019-04-27 at 11.26.10 AM.png

For this step, it’s very important that you have already established your brand’s fonts. You can’t start at this part of the stage and expect to establish consistent typography if it’s not first established for your brand.


So, if you need help establishing your brand, STOP right now and reach out to us! You need this part developed before you can move forward, so Contact Us Now!


EXTRA DETAILS TO ESTABLISH YOUR CONSISTENT TYPOGRAPHY:

Now that you know WHY you need to establish your typography and HOW you do that through Squarespace, we want to share the extra details no one has showed you or that you may know about.

When you’re in Squarespace writing a blog or posting new content, you’ll see a dark edit bar popup like the one below. This gives you the option to edit your text to keep it consistent with the rest of your site’s layout.

Capture.JPG

For example, If you’re writing a header for a paragraph of text, you’ll want to establish this as your Header1 (H1) typography. To do this, make sure your Header1 (H1) is already established in the backed and then you’ll be able to select your H1 from the “Normal” drop down menu.

Header 1 Squarespace.JPG

When you’re establishing your styles for your H1, H2, H3 etc, think about the heirarchy of the text. The H1 is usually bolder, bigger and styled differently from H2 and H3. For H2, it’s not as bold or big as H1 but more so than H3. The same goes for H3, it’s not as flashy and bold as H1 and H2.

So plan around with your settings, establish your brand’s style and stick with your selections. Again, don’t make your style too crazy—giving it a pleasing design aesthetic will really set your brand and Squarespace website apart from the competition.

Feel free to take a look at how we defined our H1, H2, H3, and body.

Establishing-Consistent-Typography.png

Would you like a little TYPOGRAPHY inspiration? We’ve created a Pinterest board with all sorts of inspired art from Typography you can use to get ideas. Check it out!


If you have any questions about typography, branding, design, Squarespace web design or anything else, reach out to hello@bmdesignco.com

Xoxo Casey and Michelle

 


 
Brock-and-Mishler-Design-Co-short-stacked-logo.png

B&M Design Co is a boutique design studio from Dayton, OH. We design authentic brands for business owners to flourish. 🌿  We specialize in logo design, visual brand identity, web design and other design services.  We know building a brand is not a simple task, so we want to extend an olive branch, a symbol of peace and victory to allow your brand to flourish.