Typography Tricks

Click here to download the transcript as a PDF

Click here to download the transcript as a VTT

THIS TRANSCRIPT WAS AUTOMATICALLY GENERATED BY VIMEO

Beyond the basics typography tricks.

Inside this lesson, you're going to learn about the key differences between font and text properties, how to target text by its unique style, and why some fonts won't load on your Squarespace website and what you can do about it.

Text properties format a text layout.

Transform uppercase a font property will change the design of the text, like font size to increase it or decrease the size based on an absolute value. And then font weight where you can make text bold. Those are two examples.

Inside your guide, you're going to find a list of the most common text and font properties that you'll use in custom code Color changes. Color font style makes text italic font weight text, transform line height. The list goes on. Again, you'll find a list of font and text properties in your guide, but before you jump into that, here are two tricks that you should know about targeting text.

You already know about the asterisk trick and the A trick, but here are two new ones. Strong targets, bold Text and em, which stands for emphasis can target Italicized text. This is how you can have multiple types of text styles in a single line. This sentence has three font styles by targeting the bold and italicized text with custom code, the bold text has the font family of rif, and I reset the font weight to normal. Then my italicized text has been changed to courier new and I reset that font style to normal so it's no longer italicized.

Strong is how you identify bold text and EM is how you identify italicized text. Now, be sure to reset your font styles when you're using these targeting tricks. Strong will keep the text bold, so reset it with font weight, normal EM will still be italicized, and you can reset that with font style normal.

And as we've learned in the first lesson when it came to advanced targeting, always pair the targeting trick with a selector and or a unique ID in your custom code.

This first example uses the asterisk trick to change all of the font styles inside a list section. The second example changes just the H two inside of a block. That's a combination code using the unique ID and the selector. And the third example here changes only the bold text in a specific headline. I've identified that with the unique id, the H one text type selector and strong, the Targeting Trick. So only the bold text will become font family serif.

Now, you can only use a font that's already installed on your website. If you've ever tried to use a font family and it didn't show up on your Squarespace website, that's because it wasn't in your Site Styles Menu. Squarespace only loads characters for fonts that you've assigned in your font menu.

Now you can install your own and inside your guide for this lesson, I have a tutorial that will teach you how to do it, but you can also assign a font to an unused content type. This is my favorite workaround.

Inside the assigned styles menu, I will assign font to an unused content type and then use that font family in my custom code. I rarely use the menu block in the websites that I create. So menu item title font is my Go-to. If there's a creative font that I want to use on my website, I'll assign that font family to the menu item title font. I'm never going to use that block, but Squarespace will load that font family so I can use it in my custom code.

A fun workaround that I wanted to share with you while we're talking about typography, now you've got some homework my friend. Review the font and text properties in your guide, and when you're ready, try to create multiple font styles in one line of text using the targeting tricks that we talked about.

In this lesson, change the font family for a Pop-up form and adjust the read more button on a summary block to be uppercase characters with increased letter spacing. A little bonus exercise, add a border to that read more text so it looks like a clickable button. You'll find all of the instructions for these practice codes inside the guide for this lesson.