Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Update to hinted version of Inter 3.19 font to improve legibility on Windows (blurry text) #8676

Closed
wants to merge 1 commit into from
Closed

Update to hinted version of Inter 3.19 font to improve legibility on Windows (blurry text) #8676

wants to merge 1 commit into from

Conversation

novocaine
Copy link
Contributor

@novocaine novocaine commented May 24, 2022 •
edited by github-actions bot
Loading

Fixes element-hq/element-desktop#682

Inter bundles a hinted version of its fonts which we can use to improve rendering on Windows, see here.

The fonts are larger in size, so we need to understand the increase in download size for users.

Before

-rw-r--r--   1 jsalter  staff   140K 12 Jul  2021 Inter-Bold.woff
-rw-r--r--   1 jsalter  staff   103K 12 Jul  2021 Inter-Bold.woff2
-rw-r--r--   1 jsalter  staff   147K 12 Jul  2021 Inter-BoldItalic.woff
-rw-r--r--   1 jsalter  staff   109K 12 Jul  2021 Inter-BoldItalic.woff2
-rw-r--r--   1 jsalter  staff   141K 12 Jul  2021 Inter-Italic.woff
-rw-r--r--   1 jsalter  staff   104K 12 Jul  2021 Inter-Italic.woff2
-rw-r--r--   1 jsalter  staff   139K 12 Jul  2021 Inter-Medium.woff
-rw-r--r--   1 jsalter  staff   103K 12 Jul  2021 Inter-Medium.woff2
-rw-r--r--   1 jsalter  staff   147K 12 Jul  2021 Inter-MediumItalic.woff
-rw-r--r--   1 jsalter  staff   110K 12 Jul  2021 Inter-MediumItalic.woff2
-rw-r--r--   1 jsalter  staff   131K 12 Jul  2021 Inter-Regular.woff
-rw-r--r--   1 jsalter  staff    97K 12 Jul  2021 Inter-Regular.woff2
-rw-r--r--   1 jsalter  staff   139K 12 Jul  2021 Inter-SemiBold.woff
-rw-r--r--   1 jsalter  staff   103K 12 Jul  2021 Inter-SemiBold.woff2
-rw-r--r--   1 jsalter  staff   148K 12 Jul  2021 Inter-SemiBoldItalic.woff
-rw-r--r--   1 jsalter  staff   109K 12 Jul  2021 Inter-SemiBoldItalic.woff2

After

-rw-r--r--@  1 jsalter  staff   255K 18 Jun  2021 Inter-Bold.woff
-rw-r--r--@  1 jsalter  staff   174K 18 Jun  2021 Inter-Bold.woff2
-rw-r--r--@  1 jsalter  staff   265K 18 Jun  2021 Inter-BoldItalic.woff
-rw-r--r--@  1 jsalter  staff   179K 18 Jun  2021 Inter-BoldItalic.woff2
-rw-r--r--@  1 jsalter  staff   253K 18 Jun  2021 Inter-Italic.woff
-rw-r--r--@  1 jsalter  staff   172K 18 Jun  2021 Inter-Italic.woff2
-rw-r--r--@  1 jsalter  staff   250K 18 Jun  2021 Inter-Medium.woff
-rw-r--r--@  1 jsalter  staff   171K 18 Jun  2021 Inter-Medium.woff2
-rw-r--r--@  1 jsalter  staff   262K 18 Jun  2021 Inter-MediumItalic.woff
-rw-r--r--@  1 jsalter  staff   178K 18 Jun  2021 Inter-MediumItalic.woff2
-rw-r--r--@  1 jsalter  staff   240K 18 Jun  2021 Inter-Regular.woff
-rw-r--r--@  1 jsalter  staff   164K 18 Jun  2021 Inter-Regular.woff2
-rw-r--r--@  1 jsalter  staff   253K 18 Jun  2021 Inter-SemiBold.woff
-rw-r--r--@  1 jsalter  staff   173K 18 Jun  2021 Inter-SemiBold.woff2
-rw-r--r--@  1 jsalter  staff   265K 18 Jun  2021 Inter-SemiBoldItalic.woff
-rw-r--r--@  1 jsalter  staff   180K 18 Jun  2021 Inter-SemiBoldItalic.woff2

