[HN Gopher] System Font Stack
___________________________________________________________________
System Font Stack
Author : SenHeng
Score : 126 points
Date : 2022-05-28 19:36 UTC (3 hours ago)
(HTM) web link (systemfontstack.com)
(TXT) w3m dump (systemfontstack.com)
| [deleted]
| hk__2 wrote:
| [meta: This should have (2021) in the title.]
|
| If you don't care about having the same font on all devices,
| what's the point of this:
|
| > font-family: -apple-system, BlinkMacSystemFont, avenir next,
| avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto,
| noto, arial, sans-serif;
|
| versus that:
|
| > font-family: sans-serif;
|
| ?
| [deleted]
| Kwpolska wrote:
| The point of the system font stack is that your site's
| typography resembles the typography of the entire platform. It
| might look differently on different platforms, but it matches
| the platform you're on.
|
| Sans-serif will get you ugly fonts, such as Arial on Windows,
| and likely DejaVu Sans or Liberation Sans on Linux.
| TacticalCoder wrote:
| > Sans-serif will get you ugly fonts, such as Arial on
| Windows, and likely DejaVu Sans or Liberation Sans on Linux.
|
| Exactly. I find Liberation Sans very good but I cannot stand
| DejaVu Sans (which is the sans serif font all too often when
| browsing sites from Linux).
| codedokode wrote:
| Using different fonts on different platforms will be a
| problem for design because those fonts have different
| metrics, different character height and different optimal
| line interval, for example.
|
| Also, Arial is not ugly. It looks good on print.
| chrisco255 wrote:
| But you're not on that platform. You're on the browser. And
| short of every other web site adopting this stack (not gonna
| happen), it will just look weird, like an uncanny web site
| trying to look more native without being native at all.
| thrdbndndn wrote:
| You can change Sans-serif to whatever you want with browser
| setting if you hate Arial.
|
| Chrome: https://i.imgur.com/fFnX6hu.png
|
| Firefox: https://i.imgur.com/HDfbeYh.png
|
| You can't do anything (other than using Stylish/Stylus, I
| suppose) if the dev hardcoded the font-family.
| maxloh wrote:
| The actual font rendered as sans-serif can be changed via a
| browser settings. But the system font stack is usually resolved
| to the same font for a given OS.
| eschaton wrote:
| Why not just let the browser use what its developers feel are
| most appropriate for serif, sans serif, and monospaced fonts, and
| avoid specifying specific fonts at all? We're talking about web
| pages, not a magazine.
| kevincox wrote:
| This is exactly my thought. Why make every website specify
| `system-ui` to look nice? Why not just make it the default? I'm
| struggling why we need system-ui, ui-serif, ui-sans-serif...
| When we already have initial, serif, sans-serif...
| SenHeng wrote:
| Because there are pesky things like Corporate Branding and
| designer preferences.
|
| Should we restrict every digital text to Times New Roman only?
| chipotle_coyote wrote:
| Whever font discussions come up on Hacker News, asking a
| question like that is risky, because a lot of people will (at
| least profess to) not only sincerely answer "yes" but be
| very, very insistent that web designers should not be able to
| even _suggest_ the typeface that their pages use. When you
| press them on this point, at least a small subset of them
| will go on to explain why all design is bad and image support
| was probably a mistake.
| ushakov wrote:
| i can't stand Ubuntu's default rounded web font
|
| browser vendors should just include Inter and make it the default
| web font
| tkanarsky wrote:
| I "discovered" this stack through VScode autocomplete when making
| my website several moons ago. It's a huge improvement in
| readability over the default serif font, and not much overhead is
| added!
| api wrote:
| Another benefit: no tracking. Google Fonts and many other font
| hosts use their free service as a way to track people across the
| web.
| ushakov wrote:
| there's a very handy tool, called google webfonts helper, which
| that can download and include google fonts for you
|
| https://google-webfonts-helper.herokuapp.com/fonts
| elondaits wrote:
| Google Fonts are also available through npm to host them
| locally.
| sphars wrote:
| One such set of packages I've used is Fontsource. Has all
| the Google fonts plusany more.
|
| https://fontsource.org/
| vishnumohandas wrote:
| Related story: https://ente.io/blog/tech/system-fonts/
|
| system-ui[1] deserves a mention, but OP's proposal is more
| thorough as it covers the Serif and Mono families.
|
| [1]: https://caniuse.com/font-family-system-ui
| Kwpolska wrote:
| Oddly enough, the page doesn't use the font stack it proposes.
| They moved Segoe UI to the end of the list, before Arial, so
| Windows users who installed Roboto will see Roboto instead.
| anaisbetts wrote:
| Yep, on my Windows 11 machine these fonts are rendering as
| Arial, which is most definitely _not_ the System UI font. I
| would definitely consider an alternative to this stack.
| bufferoverflow wrote:
| I'm actually dealing with the massive font differences that break
| the designs, and I don't know how to solve it. The designer
| specced the fonts that are available on different OSes. Something
| like _font-family: X, Y, sans-serif;_.
|
| The problem is, X and Y have different line heights and different
| widths. And there's no CSS / media query way to detect which font
| is available.
|
| So far I'm leaning towards a very ugly solution: rendering a test
| string into a DIV, measuring it, and then applying the correct
| class to the parent element.
| sjroot wrote:
| Web dev for many years chiming in: please step awayyyyy from
| the ugly solution. As another reply stated, you cannot
| guarantee pixel-perfect decision without sacrificing other
| aspects. It's not something you should strive for at all in
| {current year}.
|
| If you want to align the text vertically with an image, use
| flexbox. If the specific font they want to use doesn't look
| right in that context, have them either (1) deal with it or (2)
| pick another font.
| [deleted]
| SenHeng wrote:
| At some point, you just have to give up and understand that a
| pixel perfect representation of a design is not possible. We're
| not working in print anymore.
|
| I thought something like this would been obvious after 2
| decades of transitioning from print to web design, but I
| sometimes still get complaints for things like widows and
| orphans [0].
|
| 0: https://en.wikipedia.org/wiki/Widows_and_orphans
| kevin_thibedeau wrote:
| Stop trying to enforce pixel perfect control. This is
| equivalent to old school Win32, VB6 GUIs with hardcoded pixel
| positioning of all controls designed to work on a 640x480
| screen. Web technologies are designed to accommodate flexible
| layout. Accepting font rendering differences is part of that.
| bufferoverflow wrote:
| It's not even about being pixel perfect. I can't vertically
| align text with an image. If I align it with one font, the
| other one is misaligned. I need something like media query
| for fonts.
| kevin_thibedeau wrote:
| You just need flexbox or construct an SVG. Let the divs
| size themselves to the font and allow the browser to put
| them where they're told to go.
| jsjohnst wrote:
| > Stop trying to enforce pixel perfect control.
|
| Not the least of which because of text size zooming for
| accessibility. The web is not print!
| elondaits wrote:
| In the past I found slight width differences between Windows
| and Mac that made a text take up a second line. Also, Google
| Fonts sometimes are updated and this can cause letter widths to
| change.
|
| ... My recommendation is not to implement any design that can't
| handle the difference. This will be more robust and better for
| you in the future (e.g. i18n, zoomed fonts for a11y, etc.).
| Whenever I worked implementing a design by someone else and
| there were overly strict assumptions about text size I let them
| know this was a problem and suggested an alternative.
|
| The problem with your proposed solution is that if you're using
| a webfont and measure before it loads, it won't match the width
| once it's replaced. Also, back in the day browsers came with a
| command to increase char size instead of zooming the whole
| page... I no don't know if some still do, or if it happens
| under certain contexts (a11y extensions?) but that would also
| break.
| sings wrote:
| You may be able to override metrics of different fonts with
| CSS, using ascent-override and descent-override and the local()
| function to target a font on the system.
|
| https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/...
|
| I think the other advice here is a little extreme. There is no
| reason not to try to normalise the appearance for all users.
| n0w wrote:
| `system-ui` can be useful on modern browsers and I'm looking
| forward to more browsers adding support for the `ui-*` variants:
| https://caniuse.com/extended-system-fonts
| codedokode wrote:
| No, this is bad because it provides additional signal for
| fingerprinting. I don't like this.
| duskwuff wrote:
| > No, this is bad because it provides additional signal for
| fingerprinting.
|
| Not really. The fonts selected by these font-family values
| should, at most, be dependent on the OS and language of the
| host system -- which are already easy to detect.
| kitsunesoba wrote:
| System font stacks are great what I'd like more are similar
| "magic" values to system-ui that provide reasonably metrics-
| matched local fonts. The biggest reason I use system font stacks
| is not as much to look native as it is to try to have similar
| text metrics across platforms without the overhead and quirks
| brought by webfonts.
|
| The system font does bring some advantages though, like on
| macOS/iOS where that font is San Francisco, it's designed
| specifically to look good and read well on screen. Under WebKit
| you even get hand-tweaked letterforms, metrics, and kerning for
| different combos of size, weight, and context (title, subtitle,
| body, etc).
|
| Something that would be really cool is if all browsers did what
| Apple is doing with San Francisco by shipping with a FOSS screen-
| oriented font like Inter UI[0].
|
| [0]: https://rsms.me/inter/
| CosmicShadow wrote:
| I'm kind of confused as to why they don't have a demo showing all
| the fonts. I'm not just going to blindly pick from system fonts,
| I want to choose which I prefer first. Yeah I could look them all
| up, but just seems like they missed showing off the core thing...
| seanwilson wrote:
| I'm guessing license issues would be a problem. Roboto wouldn't
| be an issue, but I'm pretty sure Microsoft's and Apple's
| default font files require a license to host.
| guerrilla wrote:
| I'm sure a screenshot would suffice
| swyx wrote:
| I collect these things for fun and one of my big discoveries is
| that there's no "standard" system font stacks - here are my list
| of system font stacks and their sources: https://github.com/sw-
| yx/spark-joy/blob/master/README.md#fon...
|
| some of them even come with annotations as to why they make the
| choices they make.
|
| Github's font stack is
|
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
| Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Noto
| Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
| VS Code:
|
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
| Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
| sans-serif
|
| probably more "native" on mobile:
|
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
| "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-
| serif;
|
| apparently all modern browsers have this new shortcut that make
| it as simple as:
|
| font-family: 'system-ui', sans-serif;
|
| https://chromestatus.com/feature/5640395337760768
| kevincox wrote:
| Why isn't `sans-serif` just the default sans-serif font? Why do
| we need a new keyword to get the actual default font?
| hit8run wrote:
| Highly underrated comment.
| SenHeng wrote:
| Because whatever is default depends on too many variables.
|
| Like if you're on a Japanese OS but your language preferences
| are English, the default sans-serif font is a Japanese
| typeface that often doesn't display Roman alphabets that
| nicely.
| thrdbndndn wrote:
| > Like if you're on a Japanese OS but your language
| preferences are English, the default sans-serif font is a
| Japanese typeface
|
| Please specify your environment. I use Japanese OS and I
| haven't found a single OS/browser combo would do that.
|
| Use Windows as an example, sans-serif by default = Arial
| for Chrome and Firefox for English content.
|
| And as a bonus, you can even adjust the default sans-serif
| font in browser setting to your like; while with these
| hard-coded CSS, you can't.
| SenHeng wrote:
| MacOS Monterey, default system language is Japanese but
| obviously I browse a lot of English websites.
|
| Using plain sans-serif, I get Hiragino Kaku Gothic ProN
| as my default font instead of something nice like
| Helvetica Neue.
| thrdbndndn wrote:
| Do you mean lang:ja or lang:en content?
|
| Because I feel like the former is meant to have Japanese
| fonts even for Latin glyphs for consistency's sake, but I
| understand that some people do prefer the other way.
|
| And indeed, MacOS system font by default is like that.
| Windows is the opposite, though (everything is in Meiryo
| UI or whatever it's now called.) (Not sure if it's
| changed in Win11 either.)
| TacticalCoder wrote:
| That's kinda the point of these font stacks right!? You want
| to fall back to the default sans-serif font _only_ if you
| didn 't some better font first.
| aaaaaaaaaaab wrote:
| Better? Better than the default?
|
| So... you think your font of choice would be better than
| what the user had configured as the default in their user
| agent?
| SenHeng wrote:
| I also came across this blog while searching for various font
| stocks to use and he provided quite a good break down for many
| non-major platforms.
|
| https://www.ctrl.blog/entry/font-stack-text.html
| oneplane wrote:
| The worst ones are in emails from the likes of Microsoft where
| they have segoe and nothing else listed so half their messages
| look like a random default serif font (they don't even have
| fallback sans listed).
| madeofpalk wrote:
| It's surprising the site doesn't mention the actual, official
| standard `system-ui` font alias. font-family:
| system-ui, -apple-system, sans-serif;
|
| Is really all you need these days. That covers all modern
| browsers, and older browsers will just fall back to whatever
| sans-serif is.
| lelandfe wrote:
| > Never, ever use system-ui as the value of font-family
|
| > It turns out that the value of system-ui in fact not only
| depends on the version of the current OS, but the language of
| the OS as well.
|
| https://infinnie.github.io/blog/2017/systemui.html
| madeofpalk wrote:
| Ahh this is very interesting! Thanks!
| anaisbetts wrote:
| This is done in order to mitigate Han Unification - I
| suspect on OSs that aren't ancient this is probably Fine,
| but if you have a huge userbase like Bootstrap you probably
| need to support these people
| thrdbndndn wrote:
| It's not fine even on Win10.
| mproud wrote:
| I don't understand. Many of these fonts are very different from
| one another.
| tobr wrote:
| The systems are also different, so that's expected?
| leipert wrote:
| I assume the emoji fonts in Serif are there as fallback fonts
| because they are actually considered sans-serif?
| ushakov wrote:
| emoji have their own font
| hk__2 wrote:
| > emoji have their own font
|
| That's not true. Emojis are Unicode characters just like `a`
| or `ss`. When I type <an emoji character> on my computer it
| doesn't magically change font in the middle of the sentence;
| it's just a character.
|
| edit: looks like HN stripped away my emoji.
| recursive wrote:
| > it doesn't magically change font in the middle of the
| sentence
|
| It's not magic but it can happen. In fact, it usually does.
| Helvetica doesn't have emoji glyphs. Guess what happens if
| you drop an emoji in a block of text formatted with
| Helvetica?
| Kwpolska wrote:
| Emojis are Unicode characters, and some emojis appear in
| all sorts of fonts, but the more fancy emojis, as well as
| the color renditions of emojis, appear only in the system
| color emoji font. The font is changed in the middle of the
| sentence, as part of font fallback.
| [deleted]
| kevin_thibedeau wrote:
| Your OS _can_ magically change the font if a glyph isn 't
| available in the current one.
| pvinis wrote:
| Smart and fun how -apple-system works. I wonder why this has not
| been a thing for windows and linux too, and have it aliased too.
|
| And while I wonder that, I thought of a weird alias.. firefox-
| system or chrome-system would be terrible.
| sophiebits wrote:
| There is now "font-family: system-ui" though apparently it has
| a few issues:
|
| https://caniuse.com/font-family-system-ui
| https://infinnie.github.io/blog/2017/systemui.html
| pvinis wrote:
| huh. interesting, thank you!
| Kwpolska wrote:
| caniuse shows green for all modern browsers, and this blog
| post from 2017 talks about Windows 7 and the Windows Classic
| theme. Where are the actual issues?
| TacticalCoder wrote:
| It's great to see that "Liberation Mono" is added (it's a great
| font family available on some Linux systems, some of which may
| not have Ubuntu). But please always add "Liberation Sans" and
| "Liberation Serif" to the other stacks too. You risk nothing
| doing it and they render very well when present (says "Liberation
| Sans" renders better than the default sans-serif this stack would
| fall back to).
| hwc wrote:
| What's wrong with just using `sans-serif`, `serif`, and
| `monospace`?
| lelandfe wrote:
| Imagine 10 pages of interface people talking about how
| mimicking standard OS controls allows blah blah - but IMO folks
| really just don't like how Arial and Times New Roman look.
| cyril_st_john wrote:
| Please don't use this. -apple-system & BlinkMacSystemFont are OK
| but after that it's just a scattershot list of guesses that will
| often be wrong. I have most of the fonts in this stack installed
| on my Linux desktop for various reasons and none of them are the
| system font. Just fall back to sans-serif for now and adopt
| future -apple-system equivalents as they become available.
| incrudible wrote:
| This is not about literally displaying the system font, but
| about displaying a reasonably appealing font that is already
| installed. I could not possibly care less about whatever
| questionable system choice for sans serif some random Linux
| user makes.
| TacticalCoder wrote:
| > but after that it's just a scattershot list of guesses that
| will often be wrong.
|
| What do you mean? If it's wrong, the font ain't there. If the
| font is there, it's the correct font (according to the desire
| of the one who made the stack). If my stack has "Liberation
| Sans", it means that if your system has Liberation Sans, then
| it's going to be used. And it's very often better than the
| default system font ("Deja Vu Sans", for example, is a typical
| fallback on Linux and sucks big times compared to Liberation
| Sans and compared to many other sans-serif fonts).
|
| The way I see it that's the entire point of these "scattershot
| list of guesses": you can put several, it absolutely doesn't
| matter. The goal is to find one that matches _before_ falling
| back to the default.
| thrdbndndn wrote:
| People can manually install these fonts for whatever reason
| (I have some for my Photoshop use) while don't want them as
| the "system font" (because they're not for their OS).
| thrdbndndn wrote:
| Is there a reason the site itself does not use the rule it says?
|
| The one in article is -apple-system,
| BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica
| neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
|
| The one it actually _uses_ is -apple-system,
| BlinkMacSystemFont, "avenir next", avenir, "helvetica neue",
| helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif
|
| It looks like a minor difference, but the former one has segoe ui
| before helvetica (which is hard-coded as Arial alias on Windows),
| so it would use segoe ui on Windows; while the latter (currently
| using) one would show the content as Arial on Windows.
| codedokode wrote:
| While using local fonts is generally a good idea, this provides a
| reliable signal for fingerprinting.
|
| Therefore I would prefer that every major browser (Safari, Chrome
| and Firefox) ships its own reasonably chosen set of fonts and
| doesn't access system fonts (however the user may grant access to
| system fonts if they are fine with fingerprinting).
|
| This could also simplify web design because now there will be a
| somewhat standartized set of fonts.
| lelandfe wrote:
| Believe it or not, what you describe is already in place for
| Firefox and Chrome! Chrome has a proposal for an API to handle
| this instead: https://chromestatus.com/feature/6234451761692672
|
| And more info here: https://web.dev/local-fonts/
___________________________________________________________________
(page generated 2022-05-28 23:00 UTC)