[omnisite docs] Contrast and font - terrible for my eyesight

[lukaszpolowczyk]

Describe the problem

"My astigmatism cannot be corrected with glasses, which results in my vision looking like this (while wearing glasses): image (double and shifted image. I see this way even when looking with one eye, it's not a squint, but rather astigmatism)

It’s worst with strong contrast, deep blacks, and bright text.

But the font is equally important. The more elaborate the font, the worse it gets.

Not only is it hard for me to read, but I actually feel discomfort and want to leave the site that has such contrast and font settings.

Light side mode is just... too bright. I don't want to use light mode anywhere, it's an unwanted compulsion in some places, but I avoid light mode.

It's disappointing because the previous version of the site had contrast and fonts that were very comfortable for me."

Describe the proposed solution

Many websites are very well designed for my visual impairment (consciously or unconsciously), e.g.:

This Github style

ChatGPT

YouTube

This Twitter style

Facebook

Old Svelte documentation

And many more.

Importance

would make my life easier

[gterras]

The font choice could probably be a toggle like for dark/light theme.

[vladshcherbin]

Would absolutely love to have headings in serif and the rest in sans-serif 🙌

[Whateverinc]

This is how I have customized mine.

[codercms]

Modifying page's CSS to use font-family: system-ui makes it much more readable for me

--sk-font-family-ui: system-ui;
--sk-font-family-body: system-ui;
--sk-font-family-heading: system-ui;

[gusutabopb]

+1 for being able easily switch back to sans-serif fonts.

[mjdNjhNJ]

I appreaciate a refresh of the website since this major version is significant for the future of the framework. However, it seems to me it has been rushed.

For example:

1. The button to get started is easy to overlook.

   

2. Why are the charts black and white if they reference to something that is not old or deprecated?

   

3. List of companies using Svelte looks nice on the desktop but on the mobile the logos strip looks weird:

   

4. The actual font used in documentation, as metioned in this issue. It's a lot harder to read. If you compare it with the Nuxt docs, the Svelte ones are much harder to read.

Overall, I'm super glad Svelte 5 is finally out, but the new website definitely needs a bit of work before going into the production.

[lukaszpolowczyk]

@codercms Your style (both the font and the colors) is a huge improvement.

[hichemfantar]

I agree, my eyes are begging me to leave the site. The entire site should be in non serif fonts, documentation should be built for practicality not aesthetic.

Look at the react site where the font is reasonably sized and perfectly built for readability.

Imagine using times new roman in vscode, that's my experience with the new docs.

I beg the team to learn from other projects like Docusaurus, React.dev, VitePress... There's no need to reinvent the wheel when it comes to documentation. We have standards for a reason.

This is pretty much the equivalent of the new svelte font in vscode Imagine having to read through hours of technical content with this font on a computer screen

[mary-ext]

This is literally awful, I can't even override this easily.

svelte-omnisite.vercel.app##body:style(font-family: sans-serif !important) doesn't work, because the font-family are being set in each individual component

svelte-omnisite.vercel.app##body:style(--sk-font-family-ui: sans-serif; --sk-font-family-body: sans-serif; --sk-font-family-heading: sans-serif; --sk-font-family-mono: monospace) this one also doesn't work, because for whatever reason it just doesn't, it doesn't work if I put the override on :root either.

Please, consider making it easier to change at the very least. Set font-family on where it actually matters like body for whole-app font and code/pre for monospace, don't do it on individual elements where someone would have to manually change them one by one just to get something that is actually readable for them. Make it possible for someone to use the fonts that they've already set on their browser, or make it easy to override with basic CSS rules.

[utkarshkukreti]

@mary-ext setting the variables on html works for me:

svelte-omnisite.vercel.app##html:style(--sk-font-family-body: Fira Sans !important; --sk-font-family-heading: Fira Sans !important;)

(Fira Sans is already used for UI so I just set it to be used for body and headings too.)

[mary-ext]

Ahh right yeah that seems to work, cheers

[gusutabopb]

For the record I'm using this browser extension called Stylebot with the following config:

:root {
  --sk-font-family-body: "Fira Sans";
  --sk-font-size-body: 1.7rem;
  --sk-font-size-body-small: 1.4em;
}

Replacing "Fira Sans" with system-ui works too.

[saadeghi]

I was excited for the launch but today I couldn't even finish reading the Svelte 5 announcement blog post. This font is not a good decision.

[Whateverinc]

