UI font sizing mismatch #321

al20ov commented 2026年05月31日 02:22:41 +02:00

Sorry to resurface this issue (related: #147, #69) and sorry to nitpick but I just installed Gram and configured everything exactly as I had it on Zed and couldn't help but notice that the UI font looks kind of janky (no offense) compared to Zed. I narrowed it down to PR #69, and tried reverting it to see if that was the source of the issue.

Gram on the left, Zed on the right

With PR #69:
Screenshot from 2026年05月31日 01-15-58

Reverted PR #69:
Screenshot from 2026年05月31日 01-46-48

That's with Adwaita Sans (basically Inter), ui_font_size = 16.0 and project_panel.entry_spacing at "Comfortable".
I agree that having mismatched UI and buffer font size is annoying but it leads to every entry_spacing and everything with padding being all wrong due to the UI font needing to be smaller to roughly match the previous font size. Here's me trying to match font sizes (2pt smaller):
Screenshot from 2026年05月31日 02-16-49
Element spacing in the project panel is smaller, the bar at the bottom is thinner, etc... Maybe spacing/padding could be adjusted accordingly to compensate?

EDIT: forgot to mention I'm on Wayland and it doesn't seem to be related to display scaling as I saw the same issue whether on 1x or 1.25x scaling

Sorry to resurface this issue (related: https://codeberg.org/GramEditor/gram/issues/147, https://codeberg.org/GramEditor/gram/pulls/69) and sorry to nitpick but I just installed Gram and configured everything exactly as I had it on Zed and couldn't help but notice that the UI font looks kind of janky (no offense) compared to Zed. I narrowed it down to PR #69, and tried reverting it to see if that was the source of the issue. Gram on the left, Zed on the right With PR #69:  Reverted PR #69:  That's with Adwaita Sans (basically Inter), `ui_font_size` = 16.0 and `project_panel.entry_spacing` at "Comfortable". I agree that having mismatched UI and buffer font size is annoying but it leads to every entry_spacing and everything with padding being all wrong due to the UI font needing to be smaller to roughly match the previous font size. Here's me trying to match font sizes (2pt smaller):  Element spacing in the project panel is smaller, the bar at the bottom is thinner, etc... Maybe spacing/padding could be adjusted accordingly to compensate? EDIT: forgot to mention I'm on Wayland and it doesn't seem to be related to display scaling as I saw the same issue whether on 1x or 1.25x scaling

krig commented 2026年05月31日 08:24:08 +02:00

Hi!

I think main annoyance is that panel font size and buffer font size are not the same when set to the same point size. If we could fix that without changing the baseline the UI would probably look better..

Hi! I think main annoyance is that panel font size and buffer font size are not the same when set to the same point size. If we could fix that without changing the baseline the UI would probably look better..

al20ov commented 2026年05月31日 18:45:22 +02:00

I see, as I understand it, PR #69 fixed that mismatch correct? Now UI/panel and buffer font sizes are the same pt size. The remaining issue though is that the baseline (so line height?) is now wrong because it was based on the previous wrong assumption about font size?
I'm not too familiar with Rust but I could give it shot if I knew where to look.

Maybe in crates/ui/src/styles/spacing.rs, crates/project_panel/src/project_panel.rs or crates/ui/src/components/list/list_item.rs?

I see, as I understand it, PR #69 fixed that mismatch correct? Now UI/panel and buffer font sizes are the same pt size. The remaining issue though is that the baseline (so line height?) is now wrong because it was based on the previous wrong assumption about font size? I'm not too familiar with Rust but I could give it shot if I knew where to look. Maybe in `crates/ui/src/styles/spacing.rs`, `crates/project_panel/src/project_panel.rs` or `crates/ui/src/components/list/list_item.rs`?

al20ov commented 2026年05月31日 20:19:30 +02:00

Okay I'm onto something I think, the map(|this| match self.spacing) in crates/ui/src/components/list/list_item.rs has four mappings from ListItemSpacings to Y padding values and I believe the first one (Dense) corresponds to what I use which is "Comfortable" and by changing that from just this to this.py_0p5(), I get the exact same baseline with 14pt UI font size as I do on Zed on 16pt UI font size.

Without this change:
image

With this change:
image

This is probably not the exact change that needs to be made though because it just fixes it in list_items but not buttons, etc... which still look wrong:

image

vs.
image

Okay I'm onto something I think, the map(|this| match self.spacing) in `crates/ui/src/components/list/list_item.rs` has four mappings from ListItemSpacings to Y padding values and I believe the first one (Dense) corresponds to what I use which is "Comfortable" and by changing that from just `this` to `this.py_0p5()`, I get the exact same baseline with 14pt UI font size as I do on Zed on 16pt UI font size. Without this change:  With this change:  This is probably not the exact change that needs to be made though because it just fixes it in `list_items` but not buttons, etc... which still look wrong:  vs. 

krig commented 2026年06月05日 15:53:04 +02:00

I think it's probably crates/ui/src/styles/spacing.rs that needs to be adjusted. Will experiment and see if I can get it to look decent.

I think it's probably `crates/ui/src/styles/spacing.rs` that needs to be adjusted. Will experiment and see if I can get it to look decent.

krig commented 2026年06月05日 21:27:15 +02:00

OK, I made some changes and feel like things look better now.

OK, I made some changes and feel like things look better now.

al20ov commented 2026年06月05日 21:52:34 +02:00

Thanks. I just checked it out, ran a build and it looks a bit more balanced but it's still pretty tight even on "entry_spacing": "comfortable":
image

I guess it's just personal preference though.

Thanks. I just checked it out, ran a build and it looks a bit more balanced but it's still pretty tight even on `"entry_spacing": "comfortable"`:  I guess it's just personal preference though.

al20ov commented 2026年06月05日 22:05:13 +02:00

I played around with crates/theme/src/settings.rs and crates/ui/src/styles/typography.rs by basing everything on units.rs's BASE_REM_SIZE_IN_PX of 16px, which gets scaled up or down as needed by window manager scaling factor, etc...:

diff --git a/crates/theme/src/settings.rs b/crates/theme/src/settings.rs
index de5bf3a136..9a37d1922b 100644
--- a/crates/theme/src/settings.rs
+++ b/crates/theme/src/settings.rs
@@ -580,13 +580,12 @@ pub fn reset_buffer_font_size(cx: &mut App) {
 // TODO: Make private, change usages to use `get_ui_font_size` instead.
 #[allow(missing_docs)]
 pub fn setup_ui_font(window: &mut Window, cx: &mut App) -> gpui::Font {
- let (ui_font, ui_font_size) = {
+ let ui_font = {
 let theme_settings = ThemeSettings::get_global(cx);
- let font = theme_settings.ui_font.clone();
- (font, theme_settings.ui_font_size(cx))
+ theme_settings.ui_font.clone()
 };
 
- window.set_rem_size(ui_font_size);
+ window.set_rem_size(px(16.));
 ui_font
 }
 
diff --git a/crates/ui/src/styles/typography.rs b/crates/ui/src/styles/typography.rs
index f8ee37f120..16a048a6fb 100644
--- a/crates/ui/src/styles/typography.rs
+++ b/crates/ui/src/styles/typography.rs
@@ -136,10 +136,10 @@ impl TextSize {
 let theme_settings = ThemeSettings::get_global(cx);
 
 match self {
- Self::Large => rems_from_px(18.),
- Self::Default => rems_from_px(16.),
- Self::Small => rems_from_px(14.),
- Self::XSmall => rems_from_px(12.),
+ Self::Large => rems_from_px(theme_settings.ui_font_size(cx) + px(2.)),
+ Self::Default => rems_from_px(theme_settings.ui_font_size(cx)),
+ Self::Small => rems_from_px(theme_settings.ui_font_size(cx) - px(2.)),
+ Self::XSmall => rems_from_px(theme_settings.ui_font_size(cx) - px(4.)),
 Self::Ui => rems_from_px(theme_settings.ui_font_size(cx)),
 Self::Editor => rems_from_px(theme_settings.buffer_font_size(cx)),
 }
@@ -149,10 +149,10 @@ impl TextSize {
 let theme_settings = ThemeSettings::get_global(cx);
 
 match self {
- Self::Large => px(16.),
- Self::Default => px(14.),
- Self::Small => px(12.),
- Self::XSmall => px(10.),
+ Self::Large => theme_settings.ui_font_size(cx) + px(2.),
+ Self::Default => theme_settings.ui_font_size(cx),
+ Self::Small => theme_settings.ui_font_size(cx) - px(2.),
+ Self::XSmall => theme_settings.ui_font_size(cx) - px(4.),
 Self::Ui => theme_settings.ui_font_size(cx),
 Self::Editor => theme_settings.buffer_font_size(cx),
 }

And ended up with something that looks like the way it did before #69, except now on a reasonable UI font size, which #69 fixed:

image

I played around with `crates/theme/src/settings.rs` and `crates/ui/src/styles/typography.rs` by basing everything on units.rs's BASE_REM_SIZE_IN_PX of 16px, which gets scaled up or down as needed by window manager scaling factor, etc...: ```diff diff --git a/crates/theme/src/settings.rs b/crates/theme/src/settings.rs index de5bf3a136..9a37d1922b 100644 --- a/crates/theme/src/settings.rs +++ b/crates/theme/src/settings.rs @@ -580,13 +580,12 @@ pub fn reset_buffer_font_size(cx: &mut App) { // TODO: Make private, change usages to use `get_ui_font_size` instead. #[allow(missing_docs)] pub fn setup_ui_font(window: &mut Window, cx: &mut App) -> gpui::Font { - let (ui_font, ui_font_size) = { + let ui_font = { let theme_settings = ThemeSettings::get_global(cx); - let font = theme_settings.ui_font.clone(); - (font, theme_settings.ui_font_size(cx)) + theme_settings.ui_font.clone() }; - window.set_rem_size(ui_font_size); + window.set_rem_size(px(16.)); ui_font } diff --git a/crates/ui/src/styles/typography.rs b/crates/ui/src/styles/typography.rs index f8ee37f120..16a048a6fb 100644 --- a/crates/ui/src/styles/typography.rs +++ b/crates/ui/src/styles/typography.rs @@ -136,10 +136,10 @@ impl TextSize { let theme_settings = ThemeSettings::get_global(cx); match self { - Self::Large => rems_from_px(18.), - Self::Default => rems_from_px(16.), - Self::Small => rems_from_px(14.), - Self::XSmall => rems_from_px(12.), + Self::Large => rems_from_px(theme_settings.ui_font_size(cx) + px(2.)), + Self::Default => rems_from_px(theme_settings.ui_font_size(cx)), + Self::Small => rems_from_px(theme_settings.ui_font_size(cx) - px(2.)), + Self::XSmall => rems_from_px(theme_settings.ui_font_size(cx) - px(4.)), Self::Ui => rems_from_px(theme_settings.ui_font_size(cx)), Self::Editor => rems_from_px(theme_settings.buffer_font_size(cx)), } @@ -149,10 +149,10 @@ impl TextSize { let theme_settings = ThemeSettings::get_global(cx); match self { - Self::Large => px(16.), - Self::Default => px(14.), - Self::Small => px(12.), - Self::XSmall => px(10.), + Self::Large => theme_settings.ui_font_size(cx) + px(2.), + Self::Default => theme_settings.ui_font_size(cx), + Self::Small => theme_settings.ui_font_size(cx) - px(2.), + Self::XSmall => theme_settings.ui_font_size(cx) - px(4.), Self::Ui => theme_settings.ui_font_size(cx), Self::Editor => theme_settings.buffer_font_size(cx), } ``` And ended up with something that looks like the way it did before #69, except now on a reasonable UI font size, which #69 fixed: 

krig commented 2026年06月05日 23:41:29 +02:00

@al20ov Nice! I think it's going to be a series of fixing things here and there to get it looking good everywhere, but that sounds good. I would merge a PR if you made one :)

@al20ov Nice! I think it's going to be a series of fixing things here and there to get it looking good everywhere, but that sounds good. I would merge a PR if you made one :)

krig commented 2026年06月05日 23:48:24 +02:00

Interesting how that works, I would have thought your patch would cause a lot of breakage in other font sizes..

Interesting how that works, I would have thought your patch would cause a lot of breakage in other font sizes..

krig commented 2026年06月05日 23:58:57 +02:00

Hmm yeah, at least trying to add your changes on top of the changes that I made just now results in a lot of brokenness. It's very airy, but some text becomes very large (in the settings UI in particular). I'll try and see if making the headline sizes relative to the ui font size as well fixes things.

Hmm yeah, at least trying to add your changes on top of the changes that I made just now results in a lot of brokenness. It's very airy, but some text becomes very large (in the settings UI in particular). I'll try and see if making the headline sizes relative to the ui font size as well fixes things.

al20ov commented 2026年06月06日 00:03:17 +02:00

Yes sorry I tried these changes before #321. I'm sure there's a way to reconcile though if you think these changes are worth something. Also I tried bringing in BASE_REM_SIZE_IN_PX (16px) by importing the ui crate inside the theme crate but there was a circular dependency

Yes sorry I tried these changes before #321. I'm sure there's a way to reconcile though if you think these changes are worth something. Also I tried bringing in `BASE_REM_SIZE_IN_PX` (16px) by importing the ui crate inside the theme crate but there was a circular dependency

krig commented 2026年06月06日 00:12:38 +02:00

@al20ov No worries, I guess my changes interact badly with yours. I can try reverting mine and applying yours here and see how that looks..

@al20ov No worries, I guess my changes interact badly with yours. I can try reverting mine and applying yours here and see how that looks..

krig commented 2026年06月06日 00:32:09 +02:00

Hm. So I have the same problem when I try reverting my changes and just applying your patch. Some font sizes seem to no longer change when the ui font size changes, like the search field in the settings window for example. I also feel like things get very airy in general. My guess is that the line height no longer adjusts to the ui font size..

Hm. So I have the same problem when I try reverting my changes and just applying your patch. Some font sizes seem to no longer change when the ui font size changes, like the search field in the settings window for example. I also feel like things get very airy in general. My guess is that the line height no longer adjusts to the ui font size..

al20ov commented 2026年06月06日 00:47:12 +02:00

I guess you're right, I just tried bumping the UI font size and the UI only looks correct at 14pt with my change but other sizes don't look right. I'll keep searching and tell you if I come up with anything. Thanks for taking the time to try it out

I guess you're right, I just tried bumping the UI font size and the UI only looks correct at 14pt with my change but other sizes don't look right. I'll keep searching and tell you if I come up with anything. Thanks for taking the time to try it out

krig commented 2026年06月06日 00:53:16 +02:00

I guess the problem is that a lot of the spacing is based on the combination of the base size (16px) and the default UI font size (14px), and when changing one but not the other all those spacings get tighter. I suspect there's no easier fix to get it right than to go through the UI and adjust the spacings to bump them up a size..

I guess the problem is that a lot of the spacing is based on the combination of the base size (16px) and the default UI font size (14px), and when changing one but not the other all those spacings get tighter. I suspect there's no easier fix to get it right than to go through the UI and adjust the spacings to bump them up a size..