Jump to content

Font scaling issue

Recommended Posts

Posted (edited)

The font size for headings changes at the breakpoint set by the site width (plus padding). For example. If you have a site set to, say 1400px wide, within browser windows larger than that, the font size for headings will be smaller. This destroys composition and design balance.

On inspection, for browser widths less than the max width, headings are calculated like this: 

font-size: calc(2.16vw + 1rem);

And for browsers wider than the site's max width, headings are calculated like this:

font-size: calc(2.8rem);

Is this a bug? Has anyone else had this error? Surely the font size for browser windows wider than the break point should match the size of the largest calculation, pre break point.
 

I can override it with CSS, but that just doesn't seem right. 

Edited by DavidCliff
Posted

Yes it happens on every 7.1 site I have made. I contacted support about this. Although they were not particularly helpful, the issue seems to be fixed. I'll verify on Monday when I can test it on the 27inch mac in the office.

  • 1 year later...
  • 1 year later...
  • 4 months later...
Posted

Just FYI everyone this isn't fixed. Raised it as a ticket with Squarespace on multiple occasions but they do not appear to treat the issue as importantly as I view it. 

The suitable fix appears to be:

1. Set site width to 3000px. But, this is often too wide for most people.
2. Set site width to 1200px. This appears to neutralise the effect of the font sizing "bug"

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.