Latest / ThinkInsideTheSquare / 33: How to pick the right fonts for your Squarespace website

Transcript

33: How to pick the right fonts for your Squarespace website · ThinkInsideTheSquare

• 0:05
  Speaker 1: Little known fact, I am a huge typography nerd.
• 0:08
  Speaker 1: I love pointing out font choices on billboards and I even changed shampoo brands once because I found one that used Century Gothic, which is one of my favorite fonts.
• 0:17
  Speaker 1: Fonts make a very big difference in how your brand is perceived, especially online.
• 0:22
  Speaker 1: In this episode of Think Inside the Square, we're going to dive into the world of typography.
• 0:27
  Speaker 1: I'll explain some key terms that every squarespaceer needs to know and talk about how you can change the entire vibe of your Squarespace website with three of my favorite typography tips.
• 0:37
  Speaker 1: Welcome to Think Inside the Square, a podcast full of tips and tricks to help you create a Squarespace website that you're proud of.
• 0:43
  Speaker 1: I'm your host, becca Harpane, squarespace expert and creator of InsideTheSquareco.
• 0:48
  Speaker 1: In this episode, we're talking about typography and how the fonts you choose can be as impactful as the message they convey.
• 0:55
  Speaker 1: For a transcript of this episode, along with the links to any resources mentioned, visit InsideTheSquareco.
• 1:01
  Speaker 1: Forward slash podcast.
• 1:02
  Speaker 1: The term Squarespace is a trademark of Squarespace Incorporated.
• 1:05
  Speaker 1: This content is not affiliated with Squarespace Incorporated.
• 1:12
  Speaker 1: I'm sure you've given some thought to the actual text on your website, spending time selecting the perfect words for your headline or your product description.
• 1:20
  Speaker 1: As website creators, we put a lot of thought and effort into the words that we use to get our message across clearly, but if you spent very much time thinking about the typography itself?
• 1:31
  Speaker 1: The font families that you choose for your website design have just as much impact on the vibe of your content as the words themselves, and I think that's worth talking about.
• 1:40
  Speaker 1: Good website typography is so much more than picking a font that you think looks pretty Well-chosen.
• 1:47
  Speaker 1: Typography can enhance your brand, keep readers engaged and improve the overall user experience of your entire website.
• 1:54
  Speaker 1: Using the wrong font style can confuse your users and deter them from reading the words that you've so carefully crafted.
• 2:01
  Speaker 1: In this episode, I'll be sharing my top typography design tips, but first I wanted to find some important terms that every Squarespaceer should know, starting with typeface.
• 2:12
  Speaker 1: A typeface is a family of characters that defines the overall shape, style and personality of the letters involved in that specific font.
• 2:20
  Speaker 1: Think of it like a blueprint for letter design Garamond, helvetica, times New Romans, poppins.
• 2:27
  Speaker 1: In these typefaces you'll run into characteristics Like Poppins, for example, has very round lowercase letter as and uppercase M's.
• 2:36
  Speaker 1: They might have an uneven point in the middle.
• 2:37
  Speaker 1: These tiny little details that only the biggest font nerds like myself absolutely love.
• 2:43
  Speaker 1: Another term we'll be using is character.
• 2:45
  Speaker 1: A character is a letter or a symbol within the typeface.
• 2:49
  Speaker 1: I kind of use them interchangeably, but the term character is a better term to use because it includes the numbers and other symbols that are in that typeface.
• 2:58
  Speaker 1: Now, typeface isn't the same as font family, but you've probably heard font family used way more often.
• 3:05
  Speaker 1: A font family is a collection of characters in that typeface that share a similar characteristic.
• 3:11
  Speaker 1: An example is Poppins light.
• 3:13
  Speaker 1: Poppins is the typeface but Poppins light is the font family in that typeface, a collection of lightweight characters that match the style of that typeface, following that blueprint.
• 3:25
  Speaker 1: Font weight is another term I should cover.
• 3:27
  Speaker 1: It's what makes a font thin or light or regular or bold.
• 3:31
  Speaker 1: It's the thickness of the characters themselves.
• 3:33
  Speaker 1: A lot of fonts have multiple weights, but not all of them.
• 3:37
  Speaker 1: It depends on who designed the font and what characters they created.
• 3:41
  Speaker 1: It's why I like to work with Poppins.
