diff --git a/packages/main/src/themes/RadioButton.css b/packages/main/src/themes/RadioButton.css
index 2cf1e9379006..c54f4d385386 100644
--- a/packages/main/src/themes/RadioButton.css
+++ b/packages/main/src/themes/RadioButton.css
@@ -6,12 +6,48 @@
 }
 
 :host {
-	min-width: var(--_ui5_radio_button_min_width);
+	/* min-width: var(--_ui5_radio_button_min_width); */
 	max-width: 100%;
 	text-overflow: ellipsis;
 	overflow: hidden;
 	color: var(--_ui5_radio_button_color);
 	border-radius: var(--_ui5_radio_button_border_radius);
+	font-size: 1rem;
+	/* line-height: 12px; To Do - check if this can be fixed better. Issue - RB is 48px instead 44px height. This causes cutting */
+	box-sizing: border-box;
+	overflow: visible;
+	/* Vertical: (2.75em - 1.375em) / 2 = 0.6875em, Horizontal: 0.625em */
+	padding-block: var(--_ui5_radio_button_padding_block);
+	padding-inline-start: var(--_ui5_radio_button_padding_inline);
+
+	/* Enable font-size based scaling - all em values below are relative to font-size */
+	--_ui5_radio_button_inner_size: 2.75em;
+	--_ui5_radio_button_svg_size: 1.375em;
+	--_ui5_radio_button_height: 2.75em;
+	--_ui5_radio_button_padding_block: 0.6875em;
+	--_ui5_radio_button_padding_inline: 0.625em;
+	--_ui5_radio_button_padding_inline_with_label: 0.6875em;
+	--_ui5_radio_button_outer_ring_padding: 0 0.625em;
+	--_ui5_radio_button_outer_ring_padding_with_label: 0 0.6875em;
+	--_ui5_radio_button_label_offset: 0.125em;
+	--_ui5_radio_button_focus_dist: 0.375em;
+	--_ui5_radio_button_label_font_size: 0.875em;
+}
+
+/* Compact mode - override em values */
+@container style(--ui5_content_density: compact) {
+	:host {
+		/* Vertical: (2em - 1em) / 2 = 0.5em, Horizontal: 0.5em */
+		--_ui5_radio_button_inner_size: 2em;
+		--_ui5_radio_button_svg_size: 1em;
+		--_ui5_radio_button_height: 2em;
+		--_ui5_radio_button_padding_block: 0.5em;
+		--_ui5_radio_button_padding_inline: 0.5em;
+		--_ui5_radio_button_padding_inline_with_label: 0.5em;
+		--_ui5_radio_button_outer_ring_padding: 0 0.5em;
+		--_ui5_radio_button_outer_ring_padding_with_label: 0 0.5em;
+		--_ui5_radio_button_focus_dist: 0.375em;
+	}
 }
 
 :host(:not([disabled])) .ui5-radio-root {
@@ -47,7 +83,9 @@
 	content: "";
 	display: var(--_ui5_radio_button_focus_outline);
 	position: absolute;
-	inset: var(--_ui5_radio_button_focus_dist);
+	/* Extend focus to cover :host padding: -padding + focus_dist */
+	inset-block: calc(-1 * var(--_ui5_radio_button_padding_block) + var(--_ui5_radio_button_focus_dist));
+	inset-inline: calc(-1 * var(--_ui5_radio_button_padding_inline) + var(--_ui5_radio_button_focus_dist));
 	pointer-events: none;
 	border: var(--_ui5_radio_button_border_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	border-radius: var(--_ui5_radio_button_border_radius);
@@ -78,19 +116,20 @@
 }
 
 /* with label */
+:host([text]) {
+	padding-inline-start: var(--_ui5_radio_button_padding_inline_with_label);
+}
+
 :host([text]) .ui5-radio-root {
 	padding-inline-end: var(--_ui5_radio_button_border_width);
 }
 
 :host([text][desktop]) .ui5-radio-root:focus::before,
 :host([text]) .ui5-radio-root:focus-visible::before {
+	inset-inline-start: calc(-1 * var(--_ui5_radio_button_padding_inline_with_label) + var(--_ui5_radio_button_focus_dist));
 	inset-inline-end: 0px;
 }
 
-:host([text]) .ui5-radio-inner {
-	padding: var(--_ui5_radio_button_outer_ring_padding_with_label);
-}
-
 /* readonly */
 :host([checked][readonly]) .ui5-radio-svg-inner {
 	fill: var(--_ui5_radio_button_read_only_inner_ring_color);
@@ -190,15 +229,16 @@
 /* Inner */
 .ui5-radio-inner {
 	display: flex;
-	align-items: center;
-	padding: var(--_ui5_radio_button_outer_ring_padding);
+	align-items: start;
 	flex-shrink: 0;
-	height: var(--_ui5_radio_button_inner_size);
-	font-size: 1rem; /* override font size of the message dialog */
 	pointer-events: none;
 	vertical-align: top;
 }
 
+:host([text]) .ui5-radio-inner {
+	padding-inline-end: 11px; /* To Do add a parameter for this */
+}
+
 .ui5-radio-inner {
 	outline: none;
 }
@@ -218,16 +258,12 @@
 	display: flex;
 	align-items: center;
 	padding-inline-end: var(--_ui5_radio_button_label_offset);
-	padding-block: var(--_ui5_radio_button_label_side_padding);
 	vertical-align: top;
 	max-width: 100%;
 	pointer-events: none;
 	color: var(--_ui5_radio_button_label_color);
 	overflow-wrap: break-word;
-}
-
-:host([wrapping-type="None"][text]) .ui5-radio-root {
-	height: var(--_ui5_radio_button_height);
+	font-size: var(--_ui5_radio_button_label_font_size);
 }
 
 :host([wrapping-type="None"][text]) [ui5-label].ui5-radio-label {
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
index 839beba0dd2d..5a81788b7613 100644
--- a/packages/main/src/themes/base/sizes-parameters.css
+++ b/packages/main/src/themes/base/sizes-parameters.css
@@ -123,7 +123,7 @@
 
 	/* Radio Button */
 	--_ui5_radio_button_height: 2.75rem;
-	--_ui5_radio_button_label_side_padding: .875rem;
+
 	--_ui5_radio_button_inner_size: 2.75rem;
 	--_ui5_radio_button_svg_size: 1.375rem;
 
@@ -322,7 +322,6 @@
 
 		/* Radio Button */
 		--_ui5_radio_button_height: 2rem;
-		--_ui5_radio_button_label_side_padding: .5rem;
 		--_ui5_radio_button_inner_size: 2rem;
 		--_ui5_radio_button_svg_size: 1rem;
 
diff --git a/packages/main/test/pages/RadioButton.html b/packages/main/test/pages/RadioButton.html
index 11376127dcb4..992ce39f6f0e 100644
--- a/packages/main/test/pages/RadioButton.html
+++ b/packages/main/test/pages/RadioButton.html
@@ -172,6 +172,12 @@
 		<ui5-radio-button id="customRb1" checked text="Inner ring on hover"></ui5-radio-button>
 		<ui5-radio-button value-state="Negative" text="Outer ring with Negative State"></ui5-radio-button>
 		<ui5-radio-button value-state="Positive" text="Outer ring with Positive State"></ui5-radio-button>
+		<ui5-radio-button id="customRb2" text="Font-size 32px"></ui5-radio-button>
+		<ui5-radio-button id="customRb3"></ui5-radio-button>
+		<ui5-radio-button id="customRb4" text="Font-size 12px"></ui5-radio-button>
+		<ui5-radio-button id="customRb5"></ui5-radio-button>
+		<ui5-radio-button id="customRb6" text="Padding 0"></ui5-radio-button>
+		<ui5-radio-button id="customRb7"></ui5-radio-button>
 	</div>
 
 	<script>
diff --git a/packages/main/test/pages/styles/RadioButton.css b/packages/main/test/pages/styles/RadioButton.css
index 1c1b5bc4e444..2beb4e64142c 100644
--- a/packages/main/test/pages/styles/RadioButton.css
+++ b/packages/main/test/pages/styles/RadioButton.css
@@ -36,4 +36,20 @@ div.customStyling{
 }
 .customStyling ui5-radio-button[value-state="Positive"]::part(outer-ring) {
     stroke: rgb(12 223 147);
+}
+
+/* Font-size based scaling - the radio button circle and label scale with font-size */
+.customStyling #customRb2,
+.customStyling #customRb3 {
+    font-size: 32px;
+}
+
+.customStyling #customRb4,
+.customStyling #customRb5 {
+    font-size: 12px;
+}
+
+.customStyling #customRb6,
+.customStyling #customRb7 {
+    padding: 0;
 }
\ No newline at end of file