Font & Text Properties

Font vs Text: what’s the difference?

Here’s the quick rundown: font properties control what your letters look like, while text properties control how those letters behave on the page. Fonts are all about the characters themselves; things like weight, size, and style (hello italics!).

Text properties, on the other hand, deal with alignment, spacing, decoration, and transformation; the details that affect the way your words appear and flow.

in this guide you’ll find a list of the 10 font & text properties I use the most when customizing Squarespace. You’ll also find an example you can copy and paste into your own site when you’re ready to give it a try!

font-family

This one sets the actual typeface for your text. You can list a few options so your site has a backup plan if one isn’t available. This example tells a computer to “use Arial for any heading 1 font, but if that’s not around, grab any sans-serif font”

h1 {
  font-family: Arial, sans-serif!important;
}

font-weight

Want to make your text bold or light? That’s what font-weight is for. You can use words like bold and normal, or get specific with numbers like 400 for regular or 700 for bold. Keep your font-family in mind; not all of them have different bold and light options. 

h1 {
  font-weight: bold!important;
}

font-style

Perfect for quotes, captions, or emphasis, font style can make specific text italic.You don’t’ need to use this for text blocks because we can make specific characters italic using the design options, but it’s great for adding things like a subtitle to blog posts.

.entry-title:after {
  content: "\A subtitle";
  white-space: pre;
  font-style:italic
}

font-size

This property controls how big or small your text appears. You can set it in px, em, or rem — I usually recommend rem for better scaling across devices. Check out the guide to length values to learn about more, and consider adjusting your line height if you adjust your font size!

h1 {
  font-size: 32px!important;
}

line-height

This controls how tall each line of text is — basically your text’s breathing room. A value around 1.4em or 1.5rem is a good starting point for most fonts.

h1 {
  line-height: 1.5rem!important;
}

letter-spacing

This adjusts how far apart your letters are. Small changes can make a huge difference — a little extra space can make bold fonts feel airier and more polished.

h1 {
  letter-spacing: 2px!important;
}

color

Sets the color of your text. You can use a color name, a hex code, or even RGB or HSL values for more precision. I only use this property to change a color that I can’t adjust using the design options in Squarespace.

h1 {
  color: blue!important;
}

text-align

This one determines where your text sits inside its container; left, right, center, or justified. This is one of my favorite codes; it centers footer text but only on screens smaller than 640p in width which is most mobile devices.

#footer-sections * {
  text-align: center!important;
}

text-decoration

The text-decoration property controls the lines that appear on your text — and you can get pretty creative with it. You can define the type, style, and color of the line all in one declaration.

Here’s what each option does:

  • text-decoration-line: adds the line (underline, overline, line-through, or none).

  • text-decoration-style: controls the look of the line (solid, double, dotted, dashed, or wavy).

  • text-decoration-color: changes the color of the line.

You can combine them like this example here that creates a unique underline for active links.

a {
  text-decoration: underline wavy #0077cc;
}

Pro Tips for Font & Text Codes

Start with readability → Choose fonts that are easy to read before worrying about style—your visitors will thank you.

Limit your fonts → Stick to two or three font families for a polished, professional look that feels consistent across your site.

Use rems, not px → Setting font sizes in rem makes your text scale smoothly on all screen sizes.

Mind your line height → Around 1.4em is a great starting point for balanced, comfortable reading.

Preview everywhere → Fonts can look totally different on mobile versus desktop, so always double-check your design on multiple devices.

Pro Tips for Targeting Text

a is for links → Use the a selector to style any text that functions as a link. It’s perfect for updating the color, decoration, or hover style of linked text across your site.

Use the asterisk as backup → The * selector can target all text inside an element, which helps when your code isn’t applying correctly. It’s a great fallback if your first selector doesn’t change the text as expected.

Combine selectors → Pair a block ID with a text element (like #block-1234 h2) to style only the text inside that specific section.

Add !important when needed → If your changes don’t seem to show up, add !important to override Squarespace’s built-in styles.

Previous

How Hover Effects Work