When you’re designing a Squarespace website, you always need to design two versions - one for desktop users and one for mobile users.

With more and more people surfing the web on mobile devices (smartphones, tablets etc) it’s never been more important to ensure your website is mobile optimised and displays well on mobile screens.

One thing that you need to consider is your font size. Whilst a certain font size may look great on desktop, there’s a high chance that it won’t work so well on mobile.

The problem, however, is that Squarespace doesn’t give us the option to have different font sizes for desktop and mobile. Once you set your font size on desktop, it has to be the same on mobile.

So in order to change the font size on the mobile version of your website, you’re going to need some custom code.

Let’s take a look at the process…

Firstly head to your design panel and select Custom CSS.

Watch the video

Check out the YouTube video below 👇

Six Figure Design Club framework for designing a perfect homepage — *Want a framework for designing the perfect homepage?*

Access now

You then need to add the below code which ensures you’re targeting mobile only. This line of code is telling Squarespace that this is to target screens of a maximum size e.g. mobile devices.

@media screen and (max-width: 640px) {

}

Next you need to add the font section you want to target (h1, h2, h3, h4 etc) and add this into the code, so it’ll look like this:

@media screen and (max-width: 640px) {

h4 {

font-size: 3em !important;

}

h1 {

font-size: 2rem !important;

}

You can then play around with the size you want to use, determining what size looks best on mobile view.

This will change the size of your targeted font on mobile only, leaving the desktop version at the font size you originally set it to.

You can also copy and paste all of the above code into the CSS panel again, and make the screen size limit slightly bigger in order to change the font on tablet devices too.

If you do this, make sure to add important to the end of your mobile code in order to keep the mobile font size intact.

As always, don’t forget to hit save to complete the process.

When it comes to changing the font size on your mobile website, have a play around to discover what size looks best.