Reduce size of mobile fonts in Squarespace

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 control the size of your fonts in mobile view. Let's go!
 

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 control the size of your fonts in mobile view.

Let's go!

Note: to make this post shorter I'll be assuming you already know the basics of media queries, so I can jump right into the good stuff. If you want to learn what they are and how they work, I got a short free training right here that explains everything!

 

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.

Note: you can set hyphens:none; to your entire site if you like, it's not limited to mobile!

 

TO KEEP IN MIND

  • If your new font size isn't displaying after adding your code, try setting the new declarations as important like so:
h3 {
  font-size: 16px !important;
}
  • Since you're altering the size of your fonts, you may want to double-check if the same line-height you set for desktop still works, if not then take this opportunity to set a new value for it! In general, if your line-height is set as ems in your style editor, you shouldn't need to do any adjustments through CSS.

 

Until next time,

B.


FOLLOW ME FOR MORE!