• 3:44
  Speaker 1: I can choose any weight value, from 100, which is super light, to 900, which is super bold.
• 3:49
  Speaker 1: But we'll talk a little bit more about using font weight later in this episode.
• 3:53
  Speaker 1: I have a few more terms I want to cover.
• 3:54
  Speaker 1: First, I bet you've heard these two before Serif and San Serif.
• 3:58
  Speaker 1: These are descriptions of the typeface style, and the distinction between the two styles revolves around the presence or the absence of decorative strokes on these letters called serifs.
• 4:09
  Speaker 1: You need to imagine these serif fonts as having tiny little toppats or little coattails at the end of the longer strokes on their letters, like an uppercase T.
• 4:17
  Speaker 1: Times New Roman and Georgia are two classic examples of a serif typeface.
• 4:23
  Speaker 1: San Serif fonts, on the other hand, don't have those fancy embellishments.
• 4:27
  Speaker 1: They are sans the serif.
• 4:29
  Speaker 1: My favorite typeface, poppins, is a San Serif font, and Ariel and Helvetica are two other common ones.
• 4:36
  Speaker 1: You've probably seen a lot.
• 4:37
  Speaker 1: Now.
• 4:38
  Speaker 1: There are quite a few designers who want to assume that sans serif means casual and serif means fancy, but that couldn't be farther from the truth.
• 4:46
  Speaker 1: Some serif fonts can look like a Retro Typewriter or Old Western perfect for an apothecary website promoting a vintage brand, while Squarespace itself uses Clarkson, a sans serif font.
• 4:58
  Speaker 1: Thought you would vote confidence and a level of sophistication.
• 5:02
  Speaker 1: Alright, we've got a few more terms to cover before we talk about the personality of fonts.
• 5:06
  Speaker 1: Letter spacing is the next term on my list.
• 5:09
  Speaker 1: It refers to the amount of space between the individual characters, and letter spacing is different than line spacing.
• 5:16
  Speaker 1: Line spacing is the distance between the lines of characters and it plays a crucial role in readability and aesthetics.
• 5:24
  Speaker 1: Too little of a space makes your text really cramped and difficult to read, while too much space can make your text appear disconnected and unrelated.
• 5:32
  Speaker 1: Okay, I'm ready to dig into some design tips or square space, but let's just recap what we covered and remember these are just the basic definitions.
• 5:41
  Speaker 1: Typeface is a collection of characters with a specific style.
• 5:44
  Speaker 1: In that typeface you'll find a font family, a collection of characters within a typeface group by similar characteristics.
• 5:51
  Speaker 1: Serif fonts have the little top hats and tail codes, and sans serif fonts are without the serif Letter.
• 5:58
  Speaker 1: Spacing changes up the distance between individual characters and line height creates space between lines of characters.
• 6:05
  Speaker 1: Oh, and the weight of the font changes how thick the characters are, and not all fonts can be thick or thin.
• 6:12
  Speaker 1: Some font families are limited and only have one or two options.
• 6:16
  Speaker 1: It all depends on who created the font.
• 6:18
  Speaker 1: Each one of those terms holds deeper nuances and applications in the world of typography and website design, but I wanted to give you that high-level overview so that we can dig into some website design details.
• 6:30
  Speaker 1: Let's talk about your typography and action and how the style of the words you use can make a big difference in how your design is perceived.
• 6:38
  Speaker 1: Here are my top three font and typography tips for us square space designers.
• 6:43
  Speaker 1: The first thing I want to talk about is using font styles to create hierarchy.
• 6:48
  Speaker 1: Typography hierarchy is the foundation of a clear and engaging website design.
• 6:54
  Speaker 1: It's the concept of using variations of font size, weight and style to create a visual order that guides users through your content.
• 7:03
  Speaker 1: Now imagine a website without any hierarchy.
• 7:06
  Speaker 1: That means all the headings, the subheadings, the body text all of it is identical, and it makes it really confusing and difficult to read because users don't understand where to focus their attention or how the information is connected or organized.
• 7:21
  Speaker 1: An effective hierarchy clarifies the importance of different content types.
• 7:26
  Speaker 1: Large, bold headings instantly capture attention and convey the main message.
• 7:31
  Speaker 1: Some headings presented in a slightly smaller and less prominent style offer additional details, but they're still not the bulk of the content.
• 7:40
  Speaker 1: That's where body text comes in.
