diff --git a/src/cards/title-card/title-card.ts b/src/cards/title-card/title-card.ts
index 1e1ed6940..e607e15e0 100644
--- a/src/cards/title-card/title-card.ts
+++ b/src/cards/title-card/title-card.ts
@@ -275,7 +275,7 @@ export class TitleCard extends MushroomBaseElement implements LovelaceCard {
                     margin: 0;
                     white-space: pre-wrap;
                 }
-                .header div:not(:last-child) {
+                .header div:not(:last-of-type) {
                     margin-bottom: var(--title-spacing);
                 }
                 .actionable {
@@ -300,17 +300,19 @@ export class TitleCard extends MushroomBaseElement implements LovelaceCard {
                     transform: translateX(-4px);
                 }
                 .title {
-                    color: var(--primary-text-color);
+                    color: var(--title-color);
                     font-size: var(--title-font-size);
                     font-weight: var(--title-font-weight);
                     line-height: var(--title-line-height);
+                    letter-spacing: var(--title-letter-spacing);
                     --mdc-icon-size: var(--title-font-size);
                 }
                 .subtitle {
-                    color: var(--secondary-text-color);
+                    color: var(--subtitle-color);
                     font-size: var(--subtitle-font-size);
                     font-weight: var(--subtitle-font-weight);
                     line-height: var(--subtitle-line-height);
+                    letter-spacing: var(--subtitle-letter-spacing);
                     --mdc-icon-size: var(--subtitle-font-size);
                 }
                 .align-start {
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index 51573178d..74a5f1a78 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -4,14 +4,18 @@ export const themeVariables = css`
     --spacing: var(--mush-spacing, 12px);
 
     /* Title */
-    --title-padding: var(--mush-title-padding, 24px 12px 16px);
-    --title-spacing: var(--mush-title-spacing, 12px);
+    --title-padding: var(--mush-title-padding, 24px 12px 8px);
+    --title-spacing: var(--mush-title-spacing, 8px);
     --title-font-size: var(--mush-title-font-size, 24px);
     --title-font-weight: var(--mush-title-font-weight, normal);
-    --title-line-height: var(--mush-title-line-height, 1.2);
+    --title-line-height: var(--mush-title-line-height, 32px);
+    --title-color: var(--mush-title-color, var(--primary-text-color));
+    --title-letter-spacing: var(--mush-title-letter-spacing, -0.288px);
     --subtitle-font-size: var(--mush-subtitle-font-size, 16px);
     --subtitle-font-weight: var(--mush-subtitle-font-weight, normal);
-    --subtitle-line-height: var(--mush-subtitle-line-height, 1.2);
+    --subtitle-line-height: var(--mush-subtitle-line-height, 24px);
+    --subtitle-color: var(--mush-subtitle-color, var(--secondary-text-color));
+    --subtitle-letter-spacing: var(--mush-subtitle-letter-spacing, 0px);
 
     /* Card */
     --card-primary-font-size: var(--mush-card-primary-font-size, 14px);