Hacker News new | past | comments | ask | show | jobs | submit login
How to avoid layout shifts caused by web fonts (simonhearne.com)
192 points by joshbetz on Jan 30, 2022 | hide | past | favorite | 121 comments



The suggestion I like the most is 3.4) Use system fonts:

  body {
    font-family: -apple-system, BlinkMacSystemFont,
      "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
      "Fira Sans", "Droid Sans", "Helvetica Neue",
      sans-serif;
  }
Stack Overflow took this approach last year with the following font stack: [1]

  @ff-sans:
    system-ui, -apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS
    "Segoe UI", // Windows
    "Ubuntu", // Ubuntu
    "Roboto", "Noto Sans", "Droid Sans", // Chrome OS and Android with fallbacks
    sans-serif; // The final fallback for rendering in sans-serif.
  @ff-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  @ff-mono:
    ui-monospace, // San Francisco Mono on macOS and iOS
    "Cascadia Mono", "Segoe UI Mono", // Newer Windows monospace fonts that are optionally installed. Most likely to be rendered in Consolas
    "Ubuntu Mono", // Ubuntu
    "Roboto Mono", // Chrome OS and Android
    Menlo, Monaco, Consolas, // A few sensible system font choices
    monospace; // The final fallback for rendering in monospace.
[1]: https://meta.stackexchange.com/questions/364048/we-are-switc...


-apple-system and BlinkMacSystemFont are now both obsolete and covered by system-ui. Almost all of the named fonts in common font stacks are either now superfluous or not a good idea any more, causing more harm than they solve.

For sans-serif, I recommend at most three items: a web font, system-ui, and sans-serif. No more. I would note that system-ui is not necessarily sans-serif, but in practice it almost always is, and ui-sans-serif (along with ui-serif, ui-monospace and ui-rounded) is only implemented by Safari yet.

For serif, I recommend at most three items, possibly including one named font: a web font, Georgia, and serif. See, serif is probably a narrower serif (something like Times New Roman), but Georgia a wider one—they’re fairly different in character, so that it can be worth including if you’re doing so deliberately.

For monospace, I recommend at most four: a web font, ui-monospace (I wouldn’t, but some macOS people prefer it), Consolas, and monospace. I think Consolas is worth keeping in until Firefox updates its Windows default (https://bugzilla.mozilla.org/show_bug.cgi?id=713680), because Courier New is that bad.

Most font stacks now are just cargo culting, and are mostly mildly harmful.


> I would note that system-ui is not necessarily sans-serif

And that's exactly where it causes problem [1].

https://infinnie.github.io/blog/2017/systemui.html


Interesting, I hadn’t come across that particular issue, though it seems obvious now (I know about those ugly old fullwidth fonts). And I’m guessing that quite incidentally -apple-system and BlinkMacSystemFont are unlikely to be affected. I’ll need to reconsider my recommendation—though I will note that I’ve not generally used system-ui anyway, just considered it acceptable. I wonder if it’s time to lobby browsers to update their default sans-serif fonts, as they have updated their monospaces over the last few years (except for Firefox on Windows). The whole ui-sans-serif/ui-serif/ui-monospace thing is a bit of a crock. (And I wonder if I stand any chance of getting the 13px monospace default size killed. That thing is such an utterly obsolete nuisance—though of course removing it from monospace doesn’t remove the concept, which is used in fonts of various languages.)


I would never in a million years think of this. Thanks for the link.


> Almost all of the named fonts in common font stacks are either now superfluous or not a good idea any more

It's all fallback, how can they be "not a good idea"? That's the beauty of these CSS font stacks: you can always put first the latest best practices.

> Most font stacks now are just cargo culting, and are mostly mildly harmful.

I disagree and if anything they're not complete enough (I'll write another comment).


It’s not all fallback: it’s getting in the way of the actual fallback monospace/sans-serif/serif. The cargo-culting nature of this means that there tend to be one or two bad fonts in there, and sometimes some systems will have bad fonts aliased to otherwise good names (e.g. that’s why I say “don’t write Courier”, because although it’s fine on macOS and probably aliased to something reasonable on Linux platforms, Windows aliases Courier to Courier New, which is a terrible font).

