web: default to system font

@vitalyster

this is obviously personal preference, but i far prefer a monospace font. right now, we hard-code the following font family:

font-family: Roboto, Helvetica, Arial, sans-serif;

I think we could default to the system's system-ui font instead of hard-coding this family. that is, replace it with:

font-family: system-ui;

system-ui was suggested by @vitalyster; this is superior to my initial suggestion of monospace

Please use system-ui font, not monospace. It may sounds like 1337 h4x0r use monospace fonts, but it will be too hard for others.

i haven't done any real FE work for more than a decade, and had no clue system-ui existed. seems like a reasonable default to me!

relevant: w3c/csswg-drafts#3658

perhaps system-ui is not ideal.

@sudoforge

@sudoforge just copy "system font stack" hacks from Github or any other site and you are done

@vitalyster

@vitalyster the intent of that suggestion is understood and fine, but i want to point out that the actual implementation of that would not achieve the goal.

using your example of github, we see:

# the winning declaration for your comment
.markdown-body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
}


# further up the stack
body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
}


# different variables are defined, but none of these would achieve
# the goal of "using the system font" to enable both you and i to
# have a monospace and non-monospace font rendered in the web ui.
:root {
  --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --fontStack-sansSerifDisplay: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

what we really need is support for letting the user pick.

The issue is already split into parts:

read the default font from the system (that is what system-ui + older system font stack do)
allow user to pick different font (most likely nobody will pick another font if you correctly pick the system one)

that's a fair observation; this really should be two issues (and is): #1452

i was just pointing out that there wasn't a "one size fits all" way to implement support for the desired outcome here.

I'm just pointing out that when user asks "please allow to change font" it means "your default font is wrong" :) If you will set up system font stack nobody will complain about wrong font and will not try to change it (because user can always change default font in the browser itself)

because user can always change default font in the browser itself

yes, but for context:

my default system font is monospace, and is explicitly set as such for every family
my browser delegates to my system font
github's UI does not display my system font

so, i'm not convinced that "copying what github does" is actually a solution.

Github does not use system-ui alias for your configured font (unless you are on Safari with -apple-system alias), they use old solution. My first suggestion is to use system-ui, it should pick up your font.
However if it still(?) has issues in some browsers (is it actually have? Maybe issues come from 2019 and already solved?) then better to use "GitHub solution" + allow to pick font.

My first suggestion is to use system-ui, it should pick up your font.
However if it still(?) has issues in some browsers (is it actually have? Maybe issues come from 2019 and already solved?)

i did a cursory search before posting the issue here and saw recent complaints of the same; and if we look at that issue, there's activity from the past year.

better touse "GitHub solution" + allow to pick font

yep, i think this is what we're going to have to do. so, this issue will track the refactoring for defining a better default font family, and #1452 will track the feature request for making it configurable.

Navigation Menu

Repository navigation

web: default to system font #1438

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

web: default to system font #1438

Description

Activity

vitalyster commented on May 19, 2025

sudoforge commented on May 19, 2025

sudoforge commented on May 19, 2025

vitalyster commented on May 19, 2025

sudoforge commented on May 19, 2025

vitalyster commented on May 19, 2025

sudoforge commented on May 19, 2025

sudoforge commented on May 19, 2025

vitalyster commented on May 19, 2025

sudoforge commented on May 19, 2025

vitalyster commented on May 19, 2025

sudoforge commented on May 19, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions