33: Typography matters: how to pick the right fonts for your website text
In this episode of ThinkInsideTheSquare we will be diving deep into the world of font selection for your Squarespace website. Choosing the right fonts can make a huge impact on the overall look and feel of your site, so it's important to get it right.
We will be discussing tips and tricks for picking the perfect fonts that match your brand identity and resonate with your target audience. Whether you're looking for a modern and clean aesthetic or something more classic and elegant, we've got you covered.
By the end of this podcast, you'll have all the tools you need to confidently choose the right fonts for your Squarespace website. Stay tuned!
-
Little known fact - I am a HUGE typography nerd. I love pointing out font choices on billboards and I changed shampoo brands because I found one that used Century Gothic which is one of my favorite fonts.
Fonts make a really big difference in how a your brand is perceived - especially online.
In this episode of thinkinsidethesquare, we're going to dive into the world of typography, I’ll explain some key terms every Squarespace needs to know and talk about how you can change the entire vibe of your Squarespace site with these typography tricks.
Welcome to thinkinsidethesquare, a podcast full of tips and tricks to help you create a website that your proud of. I’m your host Becca Harpain, Squarespace expert and creator of inside the square. co
In this episode, we’re talking about typography and how the the fonts you choose can be as impactful as the message they convey.
For a transcript of this episode along with links to any resources mentioned, visit insidethesquare.co/podcast
The term Squarespace is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc.
---
I’m sure you’ve given a lot of thought to the text on your website - spending time selecting the perfect words for your headline or product description. As website creators, we put a lot of thought and effort into the words we will use to get our message across clearly.
But have you spent much time thinking about the typography itself? The font families that you chose for your website design have just as much impact on the vibe of oyur content as the words themselves, and I think that’s worth talking about.
Good website typography is so much more than picking a font that you think looks pretty.
Well-chosen typography can enhance your brand, keep readers engaged, and improve the overall user experience of your site. On the other hand, using the wrong font styles can confuse your users and deter them from reading the words you’ve so carefully crafted for your site.
In this episode i’m going to be sharing my top typography design tips but first I want to define some important terms that every Squarespacer should know.
Staring with typeface. A typeface is a family of characters that defines the overall shape, style, and personality of the letters. Think of it as the blueprint for a specific letter design, like Garamond, Helvetica, Times New Roman or Poppins.
In these typefaces you’ll run into characteristics like round lowercase letter a’s or upper case M’s that have an uneven point in the middle. Tiny little details that the biggest of font nerds like myself absolutely love.
An other term I’ll use is character - a character is a letter or a symbol in the typeface. I kinda use them interchangeably, but character is a better term to use because it includes the numbers and other symbols in the typeface.
Typeface isn’t the same as font family - but you’ve probably heard font family one used more often. A font family is a collection of characters in a typeface that share a similar characteristic. An example is Poppins Light. Poppins is the typeface, but Poppins Light is the font family in that type face - a collection of light weight characters in that typeface.
Font weight is another term I should cover - its what makes a font thin or light or regular or bold - its the thickness of the characters themselves. A lot of fonts have multiple font weights but not all of them! It all depends on who designed the font and what characters they created. It’s why I like to work with Poppins - I can choose any weight value from 100 - super light - to 900 - super bold. But we’ll talk more about using font weight later in this epsiode.
I have a few more terms I want to cover first.
I bet you’ve heard these terms before: Serif and sans serif. These are descriptions of the typeface style, and the distinction between the two styles revolves around the presence or absence of decorative strokes on letters called **serifs**. Imagine serif fonts as having tiny top hats or tail coats at the ends of the loegr strokes on the letters, like an uppercase T. Times New Roman and Georgia are two classic examples. Sans serif fonts, on the other hand, don’t have these embellishments - they are sans the serif. My favorite typeface, Poppins, is a sans serif font, and Arial and Helvetica are two other common ones you’ve probable seen.
A lot of designers want to assume that sans serif is casual and serif is fancy but that couldn’t be farther from the truth. Some serif fonts can look like a retro typewriter, perfect for an apothecary website promoting a vintage brand, while Squarespace itself uses Clarkson - a sans serif font thought to evoke confidence and a level of sophistication.
Letter Spacing is the next term on my list - it refers to the amount of space between individual letters or characters.
Letter spacing is different than line spacing - line spacing is the distance between lines of characters, and it plays a crucial role in readability and aesthetics. Too little space creates a cramped feeling, while too much can make the text appear disconnected and unrelated.
Okay - I am ready to dig into some design tips for Squarespacers but lets recap what we just covered - and remember, these are just the basic definitions.
Typeface: a collection of characters with a specific style. In that typeface you’ll find font family: a collection of characters within a typeface that are grouped by a similar characteristic. Serif fonts have the little top hats and tail coats, while sans serif are without the serif. Letter spacing changes up the distance between characters and line height creates space between lines of characters. Oh - and the weight of a font changes how thick the characters are. Remember that not all fonts can be thick or thin - some font families are limited.
Each one of those terms holds deeper nuances and applications in the world of typography but this is a high level overview so we can dig into some website design details.
I wanna talk about typography in action, and how the style of the words you use can make a big difference in your design.
Here are my top 3 font & typography tips for Squarespace designers.
The first thing I want to talk about is using font styles to create hierarchy.
Typography hierarchy is the foundation of clear and engaging website design.It uses variations in font size, weight, and style to create a visual order, guiding users through the content. Imagine a website without hierarchy: all headings, subheadings, and body text appear identical. This creates confusion - users wouldn't know where to focus their attention or how the information is connected.
Effective hierarchy clarifies the importance of different content types. Large, bold headings instantly capture attention and convey the main message. Subheadings, presented in a slightly smaller and less prominent style, offer additional details without overwhelming the user. Body text, with its comfortable reading size, provides the bulk of the information. This clear distinction ensures users grasp the core message and can delve deeper into specific details if needed.
Think of it as a conversation. Headings are the introductory statements, grabbing attention and setting the stage. Subheadings are like transitions, guiding users through different points. Finally, the body text is the detailed explanation, providing all the necessary information.
By establishing this hierarchy, websites become more user-friendly. Users can quickly scan the page, identify key points, and locate the specific information they seek. This not only improves the user experience but also ensures your website effectively communicates its message.
My next design tip is is limiting yourself to two fonts, three at the very most. Personally, I only use one font on insidethesquare - Poppins. The characters in Poppins have a variety of font weights, so I can use bold and large text for my headlines, thin uppercase characters with large letter spacing for my sub-headlines, and standard lowercase regular weight characters for the paragraph text. I can create hierarchy with one font family - you can limit yourself to one or two fonts and still create a beautiful & cohesive website.
When working in Squarespace, and editing your site style menu, if you click on fonts, you’ll see that we have some font packs, and we can set up custom fonts for different parts of our site. Did you notice that those font packs are limited to two fonts? That’s not an accident - most professional designers will tell you that two fonts is all you need.
A third accent font can be thrown in here and there, but for anyone new to the world of web design, you should limit your options to two fonts - one for headings and one for paragraph or body text. Limiting yourself to two main fonts makes it easy to create visual harmony.
Two well-chosen font families create a cohesive visual experience. One font family is ideal for headings and titles, where it needs to be bold and attention-grabbing. The other font family is used for body text, where readability and comfort for extended reading are key. These two fonts can have different styles (serif vs. sans-serif), but they should complement each other and create a sense of unity.
Introducing too many fonts creates a cluttered and confusing look, and it becomes difficult for us Squarespace designers to maintain a clear hierarchy. Each additional font competes for attention, making it harder for people looking at a page on your website to distinguish between headings, subheadings, and body text.
Two fonts is enough variety to keep things interesting while maintaining a clean and professional aesthetic. This means your content itself will take center stage, because your design choices allow for a clear communication of your message.
To be clear - decorative fonts do have their place on a website - but accessibility is key. Never use a decorative font for important content like a title or explanation. Think of your decorative fonts like images that accent a page, but aren’t there to convey something that is essential for your readers to understand.
I’ve got to side step onto a tangent here - never ever ever display text as an image. That is really frowned upon in the world of website design.
Not everyone browses the web the same way. People with visual impairments might rely on screen readers that tell them what's on the website. These readers can't read text inside images, so if your important message is stuck in a picture, they'll miss it entirely! Using plain text makes sure everyone can access your info. Plus, people will be looking at your site on all sorts of devices, from giant desktops to tiny phones. Images with text can get blurry or messy when the screen size changes. Plain text, on the other hand, can easily adjust to fit any screen, making sure your message is always crystal clear
Squarespace has the stretch to fit feature in the text editor that can help you with accessibility. And if you do want to use a fancy font on your site, you can assign a custom font to any text using CSS in Squarespace!
For those of you brand new to this acronym, CSS stands for cascading style sheet. All websites have it - its how a computer browser, like chrome or safari, knows how to display the content of a website. CSS is what tells a computer “this text should be this font family and this size and this color.”
Squarespace writes your CSS for you based on what you pick in the site style menu. But when you want to go off-script and add your own, it’s super easy to do! You can isntall your own font, and assign it to literally anything in Squarespace using CSS. I’ve got some tutorials on my blog that will show you how to do that step by super simple step, and i’ll include a link to them in the show notes at [insidethesquare.co](http://insidethesquare.co)/podcast
Okay - we’ve covered two outta three tips - the first is to create visual hierarchy with font weight and size, and even letter spacing. The second is to limit yourself to two fonts - three if you absolutely have to - but limiting your font choices will make it easy for people on your site to understand your message.
My third design tip is to think about the fonts' personality and how it relates to the brand you're creating a website for. Sure, it's tempting to simply grab the font from their logo and call it a day, but that’s not always a good idea
While brand consistency is important, that logo font might not be the best choice for the website's overall readability and user experience. Here's where font personality comes in – it's about choosing typefaces that not only complement your brand's visual identity but also effectively communicate your message through written content.
Imagine a website for a playful children's toy store. Their logo might use a whimsical, hand-drawn font that perfectly captures their brand's fun and energetic spirit. However, this same font might be difficult to read in large blocks of text on the website. What about a product description that has important safety information? That probably shouldn’t be written in crayon.
This is where understanding font personality becomes crucial. We can certainly incorporate that playful logo font strategically, perhaps for headings or call-to-action buttons, while choosing a clear, easy-to-read sans-serif font for the main body text. This creates a cohesive brand experience while prioritizing readability for your audience.
Here's a breakdown of how font personality can elevate your website design:
Building Emotional Connection: Fonts are like silent communicators. A playful script font can evoke a sense of fun and whimsy, while a bold, geometric sans-serif conveys authority and modernity. Choose fonts that resonate with your brand's personality and the emotions you want to evoke in your audience. A website selling handcrafted furniture might benefit from a classic serif font that conveys a sense of tradition and quality, creating an emotional connection with customers seeking timeless pieces.
Strengthening Brand Identity: Fonts become part of your brand's visual vocabulary, alongside logos and color palettes. By consistently using fonts that reflect your brand personality across your website and marketing materials, you reinforce brand recognition and build trust with your audience. For example, a website for a legal firm would likely avoid playful script fonts and opt for a more trustworthy and professional serif font, solidifying their image as a reliable law partner.
Targeted Communication: Different fonts resonate with different demographics. Understanding your target audience allows you to tailor your font choices for more effective communication. For a website targeting young designers, a clean and modern sans-serif font might be ideal. A website aimed at history buffs might benefit from a classic serif font with a timeless feel. This targeted approach ensures your message is delivered in a way that resonates with your audience.
By considering these elements, you can move beyond simply matching the logo font and choose fonts with personalities that truly support your brand message. This creates a website that's not only visually appealing but also speaks directly to your target audience, fostering stronger connections and achieving your website's goals.
The fonts you chose matter. There are hundreds, actually thousands of fonts at this point, so if you feel stuck on where to even start I have a few places that can inspire you.
One of them is Squarespace itself! When you’re designing your website, click on the little paintbrush icon on the top right hand side of the screen to open your site style menu. Click on fonts and the first option there is a preview of the fonts being used on your site. if you click into the font pack options, you can choose some premade font pairs created by the designers at Squaresapce. Click on any of those font packs - serif, sans serif, and mixed - and you can see the content of your site update in the website preview.
Now here is the cool part - lets say your in love with the heading font, but the paragraph text isn’t perfect, click back into your font menu and change that in your **Global Text Styles** options. Squarespace has separated heading, paragraph, button, and miscellaneous fonts for us, so it’s easy to build your own font pack.
Click into any of those text types and you’ll see the font options. Starting with family - you can pick any font family from the list of Google and Adobe fonts available in Squarespace.
There are a lot of fonts available in Squarespace, but you can always install your own! So if you fall in love with a custom font on a site like Creative Market, you can install it on your Squarespace site to use it. I’ll include a link to that tutorial in the show notes too.
To recap here - I recommend limiting your design to one or two fonts, making sure there is a difference between headings and paragraph text.
Font families are a set of characters that have unique qualities. Serif has the little top hats and flourishes at their feet, while sans serif are without the serif. Letter spacing and line height change up the distance between characters and the weight of a font changes how thick the characters are. Remember that not all fonts can be thick or thin - some font families are limited.
There should be a clear design difference between the heading fonts you use and your paragraph fonts - and they can be the same font family, but make sure you vary them in size and weight to create some visual hierarchy.
When you’re ready for some visuals to go with this podcast, I have links galore for you in the show notes! head to [insidethesquare.co](http://insidethesquare.co) forward slash podcast forward slash 33 - thirty three - to find links to font pair ideas, tutorials on how to install your own custom fonts and how to use CSS to make them even more unique, and there you’ll also find my own list of recommended font pairs for Squarespace sites. Oh yeah - i made you a freebie - could’t help but overdeliver on my favorite topic.
Again that’s at insidethesquare.co/podcast but before you head over there - can you do me a favor and leave me a review? I’ve heard that the more reviews I have the easier it is for other Squarespacers to find my content, so I would greatly appreciate your support. Thanks so much for listening ot this episode of thinkinsidethesquare. I have a LOT more to teach you about making Squarespace uniquely yours, so be sure to subscribe to this podcast where ever you happen to be listening to this episode. Thanks again for tuning in, and most importantly, have fun with your Squarespace website. Bye for now.
-