I don’t want your idea of a suitable font, in general, because the default defaults (that is, the browser’s default value for sans-serif) are thoroughly good enough, and I changed my defaults, and by writing the likes of `…, Arial, Helvetica, sans-serif`, you didn’t change anything for most people, but prevented me from getting my chosen default sans-serif.

Long font stacks are fighting a fundamentally unwinnable battle with small potential benefits, high uncertainty, and definite costs (normally mild) to people that actually expressed preferences to their user agent.


> superfluous or not a good idea any more, causing more harm than they solve.

Can you expand on why?


Firefox has left me scratching my head a few times, I think they limit the amount of fallback fonts to resist fingerprinting. Long lists like these will get cut short. Text you intended to be monospace might not be rendered as such as the "monospace" at the very end was never reached.


I haven’t ever encountered that, and would expect the limit to be rather long (certainly no less than 32 elements, probably far longer) if there is such a limit. What there is is whitelisting, only exposing certain fonts in order to reduce font list fingerprinting: https://bugzilla.mozilla.org/show_bug.cgi?id=1121643.


Huh, ok, never experienced that but that is probably just due to you and I going to different sites. I do use FF as my daily non-work driver though.


What's the benefit of putting `system-ui` in front of `sans-serif` that outweighs the down-side that it might not be sans serif?

