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 440aec3d943113..16c4133ea061a9 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
@@ -28,35 +28,35 @@ export default function TypographyVariations() {
 				columns={ 3 }
 				className="edit-site-global-styles-style-variations-container"
 			>
-				{ typographyVariations &&
-					typographyVariations.length &&
-					typographyVariations.map( ( variation, index ) => (
-						<Variation key={ index } variation={ variation }>
-							{ ( isFocused ) => (
-								<PreviewIframe
-									label={ variation?.title }
-									isFocused={ isFocused }
-								>
-									{ ( { ratio, key } ) => (
-										<HStack
-											key={ key }
-											spacing={ 10 * ratio }
-											justify="center"
-											style={ {
-												height: '100%',
-												overflow: 'hidden',
-											} }
-										>
-											<TypographyExample
-												variation={ variation }
-												fontSize={ 85 * ratio }
-											/>
-										</HStack>
-									) }
-								</PreviewIframe>
-							) }
-						</Variation>
-					) ) }
+				{ typographyVariations && typographyVariations.length
+					? typographyVariations.map( ( variation, index ) => (
+							<Variation key={ index } variation={ variation }>
+								{ ( isFocused ) => (
+									<PreviewIframe
+										label={ variation?.title }
+										isFocused={ isFocused }
+									>
+										{ ( { ratio, key } ) => (
+											<HStack
+												key={ key }
+												spacing={ 10 * ratio }
+												justify="center"
+												style={ {
+													height: '100%',
+													overflow: 'hidden',
+												} }
+											>
+												<TypographyExample
+													variation={ variation }
+													fontSize={ 85 * ratio }
+												/>
+											</HStack>
+										) }
+									</PreviewIframe>
+								) }
+							</Variation>
+					  ) )
+					: null }
 			</Grid>
 		</VStack>
 	);