Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prefer web safe fonts over system fonts #2416

Merged
merged 2 commits into from
Feb 1, 2024
Merged

Conversation

connor-baer
Copy link
Member

@connor-baer connor-baer commented Jan 31, 2024

Purpose

A bug in Chrome causes bold text rendered using the system font on macOS to be extra thick. The bug has supposedly been fixed, but can still be reproduced with bold & italic text.

The bug is present when any of the -apple-system, BlinkMacSystemFont, or system-ui fonts are used. Removing these causes Chrome on macOS to fallback to Helvetica. This prompted the idea to move Helvetica and Arial before the system fonts as this provides a more consistent user experience across platforms and reduces layout shift when switching to SumUp's brand font, Aktiv Grotesk.

The system fonts are kept in the font stack in case certain characters aren't available in any of the previous fonts. The same reasoning applies to the emoji and symbol fonts.

Approach and changes

  • Re-arrange the fonts in the default font stack to prefer web safe fonts over system fonts

Definition of done

  • Development completed
  • Reviewers assigned
  • Unit and integration tests
  • Meets minimum browser support
  • Meets accessibility requirements

@connor-baer connor-baer added the 🐞 bug Something isn't working as it should label Jan 31, 2024
@connor-baer connor-baer requested a review from a team as a code owner January 31, 2024 10:56
Copy link

changeset-bot bot commented Jan 31, 2024

🦋 Changeset detected

Latest commit: 82c9700

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages
Name Type
@sumup/design-tokens Minor
@sumup/circuit-ui Major
@sumup/eslint-plugin-circuit-ui Major
@sumup/stylelint-plugin-circuit-ui Major
@sumup/astro-template-circuit-ui Patch
@sumup/remix-template-circuit-ui Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

vercel bot commented Jan 31, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
oss-circuit-ui ✅ Ready (Inspect) Visit Preview Jan 31, 2024 10:56am

Copy link

codecov bot commented Jan 31, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (5d7a92f) 96.77% compared to head (82c9700) 96.79%.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #2416      +/-   ##
==========================================
+ Coverage   96.77%   96.79%   +0.01%     
==========================================
  Files         229      229              
  Lines       19037    19037              
  Branches     1185     1185              
==========================================
+ Hits        18424    18426       +2     
+ Misses        600      598       -2     
  Partials       13       13              
Files Coverage Δ
packages/design-tokens/themes/legacy/light.ts 100.00% <100.00%> (ø)
packages/design-tokens/themes/light.ts 100.00% <100.00%> (ø)

... and 1 file with indirect coverage changes

@connor-baer connor-baer merged commit dcb816e into main Feb 1, 2024
15 of 16 checks passed
@connor-baer connor-baer deleted the fix/system-fonts-chrome branch February 1, 2024 13:10
@connor-baer connor-baer mentioned this pull request Feb 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐞 bug Something isn't working as it should 🗂 design-tokens
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant