diff --git a/cast/src/launcher/layout/hc-layout.ts b/cast/src/launcher/layout/hc-layout.ts
index a7cd5b2470..f2b751c803 100644
--- 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;
diff --git a/gallery/src/components/page-description.ts b/gallery/src/components/page-description.ts
index c61438a662..691e389be6 100644
--- 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;
diff --git a/gallery/src/ha-gallery.ts b/gallery/src/ha-gallery.ts
index d4ed0bb6dc..7e2df5a1e5 100644
--- 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;
       }
 
diff --git a/hassio/src/addon-view/config/hassio-addon-config.ts b/hassio/src/addon-view/config/hassio-addon-config.ts
index f819ed738e..dcc845355e 100644
--- 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;
diff --git a/hassio/src/components/hassio-card-content.ts b/hassio/src/components/hassio-card-content.ts
index 21027a1007..457df0437f 100644
--- 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;
diff --git a/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts b/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
index 679014604f..fd6abc0ec5 100644
--- 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 {
diff --git a/hassio/src/ingress-view/hassio-ingress-view.ts b/hassio/src/ingress-view/hassio-ingress-view.ts
index 2afea76b1e..dd50d6a496 100644
--- 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;
     }
 
diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts
index 13e8be0c2a..dcd3ea4108 100644
--- 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(
diff --git a/src/auth/ha-pick-auth-provider.ts b/src/auth/ha-pick-auth-provider.ts
index 6787dca43f..2e48d21fb7 100644
--- 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);
diff --git a/src/components/chart/state-history-charts.ts b/src/components/chart/state-history-charts.ts
index 7e89aad514..cf22e149d7 100644
--- 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);
     }
 
diff --git a/src/components/chart/statistics-chart.ts b/src/components/chart/statistics-chart.ts
index 57b66dac25..914599f3b3 100644
--- 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);
     }
   `;
diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index a7e2c2a8f9..4dcb95eddd 100644
--- 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;
diff --git a/src/components/entity/state-info.ts b/src/components/entity/state-info.ts
index 15d274bb21..0be2d4c5a4 100644
--- 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,
diff --git a/src/components/ha-badge.ts b/src/components/ha-badge.ts
index d530ba79dd..7db86a534a 100644
--- 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);
     }
diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index 499cc0d51d..493e939e14 100644
--- 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);
     }
   `;
 }
diff --git a/src/components/ha-big-number.ts b/src/components/ha-big-number.ts
index e4474dc880..e9a42d1b62 100644
--- 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 {
diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts
index 121e879b22..b0342bdd6d 100644
--- 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;
diff --git a/src/components/ha-combo-box-item.ts b/src/components/ha-combo-box-item.ts
index 215414c201..f8c06170ca 100644
--- 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;
       }
diff --git a/src/components/ha-control-select-menu.ts b/src/components/ha-control-select-menu.ts
index b5b255b792..8e34da2b73 100644
--- 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;
diff --git a/src/components/ha-dialog-header.ts b/src/components/ha-dialog-header.ts
index 9094fa999f..2d4cd2a6ba 100644
--- 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) {
diff --git a/src/components/ha-filter-blueprints.ts b/src/components/ha-filter-blueprints.ts
index 8ea2ccac14..c7aea9e703 100644
--- 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);
diff --git a/src/components/ha-filter-categories.ts b/src/components/ha-filter-categories.ts
index 280185b797..a805497d9e 100644
--- 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);
diff --git a/src/components/ha-filter-devices.ts b/src/components/ha-filter-devices.ts
index 77517ee6ef..b9fc2d6a0d 100644
--- 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);
diff --git a/src/components/ha-filter-domains.ts b/src/components/ha-filter-domains.ts
index 034279a497..feecbc021d 100644
--- 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);
diff --git a/src/components/ha-filter-entities.ts b/src/components/ha-filter-entities.ts
index 83b9455d44..673ca53375 100644
--- 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);
diff --git a/src/components/ha-filter-floor-areas.ts b/src/components/ha-filter-floor-areas.ts
index fc5af1573d..3a894c6fd9 100644
--- 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);
diff --git a/src/components/ha-filter-integrations.ts b/src/components/ha-filter-integrations.ts
index c6d73cef1e..4c7ace4879 100644
--- 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);
diff --git a/src/components/ha-filter-labels.ts b/src/components/ha-filter-labels.ts
index 69ff204c33..4eade1524f 100644
--- 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);
diff --git a/src/components/ha-filter-states.ts b/src/components/ha-filter-states.ts
index 5248fc5550..75e3a0f5a5 100644
--- 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);
diff --git a/src/components/ha-label-badge.ts b/src/components/ha-label-badge.ts
index d0f9679fcf..6a3506e9a8 100644
--- 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 {
diff --git a/src/components/ha-label.ts b/src/components/ha-label.ts
index 28b3a1717a..35d35d7928 100644
--- 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;
diff --git a/src/components/ha-markdown.ts b/src/components/ha-markdown.ts
index e07d1f772d..66035eaefc 100644
--- 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,
diff --git a/src/components/ha-md-dialog.ts b/src/components/ha-md-dialog.ts
index f62cee329c..61e6ae6a94 100644
--- 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"]) {
diff --git a/src/components/ha-select-box.ts b/src/components/ha-select-box.ts
index a0b9d20f13..1c79e03473 100644
--- 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;
diff --git a/src/components/ha-settings-row.ts b/src/components/ha-settings-row.ts
index 273f23eec0..1330b5485a 100644
--- 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] {
diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index 327529884e..9c194fa2a2 100644
--- 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;
         }
 