• 7:41
  Speaker 1: Body text is a comfortable reading size.
• 7:44
  Speaker 1: It's spaced closely together when it comes to line height and it provides the bulk of the information.
• 7:50
  Speaker 1: This clear distinction between headings, subheadings and body text makes sure that the users can grasp that core message and dig deeper into specific details if they want to.
• 8:02
  Speaker 1: I want you to think about this kind of like a visual conversation.
• 8:05
  Speaker 1: Headings are the introductory statements.
• 8:08
  Speaker 1: They grab attention and they set the stage.
• 8:10
  Speaker 1: Subheadings are like transitions, guiding users through different points, and then, finally, that body text.
• 8:17
  Speaker 1: That's the detailed explanation providing all the necessary information.
• 8:21
  Speaker 1: When you establish this hierarchy in your design, using font styles, websites become more user friendly.
• 8:28
  Speaker 1: Users can quickly scan the page.
• 8:31
  Speaker 1: They'll identify the key points and find the information they need easier.
• 8:35
  Speaker 1: This not only improves that user experience, but it makes sure that your website effectively communicates your message.
• 8:42
  Speaker 1: My next design tip is limiting yourself to two fonts, three at the very most.
• 8:48
  Speaker 1: Personally, I only use one font on inside the square and that's poppins.
• 8:53
  Speaker 1: The characters in poppins have a variety of weights, so I can use bold and large text for my headlines.
• 8:59
  Speaker 1: Then I use thin uppercase characters with large letter spacing for some of my subheadlines, and then standard lowercase, regular weight characters for the paragraph text.
• 9:09
  Speaker 1: I create this hierarchy with one font family and I strongly urge you to limit yourself to one or two fonts at the most.
• 9:18
  Speaker 1: You can still create a beautiful and cohesive website.
• 9:22
  Speaker 1: When you're working in Squarespace and you're editing your site style menu, you click on that little paintbrush icon and site style opens and you click on fonts.
• 9:30
  Speaker 1: You'll see that we have some font packs at the very top.
• 9:33
  Speaker 1: There we can also set up custom fonts for different parts of our site, but I want you to pay attention to those font packs at the very top.
• 9:40
  Speaker 1: Did you notice that those font packs are limited to two styles?
• 9:43
  Speaker 1: That's not an accident.
• 9:45
  Speaker 1: Those professional designers will tell you that two fonts is all you really need.
• 9:50
  Speaker 1: A third accent font can be thrown in here and there.
• 9:53
  Speaker 1: But for anyone new to the world of web design, try to limit yourself to those two fonts, or even one specific.
• 9:59
  Speaker 1: Just make sure you have a unique style for your headings and a unique style for paragraph or body text.
• 10:05
  Speaker 1: Limiting yourself to those two main fonts makes it very easy to create that visual harmony and hierarchy.
• 10:12
  Speaker 1: This means your content itself is going to take center stage, because your design choices allow for a clear communication of your message, and that's your number one job as a website designer Make sure the people on your website are getting the information that they're there for.
• 10:26
  Speaker 1: Now, to be clear, decorative fonts can have a place within a website design, but accessibility is key.
• 10:32
  Speaker 1: Never, ever use a decorative font for something that's important, like a major title or a detailed explanation.
• 10:39
  Speaker 1: I want you to think of your decorative font like a little accent image for the page.
• 10:43
  Speaker 1: It's not there to convey something essential for your readers to understand.
• 10:47
  Speaker 1: But I realized saying that I've got a sidestep onto a tangent here.
• 10:50
  Speaker 1: Never, ever, ever, display text using just an image.
• 10:55
  Speaker 1: That's really frowned upon in the world of web design, and here's why.
• 10:59
  Speaker 1: Not everyone browses the internet the same way.
• 11:02
  Speaker 1: Some people rely on screen readers to tell them what's on a website and a screen reader can't read an image.
• 11:10
  Speaker 1: It's not going to identify the pixels of an image as actual text, so your important message would be stuck in a picture.
• 11:16
  Speaker 1: It'll be missed entirely.
• 11:17
  Speaker 1: When you use actual text to create the text content of your website, that means everyone can access your information.
• 11:25
  Speaker 1: Plus, people are going to look at your website on all sorts of different devices, from giant desktops to tiny phone screens.
• 11:32
  Speaker 1: Images that display text can get blurry or messy when the screen size changes.
