Skip to content

ui: Use "Source Sans 3" font for most UI text #294

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.

Sign up for GitHub

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

Jump to bottom
Closed
chrisbobbe opened this issue Aug 31, 2023 · 0 comments · Fixed by #439
Closed

ui: Use "Source Sans 3" font for most UI text #294

chrisbobbe opened this issue Aug 31, 2023 · 0 comments · Fixed by #439
Labels
a-design Visual and UX design
Milestone
M5b: Launch goals

Comments

@chrisbobbe
Copy link
Collaborator

chrisbobbe commented Aug 31, 2023 •
edited
Loading

Since Source Sans 3 is a variable-weight font, we'll have to take some extra care not to regress on support for the user's "use bold text" accessibility setting. We've been doing that by styling text with a TextStyle object that comes from weightVariableTextStyle (or is merged with one that comes from that). Pass a BuildContext to that function to let it conditionalize on that accessibility setting.

One might normally set a "default font" for the app without using TextStyle objects: by setting fontFamily or fontFamilyFallback on an app-wide ThemeData. But ThemeData doesn't also have a fontVariations field, which controls text weight for weight-variable fonts.

Discussion: https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/flutter.3A.20text.20all.20weird/near/1633648
@chrisbobbe chrisbobbe added the a-design Visual and UX design label Aug 31, 2023
@chrisbobbe chrisbobbe mentioned this issue Aug 31, 2023
Merged
gnprice pushed a commit to chrisbobbe/zulip-flutter that referenced this issue Sep 1, 2023
@chrisbobbe @gnprice
ui: For boring, non-emoji font, use one that iOS recognizes
b10296f 
It's strange that iOS really doesn't seem to know what to do with
'sans-serif' here. Nor "SF Pro", "SF-Pro", nor any obvious variation
on that, even though it's supposedly the system font:
  https://developer.apple.com/fonts/

But a GitHub comment popped up a few hours ago (linked in the added
code), and that's the first thing I've found that seems to work, as
a clear pointer to the default system font. Shrug.

Later, we'll want to use Source Sans 3 for almost all the text in the
app. But we'll want to take more care with that than I have
bandwidth for right now (around it being a variable-weight font);
see zulip#294.

Fixes: zulip#289
@gnprice gnprice added this to the Launch milestone Sep 1, 2023
@chrisbobbe chrisbobbe mentioned this issue Nov 15, 2023
Merged
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Nov 15, 2023
@chrisbobbe
content: Follow web app in using Source Sans 3, size 14, height 17
b8a6414 
From looking at the "Computed" tab in the Chrome DevTools element
inspector, on CZO at 8.0-dev-2850-gef1c1ce05f.

Technically the web app has a computed `line-height` of 16.996px,
but that seems like a rounding error.

One reason for doing this now is to opt out of a default that would
take effect with the upcoming migration to Material 3. The text
would otherwise get a line height of 1.43 times the font size, and
we want it to be denser than that. We briefly explored how to
preserve the line height exactly, across the M3 migration, but the
solutions we found seemed more awkward than just taking care of
this:
  zulip#380 (comment)

Fixes-partly: zulip#294
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Nov 15, 2023
@chrisbobbe
content: Follow web app in using Source Sans 3, size 14, height 17
2f1e16e 
Values obtained by looking at the "Computed" tab in the Chrome
DevTools element inspector, on CZO at 8.0-dev-2850-gef1c1ce05f.

Technically the web app has a computed `line-height` of 16.996px,
but that seems like a rounding error.

One reason for doing this now is to opt out of a default that would
take effect with the upcoming migration to Material 3. The text
would otherwise get a line height of 1.43 times the font size, and
we want it to be denser than that. We briefly explored how to
preserve the line height exactly, across the M3 migration, but the
solutions we found seemed more awkward than just taking care of
this now:
  zulip#380 (comment)

Fixes-partly: zulip#157
Fixes-partly: zulip#294
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Nov 16, 2023
@chrisbobbe
content: Follow web app in using Source Sans 3, size 14, height 17
c7be9c3 
Values obtained by looking at the "Computed" tab in the Chrome
DevTools element inspector, on CZO at 8.0-dev-2850-gef1c1ce05f.

Technically the web app has a computed `line-height` of 16.996px,
but that seems like a rounding error.

