`gds-text` Dynamic Type

[astrit]

Issue Summary: Update Text Sizes for Accessibility

We need to update all text sizes to use a base font size and iOS dynamic type, allowing text to adapt to user preferences. Implement rem or em units for scalability and responsiveness.

Potential update on gds-theme to specify the base font size!

e.g <gds-theme base="10px" />

Tasks

1. Define Base Font Size:

   • Establish a base font size (e.g., 16px) in the root CSS.

2. Update Text Sizes:

   • Change all text sizes to use rem or em based on the base font size.

3. Implement iOS Dynamic Type:

   • Ensure text scales according to user preferences.

4. Update Components:

   • Review and update all components to reflect new text sizes.

5. Integrate Space Tokens:

   • Include space tokens as needed for consistent spacing.

6. Testing and Validation:

   • Test across devices to ensure responsiveness and accessibility.

Conclusion

Updating text sizes will enhance accessibility and usability, ensuring a responsive design that meets user preferences.

A neat trick

font-size: clamp(16px, calc(20px + (36–20) * (100vw - 768px)/(1920–768)), 48px);

Sources: https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically/ https://medium.com/@bogdanfromkyiv/dynamic-font-size-using-only-css3-757ea901d0fe