This is my recipe:

    /*change the p, ol, and ul font family to the system font or Verdana*/
    :root {
        --sk-font-family-body: system-ui, 'Verdana';
    }

    /*make the small code blocks bigger and give them a white color*/
    .text.svelte-zj4hfh code:not(pre *) {
        color: white;
        font-size: 11pt;
    }

    /*add a white hover to the side nav links*/
    a.svelte-s0ea8g:hover {
        color: white
    }

    /*Make side nav links current page svelte orange*/
    [aria-current="page"].svelte-s0ea8g {
        color: var(--sk-theme-1)!important;
    }

[msikma]

The font choice could probably be a toggle like for dark/light theme.

I don't believe this is the right way to go about it. I think there's a couple of downsides to this approach:

• New users won't know there is a toggle, because it won't be particularly obvious. Very few sites have a serif/sans serif toggle.
• Even if you add the toggle, this just changes the discussion to "which font should be the default?", and once you've decided that one of the two is better it makes no sense to have a toggle for a less readable option.

Aside from that, I feel it's better to just discuss and come to a conclusion on things like this, rather than adding options and saying "the user can decide on their own."

[gterras]

I don't believe this is the right way to go about it. I think there's a couple of downsides to this approach:

Aside from that, I feel it's better to just discuss and come to a conclusion on things like this, rather than adding options and saying "the user can decide on their own."

Indeed there is a couple a downsides to this approach, which is taking into account that the BDFL has fixed something that wasn't broken in the first place and that literally no one asked for. So in this way every approach that is not reverting to common practices will have downsides for at least someone.

the discussion to "which font should be the default?"

This discussion never happened until now so it's safe to assume which one should be the default (or the single choice).

To quote someone, though I don't remember who :

"Cute features are never a good idea".

[saminton]

While the Serif vs Sans-serif debate is an age-old question and largely a matter of personal preference, there are some guidelines for when to choose one over the other.

For anyone who has delved even slightly into typography, you’ll know that some fonts are better suited to certain use cases than others.

Sans-serif fonts were designed to be more easily read on screens. While monitors have come a long way, I—like many other developers—am not reading software documentation on a smartphone or a high-DPI monitor. I have a standard pixel density of 92 PPI.

At this pixel density, small Sans-serif fonts are legitimately more readable. Serif fonts have more detail and nuance, which becomes harder to discern due to the low pixel count.

As others have mentioned, no code editor uses a Serif font—and for good reason. I want to find what I’m searching for as quickly as possible, not for it to look aesthetically pleasing. Software documentation follows the same principles. I’m not reading a blog post where I can take my time, I’m trying to do my job, and the choice of font is making my—and others—life harder.

This is not a discussion about design or personal preference but one about accessibility. If you have any respect for accessibility, which you should have, then the body font should be switched to Sans-serif.

The significance of typography is frequently underestimated, but any serious designer should be well aware of its value.

[brunnerh]

I would also like to point out that the theme really matters.

The bright areas on a screen can perceptually cause a glare-like effect. I.e. with a light theme, the bright background eats into the characters and the serifs help the letters keep their corners/shape; with the dark theme, the letters bleed into their surroundings and the serifs just make this worse, almost fusing adjacent letters together.

Rich is a light mode user, so I doubt that he has much of an issue 😅

I took a piece of text and exaggerated the effect using a bit of blur & blending to illustrate what I mean.

[hichemfantar]

@Rich-Harris can you bump this up to high priority please?

[gusutabopb]

Looks like a font switcher is being added in #604

[hichemfantar]

I appreciate the effort but why not have just one good sans serif accessible font 👌

[Rich-Harris]

Thanks everyone for the feedback. A few points:

