feat(ui): Source CashSans-Bold and improve overall text rendering #3091
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
Previously, text (especially bolded text) could appear blurry. Goose told me that was likely due to a combination of default rendering settings and the potential for “faux bolding” when a true bold font weight was not available.
Changes Implemented
Added
@font-facefor Cash Sans BoldCashSans-Bold.woffandCashSans-Bold.woff2font files. This makes a true bold variant of the Cash Sans font family available to Goose.app.Enhanced Global Text Rendering
bodyelement inmain.css:-webkit-font-smoothing: antialiased;: Improves font sharpness and clarity on macOS by enabling grayscale antialiasing.text-rendering: optimizeLegibility;: Instructs the browser to prioritize legibility, enabling features like kerning and ligatures for a more refined text appearance.All text should now look crisper and easier to read, especially bold text.
Open Question
What combination of these settings do Goose designers prefer? I’ve added both, but we could instead take either one (or neither and close the PR). See Demos for combinations.
Demos
Click the images to open in a new tab, so you can zoom to 100% and not get resizing blurriness.
Before
Choices
original: no -Bold and NOT antialiased
CashSans-Bold antialiased 👈🏼 This is what I’m proposing.
antialiased, no -Bold
CashSans-Bold NOT antialiased