Search code examples
angularangular15

Angular 15 update appears visually smaller

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:

enter image description here

v15 screenshot:

enter image description here

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...