We are in the process of developing an Angular Material application, and our designer has requested that we convert all CSS styles to be measured in em
units. He believes that using px
will require multiple styles for different media query breakpoints. Currently, it seems that Angular Material uses pixels for their typography. I am hesitant to override their styles since they have likely spent a significant amount of time ensuring the design looks correct on various platforms and devices.
I came across this information which discusses "scaleable pixels" in Material Design. However, I am unsure how one would define a scaleable pixel in CSS as sp
does not appear to be a valid unit of measurement. Upon examining the angular-material.css
file, it is evident that the fonts are indeed indicated in px
. I hope someone can provide insight into the reasoning behind this.