• 11:37
  Speaker 1: When you're using text content on the other hand, like a text block or some other area of Squarespace that you can type into those can easily adjust to fit any screen, making sure your message is always crystal clear.
• 11:49
  Speaker 1: Now, if you're using the text editor itself, squarespace has that stretch to fit feature built right in there that can help you with accessibility.
• 11:58
  Speaker 1: And if you do want to use a fancy font on your site for some kind of accent or embellishment, you can assign a custom font to any text using CSS in Squarespace.
• 12:07
  Speaker 1: For those of you brand new to this acronym, css stands for Cascading Style Sheet.
• 12:13
  Speaker 1: All websites have it.
• 12:14
  Speaker 1: It's how a computer browser like Chrome or Safari knows how to display the content of a website.
• 12:20
  Speaker 1: Css is what tells a computer this text should be this font family and this size and this color.
• 12:25
  Speaker 1: Now Squarespace, it writes your CSS for you based on what you pick in the site style menu.
• 12:31
  Speaker 1: But when you want to go off script and add your own, it's super easy to do.
• 12:35
  Speaker 1: You can install your own font and assign it to literally anything in Squarespace using CSS.
• 12:40
  Speaker 1: I've got some tutorials on my blog that will show you how to do that step by super simple step, so I'll include a link to them in the show notes at insidethesquareco forward slash podcast.
• 12:50
  Speaker 1: Okay, we covered two out of three tips.
• 12:52
  Speaker 1: The first create visual hierarchy with font weight and size, and you can even use letter spacing.
• 12:58
  Speaker 1: The second tip was to limit yourself to two fonts Three if you absolutely have to but limiting your font choices will make it so much easier for people visiting your website to understand your message.
• 13:10
  Speaker 1: My third design tip is about the font's personality and how it relates to the brand or business you're creating a website for.
• 13:17
  Speaker 1: It's very tempting to simply grab the font from someone's logo and call it a day, but that's not always a good idea.
• 13:25
  Speaker 1: While brand consistency is important, that logo font might not be the best choice for a website's overall readability and the user experience.
• 13:34
  Speaker 1: That is where font personality comes in.
• 13:37
  Speaker 1: It's about choosing typefaces that not only compliment your brand's visual identity but help you effectively communicate your message through your written content.
• 13:46
  Speaker 1: Imagine a website for a playful children's toy store.
• 13:49
  Speaker 1: Their logo might use a whimsical hand-drawn font that looks like it's done with crayon, and it perfectly captures their brand's fun and energetic spirit.
• 13:58
  Speaker 1: However, that same font might be difficult to read in large blocks of text on the website.
• 14:04
  Speaker 1: What about a product description that has important safety information about a child's toy that probably shouldn't be written in crayon.
• 14:11
  Speaker 1: This is where understanding of font's personality becomes crucial.
• 14:15
  Speaker 1: We can certainly incorporate that playful logo font strategically, perhaps for a heading or a call to action button, but we need to choose a clear, easy-to-read font for the main body text.
• 14:26
  Speaker 1: That will create a cohesive brand experience while prioritizing readability for your audience that's going to be viewing this website.
• 14:34
  Speaker 1: It's important to know that different fonts can resonate with different demographics, so understanding your target audience who you're designing this website for it allows you to tailor your font choices for a more effective communication of your message.
• 14:48
  Speaker 1: For a website targeting young website designers, a clean and modern sans-serif font might be ideal.
• 14:54
  Speaker 1: I personally chose Poppins because I think it's a clean and modern font, but the roundness of the letters adds a little aspect of playful, casual, fun and approachable to it, which is what I want people to feel when they interact with my brand.
• 15:08
  Speaker 1: Now, for a website aimed at history buffs, you might benefit from a classic serif font with a timeless feel, or something old-westerly, this targeted approach focusing on demographics.
• 15:20
  Speaker 1: That's how you can make sure your message is delivered in a way that resonates with your audience.
• 15:25
  Speaker 1: But don't forget that crayon example that I just mentioned.
• 15:28
  Speaker 1: It's important to make sure that your font doesn't just align with your brand but still conveys your message.
• 15:34
  Speaker 1: The fonts you choose matter.
• 15:36
  Speaker 1: There are hundreds, actually thousands, of fonts at this point.
• 15:39
  Speaker 1: So if you feel stuck on where to start, I do have a few places that can inspire you.
