Thanks for the suggestion. This seems a bit too specific to be included as a general rule. (We typically don't create rules that simply disallow specific syntax.)

I think we'd be open to a rule that was a bit broader, maybe something that encouraged the use of specific font size types? So rather than just disallowing px, maybe it would look for a small set of "good" size types?

Thank you for the clarification. Your suggestion sounds very good.

I think we'd be open to a rule that was a bit broader, maybe something that encouraged the use of specific font size types? So rather than just disallowing px, maybe it would look for a small set of "good" size types?

How about a rule called required-font-unit or required-font-size-unit that will take a set of strings such as rem, px etc. as option, so rule would allow only these units for font-size?

How about a rule called required-font-unit or required-font-size-unit that will take a set of strings such as rem, px etc. as option, so rule would allow only these units for font-size?

I think this is heading in the correct direction. require-font-size-unit (without the "d" in require) seems like it would make the most sense as a name, although I wonder if this rule needs an allow list or a deny list?

although I wonder if this rule needs an allow list or a deny list?

I think for consistency, using an allowlist would be a good idea?

Makes sense. I'd like to find an article or something online with recommendations for which font size units are considered best practices so we can have a logical default setting.

Sure! these are some articles that suggest rem for font size:

It's a good idea to use rem to set font sizes because it is designed to adapt to the user's browser preferences. This helps with accessibility. It is also good for consistent scaling, as changing the HTML font size will affect the elements with rem units.

https://www.freecodecamp.org/news/css-units-when-to-use-each-one/

Tip: The em and rem units are practical in creating perfectly scalable layout!

https://www.w3schools.com/css/css_units.asp

Set Font Sizes with rem: Use rem units for setting font sizes in most cases. rem ensures that font sizes are relative to the root element's font size, making them responsive to user preferences and zooming.

https://medium.com/design-bootcamp/css-font-sizing-beyond-pixels-for-better-design-35457c2650d3

Thanks! Going to post on social media to see what other responses we get.

The thing we found while working with typescript-eslint is that almost any time you create a no- prefixed rule, someone will want to go against the "no" and instead enforce the inverse.

I'd personally suggest a name like consistent-font-sizes which would then give you room to add an option for each style of font size whilst still adding a default value to enforce the perceived best practice.

We had decided on require-font-size-units. #73 (comment)

The title of the issue just wasn't updated.

I understand what you're saying. The reality is that trying to capture all of the ways font sizes interact with other measurements is both a massive amount of work and would be incredibly buggy. At that point, we're not just talking about flagging font-size units, we're now talking about what units for other measurements are appropriate for use with font-size units across all possible properties that contain measurements. Even if we accomplished all of that in a single rule, we would end up needing a ton of options for all of the different variations people would want supported.

Our approach is to make rules small and self-contained. We could very well add another rule or set of rules around using relative measurements for other properties, and that would allow people to fine-tune their experience.

And of course, if you really want a rule as you've described it, you can always create your own rule that does exactly that.

After digging into this a bit, I'm wondering if what we really want is a relative-font-units rule that enforces the use of relative units?

Let's say by default it enforces the use of rem, but you can optionally specify other units to allow, like this:

{
    "relative-font-units": ["error", { allow: ["rem", "em", "%" ] }]
}

Here's a list of relative units I found:

• cap: Represents the "cap height" (nominal height of capital letters) of the element's font.
• ch: Represents the width or advance measure of the "0" glyph in the element's font.
• em: Represents the calculated font-size of the element.
• ex: Represents the x-height of the element's font.
• ic: Equal to the advance measure of the "水" glyph (CJK water ideograph) in the font.
• lh: Equal to the computed line-height of the element.
• rcap: Equal to the "cap height" of the root element's font.
• rch: Equal to the width or advance measure of the "0" glyph in the root element's font.
• rem: Represents the font-size of the root element.
• rex: Represents the x-height of the root element's font.
• ric: Equal to the ic unit on the root element's font.
• rlh: Equal to the lh unit on the root element's font.

We could limit the options in allow to just those known relative units to ensure that people don't accidentally include absolute units.

Thoughts?

This is a really well-written article about relative units of CSS and when to use them from the perspective of accessibility and maintainability from @joshwcomeau.

Just my opinion: I don't think all relative units should be acceptable. I think specifically and exclusively rems should be allowed, at least with the default. If the mindset is to improve accessibility, allowing % or em units are much more fragile to implementation details. During development, a dev could take a UI from accessible to not accessible without knowing it if units with parent-relative values are used. With rem, they'd be affecting the entire site in - hopefully - a more obvious manner.

@kylemh thanks for the feedback. Indeed, allowing just rem by default is exactly what I proposed in the previous comment. That said, I know from 12 years of ESLint development that we'll likely get asked to add a way to allow other units, too, and we should provide for that.

Consistent units across the project, not only font-size, would be more important for my team.

For example, we require all px values to be wrapped in a rem-calc() Sass function.

We also use em values when it makes sense to inherit parent value

@illarionvk that would be beyond the scope of the type of rule we're looking to add here. You could definitely create a custom rule that does what you're asking.

I am in favor of relative-font-units, would like to implement this if accepted.

Marking as accepted. @Tanujkanti4441 you got it!