feat(theme): add css custom properties for font sizes

Introduce custom properties and switch to rem units for typography, allowing global scale adjustments. Also update line-height values to ensure compliance with WCAG 1.4.12 (minimum 1.5x font height). Refs vuejs/vitepress#5209
2 months ago · 3c8f1d1998
parent ee028266a8
commit 3c8f1d1998
42 changed files with 149 additions and 159 deletions
--- 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:
--- 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);
 }

--- 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 {
--- 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;
--- 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>
--- 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;
--- 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;
  }
 }
--- 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;
--- 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);
 }
--- 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;
 }

--- 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);
 }
--- 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 {
--- 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);
 }
--- 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,
--- 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);
 }
--- a/src/client/theme-default/components/VPLocalSearchBox.vue
+++ b/src/client/theme-default/components/VPLocalSearchBox.vue
@ -634,12 +634,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 {
--- 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;
--- 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;
--- 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;
--- 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);
  }

--- 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);
 }
--- 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;
--- 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>
--- 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;
--- 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);
 }
--- 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);
 }
--- 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;
--- 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;
--- 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;
--- 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:
--- 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>
--- 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;
--- 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);
--- 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>
--- 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);
 }
--- 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>
--- 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;
  }

--- 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;
--- 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);
--- 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 {
--- a/src/client/theme-default/styles/docsearch.css
+++ b/src/client/theme-default/styles/docsearch.css
@ -52,7 +52,7 @@

 .DocSearch-AskAiScreen-RelatedSources-Title {
  padding-bottom: 0;
-  font-size: 12px;
+  font-size: var(--vp-custom-block-font-size-small);
 }

 .DocSearch-Clear {
--- 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);