• I've seen a ton of extremely positive reactions to the serif typeface, including from people with serious design chops. That may seem doubtful here, because people only come to the issue tracker for things they don't like, but as context for any discussion it's important to acknowledge that the reaction in this thread is far from universal.
• Nor is the decision to default to a serif font particularly strange! It's unusual for a software-focused site, to be sure, but for content more broadly it's extremely common to see serifs. The BBC is the most visited news site in the world, and it uses serifs. So do the New York Times, The Guardian, The Washington Post... I could go on. Nor is it a 'legacy media' phenomenon — Medium uses Source Serif Pro, Substack most commonly uses Spectral. Technical content, aside from code snippets (which should of course be monospace), is not different from other forms of prose (have you seen anything published by O'Reilly?).
• There's a claim upthread that sans serif fonts were designed for screens. In fact, sans serifs date back to the 19th century. We did not have screens then.
• Fashion in typography is roughly cyclical, like fashion in just about any other domain, but serifs have been pretty much universal in book publishing for as long as books have been published, precisely because serifs — with their more distinct letterforms — are considered more readable.
• It is true that serifs have historically dominated on screens, because pre-Retina pixel densities weren't up to the task of rendering small details (notwithstanding the fact that Times New Roman has been the default web font more or less since the web existed). This is particularly true on Windows, which for whatever reason (patents? idk) has seemingly never been able to render fonts well as other operating systems, particularly macOS. For that reason, on low resolution screens we replace EB Garamond with Georgia, which trades a little bit of elegance for increased legibility on blockier screens.
• Nowadays, typical screens are much better. Most phone screens have a pixel density comfortably above 300ppi; even a $300 laptop will generally have something north of 150ppi. This gives web designers more freedom than we've historically had.

If you primarily engage with the written word through screens, especially on sites like GitHub and social media, then using a serif typeface might seem like an abuse of that freedom. For others, who look at screens begrudgingly because their work demands it, seeing documentation rendered in something like a Garamond feels like a breath of fresh air. I belong to the latter group, as do many others.

We could just accept that using Inter or Source Sans Pro or system-ui is just what you do when you're building a technical documentation site, and avoid inviting threads like this one by not having any opinions at all. No-one got fired for choosing the lowest common denominator. But the aggregate effect of decisions like that is that the entire web looks the same. I don't accept that.

We have, however, changed a few things since the site was launched:

• we've increased the size of body copy, increased the margin between paragraphs, and shortened the line length
• we've tweaked the contrast between foreground and background
• most significantly: we've added a button in the top right (or bottom right on mobile) that toggles between EB Garamond/Georgia and Atkinson Hyperlegible

If you struggle to read serif type for whatever reason, give it a try and see if it helps.

[brunnerh]

for content more broadly it's extremely common to see serifs. The BBC is the most visited news site in the world, and it uses serifs. So do the New York Times, The Guardian, The Washington Post... I could go on.

All of these sites, and many others like them, do not even have a dark mode — I don't think they serve as good examples of accessibility or web design 😑

[vladshcherbin]

There's a poll in svelte reddit thread from which we can see only 30% of users like the new serif font, not a minority gathered in such github issues.

Honestly, it’s already strange that the highly anticipated Svelte 5 release started with hundreds of developers asking for a font change on a newly redesigned site that had worked perfectly fine for years. And now, we have a font switcher. It almost feels like an April Fool’s joke 😅

[Rich-Harris]

I don't think they serve as good examples of accessibility or web design

BBC News is so committed to accessibility that it maintains a Pidgin language version.

Readership is everything to a news site. If it were found that dark mode and sans-serifs made content more accessible to more people, you would see them falling over themselves to implement them. The fact that they haven't suggests that the numbers don't actually add up. I can believe this — anecdotally, a widespread preference for dark mode is something I've only really seen among techies. The accessibility case for dark mode is frequently overstated — what research exists generally suggests that dark mode is worse for reading comprehension in general, especially if you suffer from astigmatism. (I'm not arguing against dark mode, I'm challenging the suggestion that if a site lacks dark mode it's because it doesn't care about accessibility.)

There's a poll in svelte reddit thread from which we can see only 30% of users like the new serif font

Pretty much every redesign in history has faced a negative initial reaction, especially if it involves a change as jarring as this one. It takes time to adjust; I would ask you to keep an open mind. Moreover, this poll was conducted before the recent changes to improve readability.

Making decisions based on polls is how you turn the world beige.

[Lakelimbo]

It is true that serifs have historically dominated on screens, because pre-Retina pixel densities weren't up to the task of rendering small details (notwithstanding the fact that Times New Roman has been the default web font more or less since the web existed). This is particularly true on Windows, which for whatever reason (patents? idk) has seemingly never been able to render fonts well as other operating systems, particularly macOS. For that reason, on low resolution screens we replace EB Garamond with Georgia, which trades a little bit of elegance for increased legibility on blockier screens.

yeah, on Windows the font antialiasing is done through subpixels, unlike on macOS, iOS/iPad OS, and Android where it's grayscale-based. However, I've seen some reports even on the Svelte Discord server of people with Hi-DPI screens (including a Macbook) saying it was very difficult to read, particularly on dark mode. I think the problem is not that the font is serif per se, but rather that it is too thin for body text, and when the background is darker it creates a very weird effect on my eyes (doesn't happen much on light mode, and I am on Windows).