Change the size of mobile fonts in Squarespace (7.0, 7.1 CE & 7.1 FE)

Mobile designAll CSS tricksCustomization tipsFonts7.07.17.1 CE7.1 FE

May 17

Written By Beatriz Caraballo

Not feeling happy with how Squarespace is resizing your fonts in mobile?

Then let's do something about it shall we?

In today's quick tutorial I'm going to show you how you can easily change the size of your fonts in mobile view.

Let's go!

Choose your breakpoints

Pop up the inspect element window in the background and start shrinking down your browser screen until you reach the point where you want to alter your font sizes.

Make note of the pixel number in the upper-right corner.

Now head over to your Custom CSS window and type in that first media query. I'll assume you're starting with 960px

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

Reduce your font size in mobile view

Next, add in the heading you want to resize. Let's say you want to control the size of your h2s:

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

Perfect! Lastly, let's set the new font size for your heading at 960px:

@media screen and (max-width: 960px) {
  h2 {
    font-size: 23px;
  }
}

Alright, that's it! Painless right?

Ok, so what if you want to modify ALL your headings at that same breakpoint?

No problem, simply group them inside the same media query by keeping everything inside the main brackets in green below:

@media screen and (max-width: 960px) {
  h1 {
    font-size: 41px;
  }
  h2 {
    font-size: 33px;
  }
  h3 {
    font-size: 20px;
  }
}

Now, what if you want to reduce the size once more in smaller screens?

Then rinse and repeat! Simply create a new media query for the new size and set the font sizes you want for your headings.

This is what both snippets look like when used together:

/*Reducing font size for screens smaller than 960px*/
@media screen and (max-width: 960px) {
  h1 {
    font-size: 41px;
  }
  h2 {
    font-size: 33px;
  }
  h3 {
    font-size: 20px;
  }
}

/*Reducing font size for screens smaller than 640px*/
@media screen and (max-width: 640px) {
  h1 {
    font-size: 33px;
  }
  h2 {
    font-size: 20px;
  }
  h3 {
    font-size: 16px;
  }
} 

Removing hyphens in mobile

When you're see-
ing this on your web-
site on mobile and
you cringe...

Fret not, here's how you can get rid of those hyphens.

Simply choose which heading(s) you want to keep "hyphenless" and set hyphens to none.

Let's say we're going to be doing it for both h1s and h2s at 640px, in that case our code would look like this:

@media screen and (max-width: 640px) {
  h1, h2 {
    hyphens: none;
  }
} 

That's all!

Now, fair warning here, by removing hyphens you're letting your browser choose the best place to split your word if it doesn't fit in the next line, so in some cases you may end up with the final letter of your word dangling below the rest.