HTML Font Size REM Scaling

[tomdevin525]

Hey all,

Started using this component library, it's awesome! One issue I'm running into is component scaling. All of the components scale based on the document (html) font size, but what if I already use rems throughout the rest of my project and can't change the value without messing up the rest of the application? Shouldn't these components use ems instead so they can be set by parent elements?

I'm trying to use the calendar component, but it's too big because it's based on 14px vs the 16px set on my document.

Any work arounds for this?

Thanks!

Also, just wondering if this is a typo in the documentation?

[tugcekucukoglu]

Hi,

Components uses rem units for size and can be override from the document.

@layer primevue {
  .p-component {
    font-size: 1rem;
    ...
  }
}

There is no typo in the documentation. In the live demo, we prefer 14px as a base.

[frankmichel]

This does not work with a component such as Tag. Since the Tag component will apply text-xs on the same level as the .p-component. So the tag component will look like this: <span class="p-tag p-component" ...>

So the p-tag will take precedence over the p-component resulting in a text-xs font-size of .875rem. Since the base font-size defined in html (or the browser's default font-size) is 16px, the Tag will still render in the wrong font-size.

[tomdevin525]

Thank you for the response!

I understand that the values can be overridden, but does it have to be every rem value for every component individually? Or is there 1 overall scale value (besides the html font size) that I can set? My project is already set to html { font-size: 10px } so by default all of the components are very small.

If I want to scale a calendar component, I would have to manually set every font-size, padding, width, height, etc. for every part of the component?

Thank you for the help, sorry if I'm missing something on this!

[rabume]

I'm experiencing a similar issue. I really like the component sizes in your documentation, but I can't fully replicate the look, even when setting the font size to 14px. I'm using PrimeVue with the Aura theme and the Noir override, along with Tailwind.

What could be causing this difference?

[ajjnorton]

I also am finding it frustrating that there is a difference between the sizes in the documentation and what you get after installation. I am using Angular 18 and Tailwind. I tried a new project without Tailwind and it made no difference. I tried many of the themes, but made no difference. What happened to what you see is what you get? e.g. Angular Materials.
Can someone explain what's going on?

[frankmichel]

I think it's a major drawback for using PrimeVue and PrimeBlocks. All components which are designed for copy + paste for rapid development are styled with TailwindCSS and a base font-size of 14px. Which makes PrimeVue incompatible with any other TailwindCSS components wich do not enforce any base font-size on the document level.

The whole point of Tailwind and mixing and matching components from different sources is hereby destroyed. The components of PrimeBlocks should have been designed with the base font size of modern browsers, which is 16px - not 14px.

[xak2000]

I totally agree. This is very strange decision to "randomly" change base rem size to 14px from the default 16px.

I understand that this is not a problem if you use PrimeVue from the beginning of your project and it is the only component library you use. But if you are trying to add PrimeVue to an existing project or you just trying to use some another component library alongside PrimeVue, then things break. You cannot just change base rem size to 14px in your project because all other designs already assume the default 16px. This forces developers to download a preferred default theme (e.g. Aura) and then override each and every rem values in the semantic section (and maybe in some components too), multiplying them by 14/16.

I'm trying to understand the reason for this decision: change the default rem size to 14px. While it makes some use-cases harder, it doesn't make anything easier, does it? So, why not keep the default 16px and just design themes with this base size in mind?.. It would make so many developer's lives easier. :)

@tugcekucukoglu Maybe you could shed some light on this situation so we can understand where this decision came from?