Megan Godard-Cardon

View Original

How to Change the Styling of a Word in a Line of Text on Squarespace

Squarespace offers three different heading levels (H1, H2, H3), as well as normal body text styling. This is typically sufficient and helps to streamline the styling of your website so that there aren’t too many different text-styles going on. But sometimes, you many want a part of the text to stand out with a different font or size than the rest of the text. You could use CSS to change one of the level headings to fit the styling you need. But, what if you just need one word in a line of text to stand out with a different text style. Then what do you do? Enter the markdown block. With a markdown block, you can style each word in the line of text however you want to, using markdown language. 


But don’t let me scare you off by talking about different coding languages. I’ll break it all down for you step by step:


STEP 1 | Insert a Markdown Block


STEP 2 | Add in the text


If you’re changing the text styling of a couple words within a paragraph, you’ll want to add the whole paragraph in the markdown box. If you just have one line of text that you need to style differently that isn’t in a paragraph, feel free to just add that one line of text. 


STEP 3 | Find the word that you want to style differently, and add the following tags around it inline as shown:

<span style=""> word you want to style differently </span>


STEP 4 | In the “” add in the styling that you want for that text


For example: 


<span style="color: #f9beac; text-transform: uppercase; letter-spacing: 0.09em; font-size: 17px; font-weight: 600;"> gratitude </span>


Here is a cheat sheet of some of the different styling options you can add:

  • Color: You can type in a basic color to change the text to like: “Black” “Blue” “Red” or you can put in the hex code

  • Text-transform: You can choose uppercase, lowercase, or capitalize

  • Letter-spacing: The value you add here changes the space between the letters. Use “em” as the unit. For example: Letter-spacing: 0.09em

  • Font-family: Changes the font. Note: you must already be using this font somewhere on your website or have added the font in your custom CSS for it to work. 

  • Font-size: Changes the size of the font. Use px as the unit. 

  • Font-weight: Changes the thickness of the font, when available. (Some fonts have a variety of thickness options, some fonts do not.)

  • Text-decoration: Add a line either under, above or through the text. You can put in underline, overline, or line-through

  • Font-style: To italicize the text, use italic. You could also choose normal. Note: this depends on the font - for some fonts, italics are not supported. 

Step 5 | Select Apply


You might also enjoy:

See this gallery in the original post