Jump to content

Mobile Custom Font Size

Recommended Posts

If you're using absolute units like "px" to set your font size and overriding the Squarespace default sizing's, your font will likely always be the exact pixel amount that you set.

H1 {
font-family: "CUSTOM_FONT_FACE";
font-size: 54px;

Will always be 54px regardless of the size of the rest of your content or screen size. You'll likely want to set the maximum size of each of your custom text elements using an absolute unit and use relative units to scale appropriately. Ideally, you'd end up with unit that calculates the size dynamically. Otherwise, you'll need to use media queries to adjust the size for each possible screen size.

Example setting a font size with an absolute unit and using relative units for responsive design could look like this:

h1,h2,h3 {
font-family: "MY_FONT";
font-size: 54px;

.myBlock h1 {
font-size: 3rem;
.myBlock h2 {
font-size: 1.5rem;

You can also use other methods to calculate the sizing/scale of elements using units or formulas like "calc()" or "vmin" or "vmax" and "vw" and "vh".

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.