diff --git a/src/components/ha-textarea.ts b/src/components/ha-textarea.ts
index d531c4746f..378c96e74e 100644
--- 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(
diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts
index a97bf138e0..d802382814 100644
--- 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);
     }
   `;
 }
diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts
index 016e4e2cf9..f1604e535a 100644
--- 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;
diff --git a/src/components/tile/ha-tile-info.ts b/src/components/tile/ha-tile-info.ts
index ab368ea08f..cf85fa01c9 100644
--- 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);
     }
diff --git a/src/dialogs/more-info/components/ha-more-info-state-header.ts b/src/dialogs/more-info/components/ha-more-info-state-header.ts
index 3dde088caa..a234319d49 100644
--- 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;
diff --git a/src/dialogs/more-info/controls/more-info-climate.ts b/src/dialogs/more-info/controls/more-info-climate.ts
index b5f99398d8..efb195e015 100644
--- 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 {
diff --git a/src/dialogs/more-info/controls/more-info-humidifier.ts b/src/dialogs/more-info/controls/more-info-humidifier.ts
index 60d7b6115b..36cf0457ab 100644
--- 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;
         }
       `,
diff --git a/src/dialogs/more-info/controls/more-info-lawn_mower.ts b/src/dialogs/more-info/controls/more-info-lawn_mower.ts
index 399e2c348c..117e4c942f 100644
--- 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);
diff --git a/src/dialogs/more-info/controls/more-info-lock.ts b/src/dialogs/more-info/controls/more-info-lock.ts
index f7906834fa..dab5a6666e 100644
--- 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;
diff --git a/src/dialogs/more-info/controls/more-info-vacuum.ts b/src/dialogs/more-info/controls/more-info-vacuum.ts
index 9596678775..5cfc75eb73 100644
--- 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);
diff --git a/src/dialogs/more-info/controls/more-info-water_heater.ts b/src/dialogs/more-info/controls/more-info-water_heater.ts
index c8df25fa38..e6b5a1e93b 100644
--- 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;
         }
       `,
diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts
index ef700b6638..78c0c390ff 100644
--- 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 {
diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts
index 18527a21f8..587ce8c7ed 100644
--- 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;
diff --git a/src/dialogs/restart/dialog-restart.ts b/src/dialogs/restart/dialog-restart.ts
index b28ffac517..9f723f2493 100644
--- 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);
diff --git a/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts b/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts
index a082e5d0dc..8b81e0f7cb 100644
--- 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;
       }
     `,
diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
index c02f0af0ff..6745a8c6b4 100644
--- 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;
         }
diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
index 639b0601e4..9859e09325 100644
--- 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;
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index d7df4e9569..c3be33c855 100644
--- 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);
diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts
index 49e4a65f85..3f52ea4ed1 100644
--- 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));
         }
diff --git a/src/onboarding/onboarding-core-config.ts b/src/onboarding/onboarding-core-config.ts
index 34013bee63..aa22e8f93d 100644
--- 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 {
diff --git a/src/onboarding/restore-backup/onboarding-restore-backup-no-cloud-backup.ts b/src/onboarding/restore-backup/onboarding-restore-backup-no-cloud-backup.ts
index d000588fdf..f642ebeffd 100644
--- 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;
         }
diff --git a/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts b/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts
index b0bbc4ad09..e0071ad7da 100644
--- 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;
         }
diff --git a/src/onboarding/styles.ts b/src/onboarding/styles.ts
index 5a45fc39d1..4a2184949f 100644
--- 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;
   }
diff --git a/src/panels/calendar/dialog-calendar-event-detail.ts b/src/panels/calendar/dialog-calendar-event-detail.ts
index 4644b74fa3..245a2b08d7 100644
--- 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;
diff --git a/src/panels/calendar/dialog-calendar-event-editor.ts b/src/panels/calendar/dialog-calendar-event-editor.ts
index 440bf8c487..562789a347 100644
--- 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;
diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts
index c7356287d0..761f0b37fa 100644
--- 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;
         }
 
diff --git a/src/panels/calendar/ha-panel-calendar.ts b/src/panels/calendar/ha-panel-calendar.ts
index b27b52874a..be0fcbddbd 100644
--- 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;
         }
diff --git a/src/panels/config/backup/components/config/ha-backup-config-agents.ts b/src/panels/config/backup/components/config/ha-backup-config-agents.ts
index 687321f7c5..ca88fbf829 100644
--- 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;
diff --git a/src/panels/config/backup/components/ha-backup-agents-picker.ts b/src/panels/config/backup/components/ha-backup-agents-picker.ts
index 08e409cf42..778eef62cd 100644
--- 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 {
diff --git a/src/panels/config/backup/components/ha-backup-details-restore.ts b/src/panels/config/backup/components/ha-backup-details-restore.ts
index 170a39bf5b..d6fefd3568 100644
--- 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);
     }
   `;
 }
diff --git a/src/panels/config/backup/components/ha-backup-details-summary.ts b/src/panels/config/backup/components/ha-backup-details-summary.ts
index 2bd0f2d6a3..a86e76b1d8 100644
--- 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);
     }
   `;
 }
diff --git a/src/panels/config/backup/components/ha-backup-formfield-label.ts b/src/panels/config/backup/components/ha-backup-formfield-label.ts
index cdbe6d98b6..87be97d213 100644
--- 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 {
diff --git a/src/panels/config/backup/components/ha-backup-summary-card.ts b/src/panels/config/backup/components/ha-backup-summary-card.ts
index 625e6f55e1..f7b3ddfbe6 100644
--- 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;
diff --git a/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts b/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts
index 4ecc52976d..d66748404a 100644
--- 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 {
diff --git a/src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts b/src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts
index 29efd4641d..457c8b9c50 100644
--- 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 {
diff --git a/src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts b/src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts
index f385d2ccbb..ef24a64e84 100644
--- 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 {
diff --git a/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts b/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts
index a66159bf72..448d9bf139 100644
--- 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 {
diff --git a/src/panels/config/hardware/dialog-hardware-available.ts b/src/panels/config/hardware/dialog-hardware-available.ts
index 36da289ccc..a386b76022 100644
--- 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 {
diff --git a/src/panels/config/info/ha-config-info.ts b/src/panels/config/info/ha-config-info.ts
index fdec89eb5a..67713ed898 100644
--- 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;
         }
diff --git a/src/panels/config/integrations/ha-config-integrations-dashboard.ts b/src/panels/config/integrations/ha-config-integrations-dashboard.ts
index 19a9e63cb9..9f5c6a2ea0 100644
--- 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);
diff --git 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
index 6b71cc608d..1d98a00eb7 100644
--- 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 {
diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts
index 7d3adebafc..e14cebf249 100644
--- 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);
diff --git a/src/panels/config/logs/system-log-card.ts b/src/panels/config/logs/system-log-card.ts
index 4e343a1322..bef4875a12 100644
--- 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);
diff --git a/src/panels/config/network/supervisor-network.ts b/src/panels/config/network/supervisor-network.ts
index 6decf94b54..089bfdad70 100644
--- 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;
diff --git 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
index 90f422be9b..0832222c36 100644
--- 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;
     }
diff --git 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
index fe1957f157..85adf7ef30 100644
--- 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;
     }
diff --git 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
index 8774e27c32..76679c38a8 100644
--- 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;
     }
diff --git 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
index b58e620f08..54e4d7800b 100644
--- 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;
     }
