Body text is far too large due to resolution query abuse

[chris-morgan]

svelte.dev/packages/site-kit/src/lib/styles/tokens/typography.css

Lines 36 to 40 in 926b033

	@media (min-resolution: 1.75x) {
	--sk-font-family-body: 'EB Garamond', Georgia, serif;
	--sk-font-size-body: 2.2rem;
	--sk-font-size-body-small: 2rem;
	}

This is bad, an unambiguous abuse of a resolution query. The font-family thing, adding EB Garamond… well, although that’s definitely an abuse, it’s at least a tad understandable.

But changing the font size in such a query causes real trouble.

To begin with, 22px is way too large for body text, regardless of device (though I’m on a laptop). My rule of thumb is: at mobile sizes, stick to 16px; by large screen sizes, prefer to cap it at 18px, and never beyond 20px.

The default of 18px, then, I say is fine (though I recommend shrinking it on smaller viewports), but 22px is not.

And I can’t even use page zoom properly: with a 2× display, at 90%, it amounts to 19.8px (still a little uncomfortably large), but then at 80% the resolution query no longer matches, so it’s 80% of 18px, which is 14.4px (definitely too small).

This is a clear abuse of resolution detection. The size part at a minimum should simply be removed, to begin with, though there are some slight alternatives. About the font as a whole, I say that if you’re not happy with EB Garamond, don’t try to use it. If, for example, you think it’s too slender on some platforms at lower resolutions¹, just don’t use it, because it will certainly be unpleasant for others in other cases that you haven’t accounted for.² If you feel its metrics as a whole are too much smaller than the likely fallback fonts³ so that it looks smaller, use size-adjust to compensate. But even if you continue to change the font so, please don’t change font-size, that’s bad bad bad.

(For my part, I have font choice disabled in Firefox, so I see it in my chosen serif. Trying it in Chromium so I can see it with EB Garamond as intended reminds me why I started doing that almost five years ago, it makes the web so much better…)

—⁂—

¹ I think it is. Needs a 450 or so. Hmm, https://github.com/octaviopardo/EBGaramond12/tree/master/fonts/variable, interesting.

² Aside: Computer Modern, the default TeX font, is the worst popular font. It’s tolerable in print, but atrocious on screen, never pleasant and genuinely practically illegible in some common environments like cheap Windows machines with poor gamma and certain text rendering.

³ They definitely are.

[chris-morgan]

Auto-closing issues is extremely user-hostile and project-hostile—this shouldn’t be a work tracker but an issue tracker. Sure, this particular one didn’t get any activity in six months, but that doesn’t mean it’s not a real issue.

Please, turn off auto-closing. It makes everyone’s life worse.