[HN Gopher] Show HN: Modern Font Stacks - New system font stack ...
___________________________________________________________________
Show HN: Modern Font Stacks - New system font stack CSS for modern
OSs
Author : danklammer
Score : 164 points
Date : 2023-03-14 12:24 UTC (1 days ago)
(HTM) web link (modernfontstacks.com)
(TXT) w3m dump (modernfontstacks.com)
| ikesau wrote:
| Super. Will keep this in mind for future projects.
|
| Is there a way to get a sense for how well supported each font is
| at each level? Like caniuse.com - "80% of users will see Cambria"
| or whatever.
| VPenkov wrote:
| Sort of but not really. Operating systems usually come with a
| mostly-known set of fonts, however major updates sometimes
| change or iterate on fonts. Also, installing certain Office
| and/or design software adds more fonts. But this is why people
| use such lengthy font stacks that look alike.
| [deleted]
| andrewmcwatters wrote:
| It seems blatantly wrong to me that anything other than
| traditional or old style typography would use lower case numbers.
|
| Who are these people designing typefaces in the neo-grotesk
| family with old style numerics?
| adamc wrote:
| What are "lower case numbers"?
| vanderZwan wrote:
| I presume numbers with the top aligned with the x-height[0].
| Corbel and Candara both have them if you look at the
| screenshots on the GH page[1].
|
| [0] https://en.wikipedia.org/wiki/X-height
|
| [1] https://github.com/system-fonts/modern-font-
| stacks#classical...
| latexr wrote:
| Numbers with varying heights, ascenders, and descenders (like
| lowercase letters).
|
| https://en.wikipedia.org/wiki/Text_figures
| vanderZwan wrote:
| I don't see any lower-case numbers on neo-grotesk, nor do any
| of the screenshots on the GH page show it so it's not just my
| machine. Could you maybe have an incomplete font with some
| weird font-substitution quirks?
|
| [0] https://github.com/system-fonts/modern-font-stacks#neo-
| grote...
| crazygringo wrote:
| Lower case numbers fit in the best with body text. They're used
| in the same way small caps are used for acronyms -- so you
| don't get ugly blocks of characters larger than their neighbors
| that call attention to themselves. It's a feature, not a bug.
|
| In contrast, you use standard numerals for mathematics,
| spreadsheets, next to uppercase letters, etc. Anywhere where
| the context is numerical or technical or calling attention.
|
| There's nothing "blatantly wrong" about it. Ultimately it's a
| stylistic choice (most people don't bother, same as most people
| don't bother with small caps), but it's a really nice one. I
| think it's cool to see it in neo-grotesque personally.
|
| There's nothing inherent to the aesthetic principles of sans-
| serif that precludes them. From my understanding, the
| historical reason why they weren't used in the mid 1900's was
| for technical reasons with phototypesetting, needing to limit
| the character set. Now that it's all digital and Unicode we're
| able to repopularize them.
| andrewmcwatters wrote:
| No, but there is historical precedence and coherence. It's
| like putting Greek columns on a Walmart. Or rapping in Old
| English.
|
| There's "nothing inherent to the aesthetic principles" of
| rotary phones, but you don't use a smart phone with a rotary
| phone interface do you?
|
| Taste is formed with the times in which they are developed
| in. And there are those who have taste coherence and those
| who do not.
|
| "Nothing inherent to the aesthetic principles" of emo hair
| fringe or disco attire, but you wouldn't wear either to a
| historical reenactment of the American Civil War, either.
|
| When people use Humanist typography they are invoking a
| specific feel.
| crazygringo wrote:
| I guess I just find myself disagreeing. I don't find
| lowercase numerals any different from extending a Latin
| font to Cyrillic or Greek. In my view, they're just extra
| characters, rather than an aesthetic choice of the font.
| Ideally, good body text fonts will have both types of
| numerals to choose from.
| andrewmcwatters wrote:
| I think it's just OK to disagree. But among designers, it
| does standout. It's like whitewalls on a contemporary
| supercar.
|
| But you know what, there are plenty of out of place
| things that can still just be appealing sometimes. /shrug
| JonathonW wrote:
| Microsoft's font designers, apparently. (Corbel and Candara
| both have them, despite it being kind of weird for a sans-serif
| font-- those were MS-commissioned fonts launched as part of the
| ClearType Font Collection with Windows Vista and Office 2007.)
|
| None of the fonts here have lowercase figures by default on
| Mac.
|
| (If Neo-Grotesque is showing lowercase figures on your machine,
| I think something funky is going on with your font stack--
| pretty sure none of those fonts should have them by default.)
| olah_1 wrote:
| Old style numerals are my favorite actually.
|
| There aren't that many descenders in lowercase English, but in
| a script like Shavian where there are many, the old style
| figures feel really "at home".
| yowzadave wrote:
| It would be nice if there were a convenient way to test the way
| these fonts will render on a variety of different systems. I.e.,
| BrowserStack but you can specify the installed fonts on the
| system you are testing.
| noneeeed wrote:
| The repo actually has png/gif comparisons for them.
| https://github.com/system-fonts/modern-font-stacks#industria...
|
| But yeah, I'd love some way to preview a custom piece of text.
| nati0n wrote:
| Limitations based on copyrights significantly hinder the
| helpfulness of this site, although the design is top notch.
| hobofan wrote:
| What do you mean? This only includes fonts already present as
| standard font on the operating system, so presumably they are
| all permissively licensed.
|
| Either way, you as the website owner are not responsible for
| whatever font ends up being chosen by the browser to render the
| website.
| ar9av wrote:
| Love this! I've been using system fonts for the past couple years
| to avoid the usual font load glitch, and also to make the apps
| feel a little bit more at home for users that are used to their
| OS fonts. For mobile, this seems like the ideal scenario.
| aimor wrote:
| That dot background causes a distracting strobing effect when I
| scroll.
| corywatilo wrote:
| This is really well done. Paragraph view really helps to
| visualize it.
|
| CSS Font Stack [1] used to be the place for this, but that site
| hasn't changed in decades.
|
| The one piece missing for me is the percentage adoption by
| platform (like in the above referenced site). Regardless, this is
| still replacing CSS Font Stack for me.
|
| The irony is that they were both created by people named Dan.
|
| [1] https://www.cssfontstack.com
| wbobeirne wrote:
| Came here to post this as well. I was going to start making a
| replacement for cssfontstack, so I'm glad to see this here. But
| also feel that the percentage adoption was a huge value to me,
| as it helped me prioritize fonts in my chosen stack to maximize
| consistency. I'd love to see stats that include popular mobile
| OS's as well.
| starik36 wrote:
| This is awesome. One improvement would be to have a preview of
| what it looks like on the all the major OSes. Bonus for mixing in
| non-English versions of the OSes.
| conaclos wrote:
| A preview is available on the GitHub README [0]
|
| [0] https://github.com/system-fonts/modern-font-stacks#system-
| ui
| FooBarWidget wrote:
| I don't get it. Why not just use "serif", "sans-serif" and
| "monospace"? What's the value of specifying specific fonts such
| as "Charter" or "Dejavu Sans"?
| danielvaughn wrote:
| Just wanted to say that I love the dot-pattern background. Very
| subtle, nicely done.
| wiradikusuma wrote:
| Sorry I don't understand how to use this?
|
| Is the _website_ supposed to be like Google Fonts _website_ where
| I select a font and it will give me code snippets to paste in my
| HTML?
| tomhanlon wrote:
| Instead of loading a font from Google Fonts you would just use
| the font-family property for the given typeface:
| font-family: Charter, 'Bitstream Charter', 'Sitka Text',
| Cambria, serif;
|
| for instance.
| anamexis wrote:
| I think it's suggesting font families which have similar
| characteristics and for which at least one is likely to be
| installed for a given OS/browser.
| aakash_test wrote:
| Test
| pimlottc wrote:
| Please stop using green vs red like this, it's very difficult for
| many people, including me. Especially for thin lines.
| coreyp_1 wrote:
| I didn't even realize that the red/green was present until you
| mentioned it!
|
| I do actually perceive it, now that you draw attention to its
| existence, and can tell the difference, but you are correct:
| thin lines are aggravating to deal with!
|
| And it's not just the red/green issue: it's also in
| distinguishing them from grey when the lines are thin.
|
| Side issue: when I was a kid, my math teacher insisted on
| grading using those thin BIC red pens. The problem is that it
| was indistinguishable from my own writing (at a glance), and it
| took forever to find my mistakes that were "clearly marked" by
| the teacher. Thin red lines are pointless to me. I guess it's a
| good thing that I'm naturally good at math!
| gketuma wrote:
| So is the fix to remove the underlines? Or to stop using
| red/green color combination? Trying to learn as well. Thanks
| capableweb wrote:
| Depends on the use case. If you want to signal deletion,
| strikethrough can be more appropriate than coloring. If you
| really have to use color, I've heard brown-blue combo
| should be easier, or at least blue-yellow color blindness
| is a lot rarer than red-green, so it'll be more accessible.
|
| But the most accessible would be to use appropriate
| structure (together with appropriate semantic structure for
| those that cannot see at all) rather than appropriate
| coloring.
| heisenbit wrote:
| Make color areas bigger and use higher contrast light/dark
| versions to keep some distance between red and green.
| Generally avoid thin red to signal anything important.
| yuchi wrote:
| The solution from literature is "use color as much as you
| want (within the limits of sufficient contrast for
| readability) but nether rely exclusively on it, always add
| some other visual device, such as icons or (even better)
| textual additions".
| [deleted]
| coreyp_1 wrote:
| For me, it's not just an "underline" issue. In my case,
| it's a "thin line" issue, and letters are usually made up
| of thin lines, especially the monospace font used here. But
| that's just me. (Side note: I still use monospace fonts in
| programming, I just choose one that has thicker lines in
| relation to the character size.)
|
| For example, when I saw the website in question, I did not
| notice the red or green text color at all. I did see the
| underline, though. I didn't know it's significance,
| however, because the key is at the bottom of the examples
| (5 rows of blocks of text examples) rather than the top.
| Oddly enough, in this particular instance, the green of the
| text looks more like a light grey, and I can see the red
| better than the green. Normally it's the other way around,
| but it might have something to do with the particular
| shades involved.
|
| Importantly, there are different forms of red/green
| colorblindness. For some people, the colors are literally
| indistinguishable. They look exactly the same.
|
| Mine is a form of reduced sensitivity. I can see it if it's
| a large area. E.g., if you're wearing a red shirt, then I
| know it's red, and it looks completely different from a
| green shirt. If it's just a thin line of red, though, then
| I might not pick up on it unless I concentrate. It just
| doesn't stand out when the lines are thin.
|
| Fabric can be weird for me. Some fabrics cause issue
| because they will use red threads interspersed throughout
| the cloth in order to achieve a red/pinkish overtone, and I
| won't notice it at all (unless I really concentrate on it).
| It's because the red is coming from thin lines. I have to
| be careful with tweed, for example.
|
| But again, that's just my experience.
| messe wrote:
| I have the same kind (IIRC it's called deuteranomaly).
|
| I find increasing the brightness of the display helps,
| but it's still a pain in the arse to distinguish the two
| when the lines are thin in this example.
|
| Just for fun, can you make out the lettering in this
| image posted to the fediverse:
| https://mathstodon.xyz/@csk/109786201604517074
|
| If you have deuteranopia or deuteranomaly, you should be
| able to just about make it out. With normal colour
| vision, on the other hand, it's meant to be nearly
| impossible to see.
| coreyp_1 wrote:
| LOL, that's great!
| illiarian wrote:
| > because the key is at the bottom of the examples (5
| rows of blocks of text examples) rather than the top.
|
| It's worse in mobile. It's several screens of example
| blocks before you get to the key.
| MisterTea wrote:
| The fix is "designers" need to understand that there are
| people with visual disabilities and take steps to stop
| discriminating against them.
| 323 wrote:
| Maybe a browser extension should exists which automatically
| replaces colors with more accessible ones.
| nielsbot wrote:
| I think you can do this with system accessibility settings?
| At least on macOS and iOS.
| Pr0ject217 wrote:
| 100%. I can _barely_ read it. Perhaps changing the _background_
| of the text to red and green (and the text to white) would
| improve its legibility. There are likely better ideas, though!
| danklammer wrote:
| This is great feedback. I will update to be more accessible.
| peterfirefly wrote:
| You might be able to get away with changing your reds and
| greens so (most) colour blind people can see the difference
| between them.
| scns wrote:
| https://colorhexa.com shows how each color "is perceived by
| people affected by a color vision deficiency".
| Matheus28 wrote:
| You could add a strikethrough on the red ones, and keep the
| color. .nope { text-decoration: line-
| through; }
| nielsbot wrote:
| Someone filed an issue already https://github.com/system-
| fonts/modern-font-stacks/issues/1
| Narushia wrote:
| These look all very solid! There's one thing that bugs me,
| though: I would imagine that a "system font _stack_ " would
| support characters for multiple scripts, since operating systems
| are commonly localised into many different languages. However,
| none of the fonts presented seem to support any CJK characters,
| for instance.
| amelius wrote:
| It would be even better if the fonts were just the same across
| platforms.
| yowzadave wrote:
| What if you're building a web app, and your goal is to emulate
| the system font appearance (whatever it may be) of the client?
| tasuki wrote:
| I think the comment you're replying to still applies?
| SquareWheel wrote:
| Then your default font stack should look something like this.
|
| https://github.com/twbs/bootstrap/blob/adf7b8dc4083b6ddc318e.
| ..
| airstrike wrote:
| Not sure if it's just me behind a draconian firewall but Neo-
| Grotesque doesn't load Inter for me, even though it's on Google
| Fonts. Why not download it from there?
| joe5150 wrote:
| The site doesn't load any webfonts. It only attempts to use
| already-installed "default" fonts from various systems. The
| GitHub readme[1] says Inter is a "user-installed" font, so I'm
| not really sure it should count here.
|
| 1: https://github.com/system-fonts/modern-font-stacks#neo-
| grote...
| hLineVsLineH wrote:
| Inter is the default font on elementary OS, if I recall
| correctly.
| airstrike wrote:
| Sure, but realistically who doesn't deploy webfonts these
| days? Might as well include them on this site to reflect the
| current state of the world
| prewett wrote:
| Maybe I should know what this is about, but after reading the web
| page and the Github site, it's unclear to me if this is a set of
| fonts I download, or a useful set of font CSS settings, or a font
| renderer or what. What problem is this solving? Why does this
| work better than just using good quality fonts in the browser?
| The examples look great, I just don't know what I'm looking at.
| [deleted]
| nielsbot wrote:
| I think these are fonts that are generally available on common
| OSes, so no webfonts needed, in order of
| preference/specificity. You often (for me, an amateur, anyway)
| don't know which list of fonts and fallbacks ("stack") to
| specify if you want a "industrial" font for example. This site
| has done that research for you.
| [deleted]
| azatom wrote:
| Why is the smallest font size is the largest of what I actually
| would like to test? The range 0.7-1.5em is what needs tests,
| above that all looks good.
| hypertexthero wrote:
| Excellent work, and thank you for introducing me to the lovely
| Seravek - https://en.wikipedia.org/wiki/Seravek
|
| I did not know it was a default font in macOS.
| DyslexicAtheist wrote:
| very nice. been looking at the "system-ui" font saying "damn that
| looks great I must try it", then as I continued to browse further
| down got confused. Why does every font look the same? It must be
| my design-ignorant brain not picking up on the subtle differences
| in these fonts? They're clearly brilliant though.
|
| as I couldn't spot any differences in any of them (and all of
| them looking fantastic and really similar or same as the rest of
| my system) ...
|
| Then it hit me, so went to Firefox ->
| settings -> Fonts -> Advanced ->
| "Allow pages to choose their own fonts, instead of your
| selections above"
|
| problem solved :) I was no longer staring at "DejaVu Sans" in
| every box.
| foxandmouse wrote:
| Most of the fonts listed here are premium fonts, the complete DIN
| typeset costs nearly 2k. If we're going that route, then it's
| safe to say most of these are lesser than the best in class for
| each category. popular fonts like Futura, Century Gothic,
| Baskerville, and Univers are just a few that are omitted..
|
| While there's no objective truth in design, these fonts are not
| suitable for designers who prioritize typography. However, if
| you're looking for a quick solution for a side project and don't
| care much about typography, this list could be helpful. Can't see
| why it belongs on the front page though.
| joe5150 wrote:
| The type named, DIN Alternate, is included with MacOS (bold and
| condensed bold only). The GitHub page has some notes about
| this, along with more info about what systems support which
| typefaces.
|
| https://github.com/system-fonts/modern-font-
| stacks#industria....
| foxandmouse wrote:
| Thanks! the GitHub page includes a lot of (imo) essential
| information that should be included on the site. The
| developer clearly did a lot more research than I assumed.
|
| That said, one thing to consider if you're using this stack
| is that this implementation will produce OS specific designs.
| The fonts in each stack differ significantly between
| operating systems, which means that testing for each OS will
| be necessary. I already have an issue with the same fonts
| looking different due to different rendering methods in each
| browser/ OS.
| joe5150 wrote:
| I think it's helpful to keep in mind that any design will
| be to some extent "OS-specific" for a lot of different
| reasons, available fonts being only one factor.
|
| I also think OS-specific design is perfectly appropriate
| for a lot of use cases. I use "font-family: system-ui,
| sans-serif" on my resume page, for example, because I know
| that the default system fonts look fine (by design) on any
| screen and a fast, lightweight page is more important to me
| than a specific font presentation. If you're creating a
| user interface with really tight tolerances on element size
| or appearance, different strategies might be more
| appropriate.
| hLineVsLineH wrote:
| > I use "font-family: system-ui, sans-serif" on my resume
| page [...] If you're creating a user interface with
| really tight tolerances on element size or appearance,
| different strategies might be more appropriate.
|
| Shouldn't it be the opposite? It literally has "UI" in
| the name, and according to the the spec, "The purpose of
| system-ui is to allow web content to integrate with the
| look and feel of the native OS."
|
| The text on a resume is not UI, and it has no need to fit
| the look and feel of the native OS. In this case you
| should just use `serif` or `sans-serif`. If you're
| creating a user interface, then it would be appropriate
| to use `system-ui`.
| joe5150 wrote:
| > The text on a resume is not UI, and it has no need to
| fit the look and feel of the native OS
|
| My resume has no need to look any particular way at all;
| this is just my preference. You should design your
| webpages however you like!
| jfk13 wrote:
| You may happen to like how system-ui looks on _your_
| system (macOS? Windows?); but do you have any idea what
| it looks like for the person reading your resume, perhaps
| on Linux with a custom theme, or on an Android device
| where the vendor chose to ship some brand-specific UI
| font? Or on a 5-yr old version of the OS, or on the
| version that 'll be current 5 years in the future?
|
| IMO system-ui is hardly ever a wise choice for content.
| deckard1 wrote:
| I'm going to be slightly more blunt and say, if you're using a
| font "stack" then you don't care about typography at all. A
| large segment of HN seems to hate web fonts with a passion. And
| I get that. But let's not pretend you can have your cake and
| eat it too. You may as well just do "serif" or "sans-serif" and
| be done with it.
|
| For the same amount of effort it takes to research a font stack
| you could implement a web font loader that uses browser fonts
| based on prefers-reduced-motion.
| jraph wrote:
| > if you're using a font "stack" then you don't care about
| typography at all
|
| Why?
|
| If I want to display a document with some atmosphere for
| which several fonts could be suitable, and it's not so
| important if a default generic font is used, but I care more
| about performance and resource usage, it's a good solution,
| no?
|
| The default generic font will probably be a well designed
| font that the user is used to, so, typographically, it's very
| good. I like this "best effort" approach.
|
| A custom font will probably be worse for many users: users
| have to download it, there can be flashes, reflows, rerenders
| or a long time where stuff is blank, and the user might not
| be familiar with this font. Since fonts are mostly a matter
| of taste anyway, it's not clear the user will prefer this
| custom font over the ones that are already on their computer
| and that they are more likely to be familiar with.
|
| So, in the end, it might as well be the better solution,
| typographically speaking.
| deckard1 wrote:
| > that the user is used to
|
| That's not the point of typography or design. People are
| used to Comic Sans. That doesn't make it a good choice.
| Some designs call for something that stands out in a unique
| way.
|
| If you are going to the trouble of finding an "atmosphere"
| for your site and researching the fonts you are using then
| why just throw that all out with a "stack" and sort of kind
| of but not really getting it right?
|
| Here's the bigger problem. No two fonts have the same font
| metrics. Go to the Github page: https://github.com/system-
| fonts/modern-font-stacks#css-font-.... These fonts are all
| using the same font size, weight, etc. but they are
| drastically different. Calibri and DejaVu do not render
| remotely the same. DejaVu might be readable at a certain
| size where Gill Sans Nova is going to be rather awful.
| These are all within the same font stack. Even in the
| "Preview Rendering" you can see it cheated by having the
| footnote that says "These fonts have been size-adjusted for
| easier comparison." How are you planning to do that in CSS?
| You can't.
|
| All this effort is wasted. You can just pick "sans-serif"
| and let the user use whatever they have set in the browser.
| That's better anyway, especially for a blog type layout
| which is the only layout that would make sense and not
| completely break with a font stack.
| hLineVsLineH wrote:
| The say, "then you don't care about typography at all." You
| say, "If [...] it's not so important [...]" To me, it
| sounds like you two are in agreement. If it's not
| important, i.e. if you don't care about it, then it's fine.
|
| > If I want to display a document with some atmosphere for
| which several fonts could be suitable
|
| There's no such thing as "several fonts could be suitable".
| All the fonts in these stacks have different metrics, so
| you can't even set appropriate values for something as
| basic as the font size and line spacing.
|
| If you design your page using Gill Sans Nova, for example,
| and someone views it with DejaVu Sans -- congratulations,
| the text now looks something like 50% bigger than you
| intend it to be. And if you set a sensible size for DejaVu
| Sans, someone will get unreadable text with some other
| font. This is not "very good". It's bad.
|
| It _might_ be okay to use these font stacks as fallback
| when the custom font doesn 't work, but it's not "the
| better solution" if you care about typography.
|
| > I care more about performance and resource usage
|
| It's a valid concern but fonts aren't really that big. Some
| people are shipping favicons that are like 40kB. That's
| enough to fit a font.
|
| > The default generic font will probably be a well designed
| font that the user is used to
|
| System fonts aren't necessarily well designed. And I'm not
| sure why "the user is used to it" is a good thing. It seems
| to be the opposite. People complain when a font is familiar
| to the point that it feels tired and overused.
|
| > Since fonts are mostly a matter of taste anyway, it's not
| clear the user will prefer this custom font
|
| The user is always in control. They can always choose what
| to load and what styles to apply. That doesn't mean people
| should stop designing webpages that looks good.
| joe5150 wrote:
| > congratulations, the text now looks something like 50%
| bigger than you intend it to be
|
| Some of these "stacks" do make poor choices with respect
| to matching the overall metrics of the fonts, but there
| are any number of reasons why a font might display bigger
| or smaller than you "intend it to be" in a web browser.
| Web design fundamentally has to account for this.
| hLineVsLineH wrote:
| Yes, and that's exactly the problem with this approach.
| There's no accounting for the different metrics of the
| fonts.
|
| Font size and font family should ideally always be set
| together. If you're setting a font-size, then you should
| force a font-family, and vice versa. Otherwise, you
| should set neither and let the user agent decide. This
| ensures that you would never get a broken combination
| that's uncomfortable or unusable.
|
| It's similar to the idea that whenever you're setting a
| foreground color, you should always set the background
| color as well.
| pitaj wrote:
| Is it just me or on Android do like 90% of these not really work
| right? Firefox is especially sparse, but Chrome isn't much
| better.
|
| Does Android just not ship with many fonts? I'm on a Pixel 6 with
| Android 13.
|
| For instance on Firefox:
|
| - Transitional, Old Style, Slab Serif, Antique, and Didone fall
| back to serif
|
| - all Humanist variants, Industrial, and Rounded Sans fall back
| to sans-serif
|
| - nothing for Handwritten (so just shows up as sans serif)
|
| And Chrome is better but still not great:
|
| - Transitional, Old Style, Slab Serif, and Didone fall back to
| serif
|
| - all Humanist variants and Rounded Sans fall back to source-
| sans-pro
| cantSpellSober wrote:
| I've never had a designer tell me "if _x_ typeface isn 't
| available, fallback to _y_. " Simply fall back to the generic
| name unless specified.
|
| Why does "Monospace Code" _begin_ with a generic name (`ui-
| monospace`) instead of _ending_ with one?
|
| (Well done demo, thanks for sharing!)
| danklammer wrote:
| `ui-monospace` is an extended system font property [1] similar
| to `system-ui` that is currently only supported in Safari. This
| will render SF Mono on macOS and iOS [2].
|
| [1] https://caniuse.com/extended-system-fonts
|
| [2] https://github.com/system-fonts/modern-font-
| stacks#monospace...
| giraffe_lady wrote:
| It's a good default approach and the one I use most of the time.
|
| If you're setting a _lot_ of text, or mixed text especially that
| has both prose and graphs or data you run into the limitation of
| the system fonts just not having the full set of characters.
|
| Using text figures and tabular figures correctly for example is
| one of the main things that makes those complex mixed texts read
| well and look "professional" and afaik none of the system fonts
| include all three sets of numbers, even if they're available in
| that font from other sources. They also mostly don't support
| small caps, which is better looking than most other ways you can
| emphasize text for titles or diagram labels. The CSS auto-
| conversion fallback is not a good substitute imo.
|
| Anyway again it's a great approach for basic text and still a
| good start for more complex stuff, but not a full solution
| depending on how much you care about text presentation. But since
| most websites are mostly text I think you should care a lot.
| [deleted]
| chrismorgan wrote:
| https://github.com/system-fonts/modern-font-stacks explains each
| stack and which fonts are expected to be used where, with
| screenshots. This information makes it (mildly bizarrely, and
| quite disappointingly) generally more useful than
| https://modernfontstacks.com/.
|
| --***--
|
| A few remarks (not all that I could make, but I should sleep).
|
| _System UI:_ risky, it's a trap, there's basically _no_
| legitimate scenario for these semantics on the public web. See
| https://github.com/w3c/csswg-drafts/issues/3658 (skim through a
| bit, I've got a comment near the end too).
|
| _Monospace Slab Serif:_ _every one_ of the fonts named here is a
| bad font:
|
| (a) Nimbus Mono PS mangles things like the two-column `fi`,
| ligating them to a single-column `fi`. See
| https://github.com/ArtifexSoftware/urw-base35-fonts/issues/3....
|
| (b) Courier New is unreasonably thin due to bad digitisation
| techniques which used to be worked around by hinting and
| ClearType special-casing, but it's common for neither of those to
| work to make it tolerable any more. Its 400 weight is more like a
| 250 (if even that), and painful to read in many common
| configurations. Never use it.
|
| (c) Cutive Mono apparently _copied Courier New's known-awful
| thinness!?_ What were they thinking?
|
| _Monospace Code:_ seriously, just go `monospace, monospace`
| these days. Firefox 98 on Windows was the last browser where this
| wasn't at the very least perfectly adequate. (The doubling is to
| work around the stupid probably-13px font size misfeature that
| I'd like to try to convince browser makers to ditch, but haven't
| tried yet.)
|
| > _Emoji Support_
|
| Does adding these fonts to the end of the stack actually achieve
| anything useful? I don't _recall_ these being necessary or
| useful. (I vaguely recall some sort of priority issue related to
| text /graphical representations, but that was quite a few years
| back and I'd _expect_ it to have been dealt with now, though it's
| _possible_ some U+FE0F might be needed if you omit this?--though
| frankly that'd be needed anyway for universal support. Anyway,
| I'd like concrete explanation of what this stuff does, if
| anything.)
|
| > _Anti-Aliasing_
|
| If I recall correctly, these tweaks are largely Apple-specific,
| grossly misleading in name, highly controversial, and probably a
| waste of time. I invite correction or further education, because
| I haven't thought about them for maybe a decade and don't use a
| platform where they do anything.
|
| --***--
|
| This is much better-thought out than most sets of suggestions,
| but I'd honestly still suggest dropping nuance in most cases, and
| just using `serif`, `sans-serif` or `monospace, monospace`. But
| if you want a certain general sort of character, this is pretty
| good stuff. I've definitely done `font-family: Georgia, serif`
| where I wanted to express a preference for a wider sort of serif,
| and I'd do it again1.
|
| --***--
|
| 1 Even if I personally will get my own chosen serif font, since
| I've unticked Firefox's _Settings - Fonts - Advanced - Allow
| pages to choose their own fonts, instead of your selections
| above_. Try it yourself, you might be pleasantly surprised at how
| much the consistency improves the web, like I was. You might also
| develop a still-deeper hatred of non-zero letter-spacing on body
| text, which is absurdly common for something that has _absolutely
| no legitimate use case in English text_.
| hLineVsLineH wrote:
| > _System UI_ : risky, it's a trap, there's basically _no_
| legitimate scenario for these semantics on the public web.
|
| How else would you style things with the system's UI font? User
| interfaces on the web can be designed to fit in the native
| system UI. It's a legitimate and useful thing to do.
|
| I don't see how you can make a meaningful distinction between
| what's "online" or "on the public web" or not. A lot of web
| apps can run both online and offline, installed or uninstalled.
| In all cases it uses the same web technology.
|
| Just because some legacy system makes a bad choice, doesn't
| mean everyone can't have nice things. I mean, did Windows
| _seriously_ make all their UI use a _single_ font? Do they just
| assume all the UI on Windows would be monolingual...?
|
| I mean, it's standard practice to use a Latin font and fallback
| to other fonts for complex scripts such as CJK, because it's
| universally acknowledged that the Latin glyphs in these fonts
| are terrible and unfit even for the purpose of using it _with_
| the CJK characters.
|
| Instead of discouraging or even removing it, how about actually
| _encouraging_ people to use `system-ui` to force Microsoft and
| other companies to fix their systems?
| thrdbndndn wrote:
| Everytime "System UI" is mentioned on HN I feel obligated to post
| this: Be careful about it.
|
| The intent of "System UI" is great. However, the actual
| implementations across multiple platforms and especially with
| different international languages, not so much.
|
| The main issues are:
|
| 1. On Chinese and Japanese Windows, it would end up using MS
| Yahei and Yu Gothic UI. The former isn't optimized to show
| English-only (or Latin alphabet only) content, while the latter
| isn't even suitable to display _Japanese_ content, let alone
| English ones. As the name suggests, it 's intended to be a "UI"
| font - it's extremely narrow to accommodate long Japanese
| characters in UI elements such as context menu, button etc.
| You're supposed to use "Yu Gothic" to show normal text in
| Japanese.
|
| And because these two fonts are unicode (include almost every
| glyphs), it won't fallback to other fonts either. English Windows
| does not suffer from this issue the other way precisely because
| its default UI font, "Segoe UI", not only great to show English
| characters, it also does not contain any CJK glyphs so these
| would fallback to proper fonts.
|
| 2. Unlike "sans serif", system-ui overrides "default fonts" that
| user can tweak in (any) browser settings. Users can even change
| fonts for each written script/language to make they have the
| fonts that suits them best too (and browsers usually have
| sensible default for them). This means you can use <lang="ja">,
| <lang="zh">, <lang="en"> to specify language of HTML elements to
| ask the browsers to use specific fonts for each language. System-
| ui overrides all these: once you have assigned "system-ui" it
| will just use system font regardless of any language context.
| Again, this is particularly bad for CJK users because of problem
| 1 ("system-ui" fonts have all the glyphs). So end result: Chinese
| paragraphs use Japanese characters (they're different but have
| the same Unicode point), and vice versa.
|
| 3. In lots of platforms, including MacOS (I didn't test newest
| version yet), Android, iOS, using "system-ui" will end up using
| exactly the same font as just use "sans serif" anyway. So it
| really has little benefit.
|
| One of the only benefit of using "system-ui" is on _English_
| Windows: lots of browsers including Firefox and Chrome still use
| Arial as sans-serif 's default for Latin content for backward
| compatibility (you can change it yourself in browser settings,
| though). So by using system-ui, on English Windows, fonts would
| become Segoe UI, which is indeed better. But you can "fix" this
| without messing over Chinese/Japanese users by just apply "Segoe
| UI" directly. It does not affect other platform either because
| they simply don't have this font. Actually, this is exactly what
| most of major websites (GitHub, SO, Twitter, etc.) currently are
| doing, after they rolled back from using "system-ui" due to
| issues and backlash mentioned above. Wikipedia also tried, but
| they now choose to continue rocking "sans-serif" without any
| fancy "stack".
|
| (I'm not a Linux guy so feel free to chime in about situations
| there.)
| alwillis wrote:
| > 3. In lots of platforms, including MacOS (I didn't test
| newest version yet), Android, iOS, using "system-ui" will end
| up using exactly the same font as just use "sans serif" anyway.
| So it really has little benefit.
|
| Certainly on my Mac, which has been the case for quite some
| time, sans-serif defaults to Helvetica.
|
| Since Apple was the organization that proposed "system-ui", it
| doesn't make sense that it would default to a font that already
| existed.
|
| Apple created San Francisco as a family of fonts for macOS,
| iOS, iPadOS, etc., which is why Apple proposed to the W3C the
| concept of a system-ui font that differs from sans-serif.
|
| Android, newer Windows and macOS has specific fonts for system-
| ui.
| [deleted]
| glogla wrote:
| I like it.
|
| It works for English, but sadly the selected fonts don't always
| have all the national characters. Sometimes there are similar
| enough replacements (e.g. Charis instead of Charter) but not
| always.
| reaperducer wrote:
| I agree, since I build multi-lingual web sites. I hope this
| will be helpful.
|
| There is a little box at the top that allows you to replace the
| default text with the text of your choice to test whether your
| specific non-ASCII characters will work.
| yawpitch wrote:
| Ahh, thanks for noticing that, I've got a ludicrous number of
| Vietnamese accents to deal with, and have been looking for
| just such a tool!
| lagrange77 wrote:
| Nice. It would be really useful, if the site could preview the
| system fonts of those systems you aren't using, though.
| pseudonymcoward wrote:
| The github page has screen grabs of all the fonts in each
| stack: https://github.com/system-fonts/modern-font-stacks
| lagrange77 wrote:
| Nice, thanks.
| partyguy wrote:
| Similar: https://systemfontstack.com
|
| Either way, it's the best way to go these days if you don't need
| any fancy external fonts on your website.
| javajosh wrote:
| This is valuable.
|
| But the value is hidden because the "key" is at the bottom, not
| at the top. This page's value is that it shows you what device
| fonts are available (and in use), but that's not clear (enough).
| (And this value is further reduced by the color scheme, which
| many people cannot distinguish.)
|
| I'd also like to see a discussion of where you got these stacks.
| fouronnes3 wrote:
| I really like "font-family: system-ui, sans-serif;". Life is
| short, let's go on with our lives!
| creativenolo wrote:
| But a short life is to be relished with delights.
| SquareWheel wrote:
| Great website. There's really no concept of "web safe" fonts
| today when you mix in mobile operating systems. At best you can
| choose similar-looking fonts and hope for the best, and this site
| seems useful in that aim.
|
| One tool I'd love, though would clearly be out of scope here,
| would be a way to find safe fallbacks for popular webfonts. For
| example I recently created a site in Montserrat. After some
| testing I found a close fallback font was Verdana, with a size-
| adjust[1] of about 99.5%. That resulted in minimal document
| reflows when the font was slow to load.
|
| Picking the top 10 or 20 popular Google Fonts and finding nearby
| fonts with good scaling tweaks would be very useful. I could see
| a sister project to this site offering something like that.
|
| [1] https://developer.mozilla.org/en-US/docs/Web/CSS/@font-
| face/...
| ZeroGravitas wrote:
| https://meowni.ca/font-style-matcher/
|
| Is a tool that lets you play around to discover good fallback
| settings.
| SquareWheel wrote:
| Thanks for the link. I've actually used this one before, but
| it's not quite what I was hoping for.
|
| These settings (font-size, line-height) are defined in the
| content CSS, not the @font-face rule, so they won't be
| automatically applied when the font is swapped. Properties
| like size-adjust or ascent-override are better for matching
| like-fonts as it's all automatic.
|
| Also, while it is very useful to have a tool to come up with
| your own pairings, I think a list that covers some of the
| most popular fonts and creates perfect settings would be very
| useful for quick implementations. Something like the
| submitted site above that has done the legwork for you.
| corny wrote:
| Maybe this is more what you're looking for?
| https://screenspan.net/fallback
| SquareWheel wrote:
| Much closer to what I had in mind! Thanks, this one is
| new to me. It would've saved me time in my previous
| testing.
|
| Hopefully one day the existing CSS properties like
| letter-spacing can be supported in @font-face to allow
| for even better matching. That would make techniques like
| this even more powerful.
| airstrike wrote:
| Loved this, thanks for sharing
| toastal wrote:
| Bold of you to assume I'd want Arial or Ubuntu before the one I
| set as my user agent default in any stack
| webmasterfish wrote:
| Correct me if I'm wrong but is this basically just advicing on
| using web-safe fonts?
| stefncb wrote:
| Every operating system has different fonts installed by
| default. Unless you use custom fonts, you can't be fully
| consistent, but the website has some groups of similar fonts
| that should get you the same style regardless of operating
| system.
___________________________________________________________________
(page generated 2023-03-15 23:00 UTC)