One reason for doing this now is to opt out of a default that would
take effect with the upcoming migration to Material 3. The text
would otherwise get a line height of 1.43 times the font size, and
we want it to be denser than that. We briefly explored how to
preserve the line height exactly, across the M3 migration, but the
solutions we found seemed more awkward than just taking care of
this now:
  zulip#380 (comment)

Fixes-partly: zulip#157
Fixes-partly: zulip#294
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Dec 6, 2023
@chrisbobbe
text: Use kDefaultFontFamily{,Fallback} for text built on Typography …
d33dece 
…styles

With plumbing to make kDefaultFamily work, since it's a
variable-weight font.

As it happens, most -- perhaps all -- of the app's text is built on
Typography styles. See the next commit for some thoughts on that.
Since that's the case, I'll mark this commit as fixing these issues:

- zulip#294 "Use "Source Sans 3" font for most UI text"
- zulip#438 "Consistently use "Noto Color Emoji" for emojis on Android".

If there's some corner of the app where the two fonts aren't getting
applied, we'll eventually find it, and apply kDefaultFontFamily and
kDefaultFontFamilyFallback according to their doc comments, to fix.

Fixes: zulip#294
Fixes: zulip#438
@chrisbobbe chrisbobbe mentioned this issue Dec 6, 2023
Merged
gnprice pushed a commit to chrisbobbe/zulip-flutter that referenced this issue Jan 5, 2024
@chrisbobbe @gnprice
text: Use kDefaultFontFamily{,Fallback} for text built on Typography …
7bdd7f9 
…styles

With plumbing to make kDefaultFamily work, since it's a
variable-weight font.

As it happens, most -- perhaps all -- of the app's text is built on
Typography styles. See the next commit for some thoughts on that.
Since that's the case, I'll mark this commit as fixing these issues:

- zulip#294 "Use "Source Sans 3" font for most UI text"
- zulip#438 "Consistently use "Noto Color Emoji" for emojis on Android".

If there's some corner of the app where the two fonts aren't getting
applied, we'll eventually find it, and apply kDefaultFontFamily and
kDefaultFontFamilyFallback according to their doc comments, to fix.

Fixes: zulip#294
Fixes: zulip#438
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Jan 5, 2024
@chrisbobbe
text: Use font-family constants for text built on Typography styles
577fda4 
With plumbing to make kDefaultFamily work, since it's a
variable-weight font.

As it happens, most -- perhaps all -- of the app's text is built on
Typography styles. See the next commit for some thoughts on that.
Since that's the case, I'll mark this commit as fixing these issues:

- zulip#294 Use "Source Sans 3" font for most UI text
- zulip#438 Consistently use "Noto Color Emoji" for emojis on Android

If there's some corner of the app where the two fonts aren't getting
applied, we'll eventually find it, and apply kDefaultFontFamily and
kDefaultFontFamilyFallback according to their doc comments, to fix.

Fixes: zulip#294
Fixes: zulip#438
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Jan 9, 2024
@chrisbobbe
text: Use font-family constants for text built on Typography styles
517d09f 
With plumbing to make kDefaultFamily work, since it's a
variable-weight font.

As it happens, most -- perhaps all -- of the app's text is built on
Typography styles. See the next commit for some thoughts on that.
Since that's the case, I'll mark this commit as fixing these issues:

- zulip#294 Use "Source Sans 3" font for most UI text
- zulip#438 Consistently use "Noto Color Emoji" for emojis on Android

If there's some corner of the app where the two fonts aren't getting
applied, we'll eventually find it, and apply kDefaultFontFamily and
kDefaultFontFamilyFallback according to their doc comments, to fix.

Fixes: zulip#294
Fixes: zulip#438
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Feb 2, 2024
@chrisbobbe
text: Use font-family constants for text built on Typography styles
88071b7 
With plumbing to make kDefaultFamily work, since it's a
variable-weight font.

As it happens, most -- perhaps all -- of the app's text is built on
Typography styles. See the next commit for some thoughts on that.
Since that's the case, I'll mark this commit as fixing these issues:

- zulip#294 Use "Source Sans 3" font for most UI text
- zulip#438 Consistently use "Noto Color Emoji" for emojis on Android

If there's some corner of the app where the two fonts aren't getting
applied, we'll eventually find it, and apply defaultFontFamily and
defaultFontFamilyFallback according to their doc comments, to fix.

Fixes: zulip#294
Fixes: zulip#438
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a-design Visual and UX design
Projects
Flutter app
Status: Done
Milestone
M5b: Launch goals
2 participants
@gnprice @chrisbobbe