diff --git a/packages/edit-site/src/components/global-styles/preview-iframe.js b/packages/edit-site/src/components/global-styles/preview-iframe.js
index e830accf6d939b..96be42e86d8de1 100644
--- a/packages/edit-site/src/components/global-styles/preview-iframe.js
+++ b/packages/edit-site/src/components/global-styles/preview-iframe.js
@@ -38,6 +38,7 @@ export default function PreviewIframe( {
 	label,
 	isFocused,
 	withHoverView,
+	addGlobalStyles = true,
 } ) {
 	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
@@ -129,7 +130,10 @@ export default function PreviewIframe( {
 						style={ {
 							height: normalizedHeight * ratio,
 							width: '100%',
-							background: gradientValue ?? backgroundColor,
+							color: addGlobalStyles ? undefined : '#000',
+							background: addGlobalStyles
+								? gradientValue ?? backgroundColor
+								: '#fff',
 							cursor: withHoverView ? 'pointer' : undefined,
 						} }
 						initial="start"
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index c2a2776ac94d81..70be8f33eae2c9 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -31,7 +31,10 @@ function ScreenTypography() {
 			/>
 			<div className="edit-site-global-styles-screen">
 				<VStack spacing={ 7 }>
-					<TypographyVariations title={ __( 'Presets' ) } />
+					<TypographyVariations
+						addGlobalStyles={ false }
+						title={ __( 'Presets' ) }
+					/>
 					{ ! window.__experimentalDisableFontLibrary &&
 						fontLibraryEnabled && <FontFamilies /> }
 					<TypographyElements />
diff --git a/packages/edit-site/src/components/global-styles/variations/variations-typography.js b/packages/edit-site/src/components/global-styles/variations/variations-typography.js
index 6ee7be561e6114..12f812a4a24ee4 100644
--- a/packages/edit-site/src/components/global-styles/variations/variations-typography.js
+++ b/packages/edit-site/src/components/global-styles/variations/variations-typography.js
@@ -16,7 +16,11 @@ import PreviewIframe from '../preview-iframe';
 import Variation from './variation';
 import Subtitle from '../subtitle';
 
-export default function TypographyVariations( { title, gap = 2 } ) {
+export default function TypographyVariations( {
+	title,
+	gap = 2,
+	addGlobalStyles = false,
+} ) {
 	const typographyVariations = useTypographyVariations();
 
 	if ( ! typographyVariations?.length ) {
@@ -37,6 +41,7 @@ export default function TypographyVariations( { title, gap = 2 } ) {
 						<Variation key={ index } variation={ variation }>
 							{ ( isFocused ) => (
 								<PreviewIframe
+									addGlobalStyles={ addGlobalStyles }
 									label={ variation?.title }
 									isFocused={ isFocused }
 								>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
index f0585b410e40dc..73a8dc07f9a029 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
@@ -94,6 +94,7 @@ function SidebarNavigationScreenGlobalStylesContent() {
 				) }
 				{ typographyVariations?.length && (
 					<TypographyVariations
+						addGlobalStyles
 						title={ __( 'Typography' ) }
 						gap={ gap }
 					/>