Angular Material text is not displayed correctly, the font is cut at the baseline


It can happen that Angular Material may render 'incorrectly' the text in some components (e.g. Form fields, Autocomplete). The descender (part of the character that descends under the baseline) is cut and not visible. This is particularly problematic with letters like q, g, y, q, j.

In some cases is not possible to distinguish between 'q' and 'g'. This is a regular complain that I receive from the users.

The problem could be linked to the font used. To quickly fix the problem it's enough to set in CSS the line-height to normal or a value >= 1.2.

line-height difference

Angular Material in .mat-form-field defines line-height: 1.125 this could not be enough for some fonts or browsers.

angular material line-height

According to the Mozilla line-height documentation normal has a value of 'roughly' 1.2 depending on the browser. Angular material 'vertically compress' the line cutting the available space for the font.

An issue for this problem was opened (and closed) in the Angular project on GitHub https://github.com/angular/components/issues/9208#issuecomment-453130528



WebApp built by Marco using SpringBoot, Java 16, Mustache, Markdown and Hosted using Jelastic