Issue
After updating our Angular application from v13 to v15 (including Angular Material) and updating the typography to match the new names I see a visual difference between the v13 and v15 version of the application.
v13 typography configuration and initialization:
@function strip-unit($number) {
@if type-of($number) == "number" and not unitless($number) {
@return math.div($number, $number * 0 + 1);
}
@return $number;
}
@function rem-value($size) {
$l-size: strip-unit($size);
@return math.div($l-size, 15) * 1rem;
}
$ff-text: "Roboto, 'Helvetivca Neue', sans-serif";
$fs-base: 14px;
$fs-base-large: 15px;
$fs-display-4: rem-value(112px);
$fs-display-3: rem-value(56px);
$fs-display-2: rem-value(45px);
$fs-display-1: rem-value(32px);
$fs-headline: rem-value(24px);
$fs-title: rem-value(20px);
$fs-subheading-2: rem-value(18px);
$fs-subheading-1: rem-value(16px);
$fs-body-2: rem-value(15px);
$fs-body-1: rem-value(15px);
$fs-caption: rem-value(13px);
$fs-button: rem-value(14px);
$fs-input: inherit;
$lh-display-4: rem-value(112px);
$lh-display-3: rem-value(56px);
$lh-display-2: rem-value(48px);
$lh-display-1: rem-value(38px);
$lh-headline: rem-value(32px);
$lh-title: rem-value(32px);
$lh-subheading-2: rem-value(22px);
$lh-subheading-1: rem-value(19px);
$lh-body-2: rem-value(24px);
$lh-body-1: rem-value(24px);
$lh-caption: rem-value(19px);
$lh-button: rem-value(14px);
// Line-height must be unit-less fraction of the font-size for "input".
$lh-input: 1.125;
$fw-light: 300;
$fw-regular: 400;
$fw-medium: 500;
$fw-bold: 700;
$typography: mat.define-typography-config(
$font-family: $ff-text,
$display-4:
mat.define-typography-level(
$fs-display-4,
$lh-display-4,
$fw-light,
$letter-spacing: -0.05em
),
$display-3:
mat.define-typography-level(
$fs-display-3,
$lh-display-3,
$fw-regular,
$letter-spacing: -0.02em
),
$display-2:
mat.define-typography-level(
$fs-display-2,
$lh-display-2,
$fw-regular,
$letter-spacing: -0.005em
),
$display-1: mat.define-typography-level($fs-display-1, $lh-display-1, $fw-medium),
$headline: mat.define-typography-level($fs-headline, $lh-headline, $fw-medium),
$title: mat.define-typography-level($fs-title, $lh-title, $fw-medium),
$subheading-2:
mat.define-typography-level($fs-subheading-2, $lh-subheading-2, $fw-medium),
$subheading-1:
mat.define-typography-level($fs-subheading-1, $lh-subheading-1, $fw-medium),
$body-2: mat.define-typography-level($fs-body-2, $lh-body-2, $fw-medium),
$body-1: mat.define-typography-level($fs-body-1, $lh-body-1, $fw-regular),
$caption: mat.define-typography-level($fs-caption, $lh-caption, $fw-regular),
$button: mat.define-typography-level($fs-button, $lh-button, $fw-medium),
// Line-height must be unit-less fraction of the font-size.
$input: mat.define-typography-level($fs-input, $lh-input, $fw-regular),
);
@include mat.core(t.$typography);
v15 typography configuration and initialization:
@function strip-unit($number) {
@if type-of($number) == "number" and not unitless($number) {
@return math.div($number, $number * 0 + 1);
}
@return $number;
}
@function rem-value($size) {
$l-size: strip-unit($size);
@return math.div($l-size, 15) * 1rem;
}
$ff-text: "Roboto, 'Helvetivca Neue', sans-serif";
$fs-base: 14px;
$fs-base-large: 15px;
$fs-headline-1: 112px;
$fs-headline-2: 56px;
$fs-headline-3: 45px;
$fs-headline-4: 32px;
$fs-headline-5: 24px;
$fs-headline-6: 20px;
$fs-subtitle-1: 18px;
$fs-subtitle-2: 16px;
$fs-body-1: 18px;
$fs-body-2: 15px;
$fs-button: 14px;
$fs-caption: 13px;
$fs-overline: 9px;
$lh-headline-1: 112px;
$lh-headline-2: 56px;
$lh-headline-3: 48px;
$lh-headline-4: 38px;
$lh-headline-5: 32px;
$lh-headline-6: 32px;
$lh-subtitle-1: 22px;
$lh-subtitle-2: 19px;
$lh-body-1: 22px;
$lh-body-2: 24px;
$lh-button: 14px;
$lh-caption: 19px;
$lh-overline: 11px;
$fw-light: 300;
$fw-regular: 400;
$fw-medium: 500;
$fw-bold: 700;
$typography: mat.define-typography-config(
$font-family: $ff-text,
$headline-1:
mat.define-typography-level(
rem-value($fs-headline-1),
rem-value($lh-headline-1),
$fw-light,
$letter-spacing: -0.05em
),
$headline-2:
mat.define-typography-level(
rem-value($fs-headline-2),
rem-value($lh-headline-2),
$fw-regular,
$letter-spacing: -0.02em
),
$headline-3:
mat.define-typography-level(
rem-value($fs-headline-3),
rem-value($lh-headline-3),
$fw-regular,
$letter-spacing: -0.005em
),
$headline-4:
mat.define-typography-level(
rem-value($fs-headline-4),
rem-value($lh-headline-4),
$fw-medium
),
$headline-5:
mat.define-typography-level(
rem-value($fs-headline-5),
rem-value($lh-headline-5),
$fw-medium
),
$headline-6:
mat.define-typography-level(
rem-value($fs-headline-6),
rem-value($lh-headline-6),
$fw-medium
),
$subtitle-1:
mat.define-typography-level(
rem-value($fs-subtitle-1),
rem-value($lh-subtitle-1),
$fw-medium
),
$subtitle-2:
mat.define-typography-level(
rem-value($fs-subtitle-2),
rem-value($lh-subtitle-2),
$fw-medium
),
$body-1:
mat.define-typography-level(
rem-value($fs-body-1),
rem-value($lh-body-1),
$fw-regular
),
$body-2:
mat.define-typography-level(
rem-value($fs-body-2),
rem-value($lh-body-2),
$fw-regular
),
$button:
mat.define-typography-level(
rem-value($fs-button),
rem-value($lh-button),
$fw-medium
),
$caption:
mat.define-typography-level(
rem-value($fs-caption),
rem-value($lh-caption),
$fw-regular
),
$overline:
mat.define-typography-level(
rem-value($fs-overline),
rem-value($lh-overline),
$fw-regular
),
);
@include mat.typography-hierarchy(t.$typography);
I'm using mat-typography
as class on the body
element and the following styling to set the base font size:
:root {
--base-font-size: #{$fs-base};
@media (min-width: 1390px) {
--base-font-size: #{$fs-base-large};
}
}
html {
font-size: var(--base-font-size);
}
body {
font-family: $ff-text;
}
When using the inspector in the browser the font sizes are all equal but I still get a visual difference.
v13 screenshot for the html
element showing the font information and base font size of 14px:
v15 screenshot:
Also visible is the fact that the first 2 cards are stacked vertically with v13 but horizontally with v15. The following styling is used here:
.dashboard-signals {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
align-items: stretch;
width: 100%;
margin-bottom: 2.5rem;
gap: 2rem;
}
This has not changed between v13 and v15.
Any ideas on why this is?
Solution
Please disregard this as it was just a case of PEBKAC. After careful examination it seemed that the zoom factor was set somehow. Don't ask me how but setting this to default made the difference disappear...
Answered By - Kees de Bruin
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.