Font size differences / too small fonts / zooming

[jkbzh]

Describe the issue
There is a big difference in fonts sizes. Headers are very big, while description of articles are very small and makes it hard to read for me.

Trying to zoom-up to readjust sizes doesn't apply equally to all the fonts. In addition, when
zooming, as there is a fixed viewport, the proportions of what is displayed and the space stay fixed and displayed data spreads out vertically, making it harder to see.

The text in buttons is hardly affected when zooming up.

URL.
See attached annotated screenshot of a demo of the use of the style on mailing lists. But same comments re: font size and zoming apply to the main page.

Recommended solution
Either font-sizes that are not so far apart and that can be reactive to zoom, or alternative style-sheets that are more adequate to visually impaired people.

An alternative stylesheet that has
A clear description of how you think the design system should be updated.

[gosko]

@jkbzh I notice the fonts in your screenshot are not the ones I see on my MacOS system. Maybe there is an issue with downloaded fonts on Linux? The downloaded fonts (Noto Sans) are more readable.

I attached screenshots of the public mailing list archive page at 100% zoom and 133% zoom in Firefox, and at 133% the fonts all seemed zoomed about how I would expect. (and firefox dev tools inspector confirms the sizes of headings and regular text are each 33% bigger, as expected)

In my opinion the remaining issue with this page is the large difference in font sizes between the headings and the regular text, tracked as issue #641.

[jkbzh]

@gosko no. There's no problem with the fonts being downloaded. It's still the font-size property that's too small. Just see in your 133% the size of subscribe text, the size of the text under the name of the the lists, and the size of the nav crumbles on top. That is too small. With the inspector I can see that the fonts in the buttons that are too small are using font-size: 0.875rem. Even while zooming they are too small and when you zoom to a more comfortable size, the rest of the text blows up so much it makes reading and understanding the page too much.

For the cookie crumbles, they are small, even if they are using font-size: 1rem. Somehow the way these values were chosen are interfering with zoom. Would be interested to know how the 0.857rem was chosen. It's just too small for me and I'd guess for other people too.

[gosko]

@gosko no. There's no problem with the fonts being downloaded.

Then why do the fonts look different in your screenshot? That doesn't look like Noto Sans, and I find the fonts in your screenshot harder to read compared to mine.

It's still the font-size property that's too small. Just see in your 133% the size of subscribe text, the size of the text under the name of the the lists, and the size of the nav crumbles on top. That is too small.

The size of the text under the name of the lists is 1rem, and my browser font size is set to 16, and when I zoom to 133% firefox shows the computed font size as 21.28px. So the zooming is working as expected.

The sub/unsub buttons use 0.875rem which is on the small side but seems OK to me.

The breadcrumbs use 0.9375rem which seems appropriate to me.

In general I think most text on any given web page should be 1rem, with small deviations up or down to emphasize or de-emphasize things.

With the inspector I can see that the fonts in the buttons that are too small are using font-size: 0.875rem. Even while zooming they are too small and when you zoom to a more comfortable size, the rest of the text blows up so much it makes reading and understanding the page too much.

Yes, I think that's the main issue, that the headings are too big.

For the cookie crumbles, they are small, even if they are using font-size: 1rem. Somehow the way these values were chosen are interfering with zoom. Would be interested to know how the 0.857rem was chosen. It's just too small for me and I'd guess for other people too.

I remember seeing one other issue about an idiosyncrasy caused by the font sizes on buttons, otherwise I don't think there have been many complaints about the font sizes being too small.

[NicolaSaunders]

I have been discussing this with one of our designers. Here's a summary of their thoughts:

---

• There seems to be a font loading issue on the reporters machine, so we can't replicate the exact issue as the user experienced it
• The feeling of the fonts being too small and there being too much whitespace is subjective.
• Whitespace is needed to separate the areas of content on the page.
• Generally, having a generous amount of whitespace is less tiring for users scanning and reading the page, while making the hierarchy and areas of interaction clearer – this balance is a compromise across users not an absolute.
• The separate issue of whether the heading sizes are too large is mentioned here again, and we plan to review this.