From 3058fcad460de5bfb608044eb6990074a7e298b3 Mon Sep 17 00:00:00 2001
From: Wendelin <12148533+wendevlin@users.noreply.github.com>
Date: Fri, 9 May 2025 13:47:25 +0200
Subject: [PATCH] Use `ha-font-size` typography css tokens (#25361)

---
 cast/src/launcher/layout/hc-layout.ts         |  6 ++---
 cast/src/receiver/layout/hc-launch-screen.ts  |  2 +-
 gallery/src/components/page-description.ts    |  2 +-
 gallery/src/ha-demo-options.ts                |  2 +-
 gallery/src/ha-gallery.ts                     |  2 +-
 .../pages/components/ha-hs-color-picker.ts    |  2 +-
 .../addon-view/config/hassio-addon-config.ts  |  2 +-
 .../src/addon-view/info/hassio-addon-info.ts  |  4 ++--
 hassio/src/backups/hassio-backups.ts          |  2 +-
 .../hardware/dialog-hassio-hardware.ts        |  2 +-
 .../src/ingress-view/hassio-ingress-view.ts   |  2 +-
 src/auth/ha-authorize.ts                      |  4 ++--
 src/auth/ha-pick-auth-provider.ts             |  2 +-
 src/components/chart/ha-chart-base.ts         |  2 +-
 src/components/entity/ha-state-label-badge.ts |  2 +-
 src/components/ha-assist-chat.ts              |  4 ++--
 src/components/ha-badge.ts                    |  2 +-
 src/components/ha-base-time-input.ts          |  2 +-
 src/components/ha-card.ts                     |  2 +-
 src/components/ha-combo-box-item.ts           |  4 ++--
 src/components/ha-control-select-menu.ts      |  2 +-
 src/components/ha-control-slider.ts           |  2 +-
 src/components/ha-dialog-header.ts            |  4 ++--
 src/components/ha-expansion-panel.ts          |  2 +-
 src/components/ha-file-upload.ts              |  4 ++--
 src/components/ha-filter-blueprints.ts        |  2 +-
 src/components/ha-filter-categories.ts        |  2 +-
 src/components/ha-filter-devices.ts           |  2 +-
 src/components/ha-filter-domains.ts           |  2 +-
 src/components/ha-filter-entities.ts          |  2 +-
 src/components/ha-filter-floor-areas.ts       |  2 +-
 src/components/ha-filter-integrations.ts      |  2 +-
 src/components/ha-filter-labels.ts            |  2 +-
 src/components/ha-filter-states.ts            |  2 +-
 src/components/ha-header-bar.ts               |  2 +-
 src/components/ha-heading-badge.ts            |  2 +-
 src/components/ha-label.ts                    |  2 +-
 src/components/ha-markdown.ts                 |  4 ++--
 src/components/ha-select-box.ts               |  2 +-
 .../ha-selector/ha-selector-media.ts          |  2 +-
 .../ha-selector/ha-selector-selector.ts       |  2 +-
 src/components/ha-settings-row.ts             |  2 +-
 src/components/ha-sidebar.ts                  |  6 ++---
 src/components/ha-top-app-bar-fixed.ts        |  2 +-
 .../ha-two-pane-top-app-bar-fixed.ts          |  2 +-
 src/components/map/ha-entity-marker.ts        |  2 +-
 src/components/map/ha-map.ts                  |  4 ++--
 .../media-player/ha-media-player-browse.ts    | 10 ++++----
 src/components/tile/ha-tile-info.ts           |  4 ++--
 src/components/trace/hat-graph-node.ts        |  2 +-
 src/components/user/ha-person-badge.ts        |  4 ++--
 src/components/user/ha-user-badge.ts          |  2 +-
 src/dialogs/config-flow/styles.ts             |  2 +-
 src/dialogs/enter-code/dialog-enter-code.ts   |  2 +-
 .../components/ha-more-info-state-header.ts   |  2 +-
 .../lights/light-color-temp-picker.ts         |  2 +-
 .../more-info/controls/more-info-climate.ts   |  6 ++---
 .../controls/more-info-humidifier.ts          |  4 ++--
 .../more-info/controls/more-info-lock.ts      |  2 +-
 .../controls/more-info-water_heater.ts        |  4 ++--
 .../more-info/controls/more-info-weather.ts   |  8 +++----
 src/dialogs/more-info/ha-more-info-dialog.ts  |  4 ++--
 src/dialogs/restart/dialog-restart.ts         |  2 +-
 .../cloud/cloud-step-intro.ts                 |  6 ++---
 src/layouts/hass-error-screen.ts              |  2 +-
 src/layouts/hass-loading-screen.ts            |  2 +-
 src/layouts/hass-subpage.ts                   |  2 +-
 src/layouts/hass-tabs-subpage-data-table.ts   |  6 ++---
 src/layouts/hass-tabs-subpage.ts              |  6 ++---
 src/onboarding/onboarding-core-config.ts      |  2 +-
 src/onboarding/onboarding-location.ts         |  5 +++-
 .../onboarding-restore-backup-cloud-login.ts  |  2 +-
 .../onboarding-restore-backup-restore.ts      |  2 +-
 .../onboarding-restore-backup-status.ts       |  4 ++--
 src/onboarding/styles.ts                      |  2 +-
 .../calendar/dialog-calendar-event-editor.ts  |  2 +-
 src/panels/calendar/ha-full-calendar.ts       |  8 +++----
 src/panels/calendar/ha-panel-calendar.ts      |  2 +-
 .../ha-config-application-credentials.ts      |  2 +-
 .../config/areas/ha-config-areas-dashboard.ts |  2 +-
 .../condition/ha-automation-condition-row.ts  |  2 +-
 .../config/automation/ha-automation-trace.ts  |  2 +-
 .../trigger/ha-automation-trigger-row.ts      |  2 +-
 .../components/ha-backup-agents-picker.ts     |  2 +-
 .../components/ha-backup-formfield-label.ts   |  2 +-
 .../components/ha-backup-summary-card.ts      |  4 ++--
 .../dialogs/dialog-backup-onboarding.ts       |  2 +-
 .../dialog-change-backup-encryption-key.ts    |  2 +-
 .../dialog-download-decrypted-backup.ts       |  2 +-
 .../dialog-set-backup-encryption-key.ts       |  2 +-
 .../dialog-show-backup-encryption-key.ts      |  2 +-
 .../config/backup/ha-config-backup-backups.ts |  2 +-
 .../backup/ha-config-backup-settings.ts       |  2 +-
 .../core/ha-config-system-navigation.ts       |  4 ++--
 .../config/dashboard/ha-config-dashboard.ts   |  2 +-
 .../config/dashboard/ha-config-navigation.ts  |  2 +-
 .../config/dashboard/ha-config-updates.ts     |  4 ++--
 .../device-detail/ha-device-entities-card.ts  |  2 +-
 .../config/entities/ha-config-entities.ts     |  2 +-
 src/panels/config/ha-config-section.ts        |  2 +-
 .../hardware/dialog-hardware-available.ts     |  2 +-
 .../config/hardware/ha-config-hardware.ts     |  8 +++----
 .../config/helpers/forms/ha-schedule-form.ts  |  2 +-
 src/panels/config/info/ha-config-info.ts      |  6 ++---
 .../integrations/dialog-add-integration.ts    |  5 +++-
 .../ha-config-integrations-dashboard.ts       |  2 +-
 .../integrations/ha-domain-integrations.ts    |  2 +-
 .../ha-integration-action-card.ts             |  4 ++--
 .../integrations/ha-integration-header.ts     |  6 ++---
 .../mqtt/mqtt-subscribe-card.ts               |  2 +-
 .../add-node/zwave-js-add-node-failed.ts      |  2 +-
 .../zwave-js-add-node-searching-devices.ts    |  2 +-
 src/panels/config/logs/error-log-card.ts      |  2 +-
 src/panels/config/logs/system-log-card.ts     |  2 +-
 .../repairs/dialog-repairs-issue-subtitle.ts  |  2 +-
 .../config/repairs/ha-config-repairs.ts       |  2 +-
 .../repairs/integrations-startup-time.ts      |  2 +-
 src/panels/config/script/ha-script-editor.ts  |  2 +-
 .../config/script/manual-script-editor.ts     |  2 +-
 .../assist-pipeline-detail-config.ts          |  4 ++--
 .../assist-pipeline-detail-conversation.ts    |  4 ++--
 .../assist-pipeline-detail-stt.ts             |  4 ++--
 .../assist-pipeline-detail-tts.ts             |  4 ++--
 .../assist-pipeline-detail-wakeword.ts        |  4 ++--
 .../config/voice-assistants/cloud-discover.ts | 12 +++++-----
 .../debug/assist-render-pipeline-run.ts       |  2 +-
 .../voice-assistants/entity-voice-settings.ts |  2 +-
 .../ha-config-voice-assistants-expose.ts      |  2 +-
 .../ha-panel-developer-tools.ts               |  2 +-
 .../statistics/developer-tools-statistics.ts  |  2 +-
 src/panels/energy/ha-panel-energy.ts          |  2 +-
 src/panels/logbook/ha-logbook-renderer.ts     |  2 +-
 src/panels/lovelace/badges/hui-view-badges.ts |  2 +-
 .../hui-lock-open-door-card-feature.ts        |  4 ++--
 .../hui-energy-carbon-consumed-gauge-card.ts  |  2 +-
 .../energy/hui-energy-distribution-card.ts    |  4 ++--
 .../hui-energy-grid-neutrality-gauge-card.ts  |  2 +-
 .../hui-energy-self-sufficiency-gauge-card.ts |  2 +-
 .../hui-energy-solar-consumed-gauge-card.ts   |  2 +-
 .../lovelace/cards/hui-alarm-panel-card.ts    |  5 +++-
 src/panels/lovelace/cards/hui-area-card.ts    |  4 ++--
 .../lovelace/cards/hui-calendar-card.ts       |  2 +-
 src/panels/lovelace/cards/hui-clock-card.ts   | 12 +++++-----
 src/panels/lovelace/cards/hui-entity-card.ts  |  6 ++---
 src/panels/lovelace/cards/hui-gauge-card.ts   |  2 +-
 src/panels/lovelace/cards/hui-heading-card.ts |  7 ++++--
 .../lovelace/cards/hui-humidifier-card.ts     |  2 +-
 .../lovelace/cards/hui-picture-entity-card.ts |  2 +-
 .../lovelace/cards/hui-picture-glance-card.ts |  4 ++--
 .../lovelace/cards/hui-plant-status-card.ts   |  2 +-
 src/panels/lovelace/cards/hui-stack-card.ts   |  2 +-
 .../lovelace/cards/hui-statistic-card.ts      |  6 ++---
 .../lovelace/cards/hui-thermostat-card.ts     |  2 +-
 .../lovelace/cards/hui-todo-list-card.ts      |  2 +-
 .../cards/hui-weather-forecast-card.ts        | 14 +++++------
 .../lovelace/components/hui-card-options.ts   |  2 +-
 .../components/hui-energy-period-selector.ts  |  2 +-
 .../editor/badge-editor/hui-badge-picker.ts   |  4 ++--
 .../editor/card-editor/hui-card-picker.ts     |  4 ++--
 .../conditions/ha-card-condition-editor.ts    |  2 +-
 .../hui-card-features-editor.ts               |  4 ++--
 .../hui-entities-card-editor.ts               |  2 +-
 .../hui-heading-badges-editor.ts              |  4 ++--
 .../hui-dialog-create-headerfooter.ts         |  2 +-
 .../hui-header-footer-editor.ts               |  2 +-
 .../editor/hui-entities-card-row-editor.ts    |  4 ++--
 .../hui-picture-elements-card-row-editor.ts   |  4 ++--
 .../lovelace/editor/hui-sub-element-editor.ts |  2 +-
 src/panels/lovelace/hui-editor.ts             |  4 ++--
 src/panels/lovelace/hui-root.ts               |  4 ++--
 .../hui-areas-dashboard-strategy-editor.ts    |  2 +-
 src/panels/lovelace/views/hui-masonry-view.ts |  2 +-
 .../lovelace/views/hui-sections-view.ts       |  6 ++---
 src/panels/lovelace/views/hui-sidebar-view.ts |  2 +-
 src/panels/lovelace/views/hui-view-header.ts  |  2 +-
 src/panels/todo/dialog-todo-item-editor.ts    |  2 +-
 src/panels/todo/ha-panel-todo.ts              |  2 +-
 src/resources/theme/typography.globals.ts     | 24 ++++++++++++-------
 .../cover/ha-state-control-cover-position.ts  |  2 +-
 .../ha-state-control-cover-tilt-position.ts   |  2 +-
 .../fan/ha-state-control-fan-speed.ts         |  2 +-
 .../ha-state-control-light-brightness.ts      |  2 +-
 .../state-control-circular-slider-style.ts    | 14 +++++------
 .../valve/ha-state-control-valve-position.ts  |  2 +-
 184 files changed, 303 insertions(+), 285 deletions(-)

diff --git a/cast/src/launcher/layout/hc-layout.ts b/cast/src/launcher/layout/hc-layout.ts
index 72344dc28d..ea93d962be 100644
--- a/cast/src/launcher/layout/hc-layout.ts
+++ b/cast/src/launcher/layout/hc-layout.ts
@@ -86,7 +86,7 @@ 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, 24px);
+      font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
       letter-spacing: -0.012em;
       line-height: 32px;
       padding: 24px 16px 16px;
@@ -98,7 +98,7 @@ class HcLayout extends LitElement {
       border-radius: 4px 4px 0 0;
     }
     .subtitle {
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
       color: var(--secondary-text-color);
       line-height: initial;
     }
