Update line-height

2025-08-02 14:07:55 +00:00 · 2025-04-28 17:33:26 +02:00 · 2025-04-28 17:33:26 +02:00 · fd279ea2b4
commit fd279ea2b4
parent 335b876fec
123 changed files with 183 additions and 179 deletions
--- a/cast/src/launcher/layout/hc-layout.ts
+++ b/cast/src/launcher/layout/hc-layout.ts
@ -86,9 +86,9 @@ class HcLayout extends LitElement {
    .card-header {
      color: var(--ha-card-header-color, var(--primary-text-color));
      font-family: var(--ha-card-header-font-family, inherit);
-      font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl);
+      font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
      letter-spacing: -0.012em;
-      line-height: 32px;
+      line-height: var(--ha-line-height-normal);
      padding: 24px 16px 16px;
      display: block;
      margin: 0;
--- a/gallery/src/components/page-description.ts
+++ b/gallery/src/components/page-description.ts
@ -38,12 +38,12 @@ class PageDescription extends HaMarkdown {
      }
      .title {
        font-size: var(--ha-font-size-5xl);
-        line-height: 56px;
+        line-height: var(--ha-line-height-normal);
        padding-bottom: 8px;
      }
      .subtitle {
        font-size: var(--ha-font-size-l);
-        line-height: 24px;
+        line-height: var(--ha-line-height-normal);
      }
      .root {
        max-width: 800px;
--- a/gallery/src/ha-gallery.ts
+++ b/gallery/src/ha-gallery.ts
@ -252,12 +252,12 @@ class HaGallery extends LitElement {
      .page-footer .header {
        font-size: var(--ha-font-size-l);
        font-weight: var(--ha-font-weight-semibold);
-        line-height: 28px;
+        line-height: var(--ha-line-height-normal);
        text-align: center;
      }

      .page-footer .secondary {
-        line-height: 23px;
+        line-height: var(--ha-line-height-normal);
        text-align: center;
      }

--- a/hassio/src/addon-view/config/hassio-addon-config.ts
+++ b/hassio/src/addon-view/config/hassio-addon-config.ts
@ -430,7 +430,7 @@ class HassioAddonConfig extends LitElement {
          font-family: var(--ha-card-header-font-family, inherit);
          font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
          letter-spacing: -0.012em;
-          line-height: 48px;
+          line-height: var(--ha-line-height-expanded);
          padding: 12px 16px 16px;
          display: block;
          margin-block: 0px;
--- a/hassio/src/components/hassio-card-content.ts
+++ b/hassio/src/components/hassio-card-content.ts
@ -101,7 +101,7 @@ class HassioCardContent extends LitElement {
      overflow: hidden;
      position: relative;
      height: 2.4em;
-      line-height: 1.2em;
+      line-height: var(--ha-line-height-condensed);
    }
    .icon_image img {
      max-height: 40px;
--- a/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
+++ b/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
@ -169,7 +169,7 @@ class HassioHardwareDialog extends LitElement {
        pre {
          padding: 16px;
          overflow: auto;
-          line-height: 1.45;
+          line-height: var(--ha-line-height-normal);
          font-family: var(--ha-font-family-code);
        }
        code {
--- a/hassio/src/ingress-view/hassio-ingress-view.ts
+++ b/hassio/src/ingress-view/hassio-ingress-view.ts
@ -354,7 +354,7 @@ class HassioIngressView extends LitElement {

    .main-title {
      margin: var(--margin-title);
-      line-height: 20px;
+      line-height: var(--ha-line-height-normal);
      flex-grow: 1;
    }

--- a/src/auth/ha-authorize.ts
+++ b/src/auth/ha-authorize.ts
@ -94,7 +94,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
        }
        p {
          font-size: var(--ha-font-size-m);
-          line-height: 20px;
+          line-height: var(--ha-line-height-normal);
        }
        .card-content {
          background: var(
--- a/src/auth/ha-pick-auth-provider.ts
+++ b/src/auth/ha-pick-auth-provider.ts
@ -59,7 +59,7 @@ export class HaPickAuthProvider extends LitElement {
      text-align: center;
      font-size: var(--ha-font-size-m);
      font-weight: var(--ha-font-weight-normal);
-      line-height: 20px;
+      line-height: var(--ha-line-height-normal);
    }
    h3:before {
      border-top: 1px solid var(--divider-color);
--- a/src/components/chart/state-history-charts.ts
+++ b/src/components/chart/state-history-charts.ts
@ -293,7 +293,7 @@ export class StateHistoryCharts extends LitElement {

    .info {
      text-align: center;
-      line-height: 60px;
+      line-height: var(--ha-line-height-expanded);
      color: var(--secondary-text-color);
    }

--- a/src/components/chart/statistics-chart.ts
+++ b/src/components/chart/statistics-chart.ts
@ -634,7 +634,7 @@ export class StatisticsChart extends LitElement {
    }
    .info {
      text-align: center;
-      line-height: 60px;
+      line-height: var(--ha-line-height-expanded);
      color: var(--secondary-text-color);
    }
  `;
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@ -932,7 +932,7 @@ export class HaDataTable extends LitElement {
          -moz-osx-font-smoothing: grayscale;
          -webkit-font-smoothing: antialiased;
          font-size: var(--ha-font-size-s);
-          line-height: 1.25rem;
+          line-height: var(--ha-line-height-condensed);
          font-weight: var(--ha-font-weight-normal);
          letter-spacing: 0.0178571429em;
          text-decoration: inherit;
@ -1052,7 +1052,7 @@ export class HaDataTable extends LitElement {
          -moz-osx-font-smoothing: grayscale;
          -webkit-font-smoothing: antialiased;
          font-size: var(--ha-font-size-s);
-          line-height: 1.25rem;
+          line-height: var(--ha-line-height-normal);
          font-weight: var(--ha-font-weight-normal);
          letter-spacing: 0.0178571429em;
          text-decoration: inherit;
@ -1174,7 +1174,7 @@ export class HaDataTable extends LitElement {
          -moz-osx-font-smoothing: grayscale;
          -webkit-font-smoothing: antialiased;
          font-size: var(--ha-font-size-s);
-          line-height: 1.375rem;
+          line-height: var(--ha-line-height-normal);
          font-weight: var(--ha-font-weight-semibold);
          letter-spacing: 0.0071428571em;
          text-decoration: inherit;
--- a/src/components/entity/state-info.ts
+++ b/src/components/entity/state-info.ts
@ -108,7 +108,7 @@ class StateInfo extends LitElement {

    .name.in-dialog,
    :host([secondary-line]) .name {
-      line-height: 20px;
+      line-height: var(--ha-line-height-normal);
    }

    .time-ago,
--- a/src/components/ha-badge.ts
+++ b/src/components/ha-badge.ts
@ -98,7 +98,7 @@ export class HaBadge extends LitElement {
      font-size: var(--ha-font-size-xs);
      font-style: normal;
      font-weight: var(--ha-font-weight-semibold);
-      line-height: 10px;
+      line-height: var(--ha-line-height-condensed);
      letter-spacing: 0.1px;
      color: var(--secondary-text-color);
    }
@ -106,7 +106,7 @@ export class HaBadge extends LitElement {
      font-size: var(--ha-font-size-badge, var(--ha-font-size-s));
      font-style: normal;
      font-weight: var(--ha-font-weight-semibold);
-      line-height: 16px;
+      line-height: var(--ha-line-height-normal);
      letter-spacing: 0.1px;
      color: var(--primary-text-color);
    }
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@ -406,7 +406,7 @@ export class HaBaseTimeInput extends LitElement {
    }
    ha-input-helper-text {
      padding-top: 8px;
-      line-height: normal;
+      line-height: var(--ha-line-height-normal);
    }
  `;
 }
--- a/src/components/ha-big-number.ts
+++ b/src/components/ha-big-number.ts
@ -59,7 +59,7 @@ export class HaBigNumber extends LitElement {
      css`
        :host {
          font-size: 57px;
-          line-height: 1.12;
+          line-height: var(--ha-line-height-condensed);
          letter-spacing: -0.25px;
        }
        .value {
@ -87,12 +87,12 @@ export class HaBigNumber extends LitElement {
        }
        .value .decimal {
          font-size: 0.42em;
-          line-height: 1.33;
+          line-height: var(--ha-line-height-condensed);
          min-height: 1.33em;
        }
        .value .unit {
          font-size: 0.33em;
-          line-height: 1.26;
+          line-height: var(--ha-line-height-condensed);
        }
        /* Accessibility */
        .visually-hidden {
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@ -41,9 +41,9 @@ export class HaCard extends LitElement {
    :host ::slotted(.card-header) {
      color: var(--ha-card-header-color, var(--primary-text-color));
      font-family: var(--ha-card-header-font-family, inherit);
-      font-size: var(--ha-card-header-font-size, 24px);
+      font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
      letter-spacing: -0.012em;
-      line-height: 48px;
+      line-height: var(--ha-line-height-expanded);
      padding: 12px 16px 16px;
      display: block;
      margin-block-start: 0px;
--- a/src/components/ha-combo-box-item.ts
+++ b/src/components/ha-combo-box-item.ts
@ -18,12 +18,12 @@ export class HaComboBoxItem extends HaMdListItem {
        border-top: 1px solid var(--divider-color);
      }
      [slot="headline"] {
-        line-height: 22px;
+        line-height: var(--ha-line-height-normal);
        font-size: var(--ha-font-size-m);
        white-space: nowrap;
      }
      [slot="supporting-text"] {
-        line-height: 18px;
+        line-height: var(--ha-line-height-normal);
        font-size: var(--ha-font-size-s);
        white-space: nowrap;
      }
--- a/src/components/ha-control-select-menu.ts
+++ b/src/components/ha-control-select-menu.ts
@ -180,7 +180,7 @@ export class HaControlSelectMenu extends SelectBase {
        --mdc-icon-size: 20px;
        --ha-ripple-color: var(--secondary-text-color);
        font-size: var(--ha-font-size-m);
-        line-height: 1.4;
+        line-height: var(--ha-line-height-condensed);
        width: auto;
        color: var(--primary-text-color);
        -webkit-tap-highlight-color: transparent;
--- a/src/components/ha-dialog-header.ts
+++ b/src/components/ha-dialog-header.ts
@ -54,12 +54,12 @@ export class HaDialogHeader extends LitElement {
        }
        .header-title {
          font-size: var(--ha-font-size-xl);
-          line-height: 28px;
+          line-height: var(--ha-line-height-normal);
          font-weight: var(--ha-font-weight-normal);
        }
        .header-subtitle {
          font-size: var(--ha-font-size-m);
-          line-height: 20px;
+          line-height: var(--ha-line-height-condensed);
          color: var(--secondary-text-color);
        }
        @media all and (min-width: 450px) and (min-height: 500px) {
--- a/src/components/ha-filter-blueprints.ts
+++ b/src/components/ha-filter-blueprints.ts
@ -211,7 +211,7 @@ export class HaFilterBlueprints extends LitElement {
          font-weight: var(--ha-font-weight-normal);
          font-size: var(--ha-font-size-xs);
          background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
          padding: 0px 2px;
          color: var(--text-primary-color);
--- a/src/components/ha-filter-categories.ts
+++ b/src/components/ha-filter-categories.ts
@ -306,7 +306,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
          font-weight: var(--ha-font-weight-normal);
          font-size: var(--ha-font-size-xs);
          background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
          padding: 0px 2px;
          color: var(--text-primary-color);
--- a/src/components/ha-filter-devices.ts
+++ b/src/components/ha-filter-devices.ts
@ -235,7 +235,7 @@ export class HaFilterDevices extends LitElement {
          font-weight: var(--ha-font-weight-normal);
          font-size: var(--ha-font-size-xs);
          background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
          padding: 0px 2px;
          color: var(--text-primary-color);
--- a/src/components/ha-filter-domains.ts
+++ b/src/components/ha-filter-domains.ts
@ -192,7 +192,7 @@ export class HaFilterDomains extends LitElement {
          font-weight: var(--ha-font-weight-normal);
          font-size: var(--ha-font-size-xs);
          background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
          padding: 0px 2px;
          color: var(--text-primary-color);
--- a/src/components/ha-filter-entities.ts
+++ b/src/components/ha-filter-entities.ts
@ -249,7 +249,7 @@ export class HaFilterEntities extends LitElement {
          font-weight: var(--ha-font-weight-normal);
          font-size: var(--ha-font-size-xs);
          background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
          padding: 0px 2px;
          color: var(--text-primary-color);
--- a/src/components/ha-filter-floor-areas.ts
+++ b/src/components/ha-filter-floor-areas.ts
@ -306,7 +306,7 @@ export class HaFilterFloorAreas extends LitElement {
          font-weight: var(--ha-font-weight-normal);
          font-size: var(--ha-font-size-xs);
          background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
          padding: 0px 2px;
          color: var(--text-primary-color);
--- a/src/components/ha-filter-integrations.ts
+++ b/src/components/ha-filter-integrations.ts
@ -198,7 +198,7 @@ export class HaFilterIntegrations extends LitElement {
          font-weight: var(--ha-font-weight-normal);
          font-size: var(--ha-font-size-xs);
          background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
          padding: 0px 2px;
          color: var(--text-primary-color);
--- a/src/components/ha-filter-labels.ts
+++ b/src/components/ha-filter-labels.ts
@ -236,7 +236,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
          font-weight: var(--ha-font-weight-normal);
          font-size: var(--ha-font-size-xs);
          background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
          padding: 0px 2px;
          color: var(--text-primary-color);
--- a/src/components/ha-filter-states.ts
+++ b/src/components/ha-filter-states.ts
@ -180,7 +180,7 @@ export class HaFilterStates extends LitElement {
          font-weight: var(--ha-font-weight-normal);
          font-size: var(--ha-font-size-xs);
          background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
          padding: 0px 2px;
          color: var(--text-primary-color);
--- a/src/components/ha-label-badge.ts
+++ b/src/components/ha-label-badge.ts
@ -80,7 +80,7 @@ class HaLabelBadge extends LitElement {
          /* Make the label as wide as container+border. (parent_borderwidth / font-size) */
          left: -0.2em;
          right: -0.2em;
-          line-height: 1em;
+          line-height: var(--ha-line-height-condensed);
          font-size: 0.5em;
        }
        .label-badge .label span {
--- a/src/components/ha-label.ts
+++ b/src/components/ha-label.ts
@ -34,7 +34,7 @@ class HaLabel extends LitElement {
          align-items: center;
          font-size: var(--ha-font-size-s);
          font-weight: var(--ha-font-weight-semibold);
-          line-height: 16px;
+          line-height: var(--ha-line-height-condensed);
          letter-spacing: 0.1px;
          vertical-align: middle;
          height: 32px;
--- a/src/components/ha-markdown.ts
+++ b/src/components/ha-markdown.ts
@ -73,7 +73,7 @@ export class HaMarkdown extends LitElement {
    pre {
      padding: 16px;
      overflow: auto;
-      line-height: 1.45;
+      line-height: var(--ha-line-height-normal);
      font-family: var(--ha-font-family-code);
    }
    h1,
--- a/src/components/ha-md-dialog.ts
+++ b/src/components/ha-md-dialog.ts
@ -155,10 +155,10 @@ export class HaMdDialog extends Dialog {
        --md-dialog-supporting-text-color: var(--primary-text-color);
        --md-sys-color-scrim: #000000;

-        --md-dialog-headline-weight: 400;
-        --md-dialog-headline-size: 1.574rem;
-        --md-dialog-supporting-text-size: 1rem;
-        --md-dialog-supporting-text-line-height: 1.5rem;
+        --md-dialog-headline-weight: var(--ha-font-weight-normal);
+        --md-dialog-headline-size: var(--ha-font-size-xl);
+        --md-dialog-supporting-text-size: var(--ha-font-size-m);
+        --md-dialog-supporting-text-line-height: var(--ha-line-height-normal);
      }

      :host([type="alert"]) {
--- a/src/components/ha-select-box.ts
+++ b/src/components/ha-select-box.ts
@ -156,7 +156,7 @@ export class HaSelectBox extends LitElement {
      color: var(--primary-text-color);
      font-size: var(--ha-font-size-m);
      font-weight: var(--ha-font-weight-normal);
-      line-height: 20px;
+      line-height: var(--ha-line-height-normal);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
@ -165,7 +165,7 @@ export class HaSelectBox extends LitElement {
      color: var(--secondary-text-color);
      font-size: var(--ha-font-size-s);
      font-weight: var(--ha-font-weight-normal);
-      line-height: 16px;
+      line-height: var(--ha-line-height-condensed);
    }
    img {
      position: relative;
--- a/src/components/ha-settings-row.ts
+++ b/src/components/ha-settings-row.ts
@ -74,7 +74,7 @@ export class HaSettingsRow extends LitElement {
        --mdc-typography-body2-font-weight,
        var(--ha-font-weight-normal)
      );
-      line-height: normal;
+      line-height: var(--ha-line-height-normal);
      color: var(--secondary-text-color);
    }
    .body[two-line] {
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@ -963,7 +963,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          min-width: 8px;
          border-radius: 10px;
          font-weight: var(--ha-font-weight-normal);
-          line-height: normal;
+          line-height: var(--ha-line-height-normal);
          background-color: var(--accent-color);
          padding: 2px 6px;
          color: var(--text-accent-color, var(--text-primary-color));
@ -975,7 +975,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          left: 26px;
          border-radius: 10px;
          font-size: 0.65em;
-          line-height: 2;
+          line-height: var(--ha-line-height-expanded);
          padding: 0 4px;
        }

--- a/src/components/ha-textarea.ts
+++ b/src/components/ha-textarea.ts
@ -30,7 +30,7 @@ export class HaTextArea extends TextAreaBase {
        content: attr(data-value);
        margin-top: 23px;
        margin-bottom: 9px;
-        line-height: 1.5rem;
+        line-height: var(--ha-line-height-normal);
        min-height: 42px;
        padding: 0px 32px 0 16px;
        letter-spacing: var(
--- a/src/components/map/ha-map.ts
+++ b/src/components/map/ha-map.ts
@ -692,7 +692,7 @@ export class HaMap extends ReactiveElement {
    }

    .marker-cluster span {
-      line-height: 30px;
+      line-height: var(--ha-line-height-expanded);
    }
  `;
 }
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@ -960,7 +960,7 @@ export class HaMediaPlayerBrowse extends LitElement {
        }
        .breadcrumb .title {
          font-size: var(--ha-font-size-4xl);
-          line-height: 1.2;
+          line-height: var(--ha-line-height-condensed);
          font-weight: var(--ha-font-weight-bold);
          margin: 0;
          overflow: hidden;
--- a/src/components/tile/ha-tile-info.ts
+++ b/src/components/tile/ha-tile-info.ts
@ -36,14 +36,14 @@ export class HaTileInfo extends LitElement {
    .primary {
      font-weight: var(--ha-font-weight-semibold);
      font-size: var(--ha-font-size-m);
-      line-height: 20px;
+      line-height: var(--ha-line-height-condensed);
      letter-spacing: 0.1px;
      color: var(--primary-text-color);
    }
    .secondary {
      font-weight: var(--ha-font-weight-normal);
      font-size: var(--ha-font-size-s);
-      line-height: 16px;
+      line-height: var(--ha-line-height-condensed);
      letter-spacing: 0.4px;
      color: var(--primary-text-color);
    }
--- a/src/dialogs/more-info/components/ha-more-info-state-header.ts
+++ b/src/dialogs/more-info/components/ha-more-info-state-header.ts
@ -76,13 +76,13 @@ export class HaMoreInfoStateHeader extends LitElement {
      font-style: normal;
      font-weight: var(--ha-font-weight-normal);
      font-size: var(--ha-font-size-5xl);
-      line-height: 44px;
+      line-height: var(--ha-line-height-condensed);
    }
    .last-changed {
      font-style: normal;
      font-weight: var(--ha-font-weight-semibold);
      font-size: var(--ha-font-size-l);
-      line-height: 24px;
+      line-height: var(--ha-line-height-normal);
      letter-spacing: 0.1px;
      padding: 4px 0;
      margin-bottom: 20px;
--- a/src/dialogs/more-info/controls/more-info-climate.ts
+++ b/src/dialogs/more-info/controls/more-info-climate.ts
@ -531,7 +531,7 @@ class MoreInfoClimate extends LitElement {
        .current .label {
          opacity: 0.8;
          font-size: var(--ha-font-size-m);
-          line-height: 16px;
+          line-height: var(--ha-line-height-condensed);
          letter-spacing: 0.4px;
          margin-bottom: 4px;
        }
@ -539,7 +539,7 @@ class MoreInfoClimate extends LitElement {
        .current .value {
          font-size: var(--ha-font-size-2xl);
          font-weight: var(--ha-font-weight-semibold);
-          line-height: 28px;
+          line-height: var(--ha-line-height-condensed);
          direction: ltr;
        }
        ha-select {
--- a/src/dialogs/more-info/controls/more-info-humidifier.ts
+++ b/src/dialogs/more-info/controls/more-info-humidifier.ts
@ -234,14 +234,14 @@ class MoreInfoHumidifier extends LitElement {
        .current .label {
          opacity: 0.8;
          font-size: var(--ha-font-size-m);
-          line-height: 16px;
+          line-height: var(--ha-line-height-condensed);
          letter-spacing: 0.4px;
          margin-bottom: 4px;
        }
        .current .value {
          font-size: var(--ha-font-size-2xl);
          font-weight: var(--ha-font-weight-semibold);
-          line-height: 28px;
+          line-height: var(--ha-line-height-condensed);
          direction: ltr;
        }
      `,
--- a/src/dialogs/more-info/controls/more-info-lawn_mower.ts
+++ b/src/dialogs/more-info/controls/more-info-lawn_mower.ts
@ -178,7 +178,7 @@ class MoreInfoLawnMower extends LitElement {

  static styles = css`
    :host {
-      line-height: 1.5;
+      line-height: var(--ha-line-height-normal);
    }
    .status-subtitle {
      color: var(--secondary-text-color);
--- a/src/dialogs/more-info/controls/more-info-lock.ts
+++ b/src/dialogs/more-info/controls/more-info-lock.ts
@ -177,7 +177,7 @@ class MoreInfoLock extends LitElement {
          --control-button-background-color: var(--warning-color);
        }
        .open-done {
-          line-height: 60px;
+          line-height: var(--ha-line-height-expanded);
          display: flex;
          align-items: center;
          flex-direction: row;
--- a/src/dialogs/more-info/controls/more-info-vacuum.ts
+++ b/src/dialogs/more-info/controls/more-info-vacuum.ts
@ -317,7 +317,7 @@ class MoreInfoVacuum extends LitElement {

  static styles = css`
    :host {
-      line-height: 1.5;
+      line-height: var(--ha-line-height-normal);
    }
    .status-subtitle {
      color: var(--secondary-text-color);
--- a/src/dialogs/more-info/controls/more-info-water_heater.ts
+++ b/src/dialogs/more-info/controls/more-info-water_heater.ts
@ -235,7 +235,7 @@ class MoreInfoWaterHeater extends LitElement {
        .current .label {
          opacity: 0.8;
          font-size: var(--ha-font-size-m);
-          line-height: 16px;
+          line-height: var(--ha-line-height-condensed);
          letter-spacing: 0.4px;
          margin-bottom: 4px;
        }
@ -243,7 +243,7 @@ class MoreInfoWaterHeater extends LitElement {
        .current .value {
          font-size: var(--ha-font-size-2xl);
          font-weight: var(--ha-font-weight-semibold);
-          line-height: 28px;
+          line-height: var(--ha-line-height-condensed);
          direction: ltr;
        }
      `,
--- a/src/dialogs/more-info/controls/more-info-weather.ts
+++ b/src/dialogs/more-info/controls/more-info-weather.ts
@ -519,12 +519,12 @@ class MoreInfoWeather extends LitElement {
        .state,
        .temp-attribute .temp {
          font-size: var(--ha-font-size-3xl);
-          line-height: 1.2;
+          line-height: var(--ha-line-height-condensed);
        }

        .attribute {
          font-size: var(--ha-font-size-m);
-          line-height: 1;
+          line-height: var(--ha-line-height-condensed);
        }

        .name-state {
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@ -680,13 +680,13 @@ export class MoreInfoDialog extends LitElement {
        .title .main {
          color: var(--primary-text-color);
          font-size: var(--ha-font-size-xl);
-          line-height: 24px;
+          line-height: var(--ha-line-height-condensed);
        }

        .title .breadcrumb {
          color: var(--secondary-text-color);
          font-size: var(--ha-font-size-m);
-          line-height: 16px;
+          line-height: var(--ha-line-height-condensed);
          --mdc-icon-size: 16px;
          padding: 4px;
          margin: -4px;
--- a/src/dialogs/restart/dialog-restart.ts
+++ b/src/dialogs/restart/dialog-restart.ts
@ -469,7 +469,7 @@ class DialogRestart extends LitElement {
        .section {
          font-weight: var(--ha-font-weight-semibold);
          font-size: var(--ha-font-size-m);
-          line-height: 20px;
+          line-height: var(--ha-line-height-normal);
          margin: 8px 0 4px 0;
          padding-left: var(--mdc-list-side-padding, 20px);
          padding-right: var(--mdc-list-side-padding, 20px);
--- a/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts
+++ b/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts
@ -162,14 +162,14 @@ export class CloudStepIntro extends LitElement {
      .feature h2 {
        font-weight: var(--ha-font-weight-semibold);
        font-size: var(--ha-font-size-l);
-        line-height: 24px;
+        line-height: var(--ha-line-height-normal);
        margin-top: 0;
        margin-bottom: 8px;
      }
      .feature p {
        font-weight: var(--ha-font-weight-normal);
        font-size: var(--ha-font-size-m);
-        line-height: 20px;
+        line-height: var(--ha-line-height-normal);
        margin: 0;
      }
    `,
--- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
+++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
@ -273,7 +273,7 @@ export class HaVoiceCommandDialog extends LitElement {
          );
          --mdc-typography-button-line-height: var(
            --mdc-typography-headline6-line-height,
-            2rem
+            var(--ha-line-height-expanded)
          );
          --button-height: auto;
        }
--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@ -125,7 +125,7 @@ class HassSubpage extends LitElement {

        .main-title {
          margin: var(--margin-title);
-          line-height: 20px;
+          line-height: var(--ha-line-height-normal);
          min-width: 0;
          flex-grow: 1;
          overflow-wrap: break-word;
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@ -791,7 +791,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
      border-radius: 50%;
      font-weight: var(--ha-font-weight-normal);
      background-color: var(--primary-color);
-      line-height: 20px;
+      line-height: var(--ha-line-height-normal);
      text-align: center;
      padding: 0px 4px;
      color: var(--text-primary-color);
@ -825,7 +825,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
      font-weight: var(--ha-font-weight-normal);
      font-size: var(--ha-font-size-xs);
      background-color: var(--primary-color);
-      line-height: 16px;
+      line-height: var(--ha-line-height-normal);
      text-align: center;
      padding: 0px 2px;
      color: var(--text-primary-color);
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@ -304,7 +304,7 @@ class HassTabsSubpage extends LitElement {
        .main-title {
          flex: 1;
          max-height: var(--header-height);
-          line-height: 20px;
+          line-height: var(--ha-line-height-normal);
          color: var(--sidebar-text-color);
          margin: var(--main-title-margin, var(--margin-title));
        }
--- a/src/onboarding/onboarding-core-config.ts
+++ b/src/onboarding/onboarding-core-config.ts
@ -200,7 +200,7 @@ class OnboardingCoreConfig extends LitElement {

    p {
      font-size: var(--ha-font-size-m);
-      line-height: 20px;
+      line-height: var(--ha-line-height-normal);
    }

    ha-textfield {
--- a/src/onboarding/restore-backup/onboarding-restore-backup-no-cloud-backup.ts
+++ b/src/onboarding/restore-backup/onboarding-restore-backup-no-cloud-backup.ts
@ -65,7 +65,7 @@ class OnboardingRestoreBackupNoCloudBackup extends LitElement {
        }
        .description {
          font-size: var(--ha-font-size-m);
-          line-height: 1.5rem;
+          line-height: var(--ha-line-height-normal);
          margin-top: 24px;
          margin-bottom: 32px;
        }
--- a/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts
+++ b/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts
@ -308,7 +308,7 @@ class OnboardingRestoreBackupRestore extends LitElement {
        }
        .description {
          font-size: var(--ha-font-size-m);
-          line-height: 1.5rem;
+          line-height: var(--ha-line-height-normal);
          margin-top: 24px;
          margin-bottom: 16px;
        }
--- a/src/onboarding/styles.ts
+++ b/src/onboarding/styles.ts
@ -7,7 +7,7 @@ export const onBoardingStyles = css`
  h1 {
    font-weight: var(--ha-font-weight-normal);
    font-size: var(--ha-font-size-3xl);
-    line-height: 36px;
+    line-height: var(--ha-line-height-condensed);
    margin-bottom: 8px;
  }
  ha-icon-button-arrow-prev {
@ -16,7 +16,7 @@ export const onBoardingStyles = css`
  }
  p {
    font-size: var(--ha-font-size-m);
-    line-height: 1.5rem;
+    line-height: var(--ha-line-height-normal);
    margin-top: 0;
    margin-bottom: 32px;
  }
--- a/src/panels/calendar/dialog-calendar-event-detail.ts
+++ b/src/panels/calendar/dialog-calendar-event-detail.ts
@ -235,7 +235,7 @@ class DialogCalendarEventDetail extends LitElement {
      haStyleDialog,
      css`
        state-info {
-          line-height: 40px;
+          line-height: var(--ha-line-height-expanded);
        }
        ha-svg-icon {
          width: 40px;
--- a/src/panels/calendar/dialog-calendar-event-editor.ts
+++ b/src/panels/calendar/dialog-calendar-event-editor.ts
@ -589,7 +589,7 @@ class DialogCalendarEventEditor extends LitElement {
          }
        }
        state-info {
-          line-height: 40px;
+          line-height: var(--ha-line-height-expanded);
        }
        ha-alert {
          display: block;
--- a/src/panels/calendar/ha-full-calendar.ts
+++ b/src/panels/calendar/ha-full-calendar.ts
@ -617,7 +617,7 @@ export class HAFullCalendar extends LitElement {

        .fc-event {
          border-radius: 4px;
-          line-height: 1.7;
+          line-height: var(--ha-line-height-normal);
          cursor: pointer;
        }

--- a/src/panels/calendar/ha-panel-calendar.ts
+++ b/src/panels/calendar/ha-panel-calendar.ts
@ -318,7 +318,7 @@ class PanelCalendar extends LitElement {
          );
          --mdc-typography-button-line-height: var(
            --mdc-typography-headline6-line-height,
-            2rem
+            var(--ha-line-height-expanded)
          );
          --button-height: 40px;
        }
--- a/src/panels/config/backup/components/config/ha-backup-config-agents.ts
+++ b/src/panels/config/backup/components/config/ha-backup-config-agents.ts
@ -285,7 +285,7 @@ class HaBackupConfigAgents extends LitElement {
      align-items: center;
      flex-direction: row;
      gap: 8px;
-      line-height: normal;
+      line-height: var(--ha-line-height-normal);
    }
    .dot {
      display: block;
--- a/src/panels/config/backup/components/ha-backup-agents-picker.ts
+++ b/src/panels/config/backup/components/ha-backup-agents-picker.ts
@ -122,7 +122,7 @@ class HaBackupAgentsPicker extends LitElement {
      gap: 16px;
      font-size: var(--ha-font-size-l);
      font-weight: var(--ha-font-weight-normal);
-      line-height: 24px;
+      line-height: var(--ha-line-height-normal);
      letter-spacing: 0.5px;
    }
    span.disabled {
--- a/src/panels/config/backup/components/ha-backup-details-restore.ts
+++ b/src/panels/config/backup/components/ha-backup-details-restore.ts
@ -133,7 +133,7 @@ class HaBackupDetailsRestore extends LitElement {
      align-items: center;
      flex-direction: row;
      gap: 8px;
-      line-height: normal;
+      line-height: var(--ha-line-height-normal);
    }
  `;
 }
--- a/src/panels/config/backup/components/ha-backup-details-summary.ts
+++ b/src/panels/config/backup/components/ha-backup-details-summary.ts
@ -105,7 +105,7 @@ class HaBackupDetailsSummary extends LitElement {
      align-items: center;
      flex-direction: row;
      gap: 8px;
-      line-height: normal;
+      line-height: var(--ha-line-height-normal);
    }
  `;
 }
--- a/src/panels/config/backup/components/ha-backup-formfield-label.ts
+++ b/src/panels/config/backup/components/ha-backup-formfield-label.ts
@ -44,7 +44,7 @@ class SupervisorFormfieldLabel extends LitElement {
      margin-inline-start: initial;
      font-size: var(--ha-font-size-m);
      font-weight: var(--ha-font-weight-normal);
-      line-height: 24px;
+      line-height: var(--ha-line-height-normal);
      letter-spacing: 0.5px;
    }
    .version {
--- a/src/panels/config/backup/components/ha-backup-summary-card.ts
+++ b/src/panels/config/backup/components/ha-backup-summary-card.ts
@ -128,7 +128,7 @@ class HaBackupSummaryCard extends LitElement {
      font-size: var(--ha-font-size-2xl);
      font-style: normal;
      font-weight: var(--ha-font-weight-normal);
-      line-height: 28px;
+      line-height: var(--ha-line-height-condensed);
      color: var(--primary-text-color);
      margin: 0;
      text-overflow: ellipsis;
@ -139,7 +139,7 @@ class HaBackupSummaryCard extends LitElement {
      font-size: var(--ha-font-size-m);
      font-style: normal;
      font-weight: var(--ha-font-weight-normal);
-      line-height: 20px;
+      line-height: var(--ha-line-height-normal);
      letter-spacing: 0.25px;
      color: var(--secondary-text-color);
      margin: 0;
--- a/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts
+++ b/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts
@ -583,7 +583,7 @@ class DialogBackupOnboarding extends LitElement implements HassDialog {
          font-size: var(--ha-font-size-xl);
          font-style: normal;
          font-weight: var(--ha-font-weight-normal);
-          line-height: 28px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
        }
        .encryption-key ha-icon-button {
--- a/src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts
+++ b/src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts
@ -317,7 +317,7 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
          font-size: var(--ha-font-size-xl);
          font-style: normal;
          font-weight: var(--ha-font-weight-normal);
-          line-height: 28px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
        }
        .encryption-key ha-icon-button {
--- a/src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts
+++ b/src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts
@ -235,7 +235,7 @@ class DialogSetBackupEncryptionKey extends LitElement implements HassDialog {
          font-size: var(--ha-font-size-xl);
          font-style: normal;
          font-weight: var(--ha-font-weight-normal);
-          line-height: 28px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
        }
        .encryption-key ha-icon-button {
--- a/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts
+++ b/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts
@ -157,7 +157,7 @@ class DialogShowBackupEncryptionKey extends LitElement implements HassDialog {
          font-size: var(--ha-font-size-xl);
          font-style: normal;
          font-weight: var(--ha-font-weight-normal);
-          line-height: 28px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
        }
        .encryption-key ha-icon-button {
--- a/src/panels/config/hardware/dialog-hardware-available.ts
+++ b/src/panels/config/hardware/dialog-hardware-available.ts
@ -196,7 +196,7 @@ class DialogHardwareAvailable extends LitElement implements HassDialog {
        pre {
          padding: 16px;
          overflow: auto;
-          line-height: 1.45;
+          line-height: var(--ha-line-height-condensed);
          font-family: var(--ha-font-family-code);
        }
        code {
--- a/src/panels/config/info/ha-config-info.ts
+++ b/src/panels/config/info/ha-config-info.ts
@ -299,7 +299,7 @@ class HaConfigInfo extends LitElement {
        .header p {
          font-size: var(--ha-font-size-2xl);
          font-weight: var(--ha-font-weight-normal);
-          line-height: 28px;
+          line-height: var(--ha-line-height-condensed);
          text-align: center;
          margin: 24px;
        }
--- a/src/panels/config/integrations/ha-config-integrations-dashboard.ts
+++ b/src/panels/config/integrations/ha-config-integrations-dashboard.ts
@ -1067,7 +1067,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
          border-radius: 50%;
          font-weight: var(--ha-font-weight-normal);
          background-color: var(--primary-color);
-          line-height: 20px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
          padding: 0px 4px;
          color: var(--text-primary-color);
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
@ -618,7 +618,7 @@ class ZWaveJSNodeConfig extends LitElement {
          padding-right: 24px;
          padding-inline-end: 24px;
          padding-inline-start: initial;
-          line-height: 1.5em;
+          line-height: var(--ha-line-height-normal);
        }

        .prefix span {
--- a/src/panels/config/logs/error-log-card.ts
+++ b/src/panels/config/logs/error-log-card.ts
@ -776,9 +776,9 @@ class ErrorLogCard extends LitElement {
    .card-header {
      color: var(--ha-card-header-color, var(--primary-text-color));
      font-family: var(--ha-card-header-font-family, inherit);
-      font-size: var(--ha-card-header-font-size, 24px);
+      font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
      letter-spacing: -0.012em;
-      line-height: 48px;
+      line-height: var(--ha-line-height-expanded);
      display: block;
      margin-block-start: 0px;
      font-weight: var(--ha-font-weight-normal);
--- a/src/panels/config/logs/system-log-card.ts
+++ b/src/panels/config/logs/system-log-card.ts
@ -266,9 +266,9 @@ export class SystemLogCard extends LitElement {
    .card-header {
      color: var(--ha-card-header-color, var(--primary-text-color));
      font-family: var(--ha-card-header-font-family, inherit);
-      font-size: var(--ha-card-header-font-size, 24px);
+      font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
      letter-spacing: -0.012em;
-      line-height: 48px;
+      line-height: var(--ha-line-height-expanded);
      display: block;
      margin-block-start: 0px;
      font-weight: var(--ha-font-weight-normal);
--- a/src/panels/config/network/supervisor-network.ts
+++ b/src/panels/config/network/supervisor-network.ts
@ -832,7 +832,7 @@ export class HassioNetwork extends LitElement {
        }

        sl-tab-group {
-          line-height: 24px;
+          line-height: var(--ha-line-height-normal);
        }
        sl-tab {
          flex: 1;
--- a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-config.ts
+++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-config.ts
@ -96,7 +96,7 @@ export class AssistPipelineDetailConfig extends LitElement {
    h3 {
      font-weight: var(--ha-font-weight-normal);
      font-size: var(--ha-font-size-xl);
-      line-height: 28px;
+      line-height: var(--ha-line-height-normal);
      margin-top: 0;
      margin-bottom: 4px;
    }
--- a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-conversation.ts
+++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-conversation.ts
@ -133,7 +133,7 @@ export class AssistPipelineDetailConversation extends LitElement {
    h3 {
      font-weight: var(--ha-font-weight-normal);
      font-size: var(--ha-font-size-xl);
-      line-height: 28px;
+      line-height: var(--ha-line-height-normal);
      margin-top: 0;
      margin-bottom: 4px;
    }
--- a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-stt.ts
+++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-stt.ts
@ -93,7 +93,7 @@ export class AssistPipelineDetailSTT extends LitElement {
    h3 {
      font-weight: var(--ha-font-weight-normal);
      font-size: var(--ha-font-size-xl);
-      line-height: 28px;
+      line-height: var(--ha-line-height-normal);
      margin-top: 0;
      margin-bottom: 4px;
    }
--- a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-tts.ts
+++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-tts.ts
@ -140,7 +140,7 @@ export class AssistPipelineDetailTTS extends LitElement {
    h3 {
      font-weight: var(--ha-font-weight-normal);
      font-size: var(--ha-font-size-xl);
-      line-height: 28px;
+      line-height: var(--ha-line-height-normal);
      margin-top: 0;
      margin-bottom: 4px;
    }
--- a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-wakeword.ts
+++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-wakeword.ts
@ -147,7 +147,7 @@ export class AssistPipelineDetailWakeWord extends LitElement {
    h3 {
      font-weight: var(--ha-font-weight-normal);
      font-size: var(--ha-font-size-xl);
-      line-height: 28px;
+      line-height: var(--ha-line-height-normal);
      margin-top: 0;
      margin-bottom: 4px;
    }
--- a/src/panels/config/voice-assistants/cloud-discover.ts
+++ b/src/panels/config/voice-assistants/cloud-discover.ts
@ -128,7 +128,7 @@ export class CloudDiscover extends LitElement {
    .header {
      font-weight: var(--ha-font-weight-normal);
      font-size: var(--ha-font-size-3xl);
-      line-height: 36px;
+      line-height: var(--ha-line-height-condensed);
      text-align: center;
      max-width: 600px;
      margin: 0 auto 8px auto;
@ -136,7 +136,7 @@ export class CloudDiscover extends LitElement {
    @media (min-width: 800px) {
      .header {
        font-size: var(--ha-font-size-4xl);
-        line-height: 40px;
+        line-height: var(--ha-line-height-condensed);
        margin-bottom: 16px;
      }
    }
@ -178,14 +178,14 @@ export class CloudDiscover extends LitElement {
    .feature h2 {
      font-weight: var(--ha-font-weight-semibold);
      font-size: var(--ha-font-size-l);
-      line-height: 24px;
+      line-height: var(--ha-line-height-normal);
      margin-top: 0;
      margin-bottom: 8px;
    }
    .feature p {
      font-weight: var(--ha-font-weight-normal);
      font-size: var(--ha-font-size-m);
-      line-height: 20px;
+      line-height: var(--ha-line-height-normal);
      margin: 0;
    }
    .more {
--- a/src/panels/config/voice-assistants/dialog-expose-entity.ts
+++ b/src/panels/config/voice-assistants/dialog-expose-entity.ts
@ -207,7 +207,7 @@ class DialogExposeEntity extends LitElement {
        .subtitle {
          color: var(--secondary-text-color);
          font-size: var(--ha-font-size-m);
-          line-height: normal;
+          line-height: var(--ha-line-height-normal);
        }
        lit-virtualizer {
          width: 100%;
--- a/src/panels/config/voice-assistants/entity-voice-settings.ts
+++ b/src/panels/config/voice-assistants/entity-voice-settings.ts
@ -424,7 +424,7 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) {
        .description {
          color: var(--secondary-text-color);
          font-size: var(--ha-font-size-m);
-          line-height: 20px;
+          line-height: var(--ha-line-height-normal);
          margin-top: 0;
          margin-bottom: 16px;
        }
--- a/src/panels/developer-tools/event/events-list.ts
+++ b/src/panels/developer-tools/event/events-list.ts
@ -64,7 +64,7 @@ class EventsList extends LitElement {

    li {
      list-style: none;
-      line-height: 2em;
+      line-height: var(--ha-line-height-expanded);
    }

    a {
--- a/src/panels/developer-tools/ha-panel-developer-tools.ts
+++ b/src/panels/developer-tools/ha-panel-developer-tools.ts
@ -151,7 +151,7 @@ class PanelDeveloperTools extends LitElement {
        }
        .main-title {
          margin: var(--margin-title);
-          line-height: 20px;
+          line-height: var(--ha-line-height-normal);
          flex-grow: 1;
        }
        developer-tools-router {
--- a/src/panels/energy/ha-panel-energy.ts
+++ b/src/panels/energy/ha-panel-energy.ts
@ -414,7 +414,7 @@ class PanelEnergy extends LitElement {
        }
        .main-title {
          margin: var(--margin-title);
-          line-height: 20px;
+          line-height: var(--ha-line-height-normal);
          flex-grow: 1;
        }
        hui-view-container {
--- a/src/panels/logbook/ha-logbook-renderer.ts
+++ b/src/panels/logbook/ha-logbook-renderer.ts
@ -586,7 +586,7 @@ class HaLogbookRenderer extends LitElement {
          position: relative;
          display: flex;
          width: 100%;
-          line-height: 2em;
+          line-height: var(--ha-line-height-expanded);
          padding: 8px 16px;
          box-sizing: border-box;
          border-top: 1px solid var(--divider-color);
@ -637,7 +637,7 @@ class HaLogbookRenderer extends LitElement {

        .secondary {
          font-size: var(--ha-font-size-s);
-          line-height: 1.7;
+          line-height: var(--ha-line-height-normal);
        }

        .secondary a {
@ -700,7 +700,7 @@ class HaLogbookRenderer extends LitElement {
        }

        .narrow .entry {
-          line-height: 1.5;
+          line-height: var(--ha-line-height-normal);
        }

        .narrow .icon-message state-badge {
--- a/src/panels/lovelace/card-features/common/card-feature-styles.ts
+++ b/src/panels/lovelace/card-features/common/card-feature-styles.ts
@ -6,7 +6,7 @@ export const cardFeatureStyles = css`
    --control-select-menu-height: var(--feature-height);
    --control-select-menu-border-radius: var(--feature-border-radius);
    --control-select-menu-focus-color: var(--feature-color);
-    line-height: 1.2;
+    line-height: var(--ha-line-height-condensed);
    display: block;
    width: 100%;
  }
--- a/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts
@ -128,7 +128,7 @@ class HuiLockOpenDoorCardFeature
        }
        .open-done {
          font-size: var(--ha-font-size-m);
-          line-height: 14px;
+          line-height: var(--ha-line-height-condensed);
          display: flex;
          align-items: center;
          justify-content: center;
--- a/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
@ -873,7 +873,7 @@ class HuiEnergyDistrubutionCard
      justify-content: center;
      text-align: center;
      font-size: var(--ha-font-size-s);
-      line-height: 12px;
+      line-height: var(--ha-line-height-condensed);
      position: relative;
      text-decoration: none;
      color: var(--primary-text-color);
--- a/src/panels/lovelace/cards/hui-calendar-card.ts
+++ b/src/panels/lovelace/cards/hui-calendar-card.ts
@ -223,7 +223,7 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
    .header {
      color: var(--ha-card-header-color, var(--primary-text-color));
      font-size: var(--ha-card-header-font-size, 24px);
-      line-height: 1.2;
+      line-height: var(--ha-line-height-condensed);
      padding-top: 16px;
      padding-left: 8px;
      padding-inline-start: 8px;
--- a/src/panels/lovelace/cards/hui-clock-card.ts
+++ b/src/panels/lovelace/cards/hui-clock-card.ts
@ -206,7 +206,7 @@ export class HuiClockCard extends LitElement implements LovelaceCard {
      color: var(--primary-text-color);
      font-size: var(--ha-font-size-m);
      font-weight: var(--ha-font-weight-normal);
-      line-height: 18px;
+      line-height: var(--ha-line-height-condensed);
      overflow: hidden;
      text-align: center;
      text-overflow: ellipsis;
@ -216,12 +216,12 @@ export class HuiClockCard extends LitElement implements LovelaceCard {

    .time-wrapper.size-medium .time-title {
      font-size: var(--ha-font-size-l);
-      line-height: 21px;
+      line-height: var(--ha-line-height-condensed);
    }

    .time-wrapper.size-large .time-title {
      font-size: var(--ha-font-size-2xl);
-      line-height: 28px;
+      line-height: var(--ha-line-height-condensed);
    }

    .time-parts {
@ -233,7 +233,7 @@ export class HuiClockCard extends LitElement implements LovelaceCard {

      font-size: var(--ha-font-size-3xl);
      font-weight: var(--ha-font-weight-semibold);
-      line-height: 0.8;
+      line-height: var(--ha-line-height-condensed);
      direction: ltr;
    }

@ -271,13 +271,13 @@ export class HuiClockCard extends LitElement implements LovelaceCard {

    .time-parts .time-part.second {
      grid-area: second;
-      line-height: 0.9;
+      line-height: var(--ha-line-height-condensed);
      opacity: 0.4;
    }

    .time-parts .time-part.am-pm {
      grid-area: am-pm;
-      line-height: 0.9;
+      line-height: var(--ha-line-height-condensed);
      opacity: 0.6;
    }

--- a/src/panels/lovelace/cards/hui-entity-card.ts
+++ b/src/panels/lovelace/cards/hui-entity-card.ts
@ -281,7 +281,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {

        .name {
          color: var(--secondary-text-color);
-          line-height: 40px;
+          line-height: var(--ha-line-height-expanded);
          font-weight: var(--ha-font-weight-semibold);
          font-size: var(--ha-font-size-l);
          overflow: hidden;
@ -292,7 +292,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
        .icon {
          color: var(--state-icon-color);
          --state-inactive-color: var(--state-icon-color);
-          line-height: 40px;
+          line-height: var(--ha-line-height-expanded);
        }

        .info {
@ -301,7 +301,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
-          line-height: 28px;
+          line-height: var(--ha-line-height-normal);
        }

        .value {
--- a/src/panels/lovelace/cards/hui-heading-card.ts
+++ b/src/panels/lovelace/cards/hui-heading-card.ts
@ -179,7 +179,10 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard {
        --ha-heading-card-title-font-weight,
        var(--ha-font-weight-normal)
      );
-      line-height: var(--ha-heading-card-title-line-height, 24px);
+      line-height: var(
+        --ha-heading-card-title-line-height,
+        var(--ha-line-height-normal)
+      );
      letter-spacing: 0.1px;
      --mdc-icon-size: 18px;
    }
@ -207,7 +210,10 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard {
        --ha-heading-card-subtitle-font-weight,
        var(--ha-font-weight-semibold)
      );
-      line-height: var(--ha-heading-card-subtitle-line-height, 20px);
+      line-height: var(
+        --ha-heading-card-subtitle-line-height,
+        var(--ha-line-height-normal)
+      );
    }
    .badges {
      display: flex;
--- a/src/panels/lovelace/cards/hui-history-graph-card.ts
+++ b/src/panels/lovelace/cards/hui-history-graph-card.ts
@ -319,7 +319,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
    }
    .card-header ha-icon-next {
      --mdc-icon-button-size: 24px;
-      line-height: 24px;
+      line-height: var(--ha-line-height-normal);
      color: var(--primary-text-color);
    }
    .content {
--- a/Show More
+++ b/Show More