Font sizes doesn't match with Polaris Text component

[remy727]

Font sizes of Text component doesn't match with Polaris Text component.

Example:

Polaris ViewComponents

<%= polaris_text(as: :h4, variant: :headingXl) { "Hello" } %> <!-- 16px -->

Polaris components

<Text variant="headingXl" as="h4">Hello</Text> // 24px;

I was looking for the font variant with 24px but no variant existed.
Is this because Polaris ViewComponent is using Polaris 12.0?

[Privacy-Poilcies]

Yes, the mismatch you’re seeing is due to the fact that Polaris ViewComponents are still aligned with Polaris v12, while the React component you referenced reflects the latest Polaris design tokens (v13+), where font sizes and scale have been updated.

That’s why <%= polaris_text(as: :h4, variant: :headingXl) %> renders at 16px in the ViewComponent implementation, while in React renders at 24px.

If you specifically need the 24px variant in Rails, you have two options:

Override the styles locally (not ideal for long-term consistency).

Wait for the ViewComponent library to update to Polaris v13, which will align font sizes with the React implementation.

So in short — yes, this is version-related and not an error on your end