flatpak layout & font size

ne20002 commented 1 month ago

Explain what happens

I installed the flatpak (version 320) on Linux Mint 22
The size of the fonts and the layout are much larger than other apps in Linux Mint 22

Is there any way to adjust the font size and layout size for the flatpak?

Version of Cockpit

320 flatpak

Where is the problem in Cockpit?

None

Server operating system

None

Server operating system version

No response

What browsers are you using?

Firefox

System log

No response

garrett commented 1 month ago

Could you provide a screenshot?

You mention Firefox and flatpak... If you mean Cockpit Client, which is a flatpak, that uses WebKit. If you mean Firefox, then that doesn't have anything to do with a flatpak (although Firefox is a flatpak on Flathub).

Have you tried holding down ctrl and pressing 0 to rest the font size? Or holding down ctrl and pressing either - or + (= would work without shift; it's the same key in most layouts).

BTW: Fonts are basically the same size in Cockpit Client as everything else here on GNOME on Fedora. (I say basically, as different fonts have different heights, so the font family used in Cockpit may differ than other fonts by a few pixels here or there. This is true of all fonts though; there is no sizing standard.)

ne20002 commented 4 weeks ago

Sure. I mean the Cockpit Client. Here are some screenshots showning sizes:

grafik

Changing site with Ctrl +/- does work in the browser, but is not necessary as font size is ok. Size in the flatpak app is quite big. Compared to the size in the browser (default) the size in the flatpak is a bit more than 120%.

garrett commented 4 weeks ago

If we compare the font size of the data in the cards of the overview to the text of the icons on your desktop, aligning them to the side of each other and draw lines from the baseline, the mean line (x-height), and cap lines, you can see that even though these are different sans serif typefaces, the baseline and meanline are exactly the same, with the cap line being just 1 pixel off for the Us (which is within expected deviations for fonts, as there isn't a standard "size" for fonts), but exactly the same for the ascender height (comparing the top U of Cockpit and b of your desktop icon's label).

comparison of Cockpit vs. desktop icons

Diagram showing typographical terms used for measurement, specific to each typeface:

Typography_Line_Terms

(From https://en.wikipedia.org/wiki/Typeface_anatomy)

So the font rendering is pretty much the same between your desktop and Cockpit Client, for some of the text. The difference is when are the larger headings and some other widgets, which is normal practice and this is what most design systems do, including PatternFly, which is what Cockpit uses as a interface library: https://www.patternfly.org/design-foundations/typography

The goal of having headings be larger than body text is to make them scannable, meaning that you can quickly find the information you're looking for, narrowing down on the section more easily. Most websites do this (even GitHub as you can see here), as well as many apps (I see varied font sizes for headings and other widgetry in Element, Slack, and Signal right now — even Firefox does this too, when you get into UI like the settings).

Also, this is just comparing the font size of the information in the overview cards.

Note: PatternFly is working on version 6, which does change font sizing in various ways, and that will eventually affect Cockpit when we upgrade to it.

Meanwhile, Cockpit and PatternFly need to have font sizes that are close to typical computer environments and are legible for everyone, including people who need glasses, have migraines, and are older as well. We cannot make the font size tiny for everyone, else that would be a major accessibility problem for most people.

However, I wonder if there's a way to determine the font size from Cockpit Client and reflect that more accurately in the UI for smaller fonts. That would require some work, on the other hand... and for not much gain, as we'd have to determine the font size and adjust the variables and make sure it works everywhere as intended, and it would differ from the way browsers handle font sizing too.

ne20002 commented 4 weeks ago

I understand the intention of font sizes, but still: the sizes are different and as long as there is no way to adjust the sizes in the cockpit client to something 'normal' following my system standard, the cockpit client just because of the size looks ... ugly.

Cockpit client: grafik