feat(GlobalStyles): improve lowercase L (l) and uppercase i (I) reada…

…bility (#2995)

* feat(GlobalStyles): improve readability of lowercase L (l) and uppercase i (I)

* chore(Paragraph): update story to reflect changes

* chore: add changelog

* refactor: move property from cssReset to GlobalStyles

.changeset/kind-sheep-punch.md

@@ -0,0 +1,6 @@
+---
+"@contentful/f36-core": patch
+"@contentful/f36-typography": patch
+---
+
+feat(GlobalStyles): improve lowercase L (l) and uppercase i (I) readability

packages/components/typography/stories/Paragraph.stories.tsx

@@ -7,6 +7,13 @@ import { Paragraph } from '../src';
 export default {
   title: 'Typography/Paragraph',
   component: Paragraph,
+  decorators: [
+    (StoryComponent) => (
+      <div style={{ maxWidth: '600px' }}>
+        <StoryComponent />
+      </div>
+    ),
+  ],
   parameters: {
     propTypes: [Paragraph['__docgenInfo']],
   },
@@ -21,7 +28,7 @@ export const Basic = (props: ComponentProps<typeof Paragraph>) => (
 
 Basic.args = {
   children:
-    'The quick brown fox jumps over the lazy dog like an over-motivated frog.',
+    'Ill-informed AI initiatives led Lionel to inspect illegible labels, mistaking mirrored machine-learning models for misplaced Latin inscriptions. In Lisbon, logical layouts and linguistic AI left little illumination, leaving isolated individuals lost in labyrinthine neural networks.',
 };
 
 export const WithDensitySupport = (props: ComponentProps<typeof Paragraph>) => {
@@ -56,7 +63,4 @@ export const WithDensitySupport = (props: ComponentProps<typeof Paragraph>) => {
   );
 };
 
-WithDensitySupport.args = {
-  children:
-    'The quick brown fox jumps over the lazy dog like an over-motivated frog.',
-};
+WithDensitySupport.args = Basic.args;

packages/core/src/GlobalStyles/GlobalStyles.tsx

@@ -116,6 +116,8 @@ export const GlobalStyles = ({
           font-size: ${tokens.fontSizeM};
           line-height: ${tokens.lineHeightM};
           font-synthesis-weight: none;
+          /* Improves readability of lowercase L (l) and uppercase i (I) */
+          font-feature-settings: 'ss05' on;
         }
 
         code {