Font does not make for a good reading experience

[finkrer]

trafficstars

The problem

The main font used for the documentation is Overpass Light (font-weight: 300). This is in contrast to most other websites that use font-weight: 400.

Light fonts don't help readability, as indicated by research.

Now, I understand that this weight might have been chosen because of the way macOS renders fonts. However, this is not the case for other OSes, and people who disabled font smoothing on macOS. As a result, the body text is just too light and not very legible, just compare Svelte's and React's homepage.

Examples

Svelte:

React:

This is even more noticeable on colorful backgrounds:

These elements are not very readable, and, in fact, break the WCAG contrast guidelines.

Possible solutions

I think it's necessary to at least use the normal Overpass font with font-weight: 400.

[benmccann]

I think it's necessary to at least use the normal Overpass font with font-weight: 400.

I don't notice any difference until I set font-weight: 600

[finkrer]

Hi Ben, thanks for replying.

This is because only weights 300 and 600 are defined in CSS, as you can see here. https://github.com/sveltejs/sites/blob/828d5284dc7ae651ebe496b15adcca8876efe69d/packages/site-kit/src/lib/base.css#L74-L91

In fact, the site is already set to font-weight: 400. https://github.com/sveltejs/sites/blob/828d5284dc7ae651ebe496b15adcca8876efe69d/packages/site-kit/src/lib/base.css#L143-L150

It's just that weight 400 isn't defined, and so the browser defaults to the closest one.

Essentially, the fix would be adding the following CSS:

/* overpass-400normal - latin */
@font-face {
	font-family: 'Overpass';
	font-style: normal;
	font-weight: 400;
	src: local('Overpass Regular '), local('Overpass-Regular'),
		url('./fonts/overpass/overpass-latin-400.woff2') format('woff2');
}

Even the font file is already there.