diff --git 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
index 0fd4d7a9d1..db0ae4c8e0 100644
--- 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;
     }
diff --git a/src/panels/config/voice-assistants/cloud-discover.ts b/src/panels/config/voice-assistants/cloud-discover.ts
index 9d9d4bd905..12d168a3ec 100644
--- 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 {
diff --git a/src/panels/config/voice-assistants/dialog-expose-entity.ts b/src/panels/config/voice-assistants/dialog-expose-entity.ts
index 0c57a00a72..eb35c3dbb6 100644
--- 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%;
diff --git a/src/panels/config/voice-assistants/entity-voice-settings.ts b/src/panels/config/voice-assistants/entity-voice-settings.ts
index 4f2946eeb1..e47983151f 100644
--- 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;
         }
diff --git a/src/panels/developer-tools/event/events-list.ts b/src/panels/developer-tools/event/events-list.ts
index f0f61f8369..ee784c0e75 100644
--- 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 {
diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts
index 5cc477831a..a3cef59da7 100644
--- 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 {
diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts
index a3f2c5dbf1..3ae1c157cb 100644
--- 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 {
diff --git a/src/panels/logbook/ha-logbook-renderer.ts b/src/panels/logbook/ha-logbook-renderer.ts
index 56bc0d7a92..43a4a6af10 100644
--- 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 {
diff --git a/src/panels/lovelace/card-features/common/card-feature-styles.ts b/src/panels/lovelace/card-features/common/card-feature-styles.ts
index e8293034d6..799570cc99 100644
--- 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%;
   }
diff --git 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
index 6dab2d1386..7907a63d16 100644
--- 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;
diff --git a/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts b/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
index 4d6856f482..faef5ef026 100644
--- 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);
diff --git a/src/panels/lovelace/cards/hui-calendar-card.ts b/src/panels/lovelace/cards/hui-calendar-card.ts
index c09835c4e1..0c443554ee 100644
--- 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;
diff --git a/src/panels/lovelace/cards/hui-clock-card.ts b/src/panels/lovelace/cards/hui-clock-card.ts
index c5188d754c..f3c5ad787d 100644
--- 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;
     }
 
diff --git a/src/panels/lovelace/cards/hui-entity-card.ts b/src/panels/lovelace/cards/hui-entity-card.ts
index cbd80ac4d7..bd45343828 100644
--- 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 {
diff --git a/src/panels/lovelace/cards/hui-heading-card.ts b/src/panels/lovelace/cards/hui-heading-card.ts
index 2a60068ed4..a2c7d32f72 100644
--- 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;
diff --git a/src/panels/lovelace/cards/hui-history-graph-card.ts b/src/panels/lovelace/cards/hui-history-graph-card.ts
index 5ac50c7fc6..a1ea06e113 100644
--- 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 {
diff --git a/src/panels/lovelace/cards/hui-humidifier-card.ts b/src/panels/lovelace/cards/hui-humidifier-card.ts
index edbe0b782b..39df5b5e8d 100644
--- a/src/panels/lovelace/cards/hui-humidifier-card.ts
+++ b/src/panels/lovelace/cards/hui-humidifier-card.ts
@@ -211,7 +211,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
     .title {
       width: 100%;
       font-size: var(--ha-font-size-l);
-      line-height: 36px;
+      line-height: var(--ha-line-height-expanded);
       padding: 8px 30px 8px 30px;
       margin: 0;
       text-align: center;
diff --git a/src/panels/lovelace/cards/hui-picture-entity-card.ts b/src/panels/lovelace/cards/hui-picture-entity-card.ts
index fb7abab346..a9fa4a2d0e 100644
--- a/src/panels/lovelace/cards/hui-picture-entity-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-entity-card.ts
@@ -222,7 +222,7 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
       );
       padding: 16px;
       font-size: var(--ha-font-size-l);
-      line-height: 16px;
+      line-height: var(--ha-line-height-condensed);
       color: var(--ha-picture-card-text-color, white);
       pointer-events: none;
     }
diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts
index 249291466c..cdf551cdf3 100644
--- a/src/panels/lovelace/cards/hui-picture-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts
@@ -362,7 +362,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
       text-overflow: ellipsis;
       overflow: hidden;
       font-size: var(--ha-font-size-l);
-      line-height: 40px;
+      line-height: var(--ha-line-height-expanded);
       color: var(--ha-picture-card-text-color, white);
       align-self: center;
     }
@@ -384,7 +384,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
       display: block;
       font-size: var(--ha-font-size-s);
       text-align: center;
-      line-height: 12px;
+      line-height: var(--ha-line-height-condensed);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
diff --git a/src/panels/lovelace/cards/hui-plant-status-card.ts b/src/panels/lovelace/cards/hui-plant-status-card.ts
index cb6a70f564..166ff9f6ac 100644
--- a/src/panels/lovelace/cards/hui-plant-status-card.ts
+++ b/src/panels/lovelace/cards/hui-plant-status-card.ts
@@ -182,16 +182,14 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard {
       -webkit-font-smoothing: var(--ha-font-smoothing);
       font-size: var(--ha-font-size-2xl);
       font-weight: var(--ha-font-weight-normal);
-      line-height: var(--ha-line-height-condensed);
-
-      line-height: 40px;
+      line-height: var(--ha-line-height-expanded);
       padding: 8px 16px;
     }
 
     .has-plant-image .header {
       font-size: var(--ha-font-size-l);
       font-weight: var(--ha-font-weight-semibold);
-      line-height: 16px;
+      line-height: var(--ha-line-height-condensed);
       padding: 16px;
       color: white;
       width: 100%;
diff --git a/src/panels/lovelace/cards/hui-stack-card.ts b/src/panels/lovelace/cards/hui-stack-card.ts
index 4cc2ee39b0..68d2b118e8 100644
--- a/src/panels/lovelace/cards/hui-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-stack-card.ts
@@ -96,12 +96,12 @@ export abstract class HuiStackCard<T extends StackCardConfig = StackCardConfig>
       color: var(--ha-card-header-color, var(--primary-text-color));
       text-align: var(--ha-stack-title-text-align, start);
       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));
       font-weight: var(--ha-font-weight-normal);
       margin-block-start: 0px;
       margin-block-end: 0px;
       letter-spacing: -0.012em;
