MDCTextField: Use em over px for sizing

[patrickrodee]

Google internally needs rem over px for sizing of text field content to solve for accessible scaling.

An example working codepen has already been created: https://codepen.io/williamernest/pen/bmOKeQ

---

Related to #2731, #4142

[williamernest]

rem doesn't solve the use case of having 2 text fields on the same page be different sizes (ex: an email
subject vs cc line, or a calendar invite title vs location fields).

By basing it on em it still respects the scale applied to rem but allows for more granular control. I recommend we use em and have users specify the specific font-size on the mdc-text-field element or parent directly.

[clshortfuse]

When trying to fix this exact same issue in AngularJS Material, the solution was to use 1em for the font-size of the input element.

angular/material@1df5336#diff-74a081d9d358e41d6c52623c1b29422dR31

But unfortunately, our fix came along way too late in the framework lifecycle so, ultimately, we couldn't risk breaking design layouts. I suggest adding this sooner than later.

The other question you'll have is, if you resize the input label from 16sp, is the label meant to be 12sp or 75% of the input label? I haven't been able to find an answer for that. MD2015 changed all samples to use 16sp instead of varying height. It used to look like this, showing to use 12sp no matter what size the input was. But with the newer redesign, there are no such samples selectively showing large font. It was changed to this.

That's something you'd have to either take a guess at, or ask for some explicit direction from the Googlers.

[abhiomkar]

Since we changed font-size to rem can we close this now?