linux-store-frontend
linux-store-frontend copied to clipboard
flathub-infra
WIP: Improve readability of app descriptions
I made this change quite some time ago, I thought I’d work on it more but never actually found the time to do so, but I’m posting it here to get the discussion going at least because I think the typography on flathub.org is tiny, which makes it look quite bad on low-resolution displays.
From the commit message:
This should hopefully make the descriptions more attractive to read.
Enlarge the point size a bit and slightly turn down the contrast (colour borrowed from GitHub, cheers) to make it a bit more pleasant to read. Also turn off justifying, since we don’t have hyphenation, to prevent the text from getting too spaced out at times, and shrink the leading a wee bit to give it a more cohesive feel.
Hi. Thanks for contributing again to Flathub!
I agree it's a bit tiny but I took as a reference Google Play, where fonts are also quite little (font size 14). Github also seems so use the same font size (and smaller for some buttons and navigation)
These are the top10 display resolutions according to Google Analytics 33% since the beginning of the year:
| Resolution | % |
|---|---|
| 1920x1080 | 33.33% |
| 1366x768 | 22.69% |
| 1600x900 | 4.30% |
| 800x600 | 3.98% |
| 2560x1440 | 2.91% |
| 1440x900 | 2.79% |
| 1280x800 | 2.52% |
| 1920x1200 | 2.40% |
| 1680x1050 | 2.36% |
| 1280x1024 | 2.07% |
Your patch makes the description more readable, but I'm not so sure about merging it yet because now there is a mix different fonts sizes in the page. Maybe we should revisit the hole app details page...
Oh, of course, don’t merge it! This patch is just a proof-of-concept.
TBH, I think the fonts could use a 2px bump site-wide, but that was biting off more than I could chew, hence this PR. I’ll gladly help though, at least with the design.
Ouch, yeah, the Google Play fonts are not too nice to read… let’s not go down that route. GitHub uses bold text on most buttons though, that helps a lot.
Also, I think the headers could be significantly larger. It’s a shame to keep them so tiny, it makes them look too pixelated on low-resolution displays (like mine). It’s a too good-looking font for that. :slightly_smiling_face: It also helps a bit with the visual heirarchy.
E.g. this is the <h3> tag bumped to 150% (on top of this patch):
What do you think?