diff --git a/src/client/theme-default/NotFound.vue b/src/client/theme-default/NotFound.vue
index f65d3a6db..bf10c6016 100644
--- a/src/client/theme-default/NotFound.vue
+++ b/src/client/theme-default/NotFound.vue
@@ -44,16 +44,14 @@ const { currentLang } = useLangs()
 }
 
 .code {
-  line-height: 64px;
-  font-size: 64px;
+  font-size: var(--vp-custom-block-font-size-9xlarge);
   font-weight: 600;
 }
 
 .title {
   padding-top: 12px;
   letter-spacing: 2px;
-  line-height: 20px;
-  font-size: 20px;
+  font-size: var(--vp-custom-block-font-size-xlarge);
   font-weight: 700;
 }
 
@@ -67,7 +65,7 @@ const { currentLang } = useLangs()
 .quote {
   margin: 0 auto;
   max-width: 256px;
-  font-size: 14px;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
@@ -81,7 +79,7 @@ const { currentLang } = useLangs()
   border: 1px solid var(--vp-c-brand-1);
   border-radius: 16px;
   padding: 3px 16px;
-  font-size: 14px;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 500;
   color: var(--vp-c-brand-1);
   transition:
diff --git a/src/client/theme-default/components/VPBadge.vue b/src/client/theme-default/components/VPBadge.vue
index e98791014..51811d988 100644
--- a/src/client/theme-default/components/VPBadge.vue
+++ b/src/client/theme-default/components/VPBadge.vue
@@ -21,8 +21,8 @@ withDefaults(defineProps<Props>(), {
   border: 1px solid transparent;
   border-radius: 12px;
   padding: 0 10px;
-  line-height: 22px;
-  font-size: 12px;
+  line-height: 1.8;
+  font-size: var(--vp-custom-block-font-size-small);
   font-weight: 500;
   white-space: nowrap;
   transform: translateY(-2px);
@@ -30,8 +30,8 @@ withDefaults(defineProps<Props>(), {
 
 .VPBadge.small {
   padding: 0 6px;
-  line-height: 18px;
-  font-size: 10px;
+  line-height: 1.8;
+  font-size: var(--vp-custom-block-font-size-xsmall);
   transform: translateY(-8px);
 }
 
diff --git a/src/client/theme-default/components/VPButton.vue b/src/client/theme-default/components/VPButton.vue
index 707b9180d..6d280d522 100644
--- a/src/client/theme-default/components/VPButton.vue
+++ b/src/client/theme-default/components/VPButton.vue
@@ -56,15 +56,15 @@ const component = computed(() => {
 .VPButton.medium {
   border-radius: 20px;
   padding: 0 20px;
-  line-height: 38px;
-  font-size: 14px;
+  line-height: 2.7;
+  font-size: var(--vp-custom-block-font-size);
 }
 
 .VPButton.big {
   border-radius: 24px;
   padding: 0 24px;
-  line-height: 46px;
-  font-size: 16px;
+  line-height: 2.8;
+  font-size: var(--vp-custom-block-font-size-medium);
 }
 
 .VPButton.brand {
diff --git a/src/client/theme-default/components/VPCarbonAds.vue b/src/client/theme-default/components/VPCarbonAds.vue
index b8fc77a25..dd3527a3c 100644
--- a/src/client/theme-default/components/VPCarbonAds.vue
+++ b/src/client/theme-default/components/VPCarbonAds.vue
@@ -67,8 +67,7 @@ if (carbonOptions) {
   border-radius: 12px;
   min-height: 256px;
   text-align: center;
-  line-height: 18px;
-  font-size: 12px;
+  font-size: var(--vp-custom-block-font-size-small);
   font-weight: 500;
   background-color: var(--vp-carbon-ads-bg-color);
 }
@@ -93,7 +92,7 @@ if (carbonOptions) {
 .VPCarbonAds :deep(.carbon-poweredby) {
   display: block;
   padding-top: 6px;
-  font-size: 11px;
+  font-size: var(--vp-custom-block-font-size-small);
   font-weight: 500;
   color: var(--vp-carbon-ads-poweredby-color);
   text-transform: uppercase;
diff --git a/src/client/theme-default/components/VPDocAsideOutline.vue b/src/client/theme-default/components/VPDocAsideOutline.vue
index 168099d83..044ed54e0 100644
--- a/src/client/theme-default/components/VPDocAsideOutline.vue
+++ b/src/client/theme-default/components/VPDocAsideOutline.vue
@@ -52,7 +52,7 @@ useActiveAnchor(container, marker)
   position: relative;
   border-left: 1px solid var(--vp-c-divider);
   padding-left: 16px;
-  font-size: 13px;
+  font-size: var(--vp-custom-block-code-font-size);
   font-weight: 500;
 }
 
@@ -73,8 +73,8 @@ useActiveAnchor(container, marker)
 }
 
 .outline-title {
-  line-height: 32px;
-  font-size: 14px;
+  line-height: 2.3;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 600;
 }
 </style>
diff --git a/src/client/theme-default/components/VPDocFooter.vue b/src/client/theme-default/components/VPDocFooter.vue
index a05ca71a1..77aad52d1 100644
--- a/src/client/theme-default/components/VPDocFooter.vue
+++ b/src/client/theme-default/components/VPDocFooter.vue
@@ -100,8 +100,8 @@ const showFooter = computed(
   display: flex;
   align-items: center;
   border: 0;
-  line-height: 32px;
-  font-size: 14px;
+  line-height: 2.3;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 500;
   color: var(--vp-c-brand-1);
   transition: color 0.25s;
@@ -150,16 +150,15 @@ const showFooter = computed(
 
 .desc {
   display: block;
-  line-height: 20px;
-  font-size: 12px;
+  line-height: 1.7;
+  font-size: var(--vp-custom-block-font-size-small);
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
 .title {
   display: block;
-  line-height: 20px;
-  font-size: 14px;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 500;
   color: var(--vp-c-brand-1);
   transition: color 0.25s;
diff --git a/src/client/theme-default/components/VPDocFooterLastUpdated.vue b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
index 576a87d41..cff414eb8 100644
--- a/src/client/theme-default/components/VPDocFooterLastUpdated.vue
+++ b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
@@ -46,16 +46,16 @@ onMounted(() => {
 
 <style scoped>
 .VPLastUpdated {
-  line-height: 24px;
-  font-size: 14px;
+  line-height: 1.7;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
 @media (min-width: 640px) {
   .VPLastUpdated {
-    line-height: 32px;
-    font-size: 14px;
+    line-height: 2.3;
+    font-size: var(--vp-custom-block-font-size);
     font-weight: 500;
   }
 }
diff --git a/src/client/theme-default/components/VPDocOutlineItem.vue b/src/client/theme-default/components/VPDocOutlineItem.vue
index 4cff1b384..c2a46af91 100644
--- a/src/client/theme-default/components/VPDocOutlineItem.vue
+++ b/src/client/theme-default/components/VPDocOutlineItem.vue
@@ -33,8 +33,8 @@ defineProps<{
 
 .outline-link {
   display: block;
-  line-height: 32px;
-  font-size: 14px;
+  line-height: 2.3;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 400;
   color: var(--vp-c-text-2);
   white-space: nowrap;
diff --git a/src/client/theme-default/components/VPFeature.vue b/src/client/theme-default/components/VPFeature.vue
index e0e49b186..4c64e0f8a 100644
--- a/src/client/theme-default/components/VPFeature.vue
+++ b/src/client/theme-default/components/VPFeature.vue
@@ -88,21 +88,19 @@ defineProps<{
   background-color: var(--vp-c-default-soft);
   width: 48px;
   height: 48px;
-  font-size: 24px;
+  font-size: var(--vp-custom-block-font-size-xxlarge);
   transition: background-color 0.25s;
 }
 
 .title {
-  line-height: 24px;
-  font-size: 16px;
+  font-size: var(--vp-custom-block-font-size-medium);
   font-weight: 600;
 }
 
 .details {
   flex-grow: 1;
   padding-top: 8px;
-  line-height: 24px;
-  font-size: 14px;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
@@ -119,7 +117,7 @@ ul.details {
 .link-text-value {
   display: flex;
   align-items: center;
-  font-size: 14px;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 500;
   color: var(--vp-c-brand-1);
 }
diff --git a/src/client/theme-default/components/VPFlyout.vue b/src/client/theme-default/components/VPFlyout.vue
index c05c579cf..e9a2e3900 100644
--- a/src/client/theme-default/components/VPFlyout.vue
+++ b/src/client/theme-default/components/VPFlyout.vue
@@ -105,24 +105,24 @@ function onBlur() {
   display: flex;
   align-items: center;
   line-height: var(--vp-nav-height);
-  font-size: 14px;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 500;
   color: var(--vp-c-text-1);
   transition: color 0.25s;
 }
 
 .option-icon {
-  margin-right: 0px;
-  font-size: 16px;
+  margin-right: 0;
+  font-size: var(--vp-custom-block-font-size-medium);
 }
 
 .text-icon {
   margin-left: 4px;
-  font-size: 14px;
+  font-size: var(--vp-custom-block-font-size);
 }
 
 .icon {
-  font-size: 20px;
+  font-size: var(--vp-custom-block-font-size-xlarge);
   transition: fill 0.25s;
 }
 
diff --git a/src/client/theme-default/components/VPFooter.vue b/src/client/theme-default/components/VPFooter.vue
index 636380448..66d54a49e 100644
--- a/src/client/theme-default/components/VPFooter.vue
+++ b/src/client/theme-default/components/VPFooter.vue
@@ -52,8 +52,8 @@ const { hasSidebar } = useLayout()
 
 .message,
 .copyright {
-  line-height: 24px;
-  font-size: 14px;
+  line-height: 1.7;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue
index adb4db47f..f504e21db 100644
--- a/src/client/theme-default/components/VPHero.vue
+++ b/src/client/theme-default/components/VPHero.vue
@@ -140,8 +140,7 @@ const { heroImageSlotExists } = inject(
   width: fit-content;
   max-width: 392px;
   letter-spacing: -0.4px;
-  line-height: 40px;
-  font-size: 32px;
+  font-size: var(--vp-custom-block-font-size-4xlarge);
   font-weight: 700;
   white-space: pre-wrap;
 
@@ -171,16 +170,14 @@ const { heroImageSlotExists } = inject(
   .name,
   .text {
     max-width: 576px;
-    line-height: 56px;
-    font-size: 48px;
+    font-size: var(--vp-custom-block-font-size-6xlarge);
   }
 }
 
 @media (min-width: 960px) {
   .name,
   .text {
-    line-height: 64px;
-    font-size: 56px;
+    font-size: var(--vp-custom-block-font-size-7xlarge);
   }
 
   .VPHero.has-image .name,
@@ -192,8 +189,7 @@ const { heroImageSlotExists } = inject(
 .tagline {
   padding-top: 8px;
   max-width: 392px;
-  line-height: 28px;
-  font-size: 18px;
+  font-size: var(--vp-custom-block-font-size-large);
   font-weight: 500;
   white-space: pre-wrap;
   color: var(--vp-c-text-2);
@@ -207,15 +203,14 @@ const { heroImageSlotExists } = inject(
   .tagline {
     padding-top: 12px;
     max-width: 576px;
-    line-height: 32px;
-    font-size: 20px;
+    line-height: 1.6;
+    font-size: var(--vp-custom-block-font-size-xlarge);
   }
 }
 
 @media (min-width: 960px) {
   .tagline {
-    line-height: 36px;
-    font-size: 24px;
+    font-size: var(--vp-custom-block-font-size-xxlarge);
   }
 
   .VPHero.has-image .tagline {
diff --git a/src/client/theme-default/components/VPHomeSponsors.vue b/src/client/theme-default/components/VPHomeSponsors.vue
index d4eaacd29..8de09e4a5 100644
--- a/src/client/theme-default/components/VPHomeSponsors.vue
+++ b/src/client/theme-default/components/VPHomeSponsors.vue
@@ -86,7 +86,7 @@ withDefaults(defineProps<Props>(), {
 .love {
   margin: 0 auto;
   width: fit-content;
-  font-size: 28px;
+  font-size: var(--vp-custom-block-font-size-3xlarge);
   color: var(--vp-c-text-3);
 }
 
@@ -99,8 +99,7 @@ withDefaults(defineProps<Props>(), {
   padding-top: 10px;
   max-width: 320px;
   text-align: center;
-  line-height: 24px;
-  font-size: 16px;
+  font-size: var(--vp-custom-block-font-size-medium);
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue
index f80bb3611..9580013be 100644
--- a/src/client/theme-default/components/VPLocalNav.vue
+++ b/src/client/theme-default/components/VPLocalNav.vue
@@ -107,8 +107,8 @@ const classes = computed(() => {
 .menu {
   display: flex;
   align-items: center;
-  line-height: 24px;
-  font-size: 12px;
+  line-height: 2;
+  font-size: var(--vp-custom-block-font-size-small);
   font-weight: 500;
   color: var(--vp-c-text-2);
   transition: color 0.5s;
@@ -127,7 +127,7 @@ const classes = computed(() => {
 
 .menu-icon {
   margin-right: 8px;
-  font-size: 14px;
+  font-size: var(--vp-custom-block-font-size);
 }
 
 .menu,
diff --git a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
index cf842baa3..43b2d3719 100644
--- a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
+++ b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
@@ -94,9 +94,9 @@ function scrollToTop() {
 <style scoped>
 .VPLocalNavOutlineDropdown button {
   display: block;
-  font-size: 12px;
+  font-size: var(--vp-custom-block-font-size-small);
   font-weight: 500;
-  line-height: 24px;
+  line-height: 2;
   color: var(--vp-c-text-2);
   transition: color 0.5s;
   position: relative;
@@ -115,18 +115,18 @@ function scrollToTop() {
   display: inline-block;
   vertical-align: middle;
   margin-left: 2px;
-  font-size: 14px;
+  font-size: var(--vp-custom-block-font-size);
   transform: rotate(0) /*rtl:rotate(180deg)*/;
   transition: transform 0.25s;
 }
 
 @media (min-width: 960px) {
   .VPLocalNavOutlineDropdown button {
-    font-size: 14px;
+    font-size: var(--vp-custom-block-font-size);
   }
 
   .icon {
-    font-size: 16px;
+    font-size: var(--vp-custom-block-font-size-medium);
   }
 }
 
@@ -165,8 +165,8 @@ function scrollToTop() {
 .top-link {
   display: block;
   padding: 0 16px;
-  line-height: 48px;
-  font-size: 14px;
+  line-height: 3.4;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 500;
   color: var(--vp-c-brand-1);
 }
diff --git a/src/client/theme-default/components/VPLocalSearchBox.vue b/src/client/theme-default/components/VPLocalSearchBox.vue
index 709ca1375..3bfb1d9c1 100644
--- a/src/client/theme-default/components/VPLocalSearchBox.vue
+++ b/src/client/theme-default/components/VPLocalSearchBox.vue
@@ -685,12 +685,12 @@ function onMouseMove(e: MouseEvent) {
 
 .local-search-icon {
   display: block;
-  font-size: 18px;
+  font-size: var(--vp-custom-block-font-size-large);
 }
 
 .navigate-icon {
   display: block;
-  font-size: 14px;
+  font-size: var(--vp-custom-block-font-size);
 }
 
 .search-icon {
diff --git a/src/client/theme-default/components/VPMenu.vue b/src/client/theme-default/components/VPMenu.vue
index 91ebb404d..ec79937f4 100644
--- a/src/client/theme-default/components/VPMenu.vue
+++ b/src/client/theme-default/components/VPMenu.vue
@@ -65,8 +65,8 @@ defineProps<{
 
 .VPMenu :deep(.label) {
   flex-grow: 1;
-  line-height: 28px;
-  font-size: 12px;
+  line-height: 2.3;
+  font-size: var(--vp-custom-block-font-size-small);
   font-weight: 500;
   color: var(--vp-c-text-2);
   transition: color 0.5s;
diff --git a/src/client/theme-default/components/VPMenuGroup.vue b/src/client/theme-default/components/VPMenuGroup.vue
index 7d12eb757..41720d37b 100644
--- a/src/client/theme-default/components/VPMenuGroup.vue
+++ b/src/client/theme-default/components/VPMenuGroup.vue
@@ -38,8 +38,8 @@ defineProps<{
 
 .title {
   padding: 0 12px;
-  line-height: 32px;
-  font-size: 14px;
+  line-height: 2.3;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 600;
   color: var(--vp-c-text-2);
   white-space: nowrap;
diff --git a/src/client/theme-default/components/VPMenuLink.vue b/src/client/theme-default/components/VPMenuLink.vue
index c98bf19ce..8b1c440a9 100644
--- a/src/client/theme-default/components/VPMenuLink.vue
+++ b/src/client/theme-default/components/VPMenuLink.vue
@@ -55,8 +55,8 @@ defineOptions({ inheritAttrs: false })
   display: block;
   border-radius: 6px;
   padding: 0 12px;
-  line-height: 32px;
-  font-size: 14px;
+  line-height: 2.3;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 500;
   color: var(--vp-c-text-1);
   text-align: left;
diff --git a/src/client/theme-default/components/VPNavBarAskAiButton.vue b/src/client/theme-default/components/VPNavBarAskAiButton.vue
index d11015156..c2519071f 100644
--- a/src/client/theme-default/components/VPNavBarAskAiButton.vue
+++ b/src/client/theme-default/components/VPNavBarAskAiButton.vue
@@ -10,7 +10,7 @@
   align-items: center;
   height: var(--vp-nav-height);
   padding: 8px 14px;
-  font-size: 20px;
+  font-size: var(--vp-custom-block-font-size-xlarge);
 }
 
 @media (min-width: 768px) {
@@ -20,7 +20,7 @@
     transition: color 0.3s ease;
     background-color: var(--vp-c-bg-alt);
     border-radius: 8px;
-    font-size: 15px;
+    font-size: var(--vp-custom-block-font-size);
     color: var(--vp-c-text-2);
   }
 
diff --git a/src/client/theme-default/components/VPNavBarExtra.vue b/src/client/theme-default/components/VPNavBarExtra.vue
index 7201623b2..c6d47f288 100644
--- a/src/client/theme-default/components/VPNavBarExtra.vue
+++ b/src/client/theme-default/components/VPNavBarExtra.vue
@@ -88,8 +88,8 @@ const hasExtraContent = computed(
 
 .trans-title {
   padding: 0 24px 0 12px;
-  line-height: 32px;
-  font-size: 14px;
+  line-height: 2.3;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 700;
   color: var(--vp-c-text-1);
 }
diff --git a/src/client/theme-default/components/VPNavBarMenuLink.vue b/src/client/theme-default/components/VPNavBarMenuLink.vue
index 5ba107296..37da56ee8 100644
--- a/src/client/theme-default/components/VPNavBarMenuLink.vue
+++ b/src/client/theme-default/components/VPNavBarMenuLink.vue
@@ -45,7 +45,7 @@ const isActiveLink = computed(() =>
   align-items: center;
   padding: 0 12px;
   line-height: var(--vp-nav-height);
-  font-size: 14px;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 500;
   color: var(--vp-c-text-1);
   transition: color 0.25s;
diff --git a/src/client/theme-default/components/VPNavBarSearchButton.vue b/src/client/theme-default/components/VPNavBarSearchButton.vue
index 7169390b8..bd8d4b950 100644
--- a/src/client/theme-default/components/VPNavBarSearchButton.vue
+++ b/src/client/theme-default/components/VPNavBarSearchButton.vue
@@ -23,7 +23,7 @@ defineProps<{
   gap: 8px;
   height: var(--vp-nav-height);
   padding: 8px 14px;
-  font-size: 20px;
+  font-size: var(--vp-custom-block-font-size-xlarge);
 }
 
 .text,
@@ -44,14 +44,13 @@ kbd {
     padding: 8px 12px;
     background-color: var(--vp-c-bg-alt);
     border-radius: 8px;
-    font-size: 14px;
-    line-height: 1;
+    font-size: var(--vp-custom-block-font-size);
     color: var(--vp-c-text-2);
   }
 
   .text {
     display: inline;
-    font-size: 13px;
+    font-size: var(--vp-custom-block-code-font-size);
   }
 
   .keys {
@@ -61,7 +60,7 @@ kbd {
     padding: 4px 6px;
     border: 1px solid var(--vp-c-divider);
     border-radius: 4px;
-    font-size: 12px;
+    font-size: var(--vp-custom-block-font-size-small);
   }
 }
 </style>
diff --git a/src/client/theme-default/components/VPNavBarTitle.vue b/src/client/theme-default/components/VPNavBarTitle.vue
index 9679f8a5c..176ea93ac 100644
--- a/src/client/theme-default/components/VPNavBarTitle.vue
+++ b/src/client/theme-default/components/VPNavBarTitle.vue
@@ -53,7 +53,7 @@ const target = computed(() =>
   border-bottom: 1px solid transparent;
   width: 100%;
   height: var(--vp-nav-height);
-  font-size: 16px;
+  font-size: var(--vp-custom-block-font-size-medium);
   font-weight: 600;
   color: var(--vp-c-text-1);
   transition: opacity 0.25s;
diff --git a/src/client/theme-default/components/VPNavBarTranslations.vue b/src/client/theme-default/components/VPNavBarTranslations.vue
index 8ceea1087..fdbd33dfe 100644
--- a/src/client/theme-default/components/VPNavBarTranslations.vue
+++ b/src/client/theme-default/components/VPNavBarTranslations.vue
@@ -46,8 +46,8 @@ const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
 
 .title {
   padding: 0 24px 0 12px;
-  line-height: 32px;
-  font-size: 14px;
+  line-height: 2.3;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 700;
   color: var(--vp-c-text-1);
 }
diff --git a/src/client/theme-default/components/VPNavScreenAppearance.vue b/src/client/theme-default/components/VPNavScreenAppearance.vue
index 4f7d26403..2f365ec17 100644
--- a/src/client/theme-default/components/VPNavScreenAppearance.vue
+++ b/src/client/theme-default/components/VPNavScreenAppearance.vue
@@ -32,8 +32,8 @@ const { site, theme } = useData()
 }
 
 .text {
-  line-height: 24px;
-  font-size: 12px;
+  line-height: 2;
+  font-size: var(--vp-custom-block-font-size-small);
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
diff --git a/src/client/theme-default/components/VPNavScreenMenuGroup.vue b/src/client/theme-default/components/VPNavScreenMenuGroup.vue
index f5d78e663..c41122e79 100644
--- a/src/client/theme-default/components/VPNavScreenMenuGroup.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuGroup.vue
@@ -86,8 +86,8 @@ function toggle() {
   align-items: center;
   padding: 12px 4px 11px 0;
   width: 100%;
-  line-height: 24px;
-  font-size: 14px;
+  line-height: 1.7;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 500;
   color: var(--vp-c-text-1);
   transition: color 0.25s;
diff --git a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
index 9a884e010..c4ac9ffbb 100644
--- a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
@@ -46,8 +46,8 @@ const { closeScreen } = inject(navInjectionKey)!
 .VPNavScreenMenuGroupLink {
   display: block;
   margin-left: 12px;
-  line-height: 32px;
-  font-size: 14px;
+  line-height: 2.3;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 400;
   color: var(--vp-c-text-1);
   transition: color 0.25s;
diff --git a/src/client/theme-default/components/VPNavScreenMenuGroupSection.vue b/src/client/theme-default/components/VPNavScreenMenuGroupSection.vue
index a7e2cd387..0e108ecf4 100644
--- a/src/client/theme-default/components/VPNavScreenMenuGroupSection.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuGroupSection.vue
@@ -21,8 +21,8 @@ defineProps<{
 }
 
 .title {
-  line-height: 32px;
-  font-size: 13px;
+  line-height: 2.5;
+  font-size: var(--vp-custom-block-code-font-size);
   font-weight: 700;
   color: var(--vp-c-text-2);
   transition: color 0.25s;
diff --git a/src/client/theme-default/components/VPNavScreenMenuLink.vue b/src/client/theme-default/components/VPNavScreenMenuLink.vue
index 9684cf782..6846673d4 100644
--- a/src/client/theme-default/components/VPNavScreenMenuLink.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuLink.vue
@@ -47,8 +47,8 @@ const { closeScreen } = inject(navInjectionKey)!
   display: block;
   border-bottom: 1px solid var(--vp-c-divider);
   padding: 12px 0 11px;
-  line-height: 24px;
-  font-size: 14px;
+  line-height: 1.7;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 500;
   color: var(--vp-c-text-1);
   transition:
diff --git a/src/client/theme-default/components/VPNavScreenTranslations.vue b/src/client/theme-default/components/VPNavScreenTranslations.vue
index 108ac60cd..405dc0039 100644
--- a/src/client/theme-default/components/VPNavScreenTranslations.vue
+++ b/src/client/theme-default/components/VPNavScreenTranslations.vue
@@ -54,13 +54,13 @@ function toggle() {
 .title {
   display: flex;
   align-items: center;
-  font-size: 14px;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 500;
   color: var(--vp-c-text-1);
 }
 
 .icon {
-  font-size: 16px;
+  font-size: var(--vp-custom-block-font-size-medium);
 }
 
 .icon.lang {
@@ -76,8 +76,8 @@ function toggle() {
 }
 
 .link {
-  line-height: 32px;
-  font-size: 13px;
+  line-height: 2.5;
+  font-size: var(--vp-custom-block-code-font-size);
   color: var(--vp-c-text-1);
 }
 </style>
diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue
index d71d10621..475415f24 100644
--- a/src/client/theme-default/components/VPSidebarItem.vue
+++ b/src/client/theme-default/components/VPSidebarItem.vue
@@ -152,8 +152,8 @@ function onCaretClick() {
 .text {
   flex-grow: 1;
   padding: 4px 0;
-  line-height: 24px;
-  font-size: 14px;
+  line-height: 1.7;
+  font-size: var(--vp-custom-block-font-size);
   transition: color 0.25s;
 }
 
@@ -226,7 +226,7 @@ function onCaretClick() {
 }
 
 .caret-icon {
-  font-size: 18px;
+  font-size: var(--vp-custom-block-font-size-large);
   /*rtl:ignore*/
   transform: rotate(90deg);
   transition: transform 0.25s;
diff --git a/src/client/theme-default/components/VPSkipLink.vue b/src/client/theme-default/components/VPSkipLink.vue
index bcff7d19d..2e605f8b3 100644
--- a/src/client/theme-default/components/VPSkipLink.vue
+++ b/src/client/theme-default/components/VPSkipLink.vue
@@ -25,7 +25,7 @@ watch(() => route.path, () => backToTop.value.focus())
   padding: 8px 16px;
   z-index: 999;
   border-radius: 8px;
-  font-size: 12px;
+  font-size: var(--vp-custom-block-font-size-small);
   font-weight: bold;
   text-decoration: none;
   color: var(--vp-c-brand-1);
diff --git a/src/client/theme-default/components/VPTeamMembersItem.vue b/src/client/theme-default/components/VPTeamMembersItem.vue
index 1fdd49d18..211a0b0cc 100644
--- a/src/client/theme-default/components/VPTeamMembersItem.vue
+++ b/src/client/theme-default/components/VPTeamMembersItem.vue
@@ -77,20 +77,17 @@ withDefaults(defineProps<Props>(), {
 }
 
 .VPTeamMembersItem.small .name {
-  line-height: 24px;
-  font-size: 16px;
+  font-size: var(--vp-custom-block-font-size-medium);
 }
 
 .VPTeamMembersItem.small .affiliation {
   padding-top: 4px;
-  line-height: 20px;
-  font-size: 14px;
+  font-size: var(--vp-custom-block-font-size);
 }
 
 .VPTeamMembersItem.small .desc {
   padding-top: 12px;
-  line-height: 20px;
-  font-size: 14px;
+  font-size: var(--vp-custom-block-font-size);
 }
 
 .VPTeamMembersItem.small .links {
@@ -114,19 +111,18 @@ withDefaults(defineProps<Props>(), {
 
 .VPTeamMembersItem.medium .name {
   letter-spacing: 0.15px;
-  line-height: 28px;
-  font-size: 20px;
+  font-size: var(--vp-custom-block-font-size-xlarge);
 }
 
 .VPTeamMembersItem.medium .affiliation {
   padding-top: 4px;
-  font-size: 16px;
+  font-size: var(--vp-custom-block-font-size-medium);
 }
 
 .VPTeamMembersItem.medium .desc {
   padding-top: 16px;
   max-width: 288px;
-  font-size: 16px;
+  font-size: var(--vp-custom-block-font-size-medium);
 }
 
 .VPTeamMembersItem.medium .links {
@@ -202,7 +198,7 @@ withDefaults(defineProps<Props>(), {
   align-items: center;
   text-align: center;
   padding: 16px;
-  font-size: 14px;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 500;
   color: var(--vp-c-sponsor);
   background-color: var(--vp-c-bg-soft);
@@ -218,6 +214,6 @@ withDefaults(defineProps<Props>(), {
 
 .sp-icon {
   margin-right: 8px;
-  font-size: 16px;
+  font-size: var(--vp-custom-block-font-size-medium);
 }
 </style>
diff --git a/src/client/theme-default/components/VPTeamPageSection.vue b/src/client/theme-default/components/VPTeamPageSection.vue
index 2bb52ab9a..8b0ac0fec 100644
--- a/src/client/theme-default/components/VPTeamPageSection.vue
+++ b/src/client/theme-default/components/VPTeamPageSection.vue
@@ -54,8 +54,8 @@
   display: inline-block;
   padding: 0 24px;
   letter-spacing: 0;
-  line-height: 32px;
-  font-size: 20px;
+  line-height: 1.6;
+  font-size: var(--vp-custom-block-font-size-xlarge);
   font-weight: 500;
   background-color: var(--vp-c-bg);
 }
@@ -65,8 +65,7 @@
   max-width: 480px;
   padding-top: 12px;
   text-align: center;
-  line-height: 24px;
-  font-size: 16px;
+  font-size: var(--vp-custom-block-font-size-medium);
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
diff --git a/src/client/theme-default/components/VPTeamPageTitle.vue b/src/client/theme-default/components/VPTeamPageTitle.vue
index 9751a1886..3a16a90ed 100644
--- a/src/client/theme-default/components/VPTeamPageTitle.vue
+++ b/src/client/theme-default/components/VPTeamPageTitle.vue
@@ -29,16 +29,14 @@
 
 .title {
   letter-spacing: 0;
-  line-height: 44px;
-  font-size: 36px;
+  font-size: var(--vp-custom-block-font-size-5xlarge);
   font-weight: 500;
 }
 
 @media (min-width: 768px) {
   .title {
     letter-spacing: -0.5px;
-    line-height: 56px;
-    font-size: 48px;
+    font-size: var(--vp-custom-block-font-size-6xlarge);
   }
 }
 
@@ -46,8 +44,7 @@
   margin: 0 auto;
   max-width: 512px;
   padding-top: 12px;
-  line-height: 24px;
-  font-size: 16px;
+  font-size: var(--vp-custom-block-font-size-medium);
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
@@ -56,8 +53,7 @@
   .lead {
     max-width: 592px;
     letter-spacing: 0.15px;
-    line-height: 28px;
-    font-size: 20px;
+    font-size: var(--vp-custom-block-font-size-xlarge);
   }
 }
 </style>
diff --git a/src/client/theme-default/styles/base.css b/src/client/theme-default/styles/base.css
index 4472602f9..a7bf9d9af 100644
--- a/src/client/theme-default/styles/base.css
+++ b/src/client/theme-default/styles/base.css
@@ -34,9 +34,9 @@
     width: 100%;
     min-width: 320px;
     min-height: 100vh;
-    line-height: 24px;
+    line-height: 1.5;
     font-family: var(--vp-font-family-base);
-    font-size: 16px;
+    font-size: var(--vp-custom-block-font-size-medium);
     font-weight: 400;
     color: var(--vp-c-text-1);
     background-color: var(--vp-c-bg);
@@ -59,8 +59,7 @@
   h5,
   h6 {
     margin: 0;
-    line-height: 24px;
-    font-size: 16px;
+    font-size: var(--vp-custom-block-font-size-medium);
     font-weight: 400;
   }
 
diff --git a/src/client/theme-default/styles/components/vp-code-group.css b/src/client/theme-default/styles/components/vp-code-group.css
index 4f23a4169..a575127a2 100644
--- a/src/client/theme-default/styles/components/vp-code-group.css
+++ b/src/client/theme-default/styles/components/vp-code-group.css
@@ -33,8 +33,8 @@
   display: inline-block;
   border-bottom: 1px solid transparent;
   padding: 0 12px;
-  line-height: 48px;
-  font-size: 14px;
+  line-height: 3;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 500;
   color: var(--vp-code-tab-text-color);
   white-space: nowrap;
diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
index 904427fc9..b739a2436 100644
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/src/client/theme-default/styles/components/vp-doc.css
@@ -18,8 +18,8 @@
 
 .vp-doc h1 {
   letter-spacing: -0.02em;
-  line-height: 40px;
-  font-size: 28px;
+  line-height: 1.5;
+  font-size: var(--vp-custom-block-font-size-3xlarge);
 }
 
 .vp-doc h2 {
@@ -27,22 +27,22 @@
   border-top: 1px solid var(--vp-c-divider);
   padding-top: 24px;
   letter-spacing: -0.02em;
-  line-height: 32px;
-  font-size: 24px;
+  line-height: 1.3;
+  font-size: var(--vp-custom-block-font-size-xxlarge);
 }
 
 .vp-doc h3 {
   margin: 32px 0 0;
   letter-spacing: -0.01em;
-  line-height: 28px;
-  font-size: 20px;
+  line-height: 1.4;
+  font-size: var(--vp-custom-block-font-size-xlarge);
 }
 
 .vp-doc h4 {
   margin: 24px 0 0;
   letter-spacing: -0.01em;
-  line-height: 24px;
-  font-size: 18px;
+  line-height: 1.3;
+  font-size: var(--vp-custom-block-font-size-large);
 }
 
 .vp-doc .header-anchor {
@@ -81,8 +81,8 @@
 @media (min-width: 768px) {
   .vp-doc h1 {
     letter-spacing: -0.02em;
-    line-height: 40px;
-    font-size: 32px;
+    line-height: 1.25;
+    font-size: var(--vp-custom-block-font-size-4xlarge);
   }
 }
 
@@ -114,7 +114,7 @@
 
 .vp-doc blockquote > p {
   margin: 0;
-  font-size: 16px;
+  font-size: var(--vp-custom-block-font-size-medium);
   transition: color 0.5s;
 }
 
@@ -192,14 +192,14 @@
 
 .vp-doc th {
   text-align: left;
-  font-size: 14px;
+  font-size: var(--vp-custom-block-font-size);
   font-weight: 600;
   color: var(--vp-c-text-2);
   background-color: var(--vp-c-bg-soft);
 }
 
 .vp-doc td {
-  font-size: 14px;
+  font-size: var(--vp-custom-block-font-size);
 }
 
 /**
@@ -503,7 +503,7 @@
   width: fit-content;
   height: 40px;
   text-align: center;
-  font-size: 12px;
+  font-size: var(--vp-custom-block-font-size-small);
   font-weight: 500;
   color: var(--vp-code-copy-code-active-text);
   background-color: var(--vp-code-copy-code-hover-bg);
@@ -517,7 +517,7 @@
   /*rtl:ignore*/
   right: 8px;
   z-index: 2;
-  font-size: 12px;
+  font-size: var(--vp-custom-block-font-size-small);
   font-weight: 500;
   user-select: none;
   color: var(--vp-code-lang-color);
diff --git a/src/client/theme-default/styles/components/vp-sponsor.css b/src/client/theme-default/styles/components/vp-sponsor.css
index 9e677ab9b..49fb605e6 100644
--- a/src/client/theme-default/styles/components/vp-sponsor.css
+++ b/src/client/theme-default/styles/components/vp-sponsor.css
@@ -28,12 +28,12 @@
 
 .vp-sponsor.normal .vp-sponsor-tier {
   padding: 13px 0 11px;
-  font-size: 14px;
+  font-size: var(--vp-custom-block-font-size);
 }
 
 .vp-sponsor.aside .vp-sponsor-tier {
   padding: 9px 0 7px;
-  font-size: 12px;
+  font-size: var(--vp-custom-block-font-size-small);
 }
 
 .vp-sponsor-grid + .vp-sponsor-tier {
diff --git a/src/client/theme-default/styles/docsearch.css b/src/client/theme-default/styles/docsearch.css
index e71ba0330..7f9d96501 100644
--- a/src/client/theme-default/styles/docsearch.css
+++ b/src/client/theme-default/styles/docsearch.css
@@ -56,7 +56,7 @@
 
 .DocSearch-AskAiScreen-RelatedSources-Title {
   padding-bottom: 0;
-  font-size: 12px;
+  font-size: var(--vp-custom-block-font-size-small);
 }
 
 .DocSearch-Clear {
diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index f661f4e51..41ad75a2c 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@@ -447,8 +447,21 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-custom-block-font-size: 14px;
-  --vp-custom-block-code-font-size: 13px;
+  --vp-custom-block-font-size-xsmall: 0.625rem; /* 10px */
+  --vp-custom-block-font-size-small: 0.75rem; /* 12px */
+  --vp-custom-block-font-size: 0.875rem; /* 14px */
+  --vp-custom-block-font-size-medium: 1rem; /* 16px */
+  --vp-custom-block-font-size-large: 1.125rem; /* 18px */
+  --vp-custom-block-font-size-xlarge: 1.25rem; /* 20px */
+  --vp-custom-block-font-size-xxlarge: 1.5rem; /* 24px */
+  --vp-custom-block-font-size-3xlarge: 1.75rem; /* 28px */
+  --vp-custom-block-font-size-4xlarge: 2rem; /* 32px */
+  --vp-custom-block-font-size-5xlarge: 2.25rem; /* 36px */
+  --vp-custom-block-font-size-6xlarge: 3rem; /* 48px */
+  --vp-custom-block-font-size-7xlarge: 3.5rem; /* 56px */
+  --vp-custom-block-font-size-8xlarge: 3.75rem; /* 60px */
+  --vp-custom-block-font-size-9xlarge: 4rem; /* 64px */
+  --vp-custom-block-code-font-size: 0.8125rem; /* 13px */
 
   --vp-custom-block-info-border: transparent;
   --vp-custom-block-info-text: var(--vp-c-text-1);