-      line-height: 32px;
+      line-height: var(--ha-line-height-normal);
       display: block;
       padding: 24px 16px 16px;
     }
diff --git a/src/panels/lovelace/cards/hui-statistic-card.ts b/src/panels/lovelace/cards/hui-statistic-card.ts
index e758d6f776..018831ed2c 100644
--- a/src/panels/lovelace/cards/hui-statistic-card.ts
+++ b/src/panels/lovelace/cards/hui-statistic-card.ts
@@ -369,7 +369,7 @@ export class HuiStatisticCard 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;
@@ -379,7 +379,7 @@ export class HuiStatisticCard extends LitElement implements LovelaceCard {
 
         .icon {
           color: var(--state-icon-color, #44739e);
-          line-height: 40px;
+          line-height: var(--ha-line-height-expanded);
         }
 
         .info {
@@ -388,7 +388,7 @@ export class HuiStatisticCard extends LitElement implements LovelaceCard {
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
-          line-height: 28px;
+          line-height: var(--ha-line-height-normal);
         }
 
         .value {
diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index 5d1aebb00d..8bd478e90e 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -203,7 +203,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
     .title {
       width: 100%;
       font-size: var(--ha-font-size-l);
-      line-height: 36px;
+      line-height: var(--ha-line-height-expanded);
       padding: 8px 30px 8px 30px;
       margin: 0;
       text-align: center;
diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
index 215a8be140..970f4b65bb 100644
--- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts
+++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
@@ -536,13 +536,13 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         .state,
         .temp-attribute .temp {
           font-size: var(--ha-font-size-3xl);
-          line-height: 1.2;
+          line-height: var(--ha-line-height-condensed);
         }
 
         .name,
         .attribute {
           font-size: var(--ha-font-size-m);
-          line-height: 1;
+          line-height: var(--ha-line-height-condensed);
         }
 
         .name-state {
diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts
index cfa35bee77..53c6071f69 100644
--- a/src/panels/lovelace/components/hui-card-options.ts
+++ b/src/panels/lovelace/components/hui-card-options.ts
@@ -227,7 +227,7 @@ export class HuiCardOptions extends LitElement {
         .position-badge {
           display: block;
           width: 24px;
-          line-height: 24px;
+          line-height: var(--ha-line-height-normal);
           box-sizing: border-box;
           border-radius: 50%;
           font-weight: var(--ha-font-weight-semibold);
diff --git a/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts b/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts
index 8f1ee14694..8673e9c060 100644
--- a/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts
+++ b/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts
@@ -509,7 +509,7 @@ export class HuiBadgePicker extends LitElement {
           font-size: var(--ha-font-size-l);
           font-weight: var(--ha-font-weight-bold);
           letter-spacing: -0.012em;
-          line-height: 20px;
+          line-height: var(--ha-line-height-normal);
           padding: 12px 16px;
           display: block;
           text-align: center;
@@ -560,7 +560,7 @@ export class HuiBadgePicker extends LitElement {
           inset-inline-end: 8px;
           border-radius: 50%;
           --mdc-icon-size: 16px;
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
           box-sizing: border-box;
           color: var(--text-primary-color);
           padding: 4px;
diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
index 4cf2ed0024..ee433c6912 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
@@ -514,7 +514,7 @@ export class HuiCardPicker extends LitElement {
           font-size: var(--ha-font-size-l);
           font-weight: var(--ha-font-weight-bold);
           letter-spacing: -0.012em;
-          line-height: 20px;
+          line-height: var(--ha-line-height-condensed);
           padding: 12px 16px;
           display: block;
           text-align: center;
@@ -565,7 +565,7 @@ export class HuiCardPicker extends LitElement {
           inset-inline-end: 8px;
           border-radius: 50%;
           --mdc-icon-size: 16px;
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
           box-sizing: border-box;
           color: var(--text-primary-color);
           padding: 4px;
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 5268f75f01..00ffc5089b 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -1033,7 +1033,7 @@ class HUIRoot extends LitElement {
         }
         .main-title {
           margin: var(--margin-title);
-          line-height: 20px;
+          line-height: var(--ha-line-height-normal);
           flex-grow: 1;
         }
         .action-items {
diff --git a/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts b/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts
index be733ee9a8..6edf10b22c 100644
--- a/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts
+++ b/src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts
@@ -205,7 +205,7 @@ export class HuiAreasDashboardStrategyEditor
         .toolbar p {
           margin: 0;
           font-size: var(--ha-font-size-l);
-          line-height: 24px;
+          line-height: var(--ha-line-height-normal);
           font-weight: var(--ha-font-weight-normal);
           padding: 6px 4px;
         }
diff --git a/src/panels/lovelace/views/hui-sections-view.ts b/src/panels/lovelace/views/hui-sections-view.ts
index b0f6d11951..0946de6233 100644
--- a/src/panels/lovelace/views/hui-sections-view.ts
+++ b/src/panels/lovelace/views/hui-sections-view.ts
@@ -532,7 +532,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       color: var(--primary-text-color);
       font-size: var(--ha-font-size-l);
       font-weight: var(--ha-font-weight-normal);
-      line-height: 24px;
+      line-height: var(--ha-line-height-normal);
       text-align: center;
     }
 
@@ -619,7 +619,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       color: var(--primary-text-color);
       font-size: var(--ha-font-size-l);
       font-weight: var(--ha-font-weight-normal);
-      line-height: 24px;
+      line-height: var(--ha-line-height-normal);
       --mdc-icon-size: 18px;
       display: flex;
       align-items: center;
@@ -631,7 +631,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       color: var(--secondary-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);
     }
   `;
 }
diff --git a/src/panels/media-browser/ha-bar-media-player.ts b/src/panels/media-browser/ha-bar-media-player.ts
index 66d5def2e0..4e8e7c7001 100644
--- a/src/panels/media-browser/ha-bar-media-player.ts
+++ b/src/panels/media-browser/ha-bar-media-player.ts
@@ -575,7 +575,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
     }
 
     ha-button-menu ha-button[slot="trigger"] {
-      line-height: 1;
+      line-height: var(--ha-line-height-condensed);
       --mdc-theme-primary: var(--primary-text-color);
       --mdc-icon-size: 16px;
     }
diff --git a/src/panels/todo/ha-panel-todo.ts b/src/panels/todo/ha-panel-todo.ts
index d6c2369822..c64b9f0f20 100644
--- a/src/panels/todo/ha-panel-todo.ts
+++ b/src/panels/todo/ha-panel-todo.ts
@@ -412,7 +412,7 @@ class PanelTodo extends LitElement {
           );
           --mdc-typography-button-line-height: var(
             --mdc-typography-headline6-line-height,
-            2rem
+            var(--ha-line-height-expanded)
           );
           --button-height: 40px;
         }
diff --git a/src/state-control/state-control-circular-slider-style.ts b/src/state-control/state-control-circular-slider-style.ts
index 8336ab4e35..40b744f05a 100644
--- a/src/state-control/state-control-circular-slider-style.ts
+++ b/src/state-control/state-control-circular-slider-style.ts
@@ -24,7 +24,7 @@ export const stateControlCircularSliderStyle = css`
     justify-content: center;
     pointer-events: none;
     font-size: var(--ha-font-size-l);
-    line-height: 1.5;
+    line-height: var(--ha-line-height-normal);
     letter-spacing: 0.1px;
     gap: 8px;
     --mdc-icon-size: 16px;
@@ -42,7 +42,7 @@ export const stateControlCircularSliderStyle = css`
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
-    line-height: 1.5;
+    line-height: var(--ha-line-height-normal);
     min-height: 1.5em;
     white-space: nowrap;
   }
diff --git a/src/state-summary/state-card-climate.ts b/src/state-summary/state-card-climate.ts
index 8c32836566..59c5bb3185 100644
--- a/src/state-summary/state-card-climate.ts
+++ b/src/state-summary/state-card-climate.ts
@@ -36,7 +36,7 @@ class StateCardClimate extends LitElement {
       haStyle,
       css`
         :host {
-          line-height: 1.5;
+          line-height: var(--ha-line-height-normal);
         }
 
         ha-climate-state {
diff --git a/src/state-summary/state-card-cover.ts b/src/state-summary/state-card-cover.ts
index d83737df0c..adb976d2d4 100644
--- a/src/state-summary/state-card-cover.ts
+++ b/src/state-summary/state-card-cover.ts
@@ -44,7 +44,7 @@ class StateCardCover extends LitElement {
       haStyle,
       css`
         :host {
-          line-height: 1.5;
+          line-height: var(--ha-line-height-normal);
         }
       `,
     ];
diff --git a/src/state-summary/state-card-humidifier.ts b/src/state-summary/state-card-humidifier.ts
index e691ce7956..61acfb5ace 100644
--- a/src/state-summary/state-card-humidifier.ts
+++ b/src/state-summary/state-card-humidifier.ts
@@ -38,7 +38,7 @@ class StateCardHumidifier extends LitElement {
       haStyle,
       css`
         :host {
-          line-height: 1.5;
+          line-height: var(--ha-line-height-normal);
         }
 
         ha-humidifier-state {
diff --git a/src/state-summary/state-card-media_player.ts b/src/state-summary/state-card-media_player.ts
index b5101cf28a..9a0e0f982b 100644
--- a/src/state-summary/state-card-media_player.ts
+++ b/src/state-summary/state-card-media_player.ts
@@ -45,7 +45,7 @@ class StateCardMediaPlayer extends LitElement {
       haStyle,
       css`
         :host {
-          line-height: 1.5;
+          line-height: var(--ha-line-height-normal);
         }
 
         .state {
@@ -60,7 +60,7 @@ class StateCardMediaPlayer extends LitElement {
         }
 
         .main-text[take-height] {
-          line-height: 40px;
+          line-height: var(--ha-line-height-expanded);
         }
 
         .secondary-text {
diff --git a/src/state-summary/state-card-timer.ts b/src/state-summary/state-card-timer.ts
index f83fdeb33f..68d4002f84 100644
--- a/src/state-summary/state-card-timer.ts
+++ b/src/state-summary/state-card-timer.ts
@@ -43,7 +43,7 @@ class StateCardTimer extends LitElement {
           margin-inline-start: 16px;
           margin-inline-end: initial;
           text-align: var(--float-end);
-          line-height: 40px;
+          line-height: var(--ha-line-height-expanded);
           white-space: nowrap;
         }
       `,
diff --git a/src/state-summary/state-card-water_heater.ts b/src/state-summary/state-card-water_heater.ts
index 2fe2204b6c..14a2ceb6b5 100644
--- a/src/state-summary/state-card-water_heater.ts
+++ b/src/state-summary/state-card-water_heater.ts
@@ -37,7 +37,7 @@ class StateCardWaterHeater extends LitElement {
       haStyle,
       css`
         :host {
-          line-height: 1.5;
+          line-height: var(--ha-line-height-normal);
         }
 
         ha-water_heater-state {