How to Change the Size of Your Site Title on Squarespace
Learn how to change the size of your site title so it’s responsive on desktop and mobile! it’s super easy :)
Image of text that says “How to change the size of your site title on Squarespace” from designwithabby.com
The other day I was designing a client’s website. Their business name was a bit long and when I entered the site title, it looked large and bulky and wasn’t the vibe I was going for.
Which is why in this post you will learn how I used custom css to resize the site title so it not only looked better, but could be responsive for mobile too.
I personally love using CSS because it gives you precise, flexible control over your site title’s appearance across desktop and mobile.
Whether you're a small business owner, DIY designer, or Squarespace pro, this guide walks you through the exact steps to resize your site title using CSS, plus a few pro tips and common troubleshooting notes.
Why Adjust the Site Title Size?
Your site title is often the first piece of text your visitors see. It’s part of your brand identity and it helps establish hierarchy in your header. So it’s worth getting right so it doesn’t feel out of place. Here are a few reasons why you might want to change its size:
Brand Visibility: Maybe your site title feels too small next to your logo or header menu. Resizing it helps balance the layout and emphasize your name!
Responsive Design: You might want your site title to appear larger on desktop but scale down on mobile for better readability. Many sites do this.
Design Consistency: Matching your site title to the rest of your site’s typography helps create a more cohesive look.
Before we get into it, if you’d prefer to watch and learn then click the video below! And you can check out other cool tutorials and educational videos on my channel. :)
Learn how to change the size of your site title on Squarespace using CSS
-
[00:00:00.00]
Hey, guys, it's Abby. In this video, I want to show you how to change the size of your site title using CSS on Squarespace. So yes, I am on a demo website. Yes, it is Superman-themed because of the new movie that just came out.
[00:00:16.10]
And yes, I saw it and I really liked it.
[00:00:18.23]
So the first thing that we want to do is go into this Edit Site header. And if you click on the pencil to edit the site title, you'll, I mean, assume that you'd be able to edit the size of it here, right? But unfortunately, you can't. So what we're going to do is make sure that we can edit the size not only on desktop, but also for mobile. So if you click Exit, and then we go to under Website, Pages, all the way down to Custom Code, Custom CSS. Scroll all the way down, or maybe you don't have any code in here. In that case, just stay at the top. But I'm going to go down to line 50. I'm going to copy and paste some code that I have here, and then we're going to use that to adjust this here. As you can see, it is targeting the site title ID here, and it is font size 20. If I wanted to make this larger, it would reflect that. Obviously, it doesn't make the navigation look super great, so I wouldn't that big, but I could always take it down to 10 if I wanted it to be really small, or a good size might be 27.
[00:01:38.10]
I don't know. So let's just say I wanted to keep it there. Now, you could also change to your desired size using, obviously, pixels here, but you could also do EM or rem or whatever you'd want to do. Now, one thing to note is that I was on a client website the other day and I was trying to change the size of their site title because it was just a bit too big. And for some reason this idea was not working and it wasn't targeting it. I don't really know why that was, but if you try to do this and for some reason it doesn't work for you either, then I had ChatGPT help me try to figure out what I could target instead of the site title to get it to obviously respond. If you need to, you can go and find all the code, obviously, in the description.
[00:02:35.26]
I ended up having to use this to target it. Obviously, we have the font size here, which if I wanted to put this back on 27, then I can. Then you also have the ability to change the line height, which might come in handy on mobile. Let's just say we wanted to use this one, and then we want to make sure that it is also responsive to mobile, so we want to use a media query. I'm going to paste this in here, copy this, and paste this within the media query. What that means is Basically, it's just restricting this code to only screens that are a max width of 640 pixels. As you can see on mobile view, we have the font size here. But if I take this down to 10, it gets really small. And then if I put it at 20, we still have cool Superman stuff. But if I make this a little bit larger, then we have this. And then you can also adjust the line height to 3. 2, and it makes it really large. Whereas if I just take it back down here, then you would just want to find something that you like something that you think looks good.
[00:04:01.27]
So even if I wanted it to be a bit smaller, then we could have it all on one line, and then we wouldn't even really need that.
[00:04:09.11]
But either way, that is how you change the size.
[00:04:13.15]
And as you can see, this one is not 15 pixels because this is only affecting the mobile, like I said.
[00:04:20.07]
So that is how you change the size.
[00:04:22.11]
And you can check out all of the CSS within the description.
[00:04:26.13]
And if you learned something from this video, go ahead and give it a like and go ahead and subscribe to the channel for more tips and tricks just like this. And if you're someone who is wanting to get a website built and you don't know where to start and you also don't want to do it yourself, I completely understand and I'm happy to help. You can go to designwithabby. Com, you can book a call with me, and we can talk about what it would look like to bring your website vision to life.
Step 1: Identify the Site Title Selector
To change the site title with CSS, you’ll first need to know what selector your Squarespace template uses. Thankfully, In most Squarespace 7.1 sites, the site title can be targeted using:
#site-title
Or in some templates, you might see:
.site-title
If you’re not sure which one your site uses, you can use your browser’s Inspect tool:
Right-click on your site title
Click Inspect
Look for the ID or class name in the highlighted code
This tells you exactly what CSS selector to use so your custom styling applies correctly.
Ready to work with a designer to get an awesome, high-converting website? Book a call and let’s chat!
Step 2: Add Custom CSS to Change the Site Title Size
Once you’ve confirmed the correct selector, it’s time to add the custom CSS.
How to Add CSS in Squarespace:
Log into your Squarespace dashboard
Navigate to Website > Pages > Custom CSS
Paste the following CSS, updating the size to whatever works best for your site:
#site-title {
font-size: 20px;
}
This code increases the font size of your site title. You can use different units depending on your needs:
px (pixels) – exact sizing (e.g., font-size: 36px;)
em or rem – relative to other font sizes (e.g., font-size: 2em;)
% – scales with the surrounding container (e.g., font-size: 200%;)
Now, if you watched the video, you heard me explain how I tried to use the above code on a client’s website and for some reason the #site-title and .site-title selectors didn’t work. So here’s the alternative code I used:
.header-title-logo a,
.header-title-logo-link,
.header-title-text a {
font-size: 20px !important;
line-height: 1.2 !important;
}
Step 3: Make the Site Title Responsive for Mobile
Now that your site title looks great on desktop, you’ll want to make sure it doesn’t look weird on mobile. We can do this by using a media query to adjust the font size based on screen width.
Add the following code beneath your original CSS, and paste whichever original CSS you used within the media query.
@media only screen and (max-width: 640px) {
(paste code here)
}
This CSS targets screens that are 640 pixels wide or smaller (which includes most phones) and sets a smaller font size so your site title stays readable and isn’t too large.
Step 4: Save and Preview
After adding your CSS, make sure to:
Click Save in the Custom CSS editor
Preview your site on both desktop and mobile
Adjust values as needed based on how it looks in real use
Pro Tips for Site Title Styling
Stick with one sizing unit (e.g., rem or px) for easier scaling across devices
Use high-contrast colors for readability, especially if your header background changes on scroll
Avoid setting both font-size and line-height too high—this can push your site title into other header elements and throw things off
Check for header overlap on smaller devices and adjust margins or padding as needed
Overlapping elements?
Try reducing the font size or adding this spacing fix:
#site-title {margin-bottom: 10px;
}
Final Thoughts
Using CSS is a huge help in scenarios like this. You’d think you’d be able to do it on the native platform but honestly, it’s not too hard to copy and paste some code and get precise with the size you want. So don’t be afraid to use this on your own site to change the size of your site title.
Abby Castillo
Let’s Connect
Check out more step-by-step tutorials!
Subscribe to my YouTube channel @designwithabby for easy-to-follow Squarespace tips, design walkthroughs, and CSS learning.
Want more tips and inspiration?
Follow me on Instagram, Facebook, or LinkedIn for behind-the-scenes content, educational content, and design advice that actually helps.
Need a pro to handle your website?
Whether you're starting from scratch or need a refresh, I offer custom Squarespace design services to help your business stand out online. Get in touch here to book a free discovery call and see if we’re a good fit!
Or view my portfolio to see how I’ve helped others. :)
Frequently Asked Questions
-
It depends on your design, but most site titles look balanced between 2–3rem on desktop and around 1.2–1.5rem on mobile. Start there and adjust based on your header layout.
-
Most Squarespace 7.1 templates use #site-title, but some may use .site-title or other variations. Use your browser’s inspect tool to find the exact selector if it’s not working.
-
If you’re using a logo image instead of text, you’ll want to follow the logo resizing guide, not this one. This guide applies only to text-based site titles.
-
Make sure you’re using the correct selector (#site-title vs .site-title), and check for other CSS overrides in your theme. You can also try using !important like this:
#site-title {
font-size: 2.5rem !important;
}
