diff --git a/packages/react/src/components/segmented-control/segmented-control.test.tsx.snap b/packages/react/src/components/segmented-control/segmented-control.test.tsx.snap
index d2ec9c8c9..1139ba391 100644
--- a/packages/react/src/components/segmented-control/segmented-control.test.tsx.snap
+++ b/packages/react/src/components/segmented-control/segmented-control.test.tsx.snap
@@ -26,6 +26,7 @@ exports[`SegmentedControl Matches snapshot (desktop) 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  font-family: var(--font-family);
   font-size: 0.875rem;
   font-weight: var(--font-normal);
   gap: var(--spacing-1x);
@@ -33,10 +34,6 @@ exports[`SegmentedControl Matches snapshot (desktop) 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  -webkit-letter-spacing: 0.05rem;
-  -moz-letter-spacing: 0.05rem;
-  -ms-letter-spacing: 0.05rem;
-  letter-spacing: 0.05rem;
   line-height: 1.25rem;
   min-height: var(--size-2x);
   padding: 0 var(--spacing-1halfx);
@@ -50,14 +47,15 @@ exports[`SegmentedControl Matches snapshot (desktop) 1`] = `
 
 .c1:hover::before {
   background-color: rgb(0 0 0 / 0.05);
-  border-radius: var(--border-radius-1halfx);
+  border-radius: var(--border-radius);
   content: " ";
   display: block;
-  left: 6px;
+  height: calc(100% - 0.375rem);
+  left: 0.1875rem;
   min-height: 1.5rem;
   position: absolute;
   top: 0.1875rem;
-  width: calc(100% - var(--spacing-1halfx));
+  width: calc(100% - 0.375rem);
 }
 
 .c1:focus {
@@ -108,6 +106,7 @@ exports[`SegmentedControl Matches snapshot (desktop) 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  font-family: var(--font-family);
   font-size: 0.875rem;
   font-weight: var(--font-semi-bold);
   gap: var(--spacing-1x);
@@ -115,10 +114,6 @@ exports[`SegmentedControl Matches snapshot (desktop) 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  -webkit-letter-spacing: 0.05rem;
-  -moz-letter-spacing: 0.05rem;
-  -ms-letter-spacing: 0.05rem;
-  letter-spacing: 0.05rem;
   line-height: 1.25rem;
   min-height: var(--size-2x);
   padding: 0 var(--spacing-1halfx);
@@ -132,14 +127,15 @@ exports[`SegmentedControl Matches snapshot (desktop) 1`] = `
 
 .c2:hover::before {
   background-color: rgb(0 0 0 / 0.05);
-  border-radius: var(--border-radius-1halfx);
+  border-radius: var(--border-radius);
   content: none;
   display: block;
-  left: 6px;
+  height: calc(100% - 0.375rem);
+  left: 0.1875rem;
   min-height: 1.5rem;
   position: absolute;
   top: 0.1875rem;
-  width: calc(100% - var(--spacing-1halfx));
+  width: calc(100% - 0.375rem);
 }
 
 .c2:focus {
@@ -264,6 +260,7 @@ exports[`SegmentedControl Matches snapshot (mobile) 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  font-family: var(--font-family);
   font-size: 1rem;
   font-weight: var(--font-normal);
   gap: var(--spacing-1x);
@@ -271,10 +268,6 @@ exports[`SegmentedControl Matches snapshot (mobile) 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  -webkit-letter-spacing: 0.05rem;
-  -moz-letter-spacing: 0.05rem;
-  -ms-letter-spacing: 0.05rem;
-  letter-spacing: 0.05rem;
   line-height: 1.25rem;
   min-height: var(--size-3x);
   padding: 0 var(--spacing-1halfx);
@@ -288,14 +281,15 @@ exports[`SegmentedControl Matches snapshot (mobile) 1`] = `
 
 .c1:hover::before {
   background-color: rgb(0 0 0 / 0.05);
-  border-radius: var(--border-radius-1halfx);
+  border-radius: var(--border-radius);
   content: " ";
   display: block;
-  left: 6px;
+  height: calc(100% - 0.375rem);
+  left: 0.1875rem;
   min-height: 1.5rem;
   position: absolute;
   top: 0.1875rem;
-  width: calc(100% - var(--spacing-1halfx));
+  width: calc(100% - 0.375rem);
 }
 
 .c1:focus {
@@ -346,6 +340,7 @@ exports[`SegmentedControl Matches snapshot (mobile) 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  font-family: var(--font-family);
   font-size: 1rem;
   font-weight: var(--font-semi-bold);
   gap: var(--spacing-1x);
@@ -353,10 +348,6 @@ exports[`SegmentedControl Matches snapshot (mobile) 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  -webkit-letter-spacing: 0.05rem;
-  -moz-letter-spacing: 0.05rem;
-  -ms-letter-spacing: 0.05rem;
-  letter-spacing: 0.05rem;
   line-height: 1.25rem;
   min-height: var(--size-3x);
   padding: 0 var(--spacing-1halfx);
@@ -370,14 +361,15 @@ exports[`SegmentedControl Matches snapshot (mobile) 1`] = `
 
 .c2:hover::before {
   background-color: rgb(0 0 0 / 0.05);
-  border-radius: var(--border-radius-1halfx);
+  border-radius: var(--border-radius);
   content: none;
   display: block;
-  left: 6px;
+  height: calc(100% - 0.375rem);
+  left: 0.1875rem;
   min-height: 1.5rem;
   position: absolute;
   top: 0.1875rem;
-  width: calc(100% - var(--spacing-1halfx));
+  width: calc(100% - 0.375rem);
 }
 
 .c2:focus {
diff --git a/packages/react/src/components/segmented-control/segmented-control.tsx b/packages/react/src/components/segmented-control/segmented-control.tsx
index c14729207..a71fe8910 100644
--- a/packages/react/src/components/segmented-control/segmented-control.tsx
+++ b/packages/react/src/components/segmented-control/segmented-control.tsx
@@ -23,11 +23,11 @@ const ToggleButton = styled.button<ToggleButtonProps>`
     border-radius: var(--border-radius);
     color: ${({ theme, pressed }) => (pressed ? theme.component['segmented-control-pressed-text-color'] : theme.component['segmented-control-text-color'])};
     display: flex;
+    font-family: var(--font-family);
     font-size: ${({ isMobile }) => (isMobile ? '1rem' : '0.875rem')};
     font-weight: ${({ pressed }) => (pressed ? 'var(--font-semi-bold)' : 'var(--font-normal)')};
     gap: var(--spacing-1x);
     justify-content: center;
-    letter-spacing: 0.05rem;
     line-height: 1.25rem;
     min-height: ${({ isMobile }) => (isMobile ? 'var(--size-3x)' : 'var(--size-2x)')};
     padding: 0 var(--spacing-1halfx);
@@ -39,14 +39,15 @@ const ToggleButton = styled.button<ToggleButtonProps>`
 
         &::before {
             background-color: ${({ theme }) => (theme.component['segmented-control-hover-background-color'])};
-            border-radius: var(--border-radius-1halfx);
+            border-radius: var(--border-radius);
             content: ${({ pressed }) => (pressed ? 'none' : '" "')};
             display: block;
-            left: 6px;
+            height: calc(100% - 0.375rem);
+            left: 0.1875rem;
             min-height: 1.5rem;
             position: absolute;
             top: 0.1875rem;
-            width: calc(100% - var(--spacing-1halfx));
+            width: calc(100% - 0.375rem);
         }
     }