Bug Report: 62.5% Root Font Scaling Conflicts with Third-Party Components

Themes
1

Hello,

I had previously opened a topic on this a few months ago, but due to shifting priorities, I wasn’t able to follow up - apologies for letting the thread go quiet. Since the original ticket was automatically closed, I’m creating a new one to continue the discussion.

We built our demo page using the default theme - source (v1.5.0) - but the issue appears to be broader and could potentially affect other teams as well, so I’d consider it a global issue.

The 62.5% font size trick is causing integration issues with third-party components that rely on rem for accessibility. Since these components use the browser’s default font-size, your scaling approach distorts their layout, breaking UI consistency.

As noted in this article, this method complicates integration with external libraries. Given your platform’s broad audience, would it be possible to reconsider this approach or offer an opt-out?

Looking forward to your thoughts.

2

The “opt outs” would be:

  • fork your theme: make changes to the base typography of the theme within the theme itself
  • apply some reset CSS via code injection which will allow you to keep the original theme
  • apply CSS that styles the components you’re adding (using code injection or via forked theme)

:+1:

3

I’m assuming based on your message that you’re trying to use something like Tailwind CSS to build a custom page layout inside Ghost Admin, perhaps using code injection and HTML cards - is that correct?

You should be able to reset the font size adjustment for your Tailwind styles by wrapping any html where you’re using tailwind with <div style="font-size: 16px;">

A more robust approach for this level of customisation, though, would be to use a custom theme instead of Source + modifications :)

1 Like
4

What I do is scale the component back to 16px just for the embedded component

Give the component a class name

<folioready-collector 
  code="__PUBLIC_KEY__" 
  class="folioready-collector"
></folioready-collector>

And add a style element via code injection into the Page header

<style>
  .folioready-collector { transform: scale(1.6);}
</style>
2 Likes