• 15:43
  Speaker 1: One of them is Squarespace itself.
• 15:46
  Speaker 1: When you're designing your website, click on that little paintbrush icon on the top right hand side of the screen to open your site style menu.
• 15:53
  Speaker 1: When you click into fonts the first option there is a preview of the fonts being used on your site.
• 15:57
  Speaker 1: If you click into those font pack options, you can choose some pre-made font pairs created by the designers at Squarespace.
• 16:04
  Speaker 1: Clicking on any of these font packs serif, sans serif and mixed you can see the content on your site update in real time in that website preview.
• 16:13
  Speaker 1: Now here's the cool part.
• 16:14
  Speaker 1: Let's say you're in love with this heading font that you didn't even know existed until you clicked on that font pack, but the paragraph text to go with it it's not perfect for your website design or your demographic.
• 16:26
  Speaker 1: Click back into that font menu and under your global text style options, squarespace is separated heading paragraph button and miscellaneous for us.
• 16:36
  Speaker 1: So you can build your own font pack.
• 16:38
  Speaker 1: Click into one of those text types and you'll see font options starting with family, and you know what that means.
• 16:43
  Speaker 1: That means you can pick a font family to find a collection of characters.
• 16:47
  Speaker 1: Now the font family listed there.
• 16:50
  Speaker 1: That is a list of Google fonts and some of the Adobe fonts that are available in Squarespace and there are a lot of fonts there in Squarespace, but you can always install your own.
• 17:00
  Speaker 1: So if you do fall in love with a custom font on a site like creative market, you can install it on your Squarespace site to use it Again.
• 17:07
  Speaker 1: I'll have a link to that tutorial in the show notes.
• 17:10
  Speaker 1: All right, this episode turned in one that was a lot longer than I intended, but I love this topic so I had to talk about it.
• 17:16
  Speaker 1: Let's do a quick recap here.
• 17:18
  Speaker 1: I recommend limiting your website design to one or two fonts, three at the very most, making sure that there's a difference between heading and paragraph text to create hierarchy.
• 17:28
  Speaker 1: Font families are sets of characters that have unique qualities.
• 17:32
  Speaker 1: Serif fonts have little top hats and tailcoats, while sans serif fonts are without the serif Letter.
• 17:39
  Speaker 1: Spacing and line height change up the distance between characters and the weight of a font changes how thick the characters are.
• 17:45
  Speaker 1: Remember that not all fonts can be thick or thin.
• 17:48
  Speaker 1: Some font families are limited by the characters that were designed.
• 17:51
  Speaker 1: There should be a clear design difference between the heading fonts you use and the paragraph fonts.
• 17:57
  Speaker 1: They can be in the same font family, just make sure you vary them in size and weight to create that visual hierarchy.
• 18:03
  Speaker 1: Line spacing and letter spacing matters a lot here too.
• 18:06
  Speaker 1: Things that are closer together are clearly related, while adding some distance can help with that visual hierarchy.
• 18:12
  Speaker 1: And when you're ready for some visuals to go with this podcast, I have links galore for you in the show notes.
• 18:19
  Speaker 1: Head on over to insidethesquareco.
• 18:20
  Speaker 1: Forward slash podcast.
• 18:22
  Speaker 1: Forward slash 33 to find links to font pair ideas, tutorials on how to install your own font, all kinds of fun stuff.
• 18:30
  Speaker 1: Again, that's inside the square dot co.
• 18:32
  Speaker 1: Forward slash podcast.
• 18:33
  Speaker 1: Forward slash three three.
• 18:35
  Speaker 1: Thank you so much for listening to this episode of think inside the square.
• 18:38
  Speaker 1: I have a lot more to teach you about making square space uniquely yours.
• 18:43
  Speaker 1: So be sure to subscribe to this podcast wherever you happen to be listening to this episode.
• 18:47
  Speaker 1: And if you want to join my email list, visit inside the square dot co.
• 18:51
  Speaker 1: Forward slash email.
• 18:52
  Speaker 1: I'll send you a free Squarespace tutorial every single Tuesday to teach you how to customize something awesome about your website.
• 18:58
  Speaker 1: Again, that's inside the square dot co.
• 19:01
  Speaker 1: Forward slash email.
• 19:02
  Speaker 1: Thanks again for listening and, most importantly, have fun with your Squarespace website.
• 19:06
  Speaker 1: Bye for now.