Here's what your changelog entry will look like:

✨ Features

@t3chguy
Copy link
Member

t3chguy commented May 24, 2022

They are significantly larger, nearly double the size in some cases :(

@novocaine
Copy link
Contributor Author

They are significantly larger, nearly double the size in some cases :(

yeah, but will calculate the proportion of the page payload that actually represents

@t3chguy
Copy link
Member

t3chguy commented May 24, 2022

Is it not possible to include both but load hinted only if we think the platform is Windows?

@novocaine novocaine added the T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements label May 24, 2022
@novocaine
Copy link
Contributor Author

Is it not possible to include both but load hinted only if we think the platform is Windows?

On desktop that's easy, do it in packaging, but who cares about the payload size on desktop

On web .. ugh?

@t3chguy
Copy link
Member

t3chguy commented May 24, 2022 •
edited
Loading

On desktop that's easy, do it in packaging, but who cares about the payload size on desktop

Not exactly, because its part of the asar bundle of element-web that Desktop builds just opaquely pull in

On web .. ugh?

Indeed

@novocaine
Copy link
Contributor Author

I guess if we are worried about payload on web we can include these in Desktop but not web.

@novocaine novocaine requested a review from a team May 24, 2022 13:36
@novocaine novocaine mentioned this pull request May 24, 2022
Open
@MadLittleMods
Copy link
Contributor

MadLittleMods commented May 24, 2022 •
edited by novocaine
Loading

Re: "alright. well I'd like to send https://github.com/matrix-org/matrix-react-sdk/pull/8676 to the people bitterly loyal to their lodpi windows rig and see if it works for them"

The screenshots probably won't do it justice for you but here they are for reference from Windows 10 on a 39" monitor, 3840x2160 (100% UI scaling). I wish I could comment on the diff to create a thread but it's all file blobs which don't allow comments.

Chrome (Windows 10)

  • The before never stood out to me and looks as expected (I use it daily).
  • The after makes letters taller by pixel aliasing upwards into the pixel grid in most cases. I'm not used to it so it feels wrong to me at the moment but also feels not aliased very much now (very bare feeling).
Before After
Chrome before Chrome after font hint changes

Firefox (Windows 10)

  • The before in Firefox is noticeably bad
  • The after seems like a good iterative change although it still doesn't feel right. Maybe I'm just not used to font aliasing on Firefox though.
Before After
Firefox before Firefox after font hint changes

@MadLittleMods MadLittleMods changed the title Update to hinted Inter 3.19 Update to hinted version of Inter 3.19 font to improve legibility on Windows (blurry text) May 24, 2022
@novocaine
Copy link
Contributor Author

Note there are also screenshots of the before and after in the failed percy run.

@t3chguy t3chguy marked this pull request as ready for review May 25, 2022 10:08
@t3chguy t3chguy requested a review from a team as a code owner May 25, 2022 10:08
t3chguy
t3chguy reviewed May 25, 2022
View reviewed changes
Copy link
Member

@t3chguy t3chguy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clearing review due to me fat fingering the ready button

@t3chguy t3chguy marked this pull request as draft May 25, 2022 10:09
@amshakal amshakal requested review from janogarcia and removed request for a team May 31, 2022 16:16
@MadLittleMods
Copy link
Contributor

Closing as I don't think this will move forward without someone else picking this up to deep dive into the intricacies here.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@t3chguy t3chguy t3chguy left review comments

@janogarcia janogarcia Awaiting requested review from janogarcia

Assignees
No one assigned
Labels
T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Text appears blurry on Desktop (Windows)
3 participants
@novocaine @t3chguy @MadLittleMods