Fix more font sizes

Update line-height
Update more font sizes
2025-11-05 17:09:48 +00:00 · 2025-04-28 17:44:21 +02:00 · 2025-04-28 17:33:26 +02:00 · 2025-04-28 16:58:11 +02:00 · 2025-04-28 16:55:39 +02:00 · 2025-04-28 16:40:09 +02:00
266 changed files with 724 additions and 711 deletions
--- a/cast/src/launcher/layout/hc-connect.ts
+++ b/cast/src/launcher/layout/hc-connect.ts
@@ -302,7 +302,7 @@ export class HcConnect extends LitElement {
    }
    .error {
      color: red;
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
    }

    .error a {
--- a/cast/src/launcher/layout/hc-layout.ts
+++ b/cast/src/launcher/layout/hc-layout.ts
@@ -86,9 +86,9 @@ class HcLayout extends LitElement {
    .card-header {
      color: var(--ha-card-header-color, var(--primary-text-color));
      font-family: var(--ha-card-header-font-family, inherit);
-      font-size: var(--ha-card-header-font-size, 24px);
+      font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
      letter-spacing: -0.012em;
-      line-height: 32px;
+      line-height: var(--ha-line-height-normal);
      padding: 24px 16px 16px;
      display: block;
      margin: 0;
@@ -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;
    }
@@ -113,7 +113,7 @@ class HcLayout extends LitElement {
    }

    :host ::slotted(.section-header) {
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
      padding: 4px 16px;
      text-transform: uppercase;
    }
@@ -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);
    }
--- 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;
--- a/demo/src/html/index.html.template
+++ b/demo/src/html/index.html.template
@@ -50,7 +50,7 @@
        font-family: Roboto, Noto, sans-serif;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
-        font-weight: 400;
+        font-weight: var(--ha-font-weight-normal);
        height: 100vh;
        margin: 0;
        padding: 0;
--- a/gallery/src/components/page-description.ts
+++ b/gallery/src/components/page-description.ts
@@ -37,13 +37,13 @@ class PageDescription extends HaMarkdown {
        border-bottom: 1px solid var(--secondary-background-color);
      }
      .title {
-        font-size: 42px;
-        line-height: 56px;
+        font-size: var(--ha-font-size-5xl);
+        line-height: var(--ha-line-height-normal);
        padding-bottom: 8px;
      }
      .subtitle {
-        font-size: 18px;
-        line-height: 24px;
+        font-size: var(--ha-font-size-l);
+        line-height: var(--ha-line-height-normal);
      }
      .root {
        max-width: 800px;
--- 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);
      }
    `,
  ];
--- a/gallery/src/ha-gallery.ts
+++ b/gallery/src/ha-gallery.ts
@@ -250,14 +250,14 @@ class HaGallery extends LitElement {
      }

      .page-footer .header {
-        font-size: 16px;
-        font-weight: 500;
-        line-height: 28px;
+        font-size: var(--ha-font-size-l);
+        font-weight: var(--ha-font-weight-semibold);
+        line-height: var(--ha-line-height-normal);
        text-align: center;
      }

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

--- a/gallery/src/pages/components/ha-control-button.ts
+++ b/gallery/src/pages/components/ha-control-button.ts
@@ -150,7 +150,7 @@ export class DemoHaBarButton extends LitElement {
      margin: 0;
    }
    label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
    }
    .custom {
      --control-button-icon-color: var(--primary-color);
--- a/gallery/src/pages/components/ha-control-number-buttons.ts
+++ b/gallery/src/pages/components/ha-control-number-buttons.ts
@@ -86,7 +86,7 @@ export class DemoHarControlNumberButtons extends LitElement {
      margin: 0;
    }
    label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
    }
    .custom {
      color: #2196f3;
--- a/gallery/src/pages/components/ha-control-select-menu.ts
+++ b/gallery/src/pages/components/ha-control-select-menu.ts
@@ -125,7 +125,7 @@ export class DemoHaControlSelectMenu extends LitElement {
      margin: 0;
    }
    label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
    }
    .custom {
      --control-button-icon-color: var(--primary-color);
--- a/gallery/src/pages/components/ha-control-select.ts
+++ b/gallery/src/pages/components/ha-control-select.ts
@@ -181,7 +181,7 @@ export class DemoHaControlSelect extends LitElement {
      margin: 0;
    }
    label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
    }
    .custom {
      --mdc-icon-size: 24px;
--- a/gallery/src/pages/components/ha-control-slider.ts
+++ b/gallery/src/pages/components/ha-control-slider.ts
@@ -144,7 +144,7 @@ export class DemoHaBarSlider extends LitElement {
      margin: 0;
    }
    label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
    }
    .custom {
      --control-slider-color: #ffcf4c;
--- a/gallery/src/pages/components/ha-control-switch.ts
+++ b/gallery/src/pages/components/ha-control-switch.ts
@@ -112,7 +112,7 @@ export class DemoHaControlSwitch extends LitElement {
      margin: 0;
    }
    label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
    }
    .custom {
      --control-switch-on-color: var(--green-color);
--- a/gallery/src/pages/components/ha-hs-color-picker.ts
+++ b/gallery/src/pages/components/ha-hs-color-picker.ts
@@ -105,8 +105,8 @@ export class DemoHaHsColorPicker extends LitElement {
      width: 400px;
    }
    .value {
-      font-size: 22px;
-      font-weight: bold;
+      font-size: var(--ha-font-size-2xl);
+      font-weight: var(--ha-font-weight-bold);
      margin: 0 0 12px 0;
    }
  `;
--- a/gallery/src/pages/components/ha-select-box.ts
+++ b/gallery/src/pages/components/ha-select-box.ts
@@ -123,7 +123,7 @@ export class DemoHaSelectBox extends LitElement {
      margin: 0;
    }
    label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
      margin-bottom: 8px;
      display: block;
    }
--- a/gallery/src/pages/date-time/date-time-numeric.ts
+++ b/gallery/src/pages/date-time/date-time-numeric.ts
@@ -106,7 +106,7 @@ export class DemoDateTimeDateTimeNumeric extends LitElement {
      margin: 12px auto;
    }
    .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
    }
    .center {
      text-align: center;
--- a/gallery/src/pages/date-time/date-time-seconds.ts
+++ b/gallery/src/pages/date-time/date-time-seconds.ts
@@ -106,7 +106,7 @@ export class DemoDateTimeDateTimeSeconds extends LitElement {
      margin: 12px auto;
    }
    .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
    }
    .center {
      text-align: center;
--- a/gallery/src/pages/date-time/date-time-short-year.ts
+++ b/gallery/src/pages/date-time/date-time-short-year.ts
@@ -106,7 +106,7 @@ export class DemoDateTimeDateTimeShortYear extends LitElement {
      margin: 12px auto;
    }
    .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
    }
    .center {
      text-align: center;
--- a/gallery/src/pages/date-time/date-time-short.ts
+++ b/gallery/src/pages/date-time/date-time-short.ts
@@ -106,7 +106,7 @@ export class DemoDateTimeDateTimeShort extends LitElement {
      margin: 12px auto;
    }
    .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
    }
    .center {
      text-align: center;
--- a/gallery/src/pages/date-time/date-time.ts
+++ b/gallery/src/pages/date-time/date-time.ts
@@ -106,7 +106,7 @@ export class DemoDateTimeDateTime extends LitElement {
      margin: 12px auto;
    }
    .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
    }
    .center {
      text-align: center;
--- a/gallery/src/pages/date-time/date.ts
+++ b/gallery/src/pages/date-time/date.ts
@@ -92,7 +92,7 @@ export class DemoDateTimeDate extends LitElement {

  static styles = css`
    .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
    }
    .center {
      text-align: center;
--- a/gallery/src/pages/date-time/time-seconds.ts
+++ b/gallery/src/pages/date-time/time-seconds.ts
@@ -106,7 +106,7 @@ export class DemoDateTimeTimeSeconds extends LitElement {
      margin: 12px auto;
    }
    .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
    }
    .center {
      text-align: center;
--- a/gallery/src/pages/date-time/time-weekday.ts
+++ b/gallery/src/pages/date-time/time-weekday.ts
@@ -106,7 +106,7 @@ export class DemoDateTimeTimeWeekday extends LitElement {
      margin: 12px auto;
    }
    .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
    }
    .center {
      text-align: center;
--- a/gallery/src/pages/date-time/time.ts
+++ b/gallery/src/pages/date-time/time.ts
@@ -106,7 +106,7 @@ export class DemoDateTimeTime extends LitElement {
      margin: 12px auto;
    }
    .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
    }
    .center {
      text-align: center;
--- a/hassio/src/addon-view/config/hassio-addon-config.ts
+++ b/hassio/src/addon-view/config/hassio-addon-config.ts
@@ -428,13 +428,13 @@ 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;
+          line-height: var(--ha-line-height-expanded);
          padding: 12px 16px 16px;
          display: block;
          margin-block: 0px;
-          font-weight: normal;
+          font-weight: var(--ha-font-weight-normal);
        }
        .card-actions.right {
          justify-content: flex-end;
--- 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-m);
          vertical-align: middle;
        }
        .errors {
--- a/hassio/src/backups/hassio-backups.ts
+++ b/hassio/src/backups/hassio-backups.ts
@@ -391,7 +391,7 @@ export class HassioBackups extends LitElement {
          top: -4px;
        }
        .selected-txt {
-          font-weight: bold;
+          font-weight: var(--ha-font-weight-bold);
          padding-left: 16px;
          padding-inline-start: 16px;
          padding-inline-end: initial;
@@ -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;
--- a/hassio/src/components/hassio-card-content.ts
+++ b/hassio/src/components/hassio-card-content.ts
@@ -101,7 +101,7 @@ class HassioCardContent extends LitElement {
      overflow: hidden;
      position: relative;
      height: 2.4em;
-      line-height: 1.2em;
+      line-height: var(--ha-line-height-condensed);
    }
    .icon_image img {
      max-height: 40px;
--- a/hassio/src/dashboard/hassio-update.ts
+++ b/hassio/src/dashboard/hassio-update.ts
@@ -131,7 +131,7 @@ export class HassioUpdate extends LitElement {
        }
        .update-heading {
          font-size: var(--ha-font-size-l);
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-semibold);
          margin-bottom: 0.5em;
          color: var(--primary-text-color);
        }
--- a/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
+++ b/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
@@ -169,7 +169,7 @@ class HassioHardwareDialog extends LitElement {
        pre {
          padding: 16px;
          overflow: auto;
-          line-height: 1.45;
+          line-height: var(--ha-line-height-normal);
          font-family: var(--ha-font-family-code);
        }
        code {
--- a/hassio/src/entrypoint.ts
+++ b/hassio/src/entrypoint.ts
@@ -8,7 +8,7 @@ body {
  font-family: Roboto, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
-  font-weight: 400;
+  font-weight: var(--ha-font-weight-normal);
  margin: 0;
  padding: 0;
  height: 100vh;
--- a/hassio/src/ingress-view/hassio-ingress-view.ts
+++ b/hassio/src/ingress-view/hassio-ingress-view.ts
@@ -340,12 +340,12 @@ 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;
      background-color: var(--app-header-background-color);
-      font-weight: 400;
+      font-weight: var(--ha-font-weight-normal);
      color: var(--app-header-text-color, white);
      border-bottom: var(--app-header-border-bottom, none);
      box-sizing: border-box;
@@ -354,7 +354,7 @@ class HassioIngressView extends LitElement {

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

--- a/src/auth/ha-auth-flow.ts
+++ b/src/auth/ha-auth-flow.ts
@@ -101,7 +101,7 @@ export class HaAuthFlow extends LitElement {
        a.forgot-password {
          color: var(--primary-color);
          text-decoration: none;
-          font-size: 0.875rem;
+          font-size: var(--ha-font-size-s);
        }
        .space-between {
          display: flex;
--- a/src/auth/ha-authorize.ts
+++ b/src/auth/ha-authorize.ts
@@ -93,8 +93,8 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
          background-color: var(--primary-background-color, #fafafa);
        }
        p {
-          font-size: 14px;
-          line-height: 20px;
+          font-size: var(--ha-font-size-m);
+          line-height: var(--ha-line-height-normal);
        }
        .card-content {
          background: var(
@@ -151,8 +151,8 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
          margin-inline-start: initial;
        }
        h1 {
-          font-size: 28px;
-          font-weight: 400;
+          font-size: var(--ha-font-size-3xl);
+          font-weight: var(--ha-font-weight-normal);
          margin-top: 16px;
          margin-bottom: 16px;
        }
--- a/src/auth/ha-pick-auth-provider.ts
+++ b/src/auth/ha-pick-auth-provider.ts
@@ -57,9 +57,9 @@ export class HaPickAuthProvider extends LitElement {
      position: relative;
      z-index: 1;
      text-align: center;
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 20px;
+      font-size: var(--ha-font-size-m);
+      font-weight: var(--ha-font-weight-normal);
+      line-height: var(--ha-line-height-normal);
    }
    h3:before {
      border-top: 1px solid var(--divider-color);
--- a/src/common/image/extract_color.ts
+++ b/src/common/image/extract_color.ts
@@ -96,7 +96,7 @@ const customGenerator = (colors: Swatch[]) => {
    // eslint-disable-next-line no-console
    console.log(
      "%cPicked colors",
-      `color: ${foregroundColor}; background-color: ${backgroundColor.hex}; font-weight: bold; padding: 16px;`
+      `color: ${foregroundColor}; background-color: ${backgroundColor.hex}; font-weight: var(--ha-font-weight-bold); padding: 16px;`
    );
    colors.forEach((color) => logColor(color));
    // eslint-disable-next-line no-console
--- a/src/components/chart/ha-chart-base.ts
+++ b/src/components/chart/ha-chart-base.ts
@@ -719,7 +719,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 {
--- a/src/components/chart/state-history-charts.ts
+++ b/src/components/chart/state-history-charts.ts
@@ -293,7 +293,7 @@ export class StateHistoryCharts extends LitElement {

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

--- a/src/components/chart/statistics-chart.ts
+++ b/src/components/chart/statistics-chart.ts
@@ -634,7 +634,7 @@ export class StatisticsChart extends LitElement {
    }
    .info {
      text-align: center;
-      line-height: 60px;
+      line-height: var(--ha-line-height-expanded);
      color: var(--secondary-text-color);
    }
  `;
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -931,9 +931,9 @@ export class HaDataTable extends LitElement {
          font-family: Roboto, sans-serif;
          -moz-osx-font-smoothing: grayscale;
          -webkit-font-smoothing: antialiased;
-          font-size: 0.875rem;
-          line-height: 1.25rem;
-          font-weight: 400;
+          font-size: var(--ha-font-size-s);
+          line-height: var(--ha-line-height-condensed);
+          font-weight: var(--ha-font-weight-normal);
          letter-spacing: 0.0178571429em;
          text-decoration: inherit;
          text-transform: inherit;
@@ -1051,9 +1051,9 @@ export class HaDataTable extends LitElement {
          font-family: Roboto, sans-serif;
          -moz-osx-font-smoothing: grayscale;
          -webkit-font-smoothing: antialiased;
-          font-size: 0.875rem;
-          line-height: 1.25rem;
-          font-weight: 400;
+          font-size: var(--ha-font-size-s);
+          line-height: var(--ha-line-height-normal);
+          font-weight: var(--ha-font-weight-normal);
          letter-spacing: 0.0178571429em;
          text-decoration: inherit;
          text-transform: inherit;
@@ -1173,9 +1173,9 @@ export class HaDataTable extends LitElement {
          font-family: Roboto, sans-serif;
          -moz-osx-font-smoothing: grayscale;
          -webkit-font-smoothing: antialiased;
-          font-size: 0.875rem;
-          line-height: 1.375rem;
-          font-weight: 500;
+          font-size: var(--ha-font-size-s);
+          line-height: var(--ha-line-height-normal);
+          font-weight: var(--ha-font-weight-semibold);
          letter-spacing: 0.0071428571em;
          text-decoration: inherit;
          text-transform: inherit;
@@ -1199,7 +1199,7 @@ export class HaDataTable extends LitElement {
          padding-inline-start: 12px;
          padding-inline-end: initial;
          width: 100%;
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-semibold);
          display: flex;
          align-items: center;
          cursor: pointer;
--- a/src/components/entity/state-info.ts
+++ b/src/components/entity/state-info.ts
@@ -108,7 +108,7 @@ class StateInfo extends LitElement {

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

    .time-ago,
--- a/src/components/ha-alert.ts
+++ b/src/components/ha-alert.ts
@@ -129,7 +129,7 @@ class HaAlert extends LitElement {
    }
    .title {
      margin-top: 2px;
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
    }
    .action mwc-button,
    .action ha-icon-button {
--- a/src/components/ha-ansi-to-html.ts
+++ b/src/components/ha-ansi-to-html.ts
@@ -56,7 +56,7 @@ export class HaAnsiToHtml extends LitElement {
      overflow-wrap: break-word;
    }
    .bold {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
    }
    .italic {
      font-style: italic;
--- 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);
      }
    }

--- a/src/components/ha-badge.ts
+++ b/src/components/ha-badge.ts
@@ -95,18 +95,18 @@ export class HaBadge extends LitElement {
      text-align: center;
    }
    .label {
-      font-size: 10px;
+      font-size: var(--ha-font-size-xs);
      font-style: normal;
-      font-weight: 500;
-      line-height: 10px;
+      font-weight: var(--ha-font-weight-semibold);
+      line-height: var(--ha-line-height-condensed);
      letter-spacing: 0.1px;
      color: var(--secondary-text-color);
    }
    .content {
      font-size: var(--ha-font-size-badge, var(--ha-font-size-s));
      font-style: normal;
-      font-weight: 500;
-      line-height: 16px;
+      font-weight: var(--ha-font-weight-semibold);
+      line-height: var(--ha-line-height-normal);
      letter-spacing: 0.1px;
      color: var(--primary-text-color);
    }
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -387,9 +387,15 @@ export class HaBaseTimeInput extends LitElement {
        --mdc-typography-body2-font-family,
        var(--mdc-typography-font-family, Roboto, sans-serif)
      );
-      font-size: var(--mdc-typography-body2-font-size, 0.875rem);
-      line-height: var(--mdc-typography-body2-line-height, 1.25rem);
-      font-weight: var(--mdc-typography-body2-font-weight, 400);
+      font-size: var(--mdc-typography-body2-font-size, var(--ha-font-size-s));
+      line-height: var(
+        --mdc-typography-body2-line-height,
+        var(--ha-line-height-normal)
+      );
+      font-weight: var(
+        --mdc-typography-body2-font-weight,
+        var(--ha-font-weight-normal)
+      );
      letter-spacing: var(
        --mdc-typography-body2-letter-spacing,
        0.0178571429em
@@ -403,7 +409,7 @@ export class HaBaseTimeInput extends LitElement {
    }
    ha-input-helper-text {
      padding-top: 8px;
-      line-height: normal;
+      line-height: var(--ha-line-height-normal);
    }
  `;
 }
--- a/src/components/ha-big-number.ts
+++ b/src/components/ha-big-number.ts
@@ -59,7 +59,7 @@ export class HaBigNumber extends LitElement {
      css`
        :host {
          font-size: 57px;
-          line-height: 1.12;
+          line-height: var(--ha-line-height-condensed);
          letter-spacing: -0.25px;
        }
        .value {
@@ -87,12 +87,12 @@ export class HaBigNumber extends LitElement {
        }
        .value .decimal {
          font-size: 0.42em;
-          line-height: 1.33;
+          line-height: var(--ha-line-height-condensed);
          min-height: 1.33em;
        }
        .value .unit {
          font-size: 0.33em;
-          line-height: 1.26;
+          line-height: var(--ha-line-height-condensed);
        }
        /* Accessibility */
        .visually-hidden {
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@@ -41,14 +41,14 @@ export class HaCard extends LitElement {
    :host ::slotted(.card-header) {
      color: var(--ha-card-header-color, var(--primary-text-color));
      font-family: var(--ha-card-header-font-family, inherit);
-      font-size: var(--ha-card-header-font-size, 24px);
+      font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
      letter-spacing: -0.012em;
-      line-height: 48px;
+      line-height: var(--ha-line-height-expanded);
      padding: 12px 16px 16px;
      display: block;
      margin-block-start: 0px;
      margin-block-end: 0px;
-      font-weight: normal;
+      font-weight: var(--ha-font-weight-normal);
    }

    :host ::slotted(.card-content:not(:first-child)),
--- a/src/components/ha-climate-state.ts
+++ b/src/components/ha-climate-state.ts
@@ -154,7 +154,7 @@ class HaClimateState extends LitElement {
    }

    .state-label {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
    }

    .unit {
--- a/src/components/ha-combo-box-item.ts
+++ b/src/components/ha-combo-box-item.ts
@@ -18,13 +18,13 @@ export class HaComboBoxItem extends HaMdListItem {
        border-top: 1px solid var(--divider-color);
      }
      [slot="headline"] {
-        line-height: 22px;
-        font-size: 14px;
+        line-height: var(--ha-line-height-normal);
+        font-size: var(--ha-font-size-m);
        white-space: nowrap;
      }
      [slot="supporting-text"] {
-        line-height: 18px;
-        font-size: 12px;
+        line-height: var(--ha-line-height-normal);
+        font-size: var(--ha-font-size-s);
        white-space: nowrap;
      }
      ::slotted(state-badge),
--- a/src/components/ha-control-button.ts
+++ b/src/components/ha-control-button.ts
@@ -59,7 +59,7 @@ export class HaControlButton extends LitElement {
      box-sizing: border-box;
      line-height: inherit;
      font-family: Roboto;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
      outline: none;
      overflow: hidden;
      background: none;
--- a/src/components/ha-control-number-buttons.ts
+++ b/src/components/ha-control-number-buttons.ts
@@ -194,7 +194,7 @@ export class HaControlNumberButton extends LitElement {
      color: var(--primary-text-color);
      -webkit-tap-highlight-color: transparent;
      font-style: normal;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
      transition: color 180ms ease-in-out;
    }
    :host([disabled]) {
--- a/src/components/ha-control-select-menu.ts
+++ b/src/components/ha-control-select-menu.ts
@@ -179,8 +179,8 @@ 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;
-        line-height: 1.4;
+        font-size: var(--ha-font-size-m);
+        line-height: var(--ha-line-height-condensed);
        width: auto;
        color: var(--primary-text-color);
        -webkit-tap-highlight-color: transparent;
@@ -208,7 +208,7 @@ export class HaControlSelectMenu extends SelectBase {
        width: 100%;
        user-select: none;
        font-style: normal;
-        font-weight: 400;
+        font-weight: var(--ha-font-weight-normal);
        letter-spacing: 0.25px;
      }
      .content {
--- a/src/components/ha-control-select.ts
+++ b/src/components/ha-control-select.ts
@@ -207,7 +207,7 @@ export class HaControlSelect extends LitElement {
      outline: none;
      transition: box-shadow 180ms ease-in-out;
      font-style: normal;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
      color: var(--primary-text-color);
      user-select: none;
      -webkit-tap-highlight-color: transparent;
--- 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);
--- a/src/components/ha-dialog-header.ts
+++ b/src/components/ha-dialog-header.ts
@@ -53,13 +53,13 @@ export class HaDialogHeader extends LitElement {
          white-space: nowrap;
        }
        .header-title {
-          font-size: 22px;
-          line-height: 28px;
-          font-weight: 400;
+          font-size: var(--ha-font-size-xl);
+          line-height: var(--ha-line-height-normal);
+          font-weight: var(--ha-font-weight-normal);
        }
        .header-subtitle {
-          font-size: 14px;
-          line-height: 20px;
+          font-size: var(--ha-font-size-m);
+          line-height: var(--ha-line-height-condensed);
          color: var(--secondary-text-color);
        }
        @media all and (min-width: 450px) and (min-height: 500px) {
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -85,8 +85,8 @@ export class HaDialog extends DialogBase {
          var(--dialog-backdrop-filter, none)
        );
        --mdc-dialog-box-shadow: var(--dialog-box-shadow, none);
-        --mdc-typography-headline6-font-weight: 400;
-        --mdc-typography-headline6-font-size: 1.574rem;
+        --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
+        --mdc-typography-headline6-font-size: var(--ha-font-size-xl);
      }
      .mdc-dialog__actions {
        justify-content: var(--justify-action-buttons, flex-end);
--- a/src/components/ha-expansion-panel.ts
+++ b/src/components/ha-expansion-panel.ts
@@ -188,7 +188,7 @@ export class HaExpansionPanel extends LitElement {
      align-items: center;
      cursor: pointer;
      overflow: hidden;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
      outline: none;
    }
    #summary.noCollapse {
@@ -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);
    }
  `;
 }
--- 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);
@@ -324,7 +324,7 @@ export class HaFileUpload extends LitElement {
      box-sizing: border-box;
    }
    .header {
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
    }
    .progress {
      color: var(--secondary-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;
--- a/src/components/ha-filter-blueprints.ts
+++ b/src/components/ha-filter-blueprints.ts
@@ -208,10 +208,10 @@ export class HaFilterBlueprints extends LitElement {
          min-width: 16px;
          box-sizing: border-box;
          border-radius: 50%;
-          font-weight: 400;
-          font-size: 11px;
+          font-weight: var(--ha-font-weight-normal);
+          font-size: var(--ha-font-size-xs);
          background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
          padding: 0px 2px;
          color: var(--text-primary-color);
--- a/src/components/ha-filter-categories.ts
+++ b/src/components/ha-filter-categories.ts
@@ -303,10 +303,10 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
          min-width: 16px;
          box-sizing: border-box;
          border-radius: 50%;
-          font-weight: 400;
-          font-size: 11px;
+          font-weight: var(--ha-font-weight-normal);
+          font-size: var(--ha-font-size-xs);
          background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
          padding: 0px 2px;
          color: var(--text-primary-color);
--- a/src/components/ha-filter-devices.ts
+++ b/src/components/ha-filter-devices.ts
@@ -232,10 +232,10 @@ export class HaFilterDevices extends LitElement {
          min-width: 16px;
          box-sizing: border-box;
          border-radius: 50%;
-          font-weight: 400;
-          font-size: 11px;
+          font-weight: var(--ha-font-weight-normal);
+          font-size: var(--ha-font-size-xs);
          background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
          padding: 0px 2px;
          color: var(--text-primary-color);
--- a/src/components/ha-filter-domains.ts
+++ b/src/components/ha-filter-domains.ts
@@ -189,10 +189,10 @@ export class HaFilterDomains extends LitElement {
          min-width: 16px;
          box-sizing: border-box;
          border-radius: 50%;
-          font-weight: 400;
-          font-size: 11px;
+          font-weight: var(--ha-font-weight-normal);
+          font-size: var(--ha-font-size-xs);
          background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
          padding: 0px 2px;
          color: var(--text-primary-color);
--- a/src/components/ha-filter-entities.ts
+++ b/src/components/ha-filter-entities.ts
@@ -246,10 +246,10 @@ export class HaFilterEntities extends LitElement {
          min-width: 16px;
          box-sizing: border-box;
          border-radius: 50%;
-          font-weight: 400;
-          font-size: 11px;
+          font-weight: var(--ha-font-weight-normal);
+          font-size: var(--ha-font-size-xs);
          background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
          padding: 0px 2px;
          color: var(--text-primary-color);
--- a/src/components/ha-filter-floor-areas.ts
+++ b/src/components/ha-filter-floor-areas.ts
@@ -303,10 +303,10 @@ export class HaFilterFloorAreas extends LitElement {
          min-width: 16px;
          box-sizing: border-box;
          border-radius: 50%;
-          font-weight: 400;
-          font-size: 11px;
+          font-weight: var(--ha-font-weight-normal);
+          font-size: var(--ha-font-size-xs);
          background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
          padding: 0px 2px;
          color: var(--text-primary-color);
--- a/src/components/ha-filter-integrations.ts
+++ b/src/components/ha-filter-integrations.ts
@@ -195,10 +195,10 @@ export class HaFilterIntegrations extends LitElement {
          min-width: 16px;
          box-sizing: border-box;
          border-radius: 50%;
-          font-weight: 400;
-          font-size: 11px;
+          font-weight: var(--ha-font-weight-normal);
+          font-size: var(--ha-font-size-xs);
          background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
          padding: 0px 2px;
          color: var(--text-primary-color);
--- a/src/components/ha-filter-labels.ts
+++ b/src/components/ha-filter-labels.ts
@@ -233,10 +233,10 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
          min-width: 16px;
          box-sizing: border-box;
          border-radius: 50%;
-          font-weight: 400;
-          font-size: 11px;
+          font-weight: var(--ha-font-weight-normal);
+          font-size: var(--ha-font-size-xs);
          background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
          padding: 0px 2px;
          color: var(--text-primary-color);
--- a/src/components/ha-filter-states.ts
+++ b/src/components/ha-filter-states.ts
@@ -177,10 +177,10 @@ export class HaFilterStates extends LitElement {
          min-width: 16px;
          box-sizing: border-box;
          border-radius: 50%;
-          font-weight: 400;
-          font-size: 11px;
+          font-weight: var(--ha-font-weight-normal);
+          font-size: var(--ha-font-size-xs);
          background-color: var(--primary-color);
-          line-height: 16px;
+          line-height: var(--ha-line-height-normal);
          text-align: center;
          padding: 0px 2px;
          color: var(--text-primary-color);
--- a/src/components/ha-form/ha-form-boolean.ts
+++ b/src/components/ha-form/ha-form-boolean.ts
@@ -70,8 +70,11 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
      padding-top: 4px;
      box-sizing: border-box;
      color: var(--secondary-text-color);
-      font-size: 0.875rem;
-      font-weight: var(--mdc-typography-body2-font-weight, 400);
+      font-size: var(--ha-font-size-s);
+      font-weight: var(
+        --mdc-typography-body2-font-weight,
+        var(--ha-font-weight-normal)
+      );
    }
  `;
 }
--- a/src/components/ha-form/ha-form-constant.ts
+++ b/src/components/ha-form/ha-form-constant.ts
@@ -20,7 +20,7 @@ export class HaFormConstant extends LitElement implements HaFormElement {
      display: block;
    }
    .label {
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
    }
  `;
 }
--- 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;
        }
--- a/src/components/ha-heading-badge.ts
+++ b/src/components/ha-heading-badge.ts
@@ -34,8 +34,11 @@ 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-weight: var(--ha-heading-badge-font-weight, 400);
+      font-size: var(--ha-heading-badge-font-size, var(--ha-font-size-m));
+      font-weight: var(
+        --ha-heading-badge-font-weight,
+        var(--ha-font-weight-normal)
+      );
      line-height: var(--ha-heading-badge-line-height, 20px);
      letter-spacing: 0.1px;
      --mdc-icon-size: 14px;
--- a/src/components/ha-humidifier-state.ts
+++ b/src/components/ha-humidifier-state.ts
@@ -103,7 +103,7 @@ class HaHumidifierState extends LitElement {
    }

    .state-label {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
    }

    .unit {
--- a/src/components/ha-input-helper-text.ts
+++ b/src/components/ha-input-helper-text.ts
@@ -12,7 +12,7 @@ class InputHelperText extends LitElement {
    :host {
      display: block;
      color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
-      font-size: 0.75rem;
+      font-size: var(--ha-font-size-xs);
      padding-left: 16px;
      padding-right: 16px;
      padding-inline-start: 16px;
--- a/src/components/ha-label-badge.ts
+++ b/src/components/ha-label-badge.ts
@@ -80,7 +80,7 @@ class HaLabelBadge extends LitElement {
          /* Make the label as wide as container+border. (parent_borderwidth / font-size) */
          left: -0.2em;
          right: -0.2em;
-          line-height: 1em;
+          line-height: var(--ha-line-height-condensed);
          font-size: 0.5em;
        }
        .label-badge .label span {
@@ -91,7 +91,7 @@ class HaLabelBadge extends LitElement {
          color: var(--ha-label-badge-label-color, white);
          border-radius: 1em;
          padding: 9% 16% 8% 16%; /* mostly apitalized text, not much descenders => bit more top margin */
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-semibold);
          overflow: hidden;
          text-transform: uppercase;
          text-overflow: ellipsis;
@@ -102,7 +102,10 @@ class HaLabelBadge extends LitElement {
          margin-top: 1em;
          font-size: var(--ha-label-badge-title-font-size, 0.9em);
          width: var(--ha-label-badge-title-width, 5em);
-          font-weight: var(--ha-label-badge-title-font-weight, 400);
+          font-weight: var(
+            --ha-label-badge-title-font-weight,
+            var(--ha-font-weight-normal)
+          );
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: normal;
--- a/src/components/ha-label.ts
+++ b/src/components/ha-label.ts
@@ -32,9 +32,9 @@ class HaLabel extends LitElement {
          display: inline-flex;
          flex-direction: row;
          align-items: center;
-          font-size: 12px;
-          font-weight: 500;
-          line-height: 16px;
+          font-size: var(--ha-font-size-s);
+          font-weight: var(--ha-font-weight-semibold);
+          line-height: var(--ha-line-height-condensed);
          letter-spacing: 0.1px;
          vertical-align: middle;
          height: 32px;
--- a/src/components/ha-markdown.ts
+++ b/src/components/ha-markdown.ts
@@ -73,7 +73,7 @@ export class HaMarkdown extends LitElement {
    pre {
      padding: 16px;
      overflow: auto;
-      line-height: 1.45;
+      line-height: var(--ha-line-height-normal);
      font-family: var(--ha-font-family-code);
    }
    h1,
@@ -86,7 +86,7 @@ export class HaMarkdown extends LitElement {
    }
    h2 {
      font-size: 1.5em;
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
    }
    hr {
      border-color: var(--divider-color);
--- a/src/components/ha-md-dialog.ts
+++ b/src/components/ha-md-dialog.ts
@@ -155,10 +155,10 @@ export class HaMdDialog extends Dialog {
        --md-dialog-supporting-text-color: var(--primary-text-color);
        --md-sys-color-scrim: #000000;

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

      :host([type="alert"]) {
--- a/src/components/ha-select-box.ts
+++ b/src/components/ha-select-box.ts
@@ -154,18 +154,18 @@ export class HaSelectBox extends LitElement {
    }
    .option .content .text .label {
      color: var(--primary-text-color);
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 20px;
+      font-size: var(--ha-font-size-m);
+      font-weight: var(--ha-font-weight-normal);
+      line-height: var(--ha-line-height-normal);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .option .content .text .description {
      color: var(--secondary-text-color);
-      font-size: 13px;
-      font-weight: 400;
-      line-height: 16px;
+      font-size: var(--ha-font-size-s);
+      font-weight: var(--ha-font-weight-normal);
+      line-height: var(--ha-line-height-condensed);
    }
    img {
      position: relative;
--- a/src/components/ha-selector/ha-selector-action.ts
+++ b/src/components/ha-selector/ha-selector-action.ts
@@ -45,7 +45,7 @@ export class HaActionSelector extends LitElement {
    label {
      display: block;
      margin-bottom: 4px;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
    }
  `;
 }
--- a/src/components/ha-selector/ha-selector-boolean.ts
+++ b/src/components/ha-selector/ha-selector-boolean.ts
@@ -61,8 +61,11 @@ export class HaBooleanSelector extends LitElement {
      padding-top: 4px;
      box-sizing: border-box;
      color: var(--secondary-text-color);
-      font-size: 0.875rem;
-      font-weight: var(--mdc-typography-body2-font-weight, 400);
+      font-size: var(--ha-font-size-s);
+      font-weight: var(
+        --mdc-typography-body2-font-weight,
+        var(--ha-font-weight-normal)
+      );
    }
  `;
 }
--- a/src/components/ha-selector/ha-selector-condition.ts
+++ b/src/components/ha-selector/ha-selector-condition.ts
@@ -36,7 +36,7 @@ export class HaConditionSelector extends LitElement {
    label {
      display: block;
      margin-bottom: 4px;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
    }
  `;
 }
--- 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;
--- 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;
--- a/src/components/ha-selector/ha-selector-trigger.ts
+++ b/src/components/ha-selector/ha-selector-trigger.ts
@@ -45,7 +45,7 @@ export class HaTriggerSelector extends LitElement {
    label {
      display: block;
      margin-bottom: 4px;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
    }
  `;
 }
--- a/src/components/ha-settings-row.ts
+++ b/src/components/ha-settings-row.ts
@@ -69,9 +69,12 @@ export class HaSettingsRow extends LitElement {
        var(--mdc-typography-font-family, Roboto, sans-serif)
      );
      -webkit-font-smoothing: antialiased;
-      font-size: var(--mdc-typography-body2-font-size, 0.875rem);
-      font-weight: var(--mdc-typography-body2-font-weight, 400);
-      line-height: normal;
+      font-size: var(--mdc-typography-body2-font-size, var(--ha-font-size-s));
+      font-weight: var(
+        --mdc-typography-body2-font-weight,
+        var(--ha-font-weight-normal)
+      );
+      line-height: var(--ha-line-height-normal);
      color: var(--secondary-text-color);
    }
    .body[two-line] {
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -827,7 +827,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          padding: 0 4px;
          border-bottom: 1px solid transparent;
          white-space: nowrap;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
          color: var(
            --sidebar-menu-button-text-color,
            var(--primary-text-color)
@@ -837,7 +837,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));
@@ -939,8 +939,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
        ha-md-list-item .item-text {
          display: none;
          max-width: calc(100% - 56px);
-          font-weight: 500;
-          font-size: 14px;
+          font-weight: var(--ha-font-weight-semibold);
+          font-size: var(--ha-font-size-m);
        }
        :host([expanded]) ha-md-list-item .item-text {
          display: block;
@@ -962,8 +962,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          align-items: center;
          min-width: 8px;
          border-radius: 10px;
-          font-weight: 400;
-          line-height: normal;
+          font-weight: var(--ha-font-weight-normal);
+          line-height: var(--ha-line-height-normal);
          background-color: var(--accent-color);
          padding: 2px 6px;
          color: var(--text-accent-color, var(--text-primary-color));
@@ -975,7 +975,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          left: 26px;
          border-radius: 10px;
          font-size: 0.65em;
-          line-height: 2;
+          line-height: var(--ha-line-height-expanded);
          padding: 0 4px;
        }

@@ -996,8 +996,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {

        .subheader {
          color: var(--sidebar-text-color);
-          font-weight: 500;
-          font-size: 14px;
+          font-weight: var(--ha-font-weight-semibold);
+          font-size: var(--ha-font-size-m);
          padding: 16px;
          white-space: nowrap;
        }
@@ -1011,7 +1011,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          color: var(--sidebar-background-color);
          background-color: var(--sidebar-text-color);
          padding: 4px;
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-semibold);
        }

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

    .prefix {
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-semibold);
    }
  `;
 }
--- a/src/components/ha-top-app-bar-fixed.ts
+++ b/src/components/ha-top-app-bar-fixed.ts
@@ -16,7 +16,7 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
        padding-top: var(--header-height);
      }
      .mdc-top-app-bar {
-        --mdc-typography-headline6-font-weight: 400;
+        --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
        color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff));
        background-color: var(
          --app-header-background-color,
@@ -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;
      }
--- a/src/components/ha-top-app-bar.ts
+++ b/src/components/ha-top-app-bar.ts
@@ -16,7 +16,7 @@ export class HaTopAppBar extends TopAppBarBase {
        padding-top: var(--header-height);
      }
      .mdc-top-app-bar {
-        --mdc-typography-headline6-font-weight: 400;
+        --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
        color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff));
        background-color: var(
          --app-header-background-color,
--- a/src/components/ha-two-pane-top-app-bar-fixed.ts
+++ b/src/components/ha-two-pane-top-app-bar-fixed.ts
@@ -268,7 +268,7 @@ export class TopAppBarBaseBase extends BaseElement {
        );
      }
      .mdc-top-app-bar {
-        --mdc-typography-headline6-font-weight: 400;
+        --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
        color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff));
        background-color: var(
          --app-header-background-color,
@@ -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;
      }
--- a/src/components/ha-water_heater-state.ts
+++ b/src/components/ha-water_heater-state.ts
@@ -71,7 +71,7 @@ export class HaWaterHeaterState extends LitElement {
        }

        .state-label {
-          font-weight: bold;
+          font-weight: var(--ha-font-weight-bold);
        }

        .label {
--- a/src/components/map/ha-map.ts
+++ b/src/components/map/ha-map.ts
@@ -688,11 +688,11 @@ 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 {
-      line-height: 30px;
+      line-height: var(--ha-line-height-expanded);
    }
  `;
 }
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -959,9 +959,9 @@ export class HaMediaPlayerBrowse extends LitElement {
          padding-top: 16px;
        }
        .breadcrumb .title {
-          font-size: 32px;
-          line-height: 1.2;
-          font-weight: bold;
+          font-size: var(--ha-font-size-4xl);
+          line-height: var(--ha-line-height-condensed);
+          font-weight: var(--ha-font-weight-bold);
          margin: 0;
          overflow: hidden;
          display: -webkit-box;
@@ -970,7 +970,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;
@@ -979,7 +979,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;
@@ -1138,7 +1138,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;
@@ -1203,7 +1203,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;
--- a/src/components/tile/ha-tile-info.ts
+++ b/src/components/tile/ha-tile-info.ts
@@ -34,16 +34,16 @@ export class HaTileInfo extends LitElement {
      width: 100%;
    }
    .primary {
-      font-weight: 500;
-      font-size: 14px;
-      line-height: 20px;
+      font-weight: var(--ha-font-weight-semibold);
+      font-size: var(--ha-font-size-m);
+      line-height: var(--ha-line-height-condensed);
      letter-spacing: 0.1px;
      color: var(--primary-text-color);
    }
    .secondary {
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 16px;
+      font-weight: var(--ha-font-weight-normal);
+      font-size: var(--ha-font-size-s);
+      line-height: var(--ha-line-height-condensed);
      letter-spacing: 0.4px;
      color: var(--primary-text-color);
    }
--- 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 {
--- a/src/dialogs/config-flow/styles.ts
+++ b/src/dialogs/config-flow/styles.ts
@@ -14,9 +14,15 @@ export const configFlowContentStyles = css`
      --mdc-typography-headline6-font-family,
      var(--mdc-typography-font-family, Roboto, sans-serif)
    );
-    font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
-    line-height: var(--mdc-typography-headline6-line-height, 2rem);
-    font-weight: var(--mdc-typography-headline6-font-weight, 500);
+    font-size: var(--mdc-typography-headline6-font-size, var(--ha-font-size-l));
+    line-height: var(
+      --mdc-typography-headline6-line-height,
+      var(--ha-line-height-expanded)
+    );
+    font-weight: var(
+      --mdc-typography-headline6-font-weight,
+      var(--ha-font-weight-semibold)
+    );
    letter-spacing: var(--mdc-typography-headline6-letter-spacing, 0.0125em);
    text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);
    text-transform: var(--mdc-typography-headline6-text-transform, inherit);
--- 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);
--- a/src/dialogs/more-info/components/ha-more-info-state-header.ts
+++ b/src/dialogs/more-info/components/ha-more-info-state-header.ts
@@ -74,15 +74,15 @@ export class HaMoreInfoStateHeader extends LitElement {
    }
    .state {
      font-style: normal;
-      font-weight: 400;
-      font-size: 36px;
-      line-height: 44px;
+      font-weight: var(--ha-font-weight-normal);
+      font-size: var(--ha-font-size-5xl);
+      line-height: var(--ha-line-height-condensed);
    }
    .last-changed {
      font-style: normal;
-      font-weight: 500;
-      font-size: 16px;
-      line-height: 24px;
+      font-weight: var(--ha-font-weight-semibold);
+      font-size: var(--ha-font-size-l);
+      line-height: var(--ha-line-height-normal);
      letter-spacing: 0.1px;
      padding: 4px 0;
      margin-bottom: 20px;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Wendelin	cea80d9830	Fix more font sizes	2025-04-28 17:44:21 +02:00
Wendelin	fd279ea2b4	Update line-height	2025-04-28 17:33:26 +02:00
Wendelin	335b876fec	Update more font sizes	2025-04-28 16:58:11 +02:00
Wendelin	b36b4d734b	Update font-weight	2025-04-28 16:55:39 +02:00
Wendelin	514b6568e5	Update rem to use vars	2025-04-28 16:40:09 +02:00
Wendelin	4750a59719	Merge branch 'dev' of github.com:home-assistant/frontend into update-typography	2025-04-28 16:25:33 +02:00
Wendelin	404d6c75b5	Update font-size	2025-04-28 14:58:22 +02:00