diff --git a/.storybook/preview.js b/.storybook/preview.js
index b525de3632..83745a8744 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -16,24 +16,6 @@ import {
   createEventInstrumentation,
 } from '../src/instrumentation';
 
-const unlimitedScenarios = [
-  'Accordion',
-  'Grid',
-  'Paragraph',
-  'Stack',
-  'card',
-  'drawer',
-  'Form input',
-  'modal',
-  'Image',
-  'image-e2e',
-  'grid-layout',
-  'Popover',
-  'audio-player-composable',
-  'text-area',
-  'useIntersection',
-];
-
 const BackgroundColor = styled.div`
   position: absolute;
   top: 0;
@@ -48,17 +30,9 @@ const StoryWrapper = styled.div`
   box-sizing: border-box;
 `;
 
-const Container = styled.div`
-  max-width: 1024px;
-  max-height: 768px;
-  overflow: hidden;
-`;
-
 const Background = ({children}) => (
   <BackgroundColor>{children}</BackgroundColor>
 );
-const LimitSizeDecorator = ({children}) => <Container>{children}</Container>;
-
 const NoDecorator = ({children}) => <>{children}</>;
 
 export const parameters = {
@@ -74,6 +48,7 @@ export const parameters = {
   },
   options: {
     storySort: {
+      method: 'alphabetical',
       order: ['Welcome', 'Components', 'Utilities', 'Deprecated', '*'],
     },
   },
@@ -125,21 +100,11 @@ export const parameters = {
 };
 
 export const decorators = [
-  // Add wrapper around stories to limit their size
-  (Story, context) => {
-    const kind = context.kind.split('/')[1];
-    const Decorator =
-      unlimitedScenarios.includes(kind) ||
-      context.componentId === 'welcome' ||
-      context.componentId === 'theme-checker'
-        ? NoDecorator
-        : LimitSizeDecorator;
+  Story => {
     return (
-      <Decorator>
-        <StoryWrapper>
-          <Story />
-        </StoryWrapper>
-      </Decorator>
+      <StoryWrapper>
+        <Story />
+      </StoryWrapper>
     );
   },
   (Story, context) => {
diff --git a/src/typography/__tests__/presets-cropping.stories.tsx b/src/typography/__tests__/presets-cropping.stories.tsx
deleted file mode 100644
index 67d5027885..0000000000
--- a/src/typography/__tests__/presets-cropping.stories.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-import {TextBlock} from '../../text-block';
-import {Cell, Grid} from '../../grid';
-import {useTheme} from '../../theme';
-import {
-  StorybookHeading,
-  StorybookSubHeading,
-} from '../../test/storybook-comps';
-
-export default {
-  title: 'Components/typography/presets-cropping',
-  component: () => 'None',
-};
-
-const StyledTextBlock = styled(TextBlock)`
-  background-color: tomato;
-`;
-
-const renderTextBlockWithPreset = (presetList: Array<string>) =>
-  presetList.map((preset: string) => (
-    <>
-      <StyledTextBlock typographyPreset={preset}>T{preset}</StyledTextBlock>
-      <br />
-    </>
-  ));
-
-export const EditorialCropping1 = () => {
-  const theme = useTheme();
-
-  const editorialDisplayPresetList = Object.keys(
-    theme.typographyPresets,
-  ).filter(preset => preset.startsWith('editorialDisplay'));
-
-  const editorialLabelPresetList = Object.keys(
-    theme.typographyPresets,
-  ).filter(preset => preset.startsWith('editorialLabel'));
-
-  const editorialHeadlinePresetList = Object.keys(
-    theme.typographyPresets,
-  ).filter(preset => preset.startsWith('editorialHeadline'));
-
-  return (
-    <>
-      <Grid>
-        <Cell xs={6}>
-          <StorybookHeading>Presets cropping</StorybookHeading>
-          <StorybookSubHeading>Editorial</StorybookSubHeading>
-          {renderTextBlockWithPreset(editorialDisplayPresetList)}
-          <br />
-          {renderTextBlockWithPreset(editorialLabelPresetList)}
-        </Cell>
-        <Cell xs={6}>
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          {renderTextBlockWithPreset(editorialHeadlinePresetList)}
-        </Cell>
-      </Grid>
-    </>
-  );
-};
-
-EditorialCropping1.storyName = 'editorialCropping1';
-
-export const EditorialCropping2 = () => {
-  const theme = useTheme();
-
-  const editorialSubHeadlinePresetList = Object.keys(
-    theme.typographyPresets,
-  ).filter(preset => preset.startsWith('editorialSubheadline'));
-
-  const editorialParagraphPresetList = Object.keys(
-    theme.typographyPresets,
-  ).filter(preset => preset.startsWith('editorialParagraph'));
-
-  const editorialQuotePresetList = Object.keys(
-    theme.typographyPresets,
-  ).filter(preset => preset.startsWith('editorialQuote'));
-
-  const editorialCaptionPresetList = Object.keys(
-    theme.typographyPresets,
-  ).filter(preset => preset.startsWith('editorialCaption'));
-
-  return (
-    <>
-      <Grid>
-        <Cell xs={6}>
-          <StorybookHeading>Presets cropping</StorybookHeading>
-          <StorybookSubHeading>Editorial</StorybookSubHeading>
-          <br />
-          {renderTextBlockWithPreset(editorialSubHeadlinePresetList)}
-          <br />
-          {renderTextBlockWithPreset(editorialParagraphPresetList)}
-          <br />
-          {renderTextBlockWithPreset(editorialQuotePresetList)}
-        </Cell>
-        <Cell xs={6}>
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          {renderTextBlockWithPreset(editorialCaptionPresetList)}
-        </Cell>
-      </Grid>
-    </>
-  );
-};
-EditorialCropping2.storyName = 'editorialCropping2';
-
-export const UtilityCropping = () => {
-  const theme = useTheme();
-
-  const utilityHeadingPresetList = Object.keys(
-    theme.typographyPresets,
-  ).filter(preset => preset.startsWith('utilityHeading'));
-
-  const utilitySubHeadingPresetList = Object.keys(
-    theme.typographyPresets,
-  ).filter(preset => preset.startsWith('utilitySubheading'));
-
-  const utilityBodyPresetList = Object.keys(
-    theme.typographyPresets,
-  ).filter(preset => preset.startsWith('utilityBody'));
-
-  const utilityLabelPresetList = Object.keys(
-    theme.typographyPresets,
-  ).filter(preset => preset.startsWith('utilityLabel'));
-
-  const utilityMetaPresetList = Object.keys(
-    theme.typographyPresets,
-  ).filter(preset => preset.startsWith('utilityMeta'));
-
-  const utilityButtonPresetList = Object.keys(
-    theme.typographyPresets,
-  ).filter(preset => preset.startsWith('utilityButton'));
-
-  return (
-    <>
-      <Grid>
-        <Cell xs={6}>
-          <StorybookHeading>Presets cropping</StorybookHeading>
-          <StorybookSubHeading>Utility</StorybookSubHeading>
-          {renderTextBlockWithPreset(utilityHeadingPresetList)}
-          <br />
-          {renderTextBlockWithPreset(utilitySubHeadingPresetList)}
-        </Cell>
-        <Cell xs={6}>
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          <br />
-          {renderTextBlockWithPreset(utilityBodyPresetList)}
-          <br />
-          {renderTextBlockWithPreset(utilityLabelPresetList)}
-          <br />
-          {renderTextBlockWithPreset(utilityMetaPresetList)}
-          <br />
-          {renderTextBlockWithPreset(utilityButtonPresetList)}
-        </Cell>
-      </Grid>
-    </>
-  );
-};
-
-UtilityCropping.storyName = 'utility';
diff --git a/src/typography/__tests__/text-cropping.stories.tsx b/src/typography/__tests__/text-cropping.stories.tsx
new file mode 100644
index 0000000000..b4d305aec9
--- /dev/null
+++ b/src/typography/__tests__/text-cropping.stories.tsx
@@ -0,0 +1,84 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import {TextBlock} from '../../text-block';
+import {TypographyPreset, useTheme} from '../../theme';
+import {StorybookPage, StorybookCase} from '../../test/storybook-comps';
+import {getColorCssFromTheme} from '../../utils';
+
+export default {
+  title: 'Components/Text cropping',
+  component: () => 'None',
+  parameters: {
+    nkDocs: {
+      title: 'Text Cropping',
+      url: 'https://newskit.co.uk/theme/foundation/fonts/#textcrop',
+      description: '',
+    },
+  },
+};
+
+const StyledTextBlock = styled(TextBlock)`
+  ${getColorCssFromTheme('backgroundColor', 'interactivePrimary010')}
+`;
+
+const renderTextBlockWithPreset = (
+  presetPrefix: string,
+  typographyPresets: Record<string, TypographyPreset>,
+) => {
+  const presetList = Object.keys(typographyPresets).filter(preset =>
+    preset.startsWith(presetPrefix),
+  );
+
+  return presetList.map((preset: string) => (
+    <StorybookCase title={` ${preset}`}>
+      <StyledTextBlock stylePreset="inkBase" typographyPreset={preset}>
+        The quick brown fox
+      </StyledTextBlock>
+    </StorybookCase>
+  ));
+};
+
+export const EditorialCropping = () => {
+  const {typographyPresets} = useTheme();
+
+  const presetsKeys = [
+    'editorialDisplay',
+    'editorialHeadline',
+    'editorialSubheadline',
+    'editorialParagraph',
+    'editorialQuote',
+    'editorialCaption',
+    'editorialLabel',
+  ];
+
+  return (
+    <StorybookPage columns="1fr">
+      {presetsKeys.map(presetKey =>
+        renderTextBlockWithPreset(presetKey, typographyPresets),
+      )}
+    </StorybookPage>
+  );
+};
+EditorialCropping.storyName = 'Editorial cropping';
+
+export const UtilityCropping = () => {
+  const {typographyPresets} = useTheme();
+
+  const presetsKeys = [
+    'utilityHeading',
+    'utilitySubheading',
+    'utilityBody',
+    'utilityLabel',
+    'utilityButton',
+    'utilityMeta',
+  ];
+
+  return (
+    <StorybookPage columns="1fr">
+      {presetsKeys.map(presetKey =>
+        renderTextBlockWithPreset(presetKey, typographyPresets),
+      )}
+    </StorybookPage>
+  );
+};
+UtilityCropping.storyName = 'Utility cropping ';