Also, even with `ui-sans-serif` (i.e. if it's guaranteed that it is/someone's doing something deliberate if it isn't) why's that what you want for the sans serif text on your web page, that isn't 'system UI'?


>Stack Overflow took this approach last year

Just to note, what you posted below isn't their final version, and for good reasons. Anyone that is interested about this please check the original post with update 1,2, and 3.

On the other hand, I still failed to see the the advantage of such complex stack vs

    font-family: sans-serif;
Why reinvent the wheel when you can just use this and it would use browser's default sans-serif font setting? Which users can define to whatever they want, system font or not.


> Why reinvent the wheel when you can just use this and it would use browser's default sans-serif font setting?

I've done lots of testing and very often a font stack gives better looking results than simply using the default. People who came up with these font stacks didn't do a bad job at all. I'd say it's especially noticeable on Linux (but not only): the default may really be freaking ugly compared to one of the previous font in the stack.

> Which users can define to whatever they want, system font or not.

But most users really don't bother do that. Heck, out of simplicity I don't even do it: the reason being I like to see how others are using fonts on their sites and I don't want to always turn my font overrides/default on/off. I want to know if the sites looks good "without any user intervention".

One problem with font stacks though is those who picked one then forget to update them when new, much better, fonts installed by default comes out. For example a shitload of websites on the latest OS X / M1 macs are going to fall on Helvetica first (because they use outdated font stacks) and use that even though the world as really moved on and came up with incredibly better looking screen fonts than Helvetica (I'm not saying Helvetica doesn't still have its place in print).


>People who came up with these font stacks didn't do a bad job at all

Not without trial-and-error. Twitter, GitHub, and Stackoverflow all got huge complaints for their font changes and had to revert/revise their font stack choices quickly due to the outcry.

In SO's case which I followed, they didn't even have anyone to test their UI on Windows at all. I don't know how that's "a good job".

>and I don't want to always turn my font overrides/default on/off

Just to clarify a little bit, by "user can define it" I'm not saying to override using custom CSS or anything. I'm saying users can choose the default sans-serif/serif/monospace fonts in all major browsers. Any specific fonts defined in CSS other than sans-serif would still override that.


There is something incomplete feeling about just the default styling. If you're going for a brutalist design mentality then sure, go for it, but sometimes the appearance actually does matter


I'm not against using font style; I'm against (or more like, failed to see the point) to manually craft a complex "system font stack" to achieve.. basically the same thing as sans-serif but worse.


If you're building a web app (say, via electron) as opposed to a site or document, using the system font stack will make that app fit into the desktop environment much better than Arial, Times New Roman and Courier New will.


But that's not what was being compared.

How would electron apps render a "sans-serif" font?


What is being compared? Because to me it read like a question of choosing 'sans-serif' over 'ui-system-font-sans' or whatever in your CSS. Nothing more than that.


"System font stack" — which I took to mean the longish list of commonly known default fonts for a bunch of OSes brought up earlier in the thread — with a CSS value of "sans-serif".

There was no mention of direct use of Arial, Times New Roman or Courier that I could see, so I don't see why bring it up.


He/she is trying to say what the default of "sans-serif" would be if not 'ui-system-font-sans'.

And it indeed is the same font on Android and iOS, at least. Windows is kinda tricky though.


Thanks for pointing out Stack Overflow’s subsequent updates.

They removed system-ui which, as you pointed out in the other comment, can cause problems for some OS languages:

  @ff-sans:
    -apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS
    "Segoe UI", // Windows
    "Liberation Sans", // Linux
    sans-serif; // The final fallback for rendering in sans-serif.
  @ff-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  @ff-mono:
    ui-monospace, // San Francisco Mono on macOS and iOS
    "Cascadia Mono", "Segoe UI Mono", // Newer Windows monospace fonts that are optionally installed. Most likely to be rendered in Consolas
    "Liberation Mono", // Linux
    Menlo, Monaco, Consolas, // A few sensible system font choices
    monospace; // The final fallback for rendering in monospace.
https://github.com/StackExchange/Stacks/pull/642/files


Why not just `body {font-family: sans-serif}`? Like, you don't have to explicitly enumerate all sans-serif system fonts ever. The browser will handle it.


Sometimes you care a lot about the design of the website and that everything looks 100% OK in all browsers and screen-sizes. For example, think web agency landing pages, where you're supposed to sell your service to potential customers.

In those cases, using whatever font is usually not good enough, because many of them have different sizes (both length-wise, height-wise and line-height-wise), so if a user gets a different font loaded than what you have tested with, it could at best just have a different size (right-side of the text is now 3px away from the side rather than 6px for example) and at worst introduce line-breaks in your buttons that only expects one line of text, making everything look very fugly.


If you care that much you need to bundle the font with your site.


Yeah, I mean... Yeah. How is that an argument for just using `body {font-family: sans-serif}`?


Which is what web fonts are. But you still have to handle the case and do something reasonable if the user or user-agent doesn’t load web fonts.


Because they want to have a tighter control of user experience, which includes the choice of the font used to display text. So they list their preferred fonts first, with fallback fonts at the end.

It’s a fair reason with an appropriate CSS pattern.


I, like the GP, fail to see how listing dozens of fonts of completely different nature (x-height, line-height, width, proportions, weight...) provides any "control of the user experience".

This seems to be developed for browsers which do not default to system-wide fonts: which ones are those today?


The typical font stacks IMO always forget to put "Liberation". For many Linux desktop users it's going to be the best available when Oxygen/Cantarell/Ubuntu aren't there. Many Debian users, for example, are going to have Liberation and not the others. It's sad that a fugly default is often going to be picked up for these users instead of Liberation.

So: modern font stacks... Not bad, but not yet the panacea either (even for big websites who really should know better).


I prefer DejaVu family of fonts.


I am a firm believer in this and just using built in fonts in general. Users really don't care about fonts, they really don't. And if you really need a specific font for say a logo, use an SVG with the text converted to paths. But of course only do that in image type situations and provide alt text.


I just disable webfonts by default myself. I wonder how common that is. I never felt that I missed anything, because let's face it: in 99% of the cases you jump on a website through search and leave it within 60 seconds.

I make exceptions for websites that I visit regularly, where the most frequent breakage is a custom font that packs icons. On websites that I frequently read for documentation I sometimes even swap the font to something that I prefer (by injecting a @font-face src:local rule).

Designer's choice of fonts are frequently lower in legibility and/or do not have good hinting (not at the same level of most system fonts). On non-retina displays the qualitative difference is sometimes staggering.


> Designer's choice of fonts are frequently lower in legibility and/or do not have good hinting (not at the same level of most system fonts). On non-retina displays the qualitative difference is sometimes staggering.

This. Plus sometimes, for some reason, they choose hair-thin versions of fonts that are a pain to read even on (non mac) retina displays.


He forgot one: inline the font data (evil cackle).

This made sense for me in conjunction with subsetting for a stopwatch app that only needs 10 digits and a colon.

I submit it's not so bad if you inline it with the rest of your styling, at least that's cacheable separate from the content.


I’ve been meaning to build a PoC where you subset to the glyphs shown above the fold, inline, and then download the full font face at a low priority.


You could inline a dummy font containing only the font metrics. Then replace it by the real font after the initial render.


That also sounds interesting! My goal is to have the characters visible on the first render, whereas that sounds like the glyphs would be invisible – albeit accurately sized, and therefore preventing layout shifts. Correct me if I'm wrong :)


I was going to suggest that too.

Separate metrics files have already been done too (both with TeX in TFM files and Adobe/PostScript fonts in AFM/PFM files), so you wouldn't even have to invent a new file format.

Or you could simply use a regular font with no glyph curve data.

I am a bit disappointed this is not covered in the original post, and that no effort is being put in W3C to make that easy and viable.


> I am a bit disappointed this is not covered in the original post, and that no effort is being put in W3C to make that easy and viable.

Yes. What would be interesting is if you could use an a-priori available font (system font), and combine it with a website-provided font metrics file. That way, you can render visible text immediately, and then later render the correct font without layout change.


Yeah, but strictly as a solution to shifting layout, having metrics asap and actual text display later — when the glyph data is downloaded — is the most obvious solution.

Rendering a similar system font (by metrics comparison, ideally) in its place is indeed a great improvement on this, but mostly for the render-as-soon-as-possible problem.

I'd treat it as a separate problem simply because it can be on the user agent to decide to do it and how, and even without it, a bunch of web apps would start benefitting right away (those which have most of their actual text off screen but which might block rendering other parts of the page).


If fully automated, this would be quite slick.


You can use a library to take care a lot of FOUT versus FOIT experience. Face Observer (https://fontfaceobserver.com) lets you wait for the web fonts to load, then responds accordingly.

    var html = document.documentElement;
    var script = document.createElement("script");
    script.src = "fontfaceobserver.js";
    script.async = true;

    script.onload = function () {
      var roboto = new FontFaceObserver("Roboto");
      var sansita = new FontFaceObserver("Sansita");
      var timeout = 2000;

      Promise.all([
        roboto.load(null, timeout),
        sansita.load(null, timeout)
      ]).then(function () {
        html.classList.add("fonts-loaded");
      }).catch(function (e) {
        html.classList.add("fonts-failed");
      });
    };
    document.head.appendChild(script);


If you do this please make sure to not hide things when scripts are disabled.


> Downloading one or two font files to render text won’t have a massive impact on speed, downloading five or ten font files will!

I wonder why we almost never talk about the actual filesizes of different fonts and which ones take less space, for when the total size of our webpages is important and we'd like to make our font choices with that in mind, provided that we don't want to just use the system fonts for whatever reason.

For example, i described some of the specifics of serving my own fonts on my site instead of using Google Fonts in a discussion about privacy some time back: https://news.ycombinator.com/item?id=29996364

The question that i posed in that comment still hasn't really been answered and is still relevant in my eyes:

> While we're on the topic of fonts, it's a shame that we don't think more about how heavy the fonts we choose to use are, since right now serving my own fonts eats up around half of the bandwidth on my non-image-heavy site. The single article that i've found on the topic so far as been this, "Smallest (file size) Google Web Fonts": http://www.oxfordshireweb.com/smallest-file-size-google-web-...

Why doesn't Google Fonts have a field somewhere that'd show the total size of a font in any number of supported file formats? Why do we have so much effort towards optimizing the sizes of images, and yet fonts don't get the same love?


Heh, if I serve custom Japanese fonts we happily go into the megabyte range.


Adobe Fonts does a pretty crazy thing for East Asian fonts where they stream glyphs on demand to the page: https://helpx.adobe.com/fonts/using/dynamic-subsetting.html

I've been keeping an eye out to see if there's been an equivalent FOSS solution but nada so far.


Yeah, this is fantastic if you want constantly blinking text.

We used adobe fonts for a while, but I really wasn’t impressed.

Hundreds of dollars to buy a font it turned out we could only use through their hosted service.


That’s why you subset it when you have to use one. I’ve used CJK font subsets measured in single to double digit KBs in my own designs over the years, they’re fine. Don’t count on using a custom font for arbitrary text though.


Lol, the website is in Japanese :) I can hardly have half of the characters someone types revert back to the system font (though I imagine it would look really funny).


Fonts on my website add up to around 40kb. It barely makes a difference.


> Preloaded fonts delay main JS bundle

Am I crazy or does that waterfall pretty clearly show nothing of the sort? When using http/2, a reasonable amount of preloaded assets won’t block anything else in the critical path…


Just use system fonts. Except on android, it's only roboto

And do use verdana, it's the most readable font. Admit it, you like it here


How to avoid layout shifts caused by CSS loading.

How to avoid layout shifts caused by images.

How to avoid layout shifts caused by ads.

How to avoid layout shifts caused by DOM changes.

It is funny how as many things moved to web we still have those basic issues, that would be considered show stopper errors in a desktop app.

Sometimes I would like for the browser to keep the state from 0.2 second ago when I decided to tap or click and do something like nothing did change in this time.


> How to avoid layout shifts caused by images.

And it’s funny how the state of the art way to address these issues is usually some absurd hack. Like in the case of images, setting the height to 0 and using padding to achieve a stable height: https://nikitahl.com/css-aspect-ratio.


Normal way to achieve img to have a size before the resource in src loads is to set width/height attributes to the native size of the resource that will be loaded (because you have to tell the browser size of an image somehow), and if you want to scale it with aspect ratio preserved you just use min/max-width/height in css to fit it to whatever size you need.


You’d think, right? But I tried that approach, and I don’t remember what the issues were but there were problems. Unless I was doing something wrong. Either way, yes, you need the dimensions ahead of time, which is reasonable and not my gripe.


> Unless I was doing something wrong

Probably this, that approach is very standardized now across the major browsers.

I worked at a web agency until last year, and led projects to inline image height/width values for 4 large companies. Huge reduction in CLS and permits you to lazyload without fear of layout shifts.

`aspect-ratio` hadn't landed in iOS Safari at that point, but you can do that instead now. Identical behavior.


Well, if you set max-width: something for example. You need to set other dimension as auto in CSS. So that would be height: auto.


The aspect ratio hack was replaced by the aspect-ratio CSS property: https://web.dev/aspect-ratio/

Which is supported in all modern browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-rati...

The state of the art for CSS these days is not that hacky.


Cool I didn't know this. Thank you.


>How to avoid layout shifts caused by ads.

Not sure this one counts as a bug, but a deliberate WONTFIX. I never intentionally click on ads, but I have been known to press one when an ad "happened" to appear in the position of some other content.


With the default settings I find this web page almost impossible to read (with my glasses on). The font is [too] small and the contrast is poor.

"Avoiding layout shifts caused by web fonts" is a great topic.

"Readability" would be another one.


If OS makers reached some kind of agreement to incorporate the most used 20 web fonts in their OS, 99% of this madness would be gone.


This was pretty much done with the original web safe fonts, but fonts have an element of fashion to it and moved on and pretty much all of them are seen as dated by the people who do specifically pick fonts.


And use the same 120 fonts in our website? What are we, plebs? Plz download this 45mb font that we made this morning


Ironically, this website's heading shifted it's layout after the new font loaded (:


1. Don’t use web fonts.

2. There is no step 2

They just slow the web down and often make things less legible in the name of style.


Easy: don’t use them. They are a waste of time anyway. I promise you your users care 0% about whether your font is “just right” or not.


It’s not about “just right”. It’s about branding.


That’s just another thing your users don’t care about.


Spoken like a true hacker news user. Absolutely zero understanding outside of their field but still confidently parades their opinion.

Turns out that branding and consistency are actually very important.


Having a consistent logo is great and SVG is a good choice for that

But for things like the body font on a website, nobody really cares except the company's designers


The worst case of this kind of designer hubris I've seen is Qualcomm's website, which includes a webfont that's completely pedestrian except that it makes every "Q" look like the Q in the company logo — which is actually a pretty poor stylistic fit for the rest of that font.


Turns out with modern technologies it is never ever consistent, nor nice, fast, ergonomic. Heck, sometimes not even usable at all.


Until the HTML spec is actually fixed so this isn't a problem solved by jabascript/css hacks, this is the accurate answer


> Most designers will cringe at the thought of showing users a fallback system font.

Explaining them that web is not paper, helps removing a lot of this childish behaviour.


I guess it's a good thing the web is built for users rather than designers, then, isn't it? Oh wait.

On a more serious note, screw all the font **ery. Settings → Language and Appearance → Advanced → untick Allow pages to choose their own fonts, instead of your selections above. Better to have some crappy websites glitch out a bit than get a headache from trying to read 200 different fonts in a day.


> Settings → Language and Appearance → Advanced → untick Allow pages to choose their own fonts, instead of your selections above.

Done! Thanks for the reminder!


I switched to using ublock origin to do that, since I can quickly add an exception for a site. Some sites use fonts for icons. Most of them are still usable but just look a bit silly, but sometimes it's annoying to the point that I want to add an exception.


Let's see if I get this right:

(0. Install uBlock Origin)

1. Re-enable web fonts

2. In the main UO settings, check "Block remote fonts"?

3. Refresh a page

4. Click the UO icon, and then "more" until I see an icon titled "Click to no longer block remote fonts on this site"

5. Click

6. Refresh the page

Repeat 4-6 for relevant sites.

Any caveats?


Yep that's how I so that, although in step 4 I don't have to click "more", I immediately have an icon with a capital A that toggles fonts at the bottom. But maybe I configured it to automatically expand something that is by default hidden behind a more button... I honestly don't remember.


Oh, also, I have to remember to click the "Save" button, otherwise it resets when I restart Firefox.


Given freetype's long history of buffer overflows, I think disabling web fonts is a very good idea.


I do think that sites should strive to "just work" with nice system fonts (and respect user agent settings), but this is just an obtuse answer.

You can ship your own fonts. Everyone and their dog uses one of two web browser engines. People want their websites to "look right". You can offer a fully specified look!


And there is always someone on XP who complains your website looks like crap because their defaults look like crap while every other website bundled it’s own fonts and inputs.


Yea, windows XP has to be supported, sure. But then suddenly drop support for firefox because no one uses that.

Meh.


Designers want the web-app to look like their figma. Most are not willing to compromise on that.

It takes senior engineers (with weight in the company) to lead the effort to force design to concede on certain things like this.


everything that I use computers for has been ultimately to produce aesthetics to my exacting standards a example of which is the 8 years taken from first sketch of my redesign for the company logo to first example of use. But I refuse to allow applications like Figma on my company computing assets. You probably wouldn't be hired if you used such things as part of your work flow anyway. Good design begins with pencil and paper and writing down the words describing what you are trying to accomplish. Art has its own internal function and architectural laws of physics and materials sciences. Great art is like cathedrals (of very well thought out bazaars) the culmination of not only one or more crucial leaders of the design, but the ecosystem of cultural heritage and interpretation and conversation and argument that you are communicating with the viewer. When your typical Figma dogmatic sees their font rendering to their knee jerk repulsion that's really being affronted to have their South Park Authority challenged, all I am seeing is the subtleties and nuances of a critic composition potentially becoming unstable rather in the manner a engineer sees weakening structures and worries about how long and effectively can the edifice perform it's intended task.


I can't tell if this is a joke or not, we're talking about websites.


And for that matter, let’s put the kibosh on the childish act of using colors as well


Except it doesn't. The usual fallback I've experienced (been told to do) to this is to preload the whole site behind a loading bar instead :)


I was told so recently. But it wasn't even for the font loading. It was to load the animated transition to transit from nothing to the entry page.

So to instead of dropping (or at least thinking about optimizing) the loading transition the designer (with a straight face) proposed a loading bar for the loading of the loading animation.

I was lost for words.

[Edit: typo]


I’m sure there’s a few exception, but why do anyone care about which font is used as long as the basics such as fixed or sans serif is applied correctly?

The answer is most likely branding, but I don’t recall landing on a company website and going: “That’s not the font from their design guidelines. This is unacceptable, I shall take my business elsewhere”

All this tweaking and hacking font loading is a vaste of time.


I gather from your comment that you don’t do frontend. I don’t either. I also think it’s a waste of time. But I think you and I are not the intended audience. I think frontend people are trying to design an experience for users. The same way you or I might be designing an architecture for the system. They want it to look and feel a certain way in order to provoke a response.


I do front end. It's a waste of time. Pick a common one you like and move on.


Branding is bit subtler than that — you’re not going to really say anything about Target’s consistent styling, versus Walmart’s fairly austere aesthetic, but you definitely get a different “feel” from each, before looking at their actual contents/stock.

I don’t know whether fonts are really that important to the total equation, but “not terrible enough to walk out the door” is generally a very low bar to meet when designing a thing.

Another example in the app space — you know enterprise apps will get the job done, but they’re downright unpleasant to use; from aesthetics to workflow efficiency, they just barely hover over “dealing with it isn’t worth the output”. But that’s generally not where you want things to sit as a design goal.


> Another example in the app space — you know enterprise apps will get the job done, but they’re downright unpleasant to use; from aesthetics to workflow efficiency, they just barely hover over “dealing with it isn’t worth the output”.

While this is a good point, i don't feel like a discussion about fonts is relevant here. For example, when working with Jira, i don't care about what font it uses, as long as it is legible (e.g. even whatever is the default sans-serif font would work), whereas what actually matters to me in such a context is the responsiveness of the UI and how well it works, UX over UI.

If Jira's interface is laggy and slow, or just cumbersome to use because their implementation of custom fields is weird, no font or logo choices will make any of that markedly better. In my eyes, how something looks is largely decoupled from how well it works - if Jira were a GTK/Win32 app with almost no styling, but worked faster than it currently does, i'd probably get more value out of it than i currently do, fancy UI or not.

(just using Jira as an example here, because their UI redesign did make things slower and got some backlash from users that was ultimately ignored, i bet the same applies to a lot of other software out there, e.g. how Flutter apps oftentimes break right click behaviour in browsers etc.)


I’m not sure I understand the point about enterprise apps, because that can go both ways. Custom company application tend to be the worst, because they apply all the company branding guidelines, rather than just applying to system defaults.


I’m not making the case that one being better than the other, or really trying to say anything about custom vs enterprise.

My main point is simply that there’s a significant gap between “it can be used” and “it can be used well” — and a designer’s primary job is to bridge that gap (generally the engineer in us takes us to “it can be used”). That (some? many? majority?) designers aren’t competent is a separate concern… but their abstract goals are fairly obvious and intuitive if difficult to specify concretely

And we understand this intuitively, because there are many apps in our section of the universe that fall under it can be used — back-office apps, enterprise apps, etc a constant offender (not say good ones don’t exist, or bad custom apps don’t exist, or bad designers/designs don’t exist… etc — but we’ve all probably encountered a good few that are astoundingly unpleasant to use)


yup, users then even feel violated because some "great" manager somewhere told devs to screw over users settings and for example force user to look at animations, which is like 100 times worse than fonts mentioned earlier.


> why do anyone care about which font is used as long as the basics such as fixed or sans serif is applied correctly?

Because typography is a means of communication.


I still don’t see how picking a custom font over a default one contributed much to communication. Sure, the font need to be legable, clear destinction between letters all that stuff, but the system fonts is most likely better than a custom one for those things anyway.


Design and art communicate. In fact, that's all they do.

Fonts are associated with different periods of time, different groups of people, different artistic and even philosophical movements. Picking a font can help communicate how you see yourself and what you are trying to achieve. A picture paints a thousand words.

A world without typography would be a poorer world.


Then why not share all typography with everyone under a license, that allows every OS maker to include all the fonts they want plus allowing users to choose what else to install and then only use system fonts? That way we can have it all, fast websites, without additional secret server side tracking, and the fonts of the system being used and the artist getting their message communicated. No need for any web font.


I guess there aren’t any commercial incentives to do that.

But that doesn’t change that typography is valuable.


We can definitely agree on that. I would want every designer to be able to express themselves as they wish to, without forcing their vision on everyone.

I just don't want to download megabytes of fonts when visiting a website, sending an additional request to some Google servers. It will always remain blocked on my end. I hope we can somehow get to a solution, that allows each side their choices, instead of prefering one dictating how things are regardless of the other side's wishes. That means, if I choose to have all websites display their text in some font meant for dyslexia, I should have the possibility to do so, without the whole design breaking. If I enjoy monospaced fonts perhaps (although that is a stretch) even that. Or if I just want my plain and simple system fonts, I should be able to do that and still make use of the website like every other visitor.

At least this much I expect from a proper design. CSS these days is so powerful, I would expect web designers to know their tools, including what can be done with CSS3, their choices and the consequences for visitors.

I am not even a frontend developer mainly. I do all kinds of things, sometimes also frontend, but I prefer not to. Yet I have apparently informed myself more about what is possible with CSS and the right approach to responsive design, than what I see implemented in many websites. I feel that some basic knowledge about what CSS can do should be a minimum requirement for anyone touching frontend stuff. It makes me question, whether there ever has been a web designer giving proper thought about some websites and a person, who has tested these things like "What happens, if the webfont is not loaded?". Maybe the website is some quick and dirty output of some tool, and the actual person developing the website had no good knowledge about web development and their tools. Ultimately what does a website consist of? Mostly HTML, CSS and perhaps if needed some JS. Some static resources like images, OK. If one does not know these well, how does one expect to deliver good work?

Perhaps it is also that people are not given enough time to really make a good design and implement that with proper CSS. Design and implementation of it takes time. It is the reason, why there is a job or role called web designer, UX designer. Someone actually gets down to it and does a good job, that earns my respect. But not this "Oh you used a slightly different font, the design of this website cannot work properly any longer!"-crap.


Then they might stick to pdfs, ragged-left blocks of text suck.


Exactly!


Maybe it's time to bring back "Weaponized" Comic Sans: http://www.openbsd.org/papers/bsdcan14-libressl/mgp00025.htm...


i have tried to ask people a simple question. "why do you think you know fonts better than microsoft or apple?" not to even talk about linux for a moment here. do these multi trillion dollar companies making operating systems do a shit job at fonts that each and every website developer needs to use google fonts that increase dependency on third parties than using system default fonts?


Yes, Microsoft does do a shit job at fonts. Many Android vendors too. Don’t even get me started on Linux.


I love my linux fonts, there's nothing wrong with them. You must be out of touch with reality.


I don't know the technical details of font implementations. But I do know on my low ppi monitor, Ubuntu fonts look far better than both Windows and MacOS.


> Don’t even get me started on Linux.

I'll bite. What's wrong with fonts on Linux?


cool. why don't you kindly ask them to fix the fonts by a bug request instead of everyone just assuming the stuff is shit


How productive do you think it would be to open a bug report with Microsoft telling them that Segoe UI/Arial/etc. are hideous? Do you think they will change them for me and/or license some good looking fonts to bundle with Windows?

Complaining and not using them is the only real option.


do you have a specific problems with fonts in say gnome or kde team? they would be more responsive for sure.

besides, i refuse to accept that the billions microsoft and apple in particular spent on truetype/cleartype fonts or whatever the tech is, is so poor that you are forced to use something else. i... i mean how can that be.... do you have some proof of this?

>Complaining and not using them is the only real option.

so microsoft and apple will be in your opinion forever content with shipping "shitty fonts" as "defaults" which run on billions of devices, android comes with fonts that run on many billion devices and they ALL are using shitty defaults and these multi trillion dollar companies do not know better than your average hacker news reader. nice. i am in good company lads.


Not particularly a fan of custom fonts, but fonts are not one size fits all. Apple or Microsoft default fonts are designed for the general use case, and other fonts might be more suited in a different context. Whether that's worth the cost, that's a different question.


come on. i am not expecting to visit an art gallery when i browse the current website or your local news portal or a blog or youtube. do you really think each and every website "needs" to individually tailor fonts to their "exact millimeter position" or otherwise the result will be utter garbage?

>and other fonts might be more suited in a different context

that is why "general use case" is my point. can you point me a specific example of where my current default "noto sans 10 pt" in kde neon is NOT suited for a specific use case? i want to see that unless i use a developer decided font, i would be totally off base, i would miss the plot, i would read garbage, etc etc.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: