help(form-field): Scaling on the floating label

[elias89]

What are you trying to do?

Customize the size of the angular material form field labels.

I've noticed that Angular Material uses transform scale to change form field labels which might be annoying since if you set a custom font-size from the implementation side it won't reflect the real size you set since it's scaled. Is there a proper way to customize that and avoid having to override the scale or use a bigger font-size? I'm just trying to understand the reasons why Material uses scaling to change the font-size.

It's here: https://github.com/angular/components/blob/40f0674e3959d53cd6413cf3a5c30053ca0973d9/src/material/form-field/_form-field-theme.scss#L142

Used from: https://github.com/angular/components/blob/40f0674e3959d53cd6413cf3a5c30053ca0973d9/src/material/form-field/_form-field-theme.scss#L127 https://github.com/angular/components/blob/40f0674e3959d53cd6413cf3a5c30053ca0973d9/src/material/form-field/_form-field-theme.scss#L203

What troubleshooting steps have you tried?

Changing labels size via font-size

Reproduction

Steps to reproduce:

1. Inspect the material form field labels.

Environment

• Angular Material: Latest