# Bug Report: 62.5% Root Font Scaling Conflicts with Third-Party Components
**URL:** https://forum.ghost.org/t/bug-report-62-5-root-font-scaling-conflicts-with-third-party-components/58590
**Category:** Themes
**Created:** [July 7, 2025, 11:36am UTC](https://forum.ghost.org/t/bug-report-62-5-root-font-scaling-conflicts-with-third-party-components/58590 "2025-07-07T11:36:45Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@Garajluc](https://forum.ghost.org/u/Garajluc)
#### Post date: [July 7, 2025, 11:36am UTC](https://forum.ghost.org/t/bug-report-62-5-root-font-scaling-conflicts-with-third-party-components/58590/1 "2025-07-07T11:36:45Z")
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](https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/), 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.
---
### Author:  [@jonhickman](https://forum.ghost.org/u/jonhickman)
#### Post date: [July 8, 2025, 8:16am UTC](https://forum.ghost.org/t/bug-report-62-5-root-font-scaling-conflicts-with-third-party-components/58590/2 "2025-07-08T08:16:34Z")
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](https://ghost.org/tutorials/use-code-injection-in-ghost/) 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)
👍
---
### Author:  [@John](https://forum.ghost.org/u/John)
#### Post date: [July 9, 2025, 9:40am UTC](https://forum.ghost.org/t/bug-report-62-5-root-font-scaling-conflicts-with-third-party-components/58590/3 "2025-07-09T09:40:58Z")
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 ``
A more robust approach for this level of customisation, though, would be to use a custom theme instead of Source + modifications :)
---
### Author:  [@dougo-chris](https://forum.ghost.org/u/dougo-chris)
#### Post date: [July 30, 2025, 7:49am UTC](https://forum.ghost.org/t/bug-report-62-5-root-font-scaling-conflicts-with-third-party-components/58590/4 "2025-07-30T07:49:49Z")
What I do is scale the component back to 16px just for the embedded component
Give the component a class name
```html
```
And add a style element via code injection into the Page header
```html
```