@@ -135,7 +135,7 @@ class HcLayout extends LitElement {
 
     .footer {
       text-align: center;
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
       padding: 8px 0 24px;
       color: var(--secondary-text-color);
     }
diff --git a/cast/src/receiver/layout/hc-launch-screen.ts b/cast/src/receiver/layout/hc-launch-screen.ts
index cab6840ba4..64b50839ee 100644
--- a/cast/src/receiver/layout/hc-launch-screen.ts
+++ b/cast/src/receiver/layout/hc-launch-screen.ts
@@ -29,7 +29,7 @@ class HcLaunchScreen extends LitElement {
       display: block;
       height: 100vh;
       background-color: #f2f4f9;
-      font-size: 24px;
+      font-size: var(--ha-font-size-2xl);
     }
     .container {
       display: flex;
diff --git a/gallery/src/components/page-description.ts b/gallery/src/components/page-description.ts
index 9c98d9b37e..e9289f1c89 100644
--- a/gallery/src/components/page-description.ts
+++ b/gallery/src/components/page-description.ts
@@ -42,7 +42,7 @@ class PageDescription extends HaMarkdown {
         padding-bottom: 8px;
       }
       .subtitle {
-        font-size: 18px;
+        font-size: var(--ha-font-size-l);
         line-height: 24px;
       }
       .root {
diff --git a/gallery/src/ha-demo-options.ts b/gallery/src/ha-demo-options.ts
index f3565e7891..4ec1927f7b 100644
--- a/gallery/src/ha-demo-options.ts
+++ b/gallery/src/ha-demo-options.ts
@@ -34,7 +34,7 @@ class HaDemoOptions extends LitElement {
         height: 64px;
         padding: 0 16px;
         pointer-events: none;
-        font-size: 20px;
+        font-size: var(--ha-font-size-xl);
       }
     `,
   ];
diff --git a/gallery/src/ha-gallery.ts b/gallery/src/ha-gallery.ts
index 67899777ac..e447aadd57 100644
--- a/gallery/src/ha-gallery.ts
+++ b/gallery/src/ha-gallery.ts
@@ -250,7 +250,7 @@ class HaGallery extends LitElement {
       }
 
       .page-footer .header {
-        font-size: 16px;
+        font-size: var(--ha-font-size-l);
         font-weight: var(--ha-font-weight-medium);
         line-height: 28px;
         text-align: center;
diff --git a/gallery/src/pages/components/ha-hs-color-picker.ts b/gallery/src/pages/components/ha-hs-color-picker.ts
index f205608a8f..54c708c9df 100644
--- a/gallery/src/pages/components/ha-hs-color-picker.ts
+++ b/gallery/src/pages/components/ha-hs-color-picker.ts
@@ -105,7 +105,7 @@ export class DemoHaHsColorPicker extends LitElement {
       width: 400px;
     }
     .value {
-      font-size: 22px;
+      font-size: var(--ha-font-size-xl);
       font-weight: var(--ha-font-weight-bold);
       margin: 0 0 12px 0;
     }
diff --git a/hassio/src/addon-view/config/hassio-addon-config.ts b/hassio/src/addon-view/config/hassio-addon-config.ts
index f174c3db4b..f819ed738e 100644
--- a/hassio/src/addon-view/config/hassio-addon-config.ts
+++ b/hassio/src/addon-view/config/hassio-addon-config.ts
@@ -428,7 +428,7 @@ class HassioAddonConfig extends LitElement {
         .header h2 {
           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;
           padding: 12px 16px 16px;
diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts
index 07a92c7b8e..e4c9c2cb17 100644
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -1280,12 +1280,12 @@ class HassioAddonInfo extends LitElement {
           padding-left: 8px;
           padding-inline-start: 8px;
           padding-inline-end: initial;
-          font-size: 24px;
+          font-size: var(--ha-font-size-2xl);
           color: var(--ha-card-header-color, var(--primary-text-color));
         }
         .addon-version {
           float: var(--float-end);
-          font-size: 15px;
+          font-size: var(--ha-font-size-l);
           vertical-align: middle;
         }
         .errors {
diff --git a/hassio/src/backups/hassio-backups.ts b/hassio/src/backups/hassio-backups.ts
index 679b0378c7..acfb5a0ca6 100644
--- a/hassio/src/backups/hassio-backups.ts
+++ b/hassio/src/backups/hassio-backups.ts
@@ -401,7 +401,7 @@ export class HassioBackups extends LitElement {
           margin-top: 20px;
         }
         .header-toolbar .selected-txt {
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
         }
         .header-toolbar .header-btns {
           margin-right: -12px;
diff --git a/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts b/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
index 679014604f..dbf4aee778 100644
--- a/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
+++ b/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
@@ -173,7 +173,7 @@ class HassioHardwareDialog extends LitElement {
           font-family: var(--ha-font-family-code);
         }
         code {
-          font-size: 85%;
+          font-size: var(--ha-font-size-s);
           padding: 0.2em 0.4em;
         }
         search-input {
diff --git a/hassio/src/ingress-view/hassio-ingress-view.ts b/hassio/src/ingress-view/hassio-ingress-view.ts
index fca53ff09d..2afea76b1e 100644
--- a/hassio/src/ingress-view/hassio-ingress-view.ts
+++ b/hassio/src/ingress-view/hassio-ingress-view.ts
@@ -340,7 +340,7 @@ class HassioIngressView extends LitElement {
     .header {
       display: flex;
       align-items: center;
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       height: 40px;
       padding: 0 16px;
       pointer-events: none;
diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts
index eee4201e6a..13e8be0c2a 100644
--- a/src/auth/ha-authorize.ts
+++ b/src/auth/ha-authorize.ts
@@ -93,7 +93,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           background-color: var(--primary-background-color, #fafafa);
         }
         p {
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           line-height: 20px;
         }
         .card-content {
@@ -151,7 +151,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           margin-inline-start: initial;
         }
         h1 {
-          font-size: 28px;
+          font-size: var(--ha-font-size-3xl);
           font-weight: var(--ha-font-weight-normal);
           margin-top: 16px;
           margin-bottom: 16px;
diff --git a/src/auth/ha-pick-auth-provider.ts b/src/auth/ha-pick-auth-provider.ts
index c773d9fc84..6787dca43f 100644
--- a/src/auth/ha-pick-auth-provider.ts
+++ b/src/auth/ha-pick-auth-provider.ts
@@ -57,7 +57,7 @@ export class HaPickAuthProvider extends LitElement {
       position: relative;
       z-index: 1;
       text-align: center;
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
       font-weight: var(--ha-font-weight-normal);
       line-height: 20px;
     }
diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts
index fab103ebc2..b03f88847c 100644
--- a/src/components/chart/ha-chart-base.ts
+++ b/src/components/chart/ha-chart-base.ts
@@ -739,7 +739,7 @@ export class HaChartBase extends LitElement {
       max-height: 60%;
       overflow-y: auto;
       padding: 12px 0 0;
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
       color: var(--primary-text-color);
     }
     .chart-legend ul {
diff --git a/src/components/entity/ha-state-label-badge.ts b/src/components/entity/ha-state-label-badge.ts
index 2f136991ba..497eb7e714 100644
--- a/src/components/entity/ha-state-label-badge.ts
+++ b/src/components/entity/ha-state-label-badge.ts
@@ -267,7 +267,7 @@ export class HaStateLabelBadge extends LitElement {
       cursor: pointer;
     }
     .big {
-      font-size: 70%;
+      font-size: var(--ha-font-size-xs);
     }
     ha-label-badge {
       --ha-label-badge-color: var(--label-badge-red);
diff --git a/src/components/ha-assist-chat.ts b/src/components/ha-assist-chat.ts
index 36d5ece3a4..be1629326c 100644
--- a/src/components/ha-assist-chat.ts
+++ b/src/components/ha-assist-chat.ts
@@ -595,7 +595,7 @@ export class HaAssistChat extends LitElement {
     }
     .message {
       white-space: pre-line;
-      font-size: 18px;
+      font-size: var(--ha-font-size-l);
       clear: both;
       margin: 8px 0;
       padding: 8px;
@@ -604,7 +604,7 @@ export class HaAssistChat extends LitElement {
 
     @media all and (max-width: 450px), all and (max-height: 500px) {
       .message {
-        font-size: 16px;
+        font-size: var(--ha-font-size-l);
       }
     }
 
diff --git a/src/components/ha-badge.ts b/src/components/ha-badge.ts
index 4f0df46c73..a5150fc8b7 100644
--- a/src/components/ha-badge.ts
+++ b/src/components/ha-badge.ts
@@ -95,7 +95,7 @@ export class HaBadge extends LitElement {
       text-align: center;
     }
     .label {
-      font-size: 10px;
+      font-size: var(--ha-font-size-xs);
       font-style: normal;
       font-weight: var(--ha-font-weight-medium);
       line-height: 10px;
diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index c72a513677..4b13d4243f 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -387,7 +387,7 @@ export class HaBaseTimeInput extends LitElement {
         --mdc-typography-body2-font-family,
         var(--mdc-typography-font-family, var(--ha-font-family-body))
       );
-      font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+      font-size: var(--mdc-typography-body2-font-size, var(--ha-font-size-s));
       line-height: var(--mdc-typography-body2-line-height, 1.25rem);
       font-weight: var(
         --mdc-typography-body2-font-weight,
diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts
index 121e879b22..4f403368f8 100644
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@@ -41,7 +41,7 @@ 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;
       padding: 12px 16px 16px;
diff --git a/src/components/ha-combo-box-item.ts b/src/components/ha-combo-box-item.ts
index 1a061174fb..8e69a732d2 100644
--- a/src/components/ha-combo-box-item.ts
+++ b/src/components/ha-combo-box-item.ts
@@ -22,12 +22,12 @@ export class HaComboBoxItem extends HaMdListItem {
       }
       [slot="headline"] {
         line-height: 22px;
-        font-size: 14px;
+        font-size: var(--ha-font-size-m);
         white-space: nowrap;
       }
       [slot="supporting-text"] {
         line-height: 18px;
-        font-size: 12px;
+        font-size: var(--ha-font-size-s);
         white-space: nowrap;
       }
       ::slotted(state-badge),
diff --git a/src/components/ha-control-select-menu.ts b/src/components/ha-control-select-menu.ts
index ae9c224603..b5b255b792 100644
--- a/src/components/ha-control-select-menu.ts
+++ b/src/components/ha-control-select-menu.ts
@@ -179,7 +179,7 @@ export class HaControlSelectMenu extends SelectBase {
         --control-select-menu-padding: 6px 10px;
         --mdc-icon-size: 20px;
         --ha-ripple-color: var(--secondary-text-color);
-        font-size: 14px;
+        font-size: var(--ha-font-size-m);
         line-height: 1.4;
         width: auto;
         color: var(--primary-text-color);
diff --git a/src/components/ha-control-slider.ts b/src/components/ha-control-slider.ts
index 6b1d41addf..054eaeac9a 100644
--- a/src/components/ha-control-slider.ts
+++ b/src/components/ha-control-slider.ts
@@ -368,7 +368,7 @@ export class HaControlSlider extends LitElement {
       --control-slider-background-opacity: 0.2;
       --control-slider-thickness: 40px;
       --control-slider-border-radius: 10px;
-      --control-slider-tooltip-font-size: 14px;
+      --control-slider-tooltip-font-size: var(--ha-font-size-m);
       height: var(--control-slider-thickness);
       width: 100%;
       border-radius: var(--control-slider-border-radius);
diff --git a/src/components/ha-dialog-header.ts b/src/components/ha-dialog-header.ts
index ae796c1baf..9094fa999f 100644
--- a/src/components/ha-dialog-header.ts
+++ b/src/components/ha-dialog-header.ts
@@ -53,12 +53,12 @@ export class HaDialogHeader extends LitElement {
           white-space: nowrap;
         }
         .header-title {
-          font-size: 22px;
+          font-size: var(--ha-font-size-xl);
           line-height: 28px;
           font-weight: var(--ha-font-weight-normal);
         }
         .header-subtitle {
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           line-height: 20px;
           color: var(--secondary-text-color);
         }
diff --git a/src/components/ha-expansion-panel.ts b/src/components/ha-expansion-panel.ts
index e0217dc0f7..931831d9d7 100644
--- a/src/components/ha-expansion-panel.ts
+++ b/src/components/ha-expansion-panel.ts
@@ -218,7 +218,7 @@ export class HaExpansionPanel extends LitElement {
     .secondary {
       display: block;
       color: var(--secondary-text-color);
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
     }
   `;
 }
diff --git a/src/components/ha-file-upload.ts b/src/components/ha-file-upload.ts
index dcc9a77bbc..3d3749c8b4 100644
--- a/src/components/ha-file-upload.ts
+++ b/src/components/ha-file-upload.ts
@@ -294,7 +294,7 @@ export class HaFileUpload extends LitElement {
     }
     .supports {
       color: var(--secondary-text-color);
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
     }
     :host([disabled]) .secondary {
       color: var(--disabled-text-color);
@@ -333,7 +333,7 @@ export class HaFileUpload extends LitElement {
       background: none;
       border: none;
       padding: 0;
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
       color: var(--primary-color);
       text-decoration: underline;
       cursor: pointer;
diff --git a/src/components/ha-filter-blueprints.ts b/src/components/ha-filter-blueprints.ts
index 1fc3449001..416a587a90 100644
--- a/src/components/ha-filter-blueprints.ts
+++ b/src/components/ha-filter-blueprints.ts
@@ -208,8 +208,8 @@ export class HaFilterBlueprints extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
+          font-size: var(--ha-font-size-xs);
           font-weight: var(--ha-font-weight-normal);
-          font-size: 11px;
           background-color: var(--primary-color);
           line-height: 16px;
           text-align: center;
diff --git a/src/components/ha-filter-categories.ts b/src/components/ha-filter-categories.ts
index 0ed0ffdcbd..242d7544f7 100644
--- a/src/components/ha-filter-categories.ts
+++ b/src/components/ha-filter-categories.ts
@@ -303,8 +303,8 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
+          font-size: var(--ha-font-size-xs);
           font-weight: var(--ha-font-weight-normal);
-          font-size: 11px;
           background-color: var(--primary-color);
           line-height: 16px;
           text-align: center;
diff --git a/src/components/ha-filter-devices.ts b/src/components/ha-filter-devices.ts
index e63c57c40f..4d8cdc1982 100644
--- a/src/components/ha-filter-devices.ts
+++ b/src/components/ha-filter-devices.ts
@@ -232,8 +232,8 @@ export class HaFilterDevices extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
+          font-size: var(--ha-font-size-xs);
           font-weight: var(--ha-font-weight-normal);
-          font-size: 11px;
           background-color: var(--primary-color);
           line-height: 16px;
           text-align: center;
diff --git a/src/components/ha-filter-domains.ts b/src/components/ha-filter-domains.ts
index 2addb22f1e..90366a269b 100644
--- a/src/components/ha-filter-domains.ts
+++ b/src/components/ha-filter-domains.ts
@@ -189,8 +189,8 @@ export class HaFilterDomains extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
+          font-size: var(--ha-font-size-xs);
           font-weight: var(--ha-font-weight-normal);
-          font-size: 11px;
           background-color: var(--primary-color);
           line-height: 16px;
           text-align: center;
diff --git a/src/components/ha-filter-entities.ts b/src/components/ha-filter-entities.ts
index 2ae83064b1..71fb79ae44 100644
--- a/src/components/ha-filter-entities.ts
+++ b/src/components/ha-filter-entities.ts
@@ -246,8 +246,8 @@ export class HaFilterEntities extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
+          font-size: var(--ha-font-size-xs);
           font-weight: var(--ha-font-weight-normal);
-          font-size: 11px;
           background-color: var(--primary-color);
           line-height: 16px;
           text-align: center;
diff --git a/src/components/ha-filter-floor-areas.ts b/src/components/ha-filter-floor-areas.ts
index c01c88635e..c4976da4fd 100644
--- a/src/components/ha-filter-floor-areas.ts
+++ b/src/components/ha-filter-floor-areas.ts
@@ -303,8 +303,8 @@ export class HaFilterFloorAreas extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
+          font-size: var(--ha-font-size-xs);
           font-weight: var(--ha-font-weight-normal);
-          font-size: 11px;
           background-color: var(--primary-color);
           line-height: 16px;
           text-align: center;
diff --git a/src/components/ha-filter-integrations.ts b/src/components/ha-filter-integrations.ts
index 1f590bd513..060343e011 100644
--- a/src/components/ha-filter-integrations.ts
+++ b/src/components/ha-filter-integrations.ts
@@ -195,8 +195,8 @@ export class HaFilterIntegrations extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
+          font-size: var(--ha-font-size-xs);
           font-weight: var(--ha-font-weight-normal);
-          font-size: 11px;
           background-color: var(--primary-color);
           line-height: 16px;
           text-align: center;
diff --git a/src/components/ha-filter-labels.ts b/src/components/ha-filter-labels.ts
index 07d385a23d..930ff8762e 100644
--- a/src/components/ha-filter-labels.ts
+++ b/src/components/ha-filter-labels.ts
@@ -233,8 +233,8 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
+          font-size: var(--ha-font-size-xs);
           font-weight: var(--ha-font-weight-normal);
-          font-size: 11px;
           background-color: var(--primary-color);
           line-height: 16px;
           text-align: center;
diff --git a/src/components/ha-filter-states.ts b/src/components/ha-filter-states.ts
index 405898869d..fe35b5641b 100644
--- a/src/components/ha-filter-states.ts
+++ b/src/components/ha-filter-states.ts
@@ -177,8 +177,8 @@ export class HaFilterStates extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
+          font-size: var(--ha-font-size-xs);
           font-weight: var(--ha-font-weight-normal);
-          font-size: 11px;
           background-color: var(--primary-color);
           line-height: 16px;
           text-align: center;
diff --git a/src/components/ha-header-bar.ts b/src/components/ha-header-bar.ts
index 966da7ab80..d50d764af2 100644
--- a/src/components/ha-header-bar.ts
+++ b/src/components/ha-header-bar.ts
@@ -46,7 +46,7 @@ export class HaHeaderBar extends LitElement {
           flex: none;
         }
         .mdc-top-app-bar__title {
-          font-size: 20px;
+          font-size: var(--ha-font-size-xl);
           padding-inline-start: 24px;
           padding-inline-end: initial;
         }
diff --git a/src/components/ha-heading-badge.ts b/src/components/ha-heading-badge.ts
index 8ad3a9ae00..27def2d750 100644
--- a/src/components/ha-heading-badge.ts
+++ b/src/components/ha-heading-badge.ts
@@ -34,7 +34,7 @@ export class HaBadge extends LitElement {
       align-items: center;
       gap: 3px;
       color: var(--ha-heading-badge-text-color, var(--secondary-text-color));
-      font-size: var(--ha-heading-badge-font-size, 14px);
+      font-size: var(--ha-heading-badge-font-size, var(--ha-font-size-m));
       font-weight: var(--ha-heading-badge-font-weight, 400);
       line-height: var(--ha-heading-badge-line-height, 20px);
       letter-spacing: 0.1px;
diff --git a/src/components/ha-label.ts b/src/components/ha-label.ts
index 8c4f4cf307..7d34699f8c 100644
--- a/src/components/ha-label.ts
+++ b/src/components/ha-label.ts
@@ -32,7 +32,7 @@ class HaLabel extends LitElement {
           display: inline-flex;
           flex-direction: row;
           align-items: center;
-          font-size: 12px;
+          font-size: var(--ha-font-size-s);
           font-weight: var(--ha-font-weight-medium);
           line-height: 16px;
           letter-spacing: 0.1px;
diff --git a/src/components/ha-markdown.ts b/src/components/ha-markdown.ts
index e07d1f772d..5bc9c26b74 100644
--- a/src/components/ha-markdown.ts
+++ b/src/components/ha-markdown.ts
@@ -64,7 +64,7 @@ export class HaMarkdown extends LitElement {
       color: var(--markdown-svg-color, none);
     }
     code {
-      font-size: 85%;
+      font-size: var(--ha-font-size-s);
       padding: 0.2em 0.4em;
     }
     pre code {
@@ -85,7 +85,7 @@ export class HaMarkdown extends LitElement {
       line-height: initial;
     }
     h2 {
-      font-size: 1.5em;
+      font-size: var(--ha-font-size-xl);
       font-weight: var(--ha-font-weight-bold);
     }
     hr {
diff --git a/src/components/ha-select-box.ts b/src/components/ha-select-box.ts
index 43a182275b..1971ffd280 100644
--- a/src/components/ha-select-box.ts
+++ b/src/components/ha-select-box.ts
@@ -154,7 +154,7 @@ export class HaSelectBox extends LitElement {
     }
     .option .content .text .label {
       color: var(--primary-text-color);
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
       font-weight: var(--ha-font-weight-normal);
       line-height: 20px;
       overflow: hidden;
diff --git a/src/components/ha-selector/ha-selector-media.ts b/src/components/ha-selector/ha-selector-media.ts
index 6ea72b09f5..11a55d001d 100644
--- a/src/components/ha-selector/ha-selector-media.ts
+++ b/src/components/ha-selector/ha-selector-media.ts
@@ -247,7 +247,7 @@ export class HaMediaSelector extends LitElement {
       --mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4);
     }
     .title {
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       padding-top: 16px;
       overflow: hidden;
       text-overflow: ellipsis;
diff --git a/src/components/ha-selector/ha-selector-selector.ts b/src/components/ha-selector/ha-selector-selector.ts
index 75f7f888f2..af38d908d6 100644
--- a/src/components/ha-selector/ha-selector-selector.ts
+++ b/src/components/ha-selector/ha-selector-selector.ts
@@ -290,7 +290,7 @@ export class HaSelectorSelector extends LitElement {
       padding: 0px 16px 16px 16px;
     }
     .title {
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       padding-top: 16px;
       overflow: hidden;
       text-overflow: ellipsis;
diff --git a/src/components/ha-settings-row.ts b/src/components/ha-settings-row.ts
index 910179ab58..c7994e8d57 100644
--- a/src/components/ha-settings-row.ts
+++ b/src/components/ha-settings-row.ts
@@ -68,9 +68,9 @@ export class HaSettingsRow extends LitElement {
         --mdc-typography-body2-font-family,
         var(--mdc-typography-font-family, var(--ha-font-family-body))
       );
+      font-size: var(--mdc-typography-body2-font-size, var(--ha-font-size-s));
       -webkit-font-smoothing: var(--ha-font-smoothing);
       -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
-      font-size: var(--mdc-typography-body2-font-size, 0.875rem);
       font-weight: var(
         --mdc-typography-body2-font-weight,
         var(--ha-font-weight-normal)
diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index f79a465e66..c8e78d0aee 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -849,7 +849,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
             --sidebar-menu-button-background-color,
             inherit
           );
-          font-size: 20px;
+          font-size: var(--ha-font-size-xl);
           align-items: center;
           padding-left: calc(4px + env(safe-area-inset-left));
           padding-inline-start: calc(4px + env(safe-area-inset-left));
@@ -951,8 +951,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         ha-md-list-item .item-text {
           font-family: var(--ha-font-family-body);
           display: none;
+          font-size: var(--ha-font-size-m);
           font-weight: var(--ha-font-weight-medium);
-          font-size: 14px;
         }
         :host([expanded]) ha-md-list-item .item-text {
           display: block;
@@ -1008,8 +1008,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
         .subheader {
           color: var(--sidebar-text-color);
+          font-size: var(--ha-font-size-m);
           font-weight: var(--ha-font-weight-medium);
-          font-size: 14px;
           padding: 16px;
           white-space: nowrap;
         }
diff --git a/src/components/ha-top-app-bar-fixed.ts b/src/components/ha-top-app-bar-fixed.ts
index f8aaa11bac..7915d48fb0 100644
--- a/src/components/ha-top-app-bar-fixed.ts
+++ b/src/components/ha-top-app-bar-fixed.ts
@@ -24,7 +24,7 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
         );
       }
       .mdc-top-app-bar__title {
-        font-size: 20px;
+        font-size: var(--ha-font-size-xl);
         padding-inline-start: 24px;
         padding-inline-end: initial;
       }
diff --git a/src/components/ha-two-pane-top-app-bar-fixed.ts b/src/components/ha-two-pane-top-app-bar-fixed.ts
index 28cf062464..7dc65768c6 100644
--- a/src/components/ha-two-pane-top-app-bar-fixed.ts
+++ b/src/components/ha-two-pane-top-app-bar-fixed.ts
@@ -321,7 +321,7 @@ export class TopAppBarBaseBase extends BaseElement {
         overflow: auto;
       }
       .mdc-top-app-bar__title {
-        font-size: 20px;
+        font-size: var(--ha-font-size-xl);
         padding-inline-start: 24px;
         padding-inline-end: initial;
       }
diff --git a/src/components/map/ha-entity-marker.ts b/src/components/map/ha-entity-marker.ts
index 744dc5c13a..9337184bdc 100644
--- a/src/components/map/ha-entity-marker.ts
+++ b/src/components/map/ha-entity-marker.ts
@@ -58,7 +58,7 @@ class HaEntityMarker extends LitElement {
       box-sizing: border-box;
       width: 48px;
       height: 48px;
-      font-size: var(--ha-marker-font-size, 1.5em);
+      font-size: var(--ha-marker-font-size, var(--ha-font-size-xl));
       border-radius: var(--ha-marker-border-radius, 50%);
       border: 1px solid var(--ha-marker-color, var(--primary-color));
       color: var(--primary-text-color);
diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts
index 153a3a8c60..c1e12433ac 100644
--- a/src/components/map/ha-map.ts
+++ b/src/components/map/ha-map.ts
@@ -671,7 +671,7 @@ export class HaMap extends ReactiveElement {
     }
     .leaflet-tooltip {
       padding: 8px;
-      font-size: 90%;
+      font-size: var(--ha-font-size-s);
       background: rgba(80, 80, 80, 0.9) !important;
       color: white !important;
       border-radius: 4px;
@@ -688,7 +688,7 @@ export class HaMap extends ReactiveElement {
       border-radius: 20px;
       text-align: center;
       color: var(--text-primary-color);
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
     }
 
     .marker-cluster span {
diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts
index bf9ae8d5af..e1c1c840dd 100644
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -965,7 +965,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           padding-top: 16px;
         }
         .breadcrumb .title {
-          font-size: 32px;
+          font-size: var(--ha-font-size-4xl);
           line-height: 1.2;
           font-weight: var(--ha-font-weight-bold);
           margin: 0;
@@ -976,7 +976,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           padding-right: 8px;
         }
         .breadcrumb .previous-title {
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           padding-bottom: 8px;
           color: var(--secondary-text-color);
           overflow: hidden;
@@ -985,7 +985,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           --mdc-icon-size: 14px;
         }
         .breadcrumb .subtitle {
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
           overflow: hidden;
           text-overflow: ellipsis;
           margin-bottom: 0;
@@ -1144,7 +1144,7 @@ export class HaMediaPlayerBrowse extends LitElement {
         }
 
         .child .title {
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
           padding-top: 16px;
           padding-left: 2px;
           overflow: hidden;
@@ -1209,7 +1209,7 @@ export class HaMediaPlayerBrowse extends LitElement {
         }
 
         :host([narrow]) .breadcrumb .title {
-          font-size: 24px;
+          font-size: var(--ha-font-size-2xl);
         }
         :host([narrow]) .header {
           padding: 0;
diff --git a/src/components/tile/ha-tile-info.ts b/src/components/tile/ha-tile-info.ts
index 1212334748..927b1e889d 100644
--- a/src/components/tile/ha-tile-info.ts
+++ b/src/components/tile/ha-tile-info.ts
@@ -34,15 +34,15 @@ export class HaTileInfo extends LitElement {
       width: 100%;
     }
     .primary {
+      font-size: var(--ha-font-size-m);
       font-weight: var(--ha-font-weight-medium);
-      font-size: 14px;
       line-height: 20px;
       letter-spacing: 0.1px;
       color: var(--primary-text-color);
     }
     .secondary {
+      font-size: var(--ha-font-size-s);
       font-weight: var(--ha-font-weight-normal);
-      font-size: 12px;
       line-height: 16px;
       letter-spacing: 0.4px;
       color: var(--primary-text-color);
diff --git a/src/components/trace/hat-graph-node.ts b/src/components/trace/hat-graph-node.ts
index 10ea69d58b..a74d37b938 100644
--- a/src/components/trace/hat-graph-node.ts
+++ b/src/components/trace/hat-graph-node.ts
@@ -164,7 +164,7 @@ export class HatGraphNode extends LitElement {
       stroke-width: 0;
     }
     .number text {
-      font-size: 10px;
+      font-size: var(--ha-font-size-xs);
       fill: var(--text-primary-color);
     }
     path.icon {
diff --git a/src/components/user/ha-person-badge.ts b/src/components/user/ha-person-badge.ts
index 8b5078b2c1..42a26b1c0d 100644
--- a/src/components/user/ha-person-badge.ts
+++ b/src/components/user/ha-person-badge.ts
@@ -59,10 +59,10 @@ class PersonBadge extends LitElement {
       text-decoration: none;
       color: var(--text-light-primary-color, var(--primary-text-color));
       overflow: hidden;
-      font-size: var(--person-badge-font-size, 1em);
+      font-size: var(--person-badge-font-size, var(--ha-font-size-m));
     }
     .initials.long {
-      font-size: 80%;
+      font-size: var(--ha-person-badge-font-size-long, var(--ha-font-size-s));
     }
   `;
 }
diff --git a/src/components/user/ha-user-badge.ts b/src/components/user/ha-user-badge.ts
index e02fdf8618..59114b7e75 100644
--- a/src/components/user/ha-user-badge.ts
+++ b/src/components/user/ha-user-badge.ts
@@ -108,7 +108,7 @@ class UserBadge extends LitElement {
       overflow: hidden;
     }
     .initials.long {
-      font-size: 80%;
+      font-size: var(--ha-font-size-s);
     }
   `;
 }
diff --git a/src/dialogs/config-flow/styles.ts b/src/dialogs/config-flow/styles.ts
index 65926e7610..b82dc29bf1 100644
--- a/src/dialogs/config-flow/styles.ts
+++ b/src/dialogs/config-flow/styles.ts
@@ -14,7 +14,7 @@ export const configFlowContentStyles = css`
       --mdc-typography-headline6-font-family,
       var(--mdc-typography-font-family, var(--ha-font-family-body))
     );
-    font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
+    font-size: var(--mdc-typography-headline6-font-size, var(--ha-font-size-l));
     line-height: var(--mdc-typography-headline6-line-height, 2rem);
     font-weight: var(
       --mdc-typography-headline6-font-weight,
diff --git a/src/dialogs/enter-code/dialog-enter-code.ts b/src/dialogs/enter-code/dialog-enter-code.ts
index 933567705e..baf4ef350b 100644
--- a/src/dialogs/enter-code/dialog-enter-code.ts
+++ b/src/dialogs/enter-code/dialog-enter-code.ts
@@ -228,7 +228,7 @@ export class DialogEnterCode
       height: 56px;
       --control-button-border-radius: 28px;
       --mdc-icon-size: 24px;
-      font-size: 24px;
+      font-size: var(--ha-font-size-2xl);
     }
     .submit {
       --control-button-background-color: var(--green-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 f7fd91f5ee..7c12c21c54 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
@@ -80,8 +80,8 @@ export class HaMoreInfoStateHeader extends LitElement {
     }
     .last-changed {
       font-style: normal;
+      font-size: var(--ha-font-size-l);
       font-weight: var(--ha-font-weight-medium);
-      font-size: 16px;
       line-height: 24px;
       letter-spacing: 0.1px;
       padding: 4px 0;
diff --git a/src/dialogs/more-info/components/lights/light-color-temp-picker.ts b/src/dialogs/more-info/components/lights/light-color-temp-picker.ts
index 2f3480646d..13c75f639c 100644
--- a/src/dialogs/more-info/components/lights/light-color-temp-picker.ts
+++ b/src/dialogs/more-info/components/lights/light-color-temp-picker.ts
@@ -185,7 +185,7 @@ class LightColorTempPicker extends LitElement {
             top,
             var(--gradient)
           );
-          --control-slider-tooltip-font-size: 20px;
+          --control-slider-tooltip-font-size: var(--ha-font-size-xl);
           --control-slider-background-opacity: 1;
         }
       `,
diff --git a/src/dialogs/more-info/controls/more-info-climate.ts b/src/dialogs/more-info/controls/more-info-climate.ts
index f0146a3e10..538dd9d0a7 100644
--- a/src/dialogs/more-info/controls/more-info-climate.ts
+++ b/src/dialogs/more-info/controls/more-info-climate.ts
@@ -530,14 +530,14 @@ class MoreInfoClimate extends LitElement {
 
         .current .label {
           opacity: 0.8;
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           line-height: 16px;
           letter-spacing: 0.4px;
           margin-bottom: 4px;
         }
 
         .current .value {
-          font-size: 22px;
+          font-size: var(--ha-font-size-xl);
           font-weight: var(--ha-font-weight-medium);
           line-height: 28px;
           direction: ltr;
@@ -554,7 +554,7 @@ class MoreInfoClimate extends LitElement {
 
         .target-humidity {
           width: 90px;
-          font-size: 200%;
+          font-size: var(--ha-font-size-3xl);
           margin: auto;
           direction: ltr;
         }
diff --git a/src/dialogs/more-info/controls/more-info-humidifier.ts b/src/dialogs/more-info/controls/more-info-humidifier.ts
index da2923b0b4..d9edd1cc42 100644
--- a/src/dialogs/more-info/controls/more-info-humidifier.ts
+++ b/src/dialogs/more-info/controls/more-info-humidifier.ts
@@ -233,13 +233,13 @@ class MoreInfoHumidifier extends LitElement {
         }
         .current .label {
           opacity: 0.8;
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           line-height: 16px;
           letter-spacing: 0.4px;
           margin-bottom: 4px;
         }
         .current .value {
-          font-size: 22px;
+          font-size: var(--ha-font-size-xl);
           font-weight: var(--ha-font-weight-medium);
           line-height: 28px;
           direction: ltr;
diff --git a/src/dialogs/more-info/controls/more-info-lock.ts b/src/dialogs/more-info/controls/more-info-lock.ts
index f92453fa19..260702fa53 100644
--- a/src/dialogs/more-info/controls/more-info-lock.ts
+++ b/src/dialogs/more-info/controls/more-info-lock.ts
@@ -165,7 +165,7 @@ class MoreInfoLock extends LitElement {
       moreInfoControlStyle,
       css`
         ha-control-button {
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           height: 60px;
           --control-button-border-radius: 24px;
         }
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 fa2fca75cb..7426d6a193 100644
--- a/src/dialogs/more-info/controls/more-info-water_heater.ts
+++ b/src/dialogs/more-info/controls/more-info-water_heater.ts
@@ -234,14 +234,14 @@ class MoreInfoWaterHeater extends LitElement {
 
         .current .label {
           opacity: 0.8;
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           line-height: 16px;
           letter-spacing: 0.4px;
           margin-bottom: 4px;
         }
 
         .current .value {
-          font-size: 22px;
+          font-size: var(--ha-font-size-xl);
           font-weight: var(--ha-font-weight-medium);
           line-height: 28px;
           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 06063284cc..ef700b6638 100644
--- a/src/dialogs/more-info/controls/more-info-weather.ts
+++ b/src/dialogs/more-info/controls/more-info-weather.ts
@@ -512,18 +512,18 @@ class MoreInfoWeather extends LitElement {
 
         .temp-attribute .temp span {
           position: absolute;
-          font-size: 24px;
+          font-size: var(--ha-font-size-2xl);
           top: 1px;
         }
 
         .state,
         .temp-attribute .temp {
-          font-size: 28px;
+          font-size: var(--ha-font-size-3xl);
           line-height: 1.2;
         }
 
         .attribute {
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           line-height: 1;
         }
 
@@ -570,7 +570,7 @@ class MoreInfoWeather extends LitElement {
         }
 
         .forecast .temp {
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
         }
 
         .forecast-image-icon {
diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts
index a15d2d7765..252364622d 100644
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@@ -679,13 +679,13 @@ export class MoreInfoDialog extends LitElement {
 
         .title .main {
           color: var(--primary-text-color);
-          font-size: 20px;
+          font-size: var(--ha-font-size-xl);
           line-height: 24px;
         }
 
         .title .breadcrumb {
           color: var(--secondary-text-color);
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           line-height: 16px;
           --mdc-icon-size: 16px;
           padding: 4px;
diff --git a/src/dialogs/restart/dialog-restart.ts b/src/dialogs/restart/dialog-restart.ts
index ddd7c04d31..193c4a8f56 100644
--- a/src/dialogs/restart/dialog-restart.ts
+++ b/src/dialogs/restart/dialog-restart.ts
@@ -467,8 +467,8 @@ class DialogRestart extends LitElement {
           background-color: var(--divider-color);
         }
         .section {
+          font-size: var(--ha-font-size-m);
           font-weight: var(--ha-font-weight-medium);
-          font-size: 14px;
           line-height: 20px;
           margin: 8px 0 4px 0;
           padding-left: 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 fd4e461f91..b1bb527500 100644
--- a/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts
+++ b/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts
@@ -153,22 +153,22 @@ export class CloudStepIntro extends LitElement {
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 24px;
+        font-size: var(--ha-font-size-2xl);
       }
       .access .round-icon {
         color: #00aef8;
         background-color: #cceffe;
       }
       .feature h2 {
+        font-size: var(--ha-font-size-l);
         font-weight: var(--ha-font-weight-medium);
-        font-size: 16px;
         line-height: 24px;
         margin-top: 0;
         margin-bottom: 8px;
       }
       .feature p {
+        font-size: var(--ha-font-size-m);
         font-weight: var(--ha-font-weight-normal);
-        font-size: 14px;
         line-height: 20px;
         margin: 0;
       }
diff --git a/src/layouts/hass-error-screen.ts b/src/layouts/hass-error-screen.ts
index c774228b0a..bae81d2e87 100644
--- a/src/layouts/hass-error-screen.ts
+++ b/src/layouts/hass-error-screen.ts
@@ -64,7 +64,7 @@ class HassErrorScreen extends LitElement {
         .toolbar {
           display: flex;
           align-items: center;
-          font-size: 20px;
+          font-size: var(--ha-font-size-xl);
           height: var(--header-height);
           padding: 8px 12px;
           pointer-events: none;
diff --git a/src/layouts/hass-loading-screen.ts b/src/layouts/hass-loading-screen.ts
index 866369f029..dcd089fca4 100644
--- a/src/layouts/hass-loading-screen.ts
+++ b/src/layouts/hass-loading-screen.ts
@@ -64,7 +64,7 @@ class HassLoadingScreen extends LitElement {
         .toolbar {
           display: flex;
           align-items: center;
-          font-size: 20px;
+          font-size: var(--ha-font-size-xl);
           height: var(--header-height);
           padding: 8px 12px;
           pointer-events: none;
diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
index eb309cc7f1..639b0601e4 100644
--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@@ -97,7 +97,7 @@ class HassSubpage extends LitElement {
         .toolbar {
           display: flex;
           align-items: center;
-          font-size: 20px;
+          font-size: var(--ha-font-size-xl);
           height: var(--header-height);
           padding: 8px 12px;
           background-color: var(--app-header-background-color);
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index a0de2b9774..5e1dfe8e44 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -760,7 +760,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
       margin-left: 4px;
       margin-inline-start: 4px;
       margin-inline-end: initial;
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
       width: max-content;
       cursor: initial;
       direction: var(--direction);
@@ -822,8 +822,8 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
       min-width: 16px;
       box-sizing: border-box;
       border-radius: 50%;
+      font-size: var(--ha-font-size-xs);
       font-weight: var(--ha-font-weight-normal);
-      font-size: 11px;
       background-color: var(--primary-color);
       line-height: 16px;
       text-align: center;
@@ -857,7 +857,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
       justify-content: space-between;
       padding: 8px 12px;
       box-sizing: border-box;
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
       --ha-assist-chip-container-color: var(--card-background-color);
     }
 
diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts
index 014c6b1cc8..49e4a65f85 100644
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -230,7 +230,7 @@ class HassTabsSubpage extends LitElement {
         }
 
         .toolbar {
-          font-size: 20px;
+          font-size: var(--ha-font-size-xl);
           height: var(--header-height);
           background-color: var(--sidebar-background-color);
           font-weight: var(--ha-font-weight-normal);
@@ -259,7 +259,7 @@ class HassTabsSubpage extends LitElement {
 
         #tabbar {
           display: flex;
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           overflow: hidden;
         }
 
@@ -278,7 +278,7 @@ class HassTabsSubpage extends LitElement {
           border-top: 1px solid var(--divider-color);
           justify-content: space-around;
           z-index: 2;
-          font-size: 12px;
+          font-size: var(--ha-font-size-s);
           width: 100%;
           padding-bottom: env(safe-area-inset-bottom);
         }
diff --git a/src/onboarding/onboarding-core-config.ts b/src/onboarding/onboarding-core-config.ts
index 99ad56d5e3..34013bee63 100644
--- a/src/onboarding/onboarding-core-config.ts
+++ b/src/onboarding/onboarding-core-config.ts
@@ -199,7 +199,7 @@ class OnboardingCoreConfig extends LitElement {
     }
 
     p {
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
       line-height: 20px;
     }
 
diff --git a/src/onboarding/onboarding-location.ts b/src/onboarding/onboarding-location.ts
index d1c8d18dab..8ac0c60669 100644
--- a/src/onboarding/onboarding-location.ts
+++ b/src/onboarding/onboarding-location.ts
@@ -528,7 +528,10 @@ class OnboardingLocation extends LitElement {
             --mdc-typography-caption-font-family,
             var(--mdc-typography-font-family, var(--ha-font-family-body))
           );
-          font-size: var(--mdc-typography-caption-font-size, 0.75rem);
+          font-size: var(
+            --mdc-typography-caption-font-size,
+            var(--ha-font-size-xs)
+          );
           font-weight: var(
             --mdc-typography-caption-font-weight,
             var(--ha-font-weight-normal)
diff --git a/src/onboarding/restore-backup/onboarding-restore-backup-cloud-login.ts b/src/onboarding/restore-backup/onboarding-restore-backup-cloud-login.ts
index c361672ccb..6355d4c084 100644
--- a/src/onboarding/restore-backup/onboarding-restore-backup-cloud-login.ts
+++ b/src/onboarding/restore-backup/onboarding-restore-backup-cloud-login.ts
@@ -120,7 +120,7 @@ class OnboardingRestoreBackupCloudLogin extends LitElement {
           text-align: left;
         }
         h2 {
-          font-size: 24px;
+          font-size: var(--ha-font-size-2xl);
           display: flex;
           align-items: center;
           gap: 16px;
diff --git a/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts b/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts
index 850140ed5b..4050d923c0 100644
--- a/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts
+++ b/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts
@@ -338,7 +338,7 @@ class OnboardingRestoreBackupRestore extends LitElement {
           line-height: normal;
         }
         h2 {
-          font-size: 22px;
+          font-size: var(--ha-font-size-xl);
           margin-top: 24px;
           margin-bottom: 8px;
           font-style: normal;
diff --git a/src/onboarding/restore-backup/onboarding-restore-backup-status.ts b/src/onboarding/restore-backup/onboarding-restore-backup-status.ts
index 2a7f8c8e0c..5b82ef1a4f 100644
--- a/src/onboarding/restore-backup/onboarding-restore-backup-status.ts
+++ b/src/onboarding/restore-backup/onboarding-restore-backup-status.ts
@@ -86,11 +86,11 @@ class OnboardingRestoreBackupStatus extends LitElement {
         p {
           text-align: center;
           padding: 0 16px;
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
         }
         .failed {
           padding: 16px 0;
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
         }
         mwc-linear-progress {
           width: 100%;
diff --git a/src/onboarding/styles.ts b/src/onboarding/styles.ts
index ad838c3dc4..868ae4e480 100644
--- a/src/onboarding/styles.ts
+++ b/src/onboarding/styles.ts
@@ -5,8 +5,8 @@ export const onBoardingStyles = css`
     padding: 32px;
   }
   h1 {
+    font-size: var(--ha-font-size-3xl);
     font-weight: var(--ha-font-weight-normal);
-    font-size: 28px;
     line-height: 36px;
     margin-bottom: 8px;
   }
diff --git a/src/panels/calendar/dialog-calendar-event-editor.ts b/src/panels/calendar/dialog-calendar-event-editor.ts
index ee098d9318..b027028c91 100644
--- a/src/panels/calendar/dialog-calendar-event-editor.ts
+++ b/src/panels/calendar/dialog-calendar-event-editor.ts
@@ -623,7 +623,7 @@ class DialogCalendarEventEditor extends LitElement {
           justify-content: space-between;
         }
         .label {
-          font-size: 12px;
+          font-size: var(--ha-font-size-s);
           font-weight: var(--ha-font-weight-medium);
           color: var(--input-label-ink-color);
         }
diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts
index 0f275809dd..3fc8f5d25c 100644
--- a/src/panels/calendar/ha-full-calendar.ts
+++ b/src/panels/calendar/ha-full-calendar.ts
@@ -563,7 +563,7 @@ export class HAFullCalendar extends LitElement {
         th.fc-col-header-cell.fc-day {
           background-color: var(--table-header-background-color);
           color: var(--primary-text-color);
-          font-size: 11px;
+          font-size: var(--ha-font-size-xs);
           font-weight: var(--ha-font-weight-bold);
           text-transform: uppercase;
         }
@@ -587,7 +587,7 @@ export class HAFullCalendar extends LitElement {
 
         a.fc-daygrid-day-number {
           float: none !important;
-          font-size: 12px;
+          font-size: var(--ha-font-size-s);
           cursor: pointer;
         }
 
@@ -657,13 +657,13 @@ export class HAFullCalendar extends LitElement {
         }
 
         .fc-list-day-text {
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
           font-weight: var(--ha-font-weight-normal);
         }
 
         .fc-list-day-side-text {
+          font-size: var(--ha-font-size-l);
           font-weight: var(--ha-font-weight-normal);
-          font-size: 16px;
           color: var(--primary-color);
         }
 
diff --git a/src/panels/calendar/ha-panel-calendar.ts b/src/panels/calendar/ha-panel-calendar.ts
index 6365404ebd..c75deb88da 100644
--- a/src/panels/calendar/ha-panel-calendar.ts
+++ b/src/panels/calendar/ha-panel-calendar.ts
@@ -307,7 +307,7 @@ class PanelCalendar extends LitElement {
           --mdc-typography-button-text-transform: none;
           --mdc-typography-button-font-size: var(
             --mdc-typography-headline6-font-size,
-            1.25rem
+            var(--ha-font-size-l)
           );
           --mdc-typography-button-font-weight: var(
             --mdc-typography-headline6-font-weight,
diff --git a/src/panels/config/application_credentials/ha-config-application-credentials.ts b/src/panels/config/application_credentials/ha-config-application-credentials.ts
index e731c42677..3a739a7de4 100644
--- a/src/panels/config/application_credentials/ha-config-application-credentials.ts
+++ b/src/panels/config/application_credentials/ha-config-application-credentials.ts
@@ -339,7 +339,7 @@ export class HaConfigApplicationCredentials extends LitElement {
       margin-top: 20px;
     }
     .header-toolbar .selected-txt {
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
     }
     .header-toolbar .header-btns {
       margin-right: -12px;
diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts
index f6e6e98aa3..8313c9489e 100644
--- a/src/panels/config/areas/ha-config-areas-dashboard.ts
+++ b/src/panels/config/areas/ha-config-areas-dashboard.ts
@@ -455,7 +455,7 @@ export class HaConfigAreasDashboard extends LitElement {
       padding-inline-start: 8px;
     }
     .header h2 {
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
       font-weight: var(--ha-font-weight-medium);
       margin-top: 28px;
     }
diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts
index d74d9c94cb..5fe57a14e5 100644
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@@ -554,8 +554,8 @@ export default class HaAutomationConditionRow extends LitElement {
           right: 0px;
           left: 0px;
           text-transform: uppercase;
+          font-size: var(--ha-font-size-m);
           font-weight: var(--ha-font-weight-bold);
-          font-size: 14px;
           background-color: var(--divider-color, #e0e0e0);
           color: var(--text-primary-color);
           max-height: 0px;
diff --git a/src/panels/config/automation/ha-automation-trace.ts b/src/panels/config/automation/ha-automation-trace.ts
index 5e00b51a83..4544d97887 100644
--- a/src/panels/config/automation/ha-automation-trace.ts
+++ b/src/panels/config/automation/ha-automation-trace.ts
@@ -528,7 +528,7 @@ export class HaAutomationTrace extends LitElement {
           display: flex;
           align-items: center;
           justify-content: center;
-          font-size: 20px;
+          font-size: var(--ha-font-size-xl);
           height: var(--header-height);
           padding: 4px;
           background-color: var(--primary-background-color);
diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
index fb1bc698ca..f9f4c28ec2 100644
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@@ -700,8 +700,8 @@ export default class HaAutomationTriggerRow extends LitElement {
           right: 0px;
           left: 0px;
           text-transform: uppercase;
+          font-size: var(--ha-font-size-m);
           font-weight: var(--ha-font-weight-bold);
-          font-size: 14px;
           background-color: var(--primary-color);
           color: var(--text-primary-color);
           max-height: 0px;
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 7d0421595f..08e409cf42 100644
--- a/src/panels/config/backup/components/ha-backup-agents-picker.ts
+++ b/src/panels/config/backup/components/ha-backup-agents-picker.ts
@@ -120,7 +120,7 @@ class HaBackupAgentsPicker extends LitElement {
       flex-direction: row;
       align-items: center;
       gap: 16px;
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       font-weight: var(--ha-font-weight-normal);
       line-height: 24px;
       letter-spacing: 0.5px;
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 52fb68cc79..cdbe6d98b6 100644
--- a/src/panels/config/backup/components/ha-backup-formfield-label.ts
+++ b/src/panels/config/backup/components/ha-backup-formfield-label.ts
@@ -42,7 +42,7 @@ class SupervisorFormfieldLabel extends LitElement {
       margin-right: 4px;
       margin-inline-end: 4px;
       margin-inline-start: initial;
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
       font-weight: var(--ha-font-weight-normal);
       line-height: 24px;
       letter-spacing: 0.5px;
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 7b562f7bd2..7de3d55d4e 100644
--- a/src/panels/config/backup/components/ha-backup-summary-card.ts
+++ b/src/panels/config/backup/components/ha-backup-summary-card.ts
@@ -125,7 +125,7 @@ class HaBackupSummaryCard extends LitElement {
       min-width: 0;
     }
     .heading {
-      font-size: 22px;
+      font-size: var(--ha-font-size-xl);
       font-style: normal;
       font-weight: var(--ha-font-weight-normal);
       line-height: 28px;
@@ -136,7 +136,7 @@ class HaBackupSummaryCard extends LitElement {
       white-space: nowrap;
     }
     .description {
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
       font-style: normal;
       font-weight: var(--ha-font-weight-normal);
       line-height: 20px;
diff --git a/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts b/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts
index 0478274e7d..89d07ab6b3 100644
--- a/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts
+++ b/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts
@@ -579,8 +579,8 @@ class DialogBackupOnboarding extends LitElement implements HassDialog {
         .encryption-key p {
           margin: 0;
           flex: 1;
+          font-size: var(--ha-font-size-xl);
           font-family: var(--ha-font-family-code);
-          font-size: 20px;
           font-style: normal;
           font-weight: var(--ha-font-weight-normal);
           line-height: 28px;
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 b6c37febc9..15924da7ae 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
@@ -313,8 +313,8 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
         .encryption-key p {
           margin: 0;
           flex: 1;
+          font-size: var(--ha-font-size-xl);
           font-family: var(--ha-font-family-code);
-          font-size: 20px;
           font-style: normal;
           font-weight: var(--ha-font-weight-normal);
           line-height: 28px;
diff --git a/src/panels/config/backup/dialogs/dialog-download-decrypted-backup.ts b/src/panels/config/backup/dialogs/dialog-download-decrypted-backup.ts
index 8c82390142..df7b23ccb0 100644
--- a/src/panels/config/backup/dialogs/dialog-download-decrypted-backup.ts
+++ b/src/panels/config/backup/dialogs/dialog-download-decrypted-backup.ts
@@ -208,7 +208,7 @@ class DialogDownloadDecryptedBackup extends LitElement implements HassDialog {
           background: none;
           border: none;
           padding: 0;
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           color: var(--primary-color);
           text-decoration: underline;
           cursor: pointer;
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 23a70075c1..1fb8948f97 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
@@ -231,8 +231,8 @@ class DialogSetBackupEncryptionKey extends LitElement implements HassDialog {
         .encryption-key p {
           margin: 0;
           flex: 1;
+          font-size: var(--ha-font-size-xl);
           font-family: var(--ha-font-family-code);
-          font-size: 20px;
           font-style: normal;
           font-weight: var(--ha-font-weight-normal);
           line-height: 28px;
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 9d462345c4..8d3350f2f9 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
@@ -153,8 +153,8 @@ class DialogShowBackupEncryptionKey extends LitElement implements HassDialog {
         .encryption-key p {
           margin: 0;
           flex: 1;
+          font-size: var(--ha-font-size-xl);
           font-family: var(--ha-font-family-code);
-          font-size: 20px;
           font-style: normal;
           font-weight: var(--ha-font-weight-normal);
           line-height: 28px;
diff --git a/src/panels/config/backup/ha-config-backup-backups.ts b/src/panels/config/backup/ha-config-backup-backups.ts
index 969c99b275..193cb931d2 100644
--- a/src/panels/config/backup/ha-config-backup-backups.ts
+++ b/src/panels/config/backup/ha-config-backup-backups.ts
@@ -236,7 +236,7 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
               ${agentsMore
                 ? html`
                     <span
-                      style="display: flex; align-items: center; font-size: 14px;"
+                      style="display: flex; align-items: center; font-size: var(--ha-font-size-m);"
                     >
                       +${agentsMore}
                     </span>
diff --git a/src/panels/config/backup/ha-config-backup-settings.ts b/src/panels/config/backup/ha-config-backup-settings.ts
index c7e0bf0f28..1659777828 100644
--- a/src/panels/config/backup/ha-config-backup-settings.ts
+++ b/src/panels/config/backup/ha-config-backup-settings.ts
@@ -535,7 +535,7 @@ class HaConfigBackupSettings extends LitElement {
     .cloud-info .cloud-header {
       display: flex;
       gap: 16px;
-      font-size: 22px;
+      font-size: var(--ha-font-size-xl);
       align-items: center;
       padding: 16px;
     }
diff --git a/src/panels/config/core/ha-config-system-navigation.ts b/src/panels/config/core/ha-config-system-navigation.ts
index 3f6675e5b1..3fc8684347 100644
--- a/src/panels/config/core/ha-config-system-navigation.ts
+++ b/src/panels/config/core/ha-config-system-navigation.ts
@@ -244,7 +244,7 @@ class HaConfigSystemNavigation extends LitElement {
         }
 
         .title {
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
           padding: 16px;
           padding-bottom: 0;
         }
@@ -269,7 +269,7 @@ class HaConfigSystemNavigation extends LitElement {
         }
 
         ha-navigation-list {
-          --navigation-list-item-title-font-size: 16px;
+          --navigation-list-item-title-font-size: var(--ha-font-size-l);
         }
       `,
     ];
diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts
index ab6aeadc4b..eb83876aa3 100644
--- a/src/panels/config/dashboard/ha-config-dashboard.ts
+++ b/src/panels/config/dashboard/ha-config-dashboard.ts
@@ -408,7 +408,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
           margin: 8px 16px 16px 16px;
         }
         .title {
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
           padding: 16px;
           padding-bottom: 0;
         }
diff --git a/src/panels/config/dashboard/ha-config-navigation.ts b/src/panels/config/dashboard/ha-config-navigation.ts
index d34d266364..87b2f1bc62 100644
--- a/src/panels/config/dashboard/ha-config-navigation.ts
+++ b/src/panels/config/dashboard/ha-config-navigation.ts
@@ -66,7 +66,7 @@ class HaConfigNavigation extends LitElement {
 
   static styles: CSSResultGroup = css`
     ha-navigation-list {
-      --navigation-list-item-title-font-size: 16px;
+      --navigation-list-item-title-font-size: var(--ha-font-size-l);
     }
   `;
 }
diff --git a/src/panels/config/dashboard/ha-config-updates.ts b/src/panels/config/dashboard/ha-config-updates.ts
index adedf303c4..bc444e3d05 100644
--- a/src/panels/config/dashboard/ha-config-updates.ts
+++ b/src/panels/config/dashboard/ha-config-updates.ts
@@ -156,7 +156,7 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
     return [
       css`
         .title {
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
           padding: 16px;
           padding-bottom: 0;
         }
@@ -188,7 +188,7 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
           text-decoration: underline;
         }
         ha-md-list-item {
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
         }
         div[slot="start"] {
           position: relative;
diff --git a/src/panels/config/devices/device-detail/ha-device-entities-card.ts b/src/panels/config/devices/device-detail/ha-device-entities-card.ts
index 3bfb0a12ba..e16196b396 100644
--- a/src/panels/config/devices/device-detail/ha-device-entities-card.ts
+++ b/src/panels/config/devices/device-detail/ha-device-entities-card.ts
@@ -269,7 +269,7 @@ export class HaDeviceEntitiesCard extends LitElement {
       margin: 0 16px 0 8px;
     }
     .name {
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
     }
     .name:dir(rtl) {
       margin-inline-start: 8px;
diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts
index 640e5a48a2..310dbae533 100644
--- a/src/panels/config/entities/ha-config-entities.ts
+++ b/src/panels/config/entities/ha-config-entities.ts
@@ -1553,7 +1553,7 @@ ${rejected
           margin-top: 20px;
         }
         .header-toolbar .selected-txt {
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
         }
         .header-toolbar .header-btns {
           margin-right: -12px;
diff --git a/src/panels/config/ha-config-section.ts b/src/panels/config/ha-config-section.ts
index fcf6351d48..1efc2afc52 100644
--- a/src/panels/config/ha-config-section.ts
+++ b/src/panels/config/ha-config-section.ts
@@ -82,7 +82,7 @@ export class HaConfigSection extends LitElement {
       line-height: var(--ha-line-height-normal);
       width: 100%;
       opacity: var(--dark-primary-opacity);
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
       padding-bottom: 20px;
     }
 
diff --git a/src/panels/config/hardware/dialog-hardware-available.ts b/src/panels/config/hardware/dialog-hardware-available.ts
index 36da289ccc..0b0d90dd57 100644
--- a/src/panels/config/hardware/dialog-hardware-available.ts
+++ b/src/panels/config/hardware/dialog-hardware-available.ts
@@ -200,7 +200,7 @@ class DialogHardwareAvailable extends LitElement implements HassDialog {
           font-family: var(--ha-font-family-code);
         }
         code {
-          font-size: 85%;
+          font-size: var(--ha-font-size-s);
           padding: 0.2em 0.4em;
         }
         search-input {
diff --git a/src/panels/config/hardware/ha-config-hardware.ts b/src/panels/config/hardware/ha-config-hardware.ts
index 252655c417..0b1beadf79 100644
--- a/src/panels/config/hardware/ha-config-hardware.ts
+++ b/src/panels/config/hardware/ha-config-hardware.ts
@@ -502,11 +502,11 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
         text-align: center;
       }
       .primary-text {
-        font-size: 16px;
+        font-size: var(--ha-font-size-l);
         margin: 0;
       }
       .secondary-text {
-        font-size: 14px;
+        font-size: var(--ha-font-size-m);
         margin-bottom: 0;
         color: var(--secondary-text-color);
       }
@@ -519,11 +519,11 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
 
       .header .title {
         color: var(--secondary-text-color);
-        font-size: 18px;
+        font-size: var(--ha-font-size-l);
       }
 
       .header .value {
-        font-size: 16px;
+        font-size: var(--ha-font-size-l);
       }
       .row {
         display: flex;
diff --git a/src/panels/config/helpers/forms/ha-schedule-form.ts b/src/panels/config/helpers/forms/ha-schedule-form.ts
index 2db59403a9..e322cb3d2b 100644
--- a/src/panels/config/helpers/forms/ha-schedule-form.ts
+++ b/src/panels/config/helpers/forms/ha-schedule-form.ts
@@ -480,7 +480,7 @@ class HaScheduleForm extends LitElement {
         th.fc-col-header-cell.fc-day {
           background-color: var(--table-header-background-color);
           color: var(--primary-text-color);
-          font-size: 11px;
+          font-size: var(--ha-font-size-xs);
           font-weight: var(--ha-font-weight-bold);
           text-transform: uppercase;
         }
diff --git a/src/panels/config/info/ha-config-info.ts b/src/panels/config/info/ha-config-info.ts
index b231dd56e6..5f51a8dfd4 100644
--- a/src/panels/config/info/ha-config-info.ts
+++ b/src/panels/config/info/ha-config-info.ts
@@ -315,7 +315,7 @@ class HaConfigInfo extends LitElement {
         }
 
         .header p {
-          font-size: 22px;
+          font-size: var(--ha-font-size-xl);
           font-weight: var(--ha-font-weight-normal);
           line-height: 28px;
           text-align: center;
@@ -346,7 +346,7 @@ class HaConfigInfo extends LitElement {
           display: flex;
           flex-direction: row;
           justify-content: space-between;
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           font-weight: var(--ha-font-weight-normal);
           padding: 4px 0;
         }
@@ -361,8 +361,8 @@ class HaConfigInfo extends LitElement {
 
         .ha-version {
           color: var(--primary-text-color);
+          font-size: var(--ha-font-size-l);
           font-weight: var(--ha-font-weight-medium);
-          font-size: 16px;
         }
 
         .pages {
diff --git a/src/panels/config/integrations/dialog-add-integration.ts b/src/panels/config/integrations/dialog-add-integration.ts
index 8b544079d2..f1932b8847 100644
--- a/src/panels/config/integrations/dialog-add-integration.ts
+++ b/src/panels/config/integrations/dialog-add-integration.ts
@@ -771,7 +771,10 @@ class AddIntegrationDialog extends LitElement {
         margin-inline-end: initial;
         padding: 24px 24px 0 24px;
         color: var(--mdc-dialog-heading-ink-color, rgba(0, 0, 0, 0.87));
-        font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
+        font-size: var(
+          --mdc-typography-headline6-font-size,
+          var(--ha-font-size-l)
+        );
         line-height: var(--mdc-typography-headline6-line-height, 2rem);
         font-weight: var(
           --mdc-typography-headline6-font-weight,
diff --git a/src/panels/config/integrations/ha-config-integrations-dashboard.ts b/src/panels/config/integrations/ha-config-integrations-dashboard.ts
index 08d0e00fc3..19a9e63cb9 100644
--- a/src/panels/config/integrations/ha-config-integrations-dashboard.ts
+++ b/src/panels/config/integrations/ha-config-integrations-dashboard.ts
@@ -1038,7 +1038,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
           padding-left: 8px;
           padding-inline-start: 8px;
           padding-inline-end: 2px;
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           width: max-content;
           cursor: initial;
           direction: var(--direction);
diff --git a/src/panels/config/integrations/ha-domain-integrations.ts b/src/panels/config/integrations/ha-domain-integrations.ts
index 05d3598801..a93297dbf6 100644
--- a/src/panels/config/integrations/ha-domain-integrations.ts
+++ b/src/panels/config/integrations/ha-domain-integrations.ts
@@ -332,7 +332,7 @@ class HaDomainIntegrations extends LitElement {
       h3 {
         margin: 8px 24px 0;
         color: var(--secondary-text-color);
-        font-size: 14px;
+        font-size: var(--ha-font-size-m);
         font-weight: var(--ha-font-weight-medium);
       }
       h3:first-of-type {
diff --git a/src/panels/config/integrations/ha-integration-action-card.ts b/src/panels/config/integrations/ha-integration-action-card.ts
index 53e2abb257..ae7302ad17 100644
--- a/src/panels/config/integrations/ha-integration-action-card.ts
+++ b/src/panels/config/integrations/ha-integration-action-card.ts
@@ -75,14 +75,14 @@ export class HaIntegrationActionCard extends LitElement {
         height: 40px;
       }
       h2 {
-        font-size: 16px;
+        font-size: var(--ha-font-size-l);
         font-weight: var(--ha-font-weight-normal);
         margin-top: 8px;
         margin-bottom: 0;
         max-width: 100%;
       }
       h3 {
-        font-size: 14px;
+        font-size: var(--ha-font-size-m);
         margin: 0;
         max-width: 100%;
         text-align: center;
diff --git a/src/panels/config/integrations/ha-integration-header.ts b/src/panels/config/integrations/ha-integration-header.ts
index 7987f7189b..c62edc530a 100644
--- a/src/panels/config/integrations/ha-integration-header.ts
+++ b/src/panels/config/integrations/ha-integration-header.ts
@@ -121,19 +121,19 @@ export class HaIntegrationHeader extends LitElement {
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       font-weight: var(--ha-font-weight-normal);
       color: var(--primary-text-color);
     }
     .has-secondary {
       -webkit-line-clamp: 1;
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
     }
     .secondary {
       min-width: 0;
       --mdc-icon-size: 20px;
       -webkit-line-clamp: 1;
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
       display: flex;
       flex-direction: row;
     }
diff --git a/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts b/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts
index a0506ca54c..32026565cb 100644
--- a/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts
+++ b/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts
@@ -208,7 +208,7 @@ class MqttSubscribeCard extends LitElement {
       border-bottom: 0;
     }
     .bottom {
-      font-size: 80%;
+      font-size: var(--ha-font-size-s);
       color: var(--secondary-text-color);
     }
     pre {
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-failed.ts b/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-failed.ts
index 7f9ef1412d..72d0793f37 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-failed.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-failed.ts
@@ -52,7 +52,7 @@ export class ZWaveJsAddNodeFailed extends LitElement {
     div.note {
       text-align: center;
       margin-top: 16px;
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
       color: var(--secondary-text-color);
     }
     ha-button {
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-searching-devices.ts b/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-searching-devices.ts
index c92c856e9b..d966009c42 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-searching-devices.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-searching-devices.ts
@@ -121,7 +121,7 @@ export class ZWaveJsAddNodeSearchingDevices extends LitElement {
       display: block;
     }
     .note {
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
       color: var(--secondary-text-color);
     }
     .searching-spinner {
diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts
index 7d3adebafc..1c899b1e83 100644
--- a/src/panels/config/logs/error-log-card.ts
+++ b/src/panels/config/logs/error-log-card.ts
@@ -776,7 +776,7 @@ 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;
       display: block;
diff --git a/src/panels/config/logs/system-log-card.ts b/src/panels/config/logs/system-log-card.ts
index 4e343a1322..881b31fb7d 100644
--- a/src/panels/config/logs/system-log-card.ts
+++ b/src/panels/config/logs/system-log-card.ts
@@ -266,7 +266,7 @@ 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;
       display: block;
diff --git a/src/panels/config/repairs/dialog-repairs-issue-subtitle.ts b/src/panels/config/repairs/dialog-repairs-issue-subtitle.ts
index d0c39bc951..517e4a6402 100644
--- a/src/panels/config/repairs/dialog-repairs-issue-subtitle.ts
+++ b/src/panels/config/repairs/dialog-repairs-issue-subtitle.ts
@@ -40,7 +40,7 @@ class DialogRepairsIssueSubtitle extends LitElement {
   static styles = css`
     :host {
       display: block;
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
       margin-bottom: 8px;
       color: var(--secondary-text-color);
       text-overflow: ellipsis;
diff --git a/src/panels/config/repairs/ha-config-repairs.ts b/src/panels/config/repairs/ha-config-repairs.ts
index f4729b0287..46c3a50816 100644
--- a/src/panels/config/repairs/ha-config-repairs.ts
+++ b/src/panels/config/repairs/ha-config-repairs.ts
@@ -171,7 +171,7 @@ class HaConfigRepairs extends LitElement {
       --mdc-list-vertical-padding: 0;
     }
     .title {
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       padding: 16px;
       padding-bottom: 0;
     }
diff --git a/src/panels/config/repairs/integrations-startup-time.ts b/src/panels/config/repairs/integrations-startup-time.ts
index 6779717429..836c30afca 100644
--- a/src/panels/config/repairs/integrations-startup-time.ts
+++ b/src/panels/config/repairs/integrations-startup-time.ts
@@ -111,7 +111,7 @@ class IntegrationsStartupTime extends LitElement {
       border-radius: 0;
     }
     div[slot="end"] {
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
     }
   `;
 }
diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts
index 135a108cba..2ff834755e 100644
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -1071,7 +1071,7 @@ export class HaScriptEditor extends SubscribeMixin(
           align-items: center;
         }
         .header .name {
-          font-size: 20px;
+          font-size: var(--ha-font-size-xl);
           font-weight: var(--ha-font-weight-normal);
           flex: 1;
         }
diff --git a/src/panels/config/script/manual-script-editor.ts b/src/panels/config/script/manual-script-editor.ts
index 91909a4843..2395e18b5b 100644
--- a/src/panels/config/script/manual-script-editor.ts
+++ b/src/panels/config/script/manual-script-editor.ts
@@ -430,7 +430,7 @@ export class HaManualScriptEditor extends LitElement {
           margin-top: -16px;
         }
         .header .name {
-          font-size: 20px;
+          font-size: var(--ha-font-size-xl);
           font-weight: var(--ha-font-weight-normal);
           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 ecfdcc33e2..548abdf687 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
@@ -94,15 +94,15 @@ export class AssistPipelineDetailConfig extends LitElement {
       margin-bottom: 16px;
     }
     h3 {
+      font-size: var(--ha-font-size-xl);
       font-weight: var(--ha-font-weight-normal);
-      font-size: 22px;
       line-height: 28px;
       margin-top: 0;
       margin-bottom: 4px;
     }
     p {
       color: var(--secondary-text-color);
-      font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+      font-size: var(--mdc-typography-body2-font-size, var(--ha-font-size-s));
       margin-top: 0;
       margin-bottom: 0;
     }
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 145ebd2833..6e2741fabc 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
@@ -131,15 +131,15 @@ export class AssistPipelineDetailConversation extends LitElement {
       margin-bottom: 16px;
     }
     h3 {
+      font-size: var(--ha-font-size-xl);
       font-weight: var(--ha-font-weight-normal);
-      font-size: 22px;
       line-height: 28px;
       margin-top: 0;
       margin-bottom: 4px;
     }
     p {
       color: var(--secondary-text-color);
-      font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+      font-size: var(--mdc-typography-body2-font-size, var(--ha-font-size-s));
       margin-top: 0;
       margin-bottom: 0;
     }
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 201754ad18..cbd3bfd620 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
@@ -91,15 +91,15 @@ export class AssistPipelineDetailSTT extends LitElement {
       margin-bottom: 16px;
     }
     h3 {
+      font-size: var(--ha-font-size-xl);
       font-weight: var(--ha-font-weight-normal);
-      font-size: 22px;
       line-height: 28px;
       margin-top: 0;
       margin-bottom: 4px;
     }
     p {
       color: var(--secondary-text-color);
-      font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+      font-size: var(--mdc-typography-body2-font-size, var(--ha-font-size-s));
       margin-top: 0;
       margin-bottom: 0;
     }
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 c1e2ac5dfa..61d86cd84e 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
@@ -138,15 +138,15 @@ export class AssistPipelineDetailTTS extends LitElement {
       margin-bottom: 16px;
     }
     h3 {
+      font-size: var(--ha-font-size-xl);
       font-weight: var(--ha-font-weight-normal);
-      font-size: 22px;
       line-height: 28px;
       margin-top: 0;
       margin-bottom: 4px;
     }
     p {
       color: var(--secondary-text-color);
-      font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+      font-size: var(--mdc-typography-body2-font-size, var(--ha-font-size-s));
       margin-top: 0;
       margin-bottom: 0;
     }
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 ccd64fae4f..feaecc0185 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
@@ -145,15 +145,15 @@ export class AssistPipelineDetailWakeWord extends LitElement {
       margin-bottom: 16px;
     }
     h3 {
+      font-size: var(--ha-font-size-xl);
       font-weight: var(--ha-font-weight-normal);
-      font-size: 22px;
       line-height: 28px;
       margin-top: 0;
       margin-bottom: 4px;
     }
     p {
       color: var(--secondary-text-color);
-      font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+      font-size: var(--mdc-typography-body2-font-size, var(--ha-font-size-s));
       margin-top: 0;
       margin-bottom: 0;
     }
diff --git a/src/panels/config/voice-assistants/cloud-discover.ts b/src/panels/config/voice-assistants/cloud-discover.ts
index 76f4e46c91..a9656707ce 100644
--- a/src/panels/config/voice-assistants/cloud-discover.ts
+++ b/src/panels/config/voice-assistants/cloud-discover.ts
@@ -126,8 +126,8 @@ export class CloudDiscover extends LitElement {
       justify-content: space-between;
     }
     .header {
+      font-size: var(--ha-font-size-3xl);
       font-weight: var(--ha-font-weight-normal);
-      font-size: 28px;
       line-height: 36px;
       text-align: center;
       max-width: 600px;
@@ -135,7 +135,7 @@ export class CloudDiscover extends LitElement {
     }
     @media (min-width: 800px) {
       .header {
-        font-size: 32px;
+        font-size: var(--ha-font-size-4xl);
         line-height: 40px;
         margin-bottom: 16px;
       }
@@ -173,18 +173,18 @@ export class CloudDiscover extends LitElement {
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 24px;
+      font-size: var(--ha-font-size-2xl);
     }
     .feature h2 {
+      font-size: var(--ha-font-size-l);
       font-weight: var(--ha-font-weight-medium);
-      font-size: 16px;
       line-height: 24px;
       margin-top: 0;
       margin-bottom: 8px;
     }
     .feature p {
+      font-size: var(--ha-font-size-m);
       font-weight: var(--ha-font-weight-normal);
-      font-size: 14px;
       line-height: 20px;
       margin: 0;
     }
@@ -196,8 +196,8 @@ export class CloudDiscover extends LitElement {
     .more a {
       text-decoration: none;
       color: var(--primary-color);
+      font-size: var(--ha-font-size-m);
       font-weight: var(--ha-font-weight-medium);
-      font-size: 14px;
     }
     .more a ha-svg-icon {
       --mdc-icon-size: 16px;
diff --git a/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts b/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts
index 2b3fe03cd2..bfb4563ee7 100644
--- a/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts
+++ b/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts
@@ -421,7 +421,7 @@ export class AssistPipelineDebug extends LitElement {
     }
 
     .message {
-      font-size: 18px;
+      font-size: var(--ha-font-size-l);
       margin: 8px 0;
       padding: 8px;
       border-radius: 15px;
diff --git a/src/panels/config/voice-assistants/entity-voice-settings.ts b/src/panels/config/voice-assistants/entity-voice-settings.ts
index 2909576718..4f2946eeb1 100644
--- a/src/panels/config/voice-assistants/entity-voice-settings.ts
+++ b/src/panels/config/voice-assistants/entity-voice-settings.ts
@@ -423,7 +423,7 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) {
         }
         .description {
           color: var(--secondary-text-color);
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           line-height: 20px;
           margin-top: 0;
           margin-bottom: 16px;
diff --git a/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts b/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts
index b5e66059cd..300abc7d57 100644
--- a/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts
+++ b/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts
@@ -821,7 +821,7 @@ export class VoiceAssistantsExpose extends LitElement {
           margin-top: 20px;
         }
         .header-toolbar .selected-txt {
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
         }
         .header-toolbar .header-btns {
           margin-right: -12px;
diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts
index 76a4ae2b5f..5cc477831a 100644
--- a/src/panels/developer-tools/ha-panel-developer-tools.ts
+++ b/src/panels/developer-tools/ha-panel-developer-tools.ts
@@ -139,7 +139,7 @@ class PanelDeveloperTools extends LitElement {
           height: var(--header-height);
           display: flex;
           align-items: center;
-          font-size: 20px;
+          font-size: var(--ha-font-size-xl);
           padding: 8px 12px;
           font-weight: var(--ha-font-weight-normal);
           box-sizing: border-box;
diff --git a/src/panels/developer-tools/statistics/developer-tools-statistics.ts b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
index 84668dc424..83f71b8a2e 100644
--- a/src/panels/developer-tools/statistics/developer-tools-statistics.ts
+++ b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
@@ -762,7 +762,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
           justify-content: space-between;
           padding: 8px 12px;
           box-sizing: border-box;
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           --ha-assist-chip-container-color: var(--card-background-color);
         }
 
diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts
index fef603d6ea..1fada09117 100644
--- a/src/panels/energy/ha-panel-energy.ts
+++ b/src/panels/energy/ha-panel-energy.ts
@@ -508,7 +508,7 @@ class PanelEnergy extends LitElement {
           display: flex;
           flex: 1;
           align-items: center;
-          font-size: 20px;
+          font-size: var(--ha-font-size-xl);
           padding: 0px 12px;
           font-weight: var(--ha-font-weight-normal);
           box-sizing: border-box;
diff --git a/src/panels/logbook/ha-logbook-renderer.ts b/src/panels/logbook/ha-logbook-renderer.ts
index ae391ca7ec..56bc0d7a92 100644
--- a/src/panels/logbook/ha-logbook-renderer.ts
+++ b/src/panels/logbook/ha-logbook-renderer.ts
@@ -636,7 +636,7 @@ class HaLogbookRenderer extends LitElement {
         }
 
         .secondary {
-          font-size: 12px;
+          font-size: var(--ha-font-size-s);
           line-height: 1.7;
         }
 
diff --git a/src/panels/lovelace/badges/hui-view-badges.ts b/src/panels/lovelace/badges/hui-view-badges.ts
index 68d708fa2a..14bc4f1ae7 100644
--- a/src/panels/lovelace/badges/hui-view-badges.ts
+++ b/src/panels/lovelace/badges/hui-view-badges.ts
@@ -256,7 +256,7 @@ export class HuiViewBadges extends LitElement {
       border-color: var(--primary-color);
       --mdc-icon-size: 18px;
       cursor: pointer;
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
       color: var(--primary-text-color);
       --ha-ripple-color: var(--primary-color);
       --ha-ripple-hover-opacity: 0.04;
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 67427d70c4..e0a7bc4eff 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
@@ -118,7 +118,7 @@ class HuiLockOpenDoorCardFeature
       cardFeatureStyles,
       css`
         ha-control-button {
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
         }
         .open-button {
           width: 130px;
@@ -127,7 +127,7 @@ class HuiLockOpenDoorCardFeature
           --control-button-background-color: var(--warning-color);
         }
         .open-done {
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           line-height: 14px;
           display: flex;
           align-items: center;
diff --git a/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts
index 734f806de4..f7a22b9ae2 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts
@@ -190,7 +190,7 @@ class HuiEnergyCarbonGaugeCard
       line-height: initial;
       color: var(--primary-text-color);
       width: 100%;
-      font-size: 15px;
+      font-size: var(--ha-font-size-m);
       margin-top: 8px;
     }
 
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 d4e234805f..a84858d13e 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
@@ -850,7 +850,7 @@ class HuiEnergyDistrubutionCard
       align-items: center;
       justify-content: center;
       text-align: center;
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
       line-height: 12px;
       position: relative;
       text-decoration: none;
@@ -864,7 +864,7 @@ class HuiEnergyDistrubutionCard
     }
     .label {
       color: var(--secondary-text-color);
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
       opacity: 1;
       height: 20px;
       overflow: hidden;
diff --git a/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts
index 457bc63ba7..05e1b1ced5 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts
@@ -166,7 +166,7 @@ class HuiEnergyGridGaugeCard
       line-height: initial;
       color: var(--primary-text-color);
       width: 100%;
-      font-size: 15px;
+      font-size: var(--ha-font-size-m);
       margin-top: 8px;
     }
 
diff --git a/src/panels/lovelace/cards/energy/hui-energy-self-sufficiency-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-self-sufficiency-gauge-card.ts
index d29605a9c2..d440d69ed6 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-self-sufficiency-gauge-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-self-sufficiency-gauge-card.ts
@@ -165,7 +165,7 @@ class HuiEnergySelfSufficiencyGaugeCard
       line-height: initial;
       color: var(--primary-text-color);
       width: 100%;
-      font-size: 15px;
+      font-size: var(--ha-font-size-m);
       margin-top: 8px;
     }
 
diff --git a/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts
index 0ccc962fa7..2e97cf33d8 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts
@@ -164,7 +164,7 @@ class HuiEnergySolarGaugeCard
       line-height: initial;
       color: var(--primary-text-color);
       width: 100%;
-      font-size: 15px;
+      font-size: var(--ha-font-size-m);
       margin-top: 8px;
     }
 
diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
index 9eebb8a0ce..01b980aebc 100644
--- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts
+++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
@@ -440,7 +440,10 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
     }
 
     mwc-button.numberkey {
-      --mdc-typography-button-font-size: var(--keypad-font-size, 0.875rem);
+      --mdc-typography-button-font-size: var(
+        --keypad-font-size,
+        var(--ha-font-size-s)
+      );
     }
   `;
 }
diff --git a/src/panels/lovelace/cards/hui-area-card.ts b/src/panels/lovelace/cards/hui-area-card.ts
index b9496675eb..fc06ebd0ac 100644
--- a/src/panels/lovelace/cards/hui-area-card.ts
+++ b/src/panels/lovelace/cards/hui-area-card.ts
@@ -611,7 +611,7 @@ export class HuiAreaCard
 
     .sensors {
       color: #e3e3e3;
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       --mdc-icon-size: 24px;
       opacity: 0.6;
       margin-top: 8px;
@@ -648,7 +648,7 @@ export class HuiAreaCard
 
     .name {
       color: white;
-      font-size: 24px;
+      font-size: var(--ha-font-size-2xl);
     }
 
     .bottom {
diff --git a/src/panels/lovelace/cards/hui-calendar-card.ts b/src/panels/lovelace/cards/hui-calendar-card.ts
index c09835c4e1..9c7ba23068 100644
--- a/src/panels/lovelace/cards/hui-calendar-card.ts
+++ b/src/panels/lovelace/cards/hui-calendar-card.ts
@@ -222,7 +222,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);
+      font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
       line-height: 1.2;
       padding-top: 16px;
       padding-left: 8px;
diff --git a/src/panels/lovelace/cards/hui-clock-card.ts b/src/panels/lovelace/cards/hui-clock-card.ts
index 03a674836d..8e524f1e17 100644
--- a/src/panels/lovelace/cards/hui-clock-card.ts
+++ b/src/panels/lovelace/cards/hui-clock-card.ts
@@ -204,7 +204,7 @@ export class HuiClockCard extends LitElement implements LovelaceCard {
 
     .time-title {
       color: var(--primary-text-color);
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
       font-weight: var(--ha-font-weight-normal);
       line-height: 18px;
       overflow: hidden;
@@ -215,12 +215,12 @@ export class HuiClockCard extends LitElement implements LovelaceCard {
     }
 
     .time-wrapper.size-medium .time-title {
-      font-size: 18px;
+      font-size: var(--ha-font-size-l);
       line-height: 21px;
     }
 
     .time-wrapper.size-large .time-title {
-      font-size: 24px;
+      font-size: var(--ha-font-size-2xl);
       line-height: 28px;
     }
 
@@ -251,13 +251,13 @@ export class HuiClockCard extends LitElement implements LovelaceCard {
 
     .time-wrapper.size-medium .time-parts .time-part.second,
     .time-wrapper.size-medium .time-parts .time-part.am-pm {
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       margin-left: 6px;
     }
 
     .time-wrapper.size-large .time-parts .time-part.second,
     .time-wrapper.size-large .time-parts .time-part.am-pm {
-      font-size: 24px;
+      font-size: var(--ha-font-size-2xl);
       margin-left: 8px;
     }
 
@@ -283,7 +283,7 @@ export class HuiClockCard extends LitElement implements LovelaceCard {
 
     .time-parts .time-part.second,
     .time-parts .time-part.am-pm {
-      font-size: 10px;
+      font-size: var(--ha-font-size-xs);
       margin-left: 4px;
     }
 
diff --git a/src/panels/lovelace/cards/hui-entity-card.ts b/src/panels/lovelace/cards/hui-entity-card.ts
index eacebf06ea..ba587f695e 100644
--- a/src/panels/lovelace/cards/hui-entity-card.ts
+++ b/src/panels/lovelace/cards/hui-entity-card.ts
@@ -282,8 +282,8 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
         .name {
           color: var(--secondary-text-color);
           line-height: 40px;
+          font-size: var(--ha-font-size-l);
           font-weight: var(--ha-font-weight-medium);
-          font-size: 16px;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
@@ -305,14 +305,14 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
         }
 
         .value {
-          font-size: 28px;
+          font-size: var(--ha-font-size-3xl);
           margin-right: 4px;
           margin-inline-end: 4px;
           margin-inline-start: initial;
         }
 
         .measurement {
-          font-size: 18px;
+          font-size: var(--ha-font-size-l);
           color: var(--secondary-text-color);
         }
 
diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts
index 10ee4bdc97..acaf2519b2 100644
--- a/src/panels/lovelace/cards/hui-gauge-card.ts
+++ b/src/panels/lovelace/cards/hui-gauge-card.ts
@@ -307,7 +307,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
       line-height: initial;
       color: var(--primary-text-color);
       width: 100%;
-      font-size: 15px;
+      font-size: var(--ha-font-size-m);
       margin-top: 8px;
     }
   `;
diff --git a/src/panels/lovelace/cards/hui-heading-card.ts b/src/panels/lovelace/cards/hui-heading-card.ts
index c5bfbdedda..0f409c7c01 100644
--- a/src/panels/lovelace/cards/hui-heading-card.ts
+++ b/src/panels/lovelace/cards/hui-heading-card.ts
@@ -174,7 +174,7 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard {
       align-items: center;
       gap: 8px;
       color: var(--ha-heading-card-title-color, var(--primary-text-color));
-      font-size: var(--ha-heading-card-title-font-size, 16px);
+      font-size: var(--ha-heading-card-title-font-size, var(--ha-font-size-l));
       font-weight: var(
         --ha-heading-card-title-font-weight,
         var(--ha-font-weight-normal)
@@ -199,7 +199,10 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard {
     }
     .content.subtitle {
       color: var(--ha-heading-card-subtitle-color, var(--secondary-text-color));
-      font-size: var(--ha-heading-card-subtitle-font-size, 14px);
+      font-size: var(
+        --ha-heading-card-subtitle-font-size,
+        var(--ha-font-size-m)
+      );
       font-weight: var(
         --ha-heading-card-subtitle-font-weight,
         var(--ha-font-weight-medium)
diff --git a/src/panels/lovelace/cards/hui-humidifier-card.ts b/src/panels/lovelace/cards/hui-humidifier-card.ts
index 7da931fba0..edbe0b782b 100644
--- a/src/panels/lovelace/cards/hui-humidifier-card.ts
+++ b/src/panels/lovelace/cards/hui-humidifier-card.ts
@@ -210,7 +210,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
 
     .title {
       width: 100%;
-      font-size: 18px;
+      font-size: var(--ha-font-size-l);
       line-height: 36px;
       padding: 8px 30px 8px 30px;
       margin: 0;
diff --git a/src/panels/lovelace/cards/hui-picture-entity-card.ts b/src/panels/lovelace/cards/hui-picture-entity-card.ts
index 6fa5be786c..fb7abab346 100644
--- a/src/panels/lovelace/cards/hui-picture-entity-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-entity-card.ts
@@ -221,7 +221,7 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
         rgba(0, 0, 0, 0.3)
       );
       padding: 16px;
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       line-height: 16px;
       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 700f80f495..5a4bf91c6b 100644
--- a/src/panels/lovelace/cards/hui-picture-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts
@@ -361,7 +361,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       line-height: 40px;
       color: var(--ha-picture-card-text-color, white);
       align-self: center;
@@ -382,7 +382,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
     }
     .state {
       display: block;
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
       text-align: center;
       line-height: 12px;
       white-space: nowrap;
diff --git a/src/panels/lovelace/cards/hui-plant-status-card.ts b/src/panels/lovelace/cards/hui-plant-status-card.ts
index d2e80b24fc..6bd74b4f5b 100644
--- a/src/panels/lovelace/cards/hui-plant-status-card.ts
+++ b/src/panels/lovelace/cards/hui-plant-status-card.ts
@@ -190,7 +190,7 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard {
     }
 
     .has-plant-image .header {
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       font-weight: var(--ha-font-weight-medium);
       line-height: 16px;
       padding: 16px;
diff --git a/src/panels/lovelace/cards/hui-stack-card.ts b/src/panels/lovelace/cards/hui-stack-card.ts
index 4cc2ee39b0..8f881f309c 100644
--- a/src/panels/lovelace/cards/hui-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-stack-card.ts
@@ -96,7 +96,7 @@ 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;
diff --git a/src/panels/lovelace/cards/hui-statistic-card.ts b/src/panels/lovelace/cards/hui-statistic-card.ts
index 00307b175c..fd040e1b15 100644
--- a/src/panels/lovelace/cards/hui-statistic-card.ts
+++ b/src/panels/lovelace/cards/hui-statistic-card.ts
@@ -370,8 +370,8 @@ export class HuiStatisticCard extends LitElement implements LovelaceCard {
         .name {
           color: var(--secondary-text-color);
           line-height: 40px;
+          font-size: var(--ha-font-size-l);
           font-weight: var(--ha-font-weight-medium);
-          font-size: 16px;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
@@ -392,14 +392,14 @@ export class HuiStatisticCard extends LitElement implements LovelaceCard {
         }
 
         .value {
-          font-size: 28px;
+          font-size: var(--ha-font-size-3xl);
           margin-right: 4px;
           margin-inline-end: 4px;
           margin-inline-start: initial;
         }
 
         .measurement {
-          font-size: 18px;
+          font-size: var(--ha-font-size-l);
           color: var(--secondary-text-color);
         }
       `,
diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index 4784141970..5d1aebb00d 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -202,7 +202,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
 
     .title {
       width: 100%;
-      font-size: 18px;
+      font-size: var(--ha-font-size-l);
       line-height: 36px;
       padding: 8px 30px 8px 30px;
       margin: 0;
diff --git a/src/panels/lovelace/cards/hui-todo-list-card.ts b/src/panels/lovelace/cards/hui-todo-list-card.ts
index f4b302acfa..c483c7c5e1 100644
--- a/src/panels/lovelace/cards/hui-todo-list-card.ts
+++ b/src/panels/lovelace/cards/hui-todo-list-card.ts
@@ -838,7 +838,7 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
 
     .description,
     .due {
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
       color: var(--secondary-text-color);
     }
 
diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
index 9e8818d7f9..4e74c43410 100644
--- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts
+++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
@@ -529,19 +529,19 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
 
         .temp-attribute .temp span {
           position: absolute;
-          font-size: 24px;
+          font-size: var(--ha-font-size-2xl);
           top: 1px;
         }
 
         .state,
         .temp-attribute .temp {
-          font-size: 28px;
+          font-size: var(--ha-font-size-3xl);
           line-height: 1.2;
         }
 
         .name,
         .attribute {
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           line-height: 1;
         }
 
@@ -581,7 +581,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         }
 
         .forecast .temp {
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
         }
 
         .forecast-image-icon {
@@ -617,7 +617,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
           display: flex;
           justify-content: center;
           align-items: center;
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
           padding: 10px 20px;
           text-align: center;
         }
@@ -639,7 +639,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
 
         [class*="narrow"] .state,
         [class*="narrow"] .temp-attribute .temp {
-          font-size: 22px;
+          font-size: var(--ha-font-size-xl);
         }
 
         [class*="narrow"] .temp-attribute .temp {
@@ -650,7 +650,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
 
         [class*="narrow"] .temp span {
           top: 1px;
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
         }
 
         /* ============= VERY NARROW ============= */
diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts
index 7cca8ec0c2..f3c0429d4b 100644
--- a/src/panels/lovelace/components/hui-card-options.ts
+++ b/src/panels/lovelace/components/hui-card-options.ts
@@ -232,7 +232,7 @@ export class HuiCardOptions extends LitElement {
           border-radius: 50%;
           font-weight: var(--ha-font-weight-medium);
           text-align: center;
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           background-color: var(--app-header-edit-background-color, #455a64);
           color: var(--app-header-edit-text-color, white);
         }
diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts
index 08f136e088..6f1742d031 100644
--- a/src/panels/lovelace/components/hui-energy-period-selector.ts
+++ b/src/panels/lovelace/components/hui-energy-period-selector.ts
@@ -475,7 +475,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
       display: flex;
       align-items: center;
       justify-content: flex-end;
-      font-size: 20px;
+      font-size: var(--ha-font-size-xl);
       margin-left: auto;
       margin-inline-start: auto;
       margin-inline-end: initial;
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 7cb475f5ef..1b83caf377 100644
--- a/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts
+++ b/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts
@@ -476,7 +476,7 @@ export class HuiBadgePicker extends LitElement {
         }
 
         .badges-container-header {
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
           font-weight: var(--ha-font-weight-medium);
           padding: 12px 8px 4px 8px;
           margin: 0;
@@ -507,7 +507,7 @@ export class HuiBadgePicker extends LitElement {
         .badge-header {
           color: var(--ha-card-header-color, var(--primary-text-color));
           font-family: var(--ha-card-header-font-family, inherit);
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
           font-weight: var(--ha-font-weight-bold);
           letter-spacing: -0.012em;
           line-height: 20px;
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 8a4cf01f07..2f4ea47399 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
@@ -475,7 +475,7 @@ export class HuiCardPicker extends LitElement {
         }
 
         .cards-container-header {
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
           font-weight: var(--ha-font-weight-medium);
           padding: 12px 8px;
           margin: 0;
@@ -512,7 +512,7 @@ export class HuiCardPicker 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: 16px;
+          font-size: var(--ha-font-size-l);
           font-weight: var(--ha-font-weight-bold);
           letter-spacing: -0.012em;
           line-height: 20px;
diff --git a/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts b/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts
index 3a9aa3043b..5e3cb6a5ee 100644
--- a/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts
+++ b/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts
@@ -313,8 +313,8 @@ export class HaCardConditionEditor extends LitElement {
         right: 0px;
         left: 0px;
         text-transform: uppercase;
+        font-size: var(--ha-font-size-m);
         font-weight: var(--ha-font-weight-bold);
-        font-size: 14px;
         background-color: var(--divider-color, #e0e0e0);
         color: var(--text-primary-color);
         max-height: 0px;
diff --git a/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts b/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts
index 0a2c058ada..18ffbd4276 100644
--- a/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts
@@ -444,7 +444,7 @@ export class HuiCardFeaturesEditor extends LitElement {
 
     .feature-content {
       height: 60px;
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -463,7 +463,7 @@ export class HuiCardFeaturesEditor extends LitElement {
     }
 
     .secondary {
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
       color: var(--secondary-text-color);
     }
 
diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index 47b172d615..a1713132b8 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -413,7 +413,7 @@ export class HuiEntitiesCardEditor
           display: flex;
           justify-content: space-between;
           align-items: center;
-          font-size: 18px;
+          font-size: var(--ha-font-size-l);
         }
 
         hui-header-footer-editor {
diff --git a/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts b/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts
index d235a2115c..ce852a172b 100644
--- a/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts
@@ -250,7 +250,7 @@ export class HuiHeadingBadgesEditor extends LitElement {
 
     .badge-content {
       height: 60px;
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -269,7 +269,7 @@ export class HuiHeadingBadgesEditor extends LitElement {
     }
 
     .secondary {
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
       color: var(--secondary-text-color);
     }
 
diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts b/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
index ffc58df168..1560ce05e8 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
@@ -165,7 +165,7 @@ export class HuiCreateDialogHeaderFooter
           box-sizing: border-box;
           padding: 8px;
           color: var(--secondary-text-color);
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
           cursor: pointer;
         }
 
diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
index 17f3f2cfb9..cfaf0289ec 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
@@ -99,7 +99,7 @@ export class HuiHeaderFooterEditor extends LitElement {
 
   static styles = css`
     :host {
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
diff --git a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
index ab574af88d..1656e52d88 100644
--- a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
+++ b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
@@ -215,7 +215,7 @@ export class HuiEntitiesCardRowEditor extends LitElement {
 
     .special-row {
       height: 60px;
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -234,7 +234,7 @@ export class HuiEntitiesCardRowEditor extends LitElement {
     }
 
     .secondary {
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
       color: var(--secondary-text-color);
     }
   `;
diff --git a/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts b/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts
index be8ff35a30..ab4d3fa078 100644
--- a/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts
+++ b/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts
@@ -238,7 +238,7 @@ export class HuiPictureElementsCardRowEditor extends LitElement {
 
     .element-row {
       height: 60px;
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -258,7 +258,7 @@ export class HuiPictureElementsCardRowEditor extends LitElement {
     }
 
     .secondary {
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
       color: var(--secondary-text-color);
     }
 
diff --git a/src/panels/lovelace/editor/hui-sub-element-editor.ts b/src/panels/lovelace/editor/hui-sub-element-editor.ts
index 99ef0f0991..eec8aa019c 100644
--- a/src/panels/lovelace/editor/hui-sub-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-sub-element-editor.ts
@@ -170,7 +170,7 @@ export class HuiSubElementEditor extends LitElement {
     .back-title {
       display: flex;
       align-items: center;
-      font-size: 18px;
+      font-size: var(--ha-font-size-l);
     }
   `;
 }
diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts
index 75ea3430aa..a7fd0c0216 100644
--- a/src/panels/lovelace/hui-editor.ts
+++ b/src/panels/lovelace/hui-editor.ts
@@ -152,12 +152,12 @@ class LovelaceFullConfigEditor extends LitElement {
         }
 
         .comments {
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
         }
 
         .save-button {
           opacity: 0;
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           padding: 0px 10px;
         }
 
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index b24468c0c5..11d0616944 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -1021,7 +1021,7 @@ class HUIRoot extends LitElement {
           height: var(--header-height);
           display: flex;
           align-items: center;
-          font-size: 20px;
+          font-size: var(--ha-font-size-xl);
           padding: 0px 12px;
           font-weight: var(--ha-font-weight-normal);
           box-sizing: border-box;
@@ -1180,7 +1180,7 @@ class HUIRoot extends LitElement {
         .exit-edit-mode {
           --mdc-theme-primary: var(--app-header-edit-text-color, #fff);
           --mdc-button-outline-color: var(--app-header-edit-text-color, #fff);
-          --mdc-typography-button-font-size: 14px;
+          --mdc-typography-button-font-size: var(--ha-font-size-m);
         }
         .child-view-icon {
           opacity: 0.5;
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 ddb77f00ea..be733ee9a8 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
@@ -204,7 +204,7 @@ export class HuiAreasDashboardStrategyEditor
         }
         .toolbar p {
           margin: 0;
-          font-size: 18px;
+          font-size: var(--ha-font-size-l);
           line-height: 24px;
           font-weight: var(--ha-font-weight-normal);
           padding: 6px 4px;
diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts
index dc90245e1d..80541e9efb 100644
--- a/src/panels/lovelace/views/hui-masonry-view.ts
+++ b/src/panels/lovelace/views/hui-masonry-view.ts
@@ -292,7 +292,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
     hui-view-badges {
       display: block;
       margin: 4px 8px 4px 8px;
-      font-size: 85%;
+      font-size: var(--ha-font-size-s);
     }
 
     #columns {
diff --git a/src/panels/lovelace/views/hui-sections-view.ts b/src/panels/lovelace/views/hui-sections-view.ts
index b3a40b9f48..b0f6d11951 100644
--- a/src/panels/lovelace/views/hui-sections-view.ts
+++ b/src/panels/lovelace/views/hui-sections-view.ts
@@ -530,7 +530,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
 
     .drop-helper p {
       color: var(--primary-text-color);
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       font-weight: var(--ha-font-weight-normal);
       line-height: 24px;
       text-align: center;
@@ -617,7 +617,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
     .imported-card-header .title {
       margin: 0;
       color: var(--primary-text-color);
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       font-weight: var(--ha-font-weight-normal);
       line-height: 24px;
       --mdc-icon-size: 18px;
@@ -629,7 +629,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
     .imported-card-header .subtitle {
       margin: 0;
       color: var(--secondary-text-color);
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
       font-weight: var(--ha-font-weight-normal);
       line-height: 20px;
     }
diff --git a/src/panels/lovelace/views/hui-sidebar-view.ts b/src/panels/lovelace/views/hui-sidebar-view.ts
index a445737a35..2f64ccc4de 100644
--- a/src/panels/lovelace/views/hui-sidebar-view.ts
+++ b/src/panels/lovelace/views/hui-sidebar-view.ts
@@ -198,7 +198,7 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
     hui-view-badges {
       display: block;
       margin: 4px 8px 4px 8px;
-      font-size: 85%;
+      font-size: var(--ha-font-size-s);
     }
 
     .container {
diff --git a/src/panels/lovelace/views/hui-view-header.ts b/src/panels/lovelace/views/hui-view-header.ts
index 6bf3b6445a..c621784c9c 100644
--- a/src/panels/lovelace/views/hui-view-header.ts
+++ b/src/panels/lovelace/views/hui-view-header.ts
@@ -476,7 +476,7 @@ export class HuiViewHeader extends LitElement {
       border-color: var(--primary-color);
       --mdc-icon-size: 18px;
       cursor: pointer;
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
       color: var(--primary-text-color);
       --ha-ripple-color: var(--primary-color);
       --ha-ripple-hover-opacity: 0.04;
diff --git a/src/panels/todo/dialog-todo-item-editor.ts b/src/panels/todo/dialog-todo-item-editor.ts
index 0503161ad6..80d8f21629 100644
--- a/src/panels/todo/dialog-todo-item-editor.ts
+++ b/src/panels/todo/dialog-todo-item-editor.ts
@@ -423,7 +423,7 @@ class DialogTodoItemEditor extends LitElement {
           justify-content: space-between;
         }
         .label {
-          font-size: 12px;
+          font-size: var(--ha-font-size-s);
           font-weight: var(--ha-font-weight-medium);
           color: var(--input-label-ink-color);
         }
diff --git a/src/panels/todo/ha-panel-todo.ts b/src/panels/todo/ha-panel-todo.ts
index 9dcb961478..62c5cc649d 100644
--- a/src/panels/todo/ha-panel-todo.ts
+++ b/src/panels/todo/ha-panel-todo.ts
@@ -401,7 +401,7 @@ class PanelTodo extends LitElement {
           --mdc-typography-button-text-transform: none;
           --mdc-typography-button-font-size: var(
             --mdc-typography-headline6-font-size,
-            1.25rem
+            var(--ha-font-size-l)
           );
           --mdc-typography-button-font-weight: var(
             --mdc-typography-headline6-font-weight,
diff --git a/src/resources/theme/typography.globals.ts b/src/resources/theme/typography.globals.ts
index e3fb90ab9a..04922558e1 100644
--- a/src/resources/theme/typography.globals.ts
+++ b/src/resources/theme/typography.globals.ts
@@ -12,15 +12,21 @@ export const typographyStyles = css`
 
     font-size: 14px;
     --ha-font-size-scale: 1;
-    --ha-font-size-xs: calc(10px * var(--ha-font-size-scale));
-    --ha-font-size-s: calc(12px * var(--ha-font-size-scale));
-    --ha-font-size-m: calc(14px * var(--ha-font-size-scale));
-    --ha-font-size-l: calc(16px * var(--ha-font-size-scale));
-    --ha-font-size-xl: calc(20px * var(--ha-font-size-scale));
-    --ha-font-size-2xl: calc(24px * var(--ha-font-size-scale));
-    --ha-font-size-3xl: calc(28px * var(--ha-font-size-scale));
-    --ha-font-size-4xl: calc(32px * var(--ha-font-size-scale));
-    --ha-font-size-5xl: calc(40px * var(--ha-font-size-scale));
+    --ha-font-size-xs: calc(10px * var(--ha-font-size-scale)); /* 0.714286rem */
+    --ha-font-size-s: calc(12px * var(--ha-font-size-scale)); /* 0.857143rem */
+    --ha-font-size-m: calc(14px * var(--ha-font-size-scale)); /* 1rem */
+    --ha-font-size-l: calc(16px * var(--ha-font-size-scale)); /* 1.142857rem */
+    --ha-font-size-xl: calc(20px * var(--ha-font-size-scale)); /* 1.428571rem */
+    --ha-font-size-2xl: calc(
+      24px * var(--ha-font-size-scale)
+    ); /* 1.714286rem */
+    --ha-font-size-3xl: calc(28px * var(--ha-font-size-scale)); /* 2rem */
+    --ha-font-size-4xl: calc(
+      32px * var(--ha-font-size-scale)
+    ); /* 2.285714rem */
+    --ha-font-size-5xl: calc(
+      40px * var(--ha-font-size-scale)
+    ); /* 2.857143rem */
 
     --ha-font-weight-light: 300;
     --ha-font-weight-normal: 400;
diff --git a/src/state-control/cover/ha-state-control-cover-position.ts b/src/state-control/cover/ha-state-control-cover-position.ts
index 5608ed92b5..c798ff0de3 100644
--- a/src/state-control/cover/ha-state-control-cover-position.ts
+++ b/src/state-control/cover/ha-state-control-cover-position.ts
@@ -80,7 +80,7 @@ export class HaStateControlCoverPosition extends LitElement {
       --control-slider-color: var(--primary-color);
       --control-slider-background: var(--disabled-color);
       --control-slider-background-opacity: 0.2;
-      --control-slider-tooltip-font-size: 20px;
+      --control-slider-tooltip-font-size: var(--ha-font-size-xl);
     }
   `;
 }
diff --git a/src/state-control/cover/ha-state-control-cover-tilt-position.ts b/src/state-control/cover/ha-state-control-cover-tilt-position.ts
index 77b6f573af..4d93740a7f 100644
--- a/src/state-control/cover/ha-state-control-cover-tilt-position.ts
+++ b/src/state-control/cover/ha-state-control-cover-tilt-position.ts
@@ -111,7 +111,7 @@ export class HaStateControlInfoCoverTiltPosition extends LitElement {
         --control-slider-color: var(--primary-color);
         --control-slider-background: var(--disabled-color);
         --control-slider-background-opacity: 0.2;
-        --control-slider-tooltip-font-size: 20px;
+        --control-slider-tooltip-font-size: var(--ha-font-size-xl);
       }
       .gradient {
         background: -webkit-linear-gradient(top, ${GRADIENT});
diff --git a/src/state-control/fan/ha-state-control-fan-speed.ts b/src/state-control/fan/ha-state-control-fan-speed.ts
index 8ed0d15baf..e9c0b69321 100644
--- a/src/state-control/fan/ha-state-control-fan-speed.ts
+++ b/src/state-control/fan/ha-state-control-fan-speed.ts
@@ -145,7 +145,7 @@ export class HaStateControlFanSpeed extends LitElement {
       --control-slider-color: var(--primary-color);
       --control-slider-background: var(--disabled-color);
       --control-slider-background-opacity: 0.2;
-      --control-slider-tooltip-font-size: 20px;
+      --control-slider-tooltip-font-size: var(--ha-font-size-xl);
     }
     ha-control-select {
       height: 45vh;
diff --git a/src/state-control/light/ha-state-control-light-brightness.ts b/src/state-control/light/ha-state-control-light-brightness.ts
index ce649782ea..0039ed8611 100644
--- a/src/state-control/light/ha-state-control-light-brightness.ts
+++ b/src/state-control/light/ha-state-control-light-brightness.ts
@@ -94,7 +94,7 @@ export class HaStateControlLightBrightness extends LitElement {
       --control-slider-color: var(--primary-color);
       --control-slider-background: var(--disabled-color);
       --control-slider-background-opacity: 0.2;
-      --control-slider-tooltip-font-size: 20px;
+      --control-slider-tooltip-font-size: var(--ha-font-size-xl);
     }
   `;
 }
diff --git a/src/state-control/state-control-circular-slider-style.ts b/src/state-control/state-control-circular-slider-style.ts
index d5c2862438..e9c3e17318 100644
--- a/src/state-control/state-control-circular-slider-style.ts
+++ b/src/state-control/state-control-circular-slider-style.ts
@@ -23,7 +23,7 @@ export const stateControlCircularSliderStyle = css`
     align-items: center;
     justify-content: center;
     pointer-events: none;
-    font-size: 16px;
+    font-size: var(--ha-font-size-l);
     line-height: 1.5;
     letter-spacing: 0.1px;
     gap: 8px;
@@ -83,7 +83,7 @@ export const stateControlCircularSliderStyle = css`
     font-size: 44px;
   }
   .container.md .state {
-    font-size: 30px;
+    font-size: var(--ha-font-size-3xl);
   }
   .container.md .info {
     margin-top: 12px;
@@ -97,14 +97,14 @@ export const stateControlCircularSliderStyle = css`
   }
 
   .container.sm ha-big-number {
-    font-size: 32px;
+    font-size: var(--ha-font-size-4xl);
   }
   .container.sm .state {
-    font-size: 26px;
+    font-size: var(--ha-font-size-2xl);
   }
   .container.sm .info {
     margin-top: 12px;
-    font-size: 14px;
+    font-size: var(--ha-font-size-m);
     gap: 2px;
     --mdc-icon-size: 14px;
   }
@@ -116,10 +116,10 @@ export const stateControlCircularSliderStyle = css`
   }
 
   .container.xs ha-big-number {
-    font-size: 32px;
+    font-size: var(--ha-font-size-4xl);
   }
   .container.xs .state {
-    font-size: 16px;
+    font-size: var(--ha-font-size-l);
   }
   .container.xs .info {
     margin-top: 12px;
diff --git a/src/state-control/valve/ha-state-control-valve-position.ts b/src/state-control/valve/ha-state-control-valve-position.ts
index 45808adc61..eef5460c86 100644
--- a/src/state-control/valve/ha-state-control-valve-position.ts
+++ b/src/state-control/valve/ha-state-control-valve-position.ts
@@ -76,7 +76,7 @@ export class HaStateControlValvePosition extends LitElement {
       --control-slider-color: var(--primary-color);
       --control-slider-background: var(--disabled-color);
       --control-slider-background-opacity: 0.2;
-      --control-slider-tooltip-font-size: 20px;
+      --control-slider-tooltip-font-size: var(--ha-font-size-xl);
     }
   `;
 }