How to get two different text sizes on one line on Squarespace

I’ve noticed one Squarespace question come up time and time again recently. How do I get two different font sizes on one line?

The obvious answer, highlighting the piece of text you want to change and changing it, just doesn’t work. If you try to change even just one word, it will change the full line of text. 

You therefore need to use code. Some simple custom code will allow you to change just the pieces of text you want to change, giving you the chance to have two different text sizes on one line.

Watch the video

Check out the YouTube video below 👇

How do I get two different text sizes on one line on Squarespace?

First add in the line of text you want to edit. You then need to give the text you want to change a differentiator, something to make it different to the rest of the text. Usually I would suggest making it either bold or italic. 

Then, navigate to your custom CSS panel and depending on whether you made your target text bold or italic you need to add:

Strong (for bold text)

Em (for italic text)

Then add in the following custom code:

strong {

font-size: 2rem;

}

em {

font-size: 0.7rem;

}

You can alter the size of the ‘rem’ within the code, depending on how big or small you want to make it. 

You’ll also need to add an extra line of code to remove the differentiator (bold or italic) that you added at the beginning. 

To remove bold effect on the text, make your code into this:

strong {

font-size: 2rem;

font-weight: normal;

}

To remove italic text add:

em {

font-size: 0.7rem;

font-style: normal;

}

---

📩 Join the inner circle to get exclusive code updates

---

Don’t forget, if you don’t want to apply the size change to every instance of bold or italic text on your website, then you’ll need to wrap the code with either the block or section ID that you are targeting. To find the target ID, use your Google Chrome Squarespace Block ID Finder.

The code would look like this:

#BLOCK-ID {

strong {

font-size: 2rem;

font-weight: normal;

}

}

And that’s all you need. With just a few lines of code you can apply two different font sizes on one line, a trick that you just can’t do natively. 

Now that you’ve reached the end of this article, be sure to check out the rest of the by Crawford Squarespace resources.

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?