1. 43

This my website’s first appearance on lobste.rs. I was inspired by the discussions here and on the orange site about the 250kb club.

I also published a version on my Gemini capsule.

  1.  

  2. 14

    I don’t really agree with your take on webfonts; I use it on my personal website because … I think it just looks nice. Call that “branding” if you will, but I don’t think there’s anything wrong with making your site look nice according to your personal aesthetics. You may dislike these aesthetics, but I don’t really subscribe to the “functionality over form”-ethos.

    This adds about 140k, which is comparatively a lot considering the actual content is ~35k (13k gzip’d, and depending on page length), but it’s not really that large and it’s optional – the site will work fine without it. It’s still small enough to be in the “250k club”.

    One of the great features of the web is that you can override the site’s choices if you don’t like them. This is what “reader mode” is all about, but I tend to use a little bookmarklet if I don’t like the font size, colour, or style and which preserves the layout and such:

    javascript:(function() {
        document.querySelectorAll('p, li, div').forEach(function(n) {
            n.style.color = '#000';
            n.style.font = '500 16px/1.7em sans-serif';
        });
    })();
    

    This is really simple, but works well on ~90% of websites, the biggest omission being that it doesn’t deal well with dark background colours (should probably spend some time on that, since I really hate “dark mode” and will typically just close a site with a dark background as it’s so hard to read for me). You can get a lot more advanced with stuff like Helperbird if you want.

    More practically, there are differences between font metrics on various platforms, and “word” in font A may render at 20px wide, but 22px wide in font B. I use DejaVu Sans Serif instead of Arial, which is a bit wider, and some labels and the like can break. And “12px” in one font may be quite legible, but difficult to read in another font. Different fonts also work best with different line-height values. These aren’t really big issues on personal sites and the like, but if you build an UI then it can become an issue, and “just rely on whatever the user wants as font-family: sans-serif doesn’t really work all that well.

    1. 9

      In my opinion, web fonts kind of suck. You’re just adding multiple seconds of load time before the text shows up, and it the network happens to be slow, you’ll get a flash of text with one font before it switches to the web font. Just not a very good experience. The amount of times I’ve sat there for seconds waiting for text to show up after everything else has loaded, due to the extra web font request, is infuriating.

      Just trust the user’s browser to have good default fonts.

      Of course this might not be the best idea for web apps with things like labels which must be of a given size, as you point out. But this is for text-based websites like blogs.

      1. 3

        Yeah, this can be an issue, but you can improve on that with font-display (optional or fallback). With the default of block there’s a 3s blocking timeout, but with fallback it’s more like 100ms which is a reasonable compromise. Also not loading 3 different webfonts in regular, bold, and italics helps (you can definitely overdo it), but ~140k is still reasonable even for slower connections (especially if you self-host it so you don’t have the extra overhead of DNS/TLS/HTTP).

      2. 6

        I don’t think there’s anything wrong with making your site look nice to your personal aesthetics.

        I totally agree with you on this, however I don’t think the solution is to use a webfont. My own websites use “monospace” and “sans-serif” as the only fonts, and then I tweak my system/browser settings (using fontconfig) so they map to my personal font tastes. This way, my website looks exactly as I want too, and everyone can make it look however they want by setting their own font mapping. Here is my ~/.config/fontconfig/fonts.conf:

        <?xml version="1.0" encoding="UTF-8"?>
        <!DOCTYPE fontconfig SYSTEM "fonts.dtd">
        <fontconfig>
          <!-- Override the ugly helvetica font too… -->
          <alias>
            <family>Helvetica</family>
            <prefer><family>IBM Plex Sans</family></prefer>
          </alias>
          <alias>
            <family>sans-serif</family>
            <prefer><family>IBM Plex Sans</family></prefer>
          </alias>
          <alias>
            <family>monospace</family>
            <prefer><family>IBM Plex Mono</family></prefer>
          </alias>
        </fontconfig>
        
        1. 6

          But then it looks nice for the 0.1% that take the effort to do this (and can stomach fontconfig’s XML), and not for the vast majority of people reading your site.

          CC: @Seirdy

          1. 7

            chances are the vast majority of people won’t share your aesthetic sensibilities and will appreciate seeing a font they are familiar with (and looks good with their system settings and screen resolution)

            1. 8

              The problem is that the vast majority of people (probably even the majority of users on this site, including me) don’t bother setting fonts in their browser. Plus, fonts can convey a style/mood for the site, which is nice to see when well-done.

              Plus plus, power users can have their browser ignore fonts on a website, not download them, and just use their chosen fonts.

              1. 2

                The problem is that the vast majority of people (probably even the majority of users on this site, including me) don’t bother setting fonts in their browser.

                I figured this response would come up, so I addressed it in a dedicated section.

                Fonts can convey a style/mood for the site, which is nice to see when well-done.

                This makes sense for more complex websites, but I’d argue that textual websites should be personalized with content rather than form.

                Plus plus, power users can have their browser ignore fonts on a website, not download them, and just use their chosen fonts.

                I addressed this in another dedicated section.

                1. 3

                  I personally think that things like Font Awesome are a problematic hack. The very fact that system fonts don’t have a good fallback for the symbols should really tell us something—namely that we’re abusing fonts. That said, if you need Font Awesome, just set the browser to a patched font with FA symbols.

                  Back to the main discussion, though. Likely the vast majority of people on the internet enjoy a nice-looking web page—i.e. a website that employs good graphical design. And the authors who want to design them often don’t do it for branding, which implies a desire for recognition, but rather for quality. The authors of “simple” pages (not companies) just want to think their own site looks nice. So there’s a demand for these stylized sites, and the creators of them don’t have to have some kind of evil, manipulative intention.

                  In general, asking people to stop loading custom fonts makes me think that browsers need more work, or that some layer other than the site itself is at fault. The whole point of a browser is that it will enable you to browse and view the Web how you want. If a website suggesting a font to you breaks everything, then we have bigger problems.

              2. 4

                While there is a place for consistency, i think there’s also a place for personal style. For example, when visiting someone’s house, i like to see that it has its own style, different than mine. And in a similar way, i like seeing people’s styles when visiting their personal websites. It makes them more memorable to me than if they all looked the same, like Medium or FB posts. And it can also give some nice ideas to steal to try out on my own projects/house.

                But i guess there’s something to say about consistency too. After all, books can “all look the same” in the sense they they are only text, but of course their content can be vastly different. So, i don’t know, maybe these two different viewpoints can co-exist? Maybe have some personal presentation, but also let readers easily “extract” the content into their own format/devices?

                I feel i’ve been doing something like this for a while: when reading articles on my computer, i usually use the page’s style instead of the browser reader mode, but sometimes i send the article to a e-reader to read later (using this extension), which strips all the website personalized styles and converts the article into ebook-friendly format.

                1. 3

                  Thus far the only feedback I’ve got “hey, looks nice”, and the only negative feedback has been on some minor technical issues. Personally I’m rarely bothered by a webfont unless it’s some crazy stuff like a very thin font (or a low contrast colour). This probably applies to most people, and the people who are really bothered by it are very few, and they all hang out on sites like Lobsters. I don’t think it’s representative for all people viewing your site.

                  1. 1

                    What is the DPI of your monitor

                    1. 1

                      I used a 14” 1366x768 screen up until a few weeks ago, and I have a 26” 1920x1080 screen. I’m too lazy to calculate the exact DPI, but neither are very high. I’m not sure how this is important though?

                      1. 1

                        IME web font hinting is worse than hinting on native fonts, which is more of a problem on low DPI screens. But I guess people get used to it.

                        1. 1

                          Can’t say I ever noticed this, but to be honest I don’t really have a good eye for these kind of things either. I’m happy with just “DVD quality” for films too 🤷‍♂️

                        2. 1

                          Serif fonts aren’t usually as good on low-DPI screens, which is why computers tend to use sans-serif fonts.

                          1. 2

                            Only at small sizes, and not even with all serif fonts. “Serif fonts don’t work well on low DPI screens” is extremely simplistic to the point of uselessness. And it also has nothing to do with webfonts (actually, with webfonts you can choose a serif font that you know will work well for your particular use case).

                            1. 1

                              Only at small sizes, and not even with all serif fonts. “Serif fonts don’t work well on low DPI screens” is extremely simplistic to the point of uselessness.

                              True, but browser-default sans-serif fonts are also far more likely to display well than custom fonts, in my experience. Far too many websites with custom fonts end up being harder to read. For example:

                              Thus far the only feedback I’ve got “hey, looks nice”, and the only negative feedback has been on some minor technical issues.

                              Your site looks pretty good (I knew you seemed familiar!). I’m not sure I’m a fan of the font choice, though.

                              Here’s a side-by-side comparison of how your website looks on my laptop with its default fonts and with my preferred sans-serif font: https://seirdy.one/misc/arp242.net_fonts.png

                              I didn’t zoom out; that’s how it looks out of the box on my default browser with my dark-mode addon. The italic text–especially the small italic text–is much more readable in sans-serif. That isn’t even the lowest-resolution screen I use; if I used one of the campus library’s spares, the italic text would probably be unreadable.

                              Low-res screen users aren’t the only demographic with strong font preferences. Another example: dyslexic users might set their preferred font to Dyslexie; it’s not the prettiest, but it does help with this disability.

                              Branding isn’t evil, but it can have big trade-offs. I’d rather have text-centric websites distinguish themselves through content, and allow users to dictate presentation.

                              Also: would you be okay with me updating the article to include the screenshot of your website? I’ll pair it with a shout-out since I have found some interesting content there in the past.

                              1. 2

                                Low-res screen users aren’t the only demographic with strong font preferences. Another example: dyslexic users might set their preferred font to Dyslexie; it’s not the prettiest, but it does help with this disability.

                                Sure, I appreciate that, but one of the great features of the web is that it’s all so easy to modify with client-side tools. For example with the bookmarklet I posted earlier, or the myriad of extensions that are out there. I’m not “forcing” my font preferences on anyone, or “dictating” the presentation, they’re just a default that’s fairly easy to alter if you want, just as you modified the colour scheme.

                                Arguably, browsers should capitalize a bit more on this; the “reader mode” that Firefox and Safari come with are a bit too invasive IMO since it mucks with the layout too much. I worked a bit on a less invasive widget/extension last year which swaps out just the colours and fonts, but never finished that.

                                Branding isn’t evil, but it can have big trade-offs.

                                I don’t really see it as “branding”; it’s just a font I like. I set up my email client to use the same font, as well as the “light-weight reader mode” extension that I mentioned earlier.

                                I wouldn’t use a non-standard font like this on a product website or the like by the way, but my personal website is my, well, personal space. While “conveying ideas” is certainly part of the reason I write stuff on there, the main reason is more about personal development and ordering my own thoughts on matters. I was happily putting stuff up for years without anyone taking much notice or reading it.

                                If I had my way then I’d also enable the old-fashioned ligatures on the main body text (right now it’s just for headers), as I feel it looks handsome 😅 But since most people aren’t used to it, it’s probably more distracting than anything else.

                                Also: would you be okay with me updating the article to include the screenshot of your website? I’ll pair it with a shout-out since I have found some interesting content there in the past.

                                Yeah, sure, I have no problems with that. Thanks for asking.

                  2. 1

                    I addressed this in the article in a dedicated section.

                    Furthermore, fontconfig isn’t the only way to change fonts; most browsers’ settings pages let you change default fonts with a drop-down menu that’s a bit less intimidating for non-technical users.

                2. 3

                  Edit: I updated the article to contain this information. Diff.

                  I agree that the default sans-serif font family doesn’t look good, which is why I change it in my computer’s gtk3/fontconfig settings. Now every website that uses sans-serif will have my preferred font. By setting your default font family to sans-serif, you automatically use the font family of the user’s browser. Users who care very much about fonts will be pleased to see their favorite font automatically selected.

                  I should address this more clearly. Thanks for the feedback!

                  1. 1

                    As for the size, you can consider subsetting your font with pysubset. On my website, I get 23k for the text font (regular and italic) and 7k for the code font (regular). It also enables you to start from a font with extensive coverage to get most characters.

                    Another argument for a web font is that you can ensure the text font and the code font matches. You can’t really get that with a font stack and you definitely don’t get that with the default fonts. Many websites apply a size correction for the code font to make it fit more with the text font. Code font also often have a background to make it less visible there is a mismatch. There is also often a difference with boldness. In my case, I have matched both boldness and x-height of text and code fonts and I find it easier to read this way.

                    1. 1

                      you definitely don’t get that with the default fonts.

                      Most OSes and browsers set default sans-serif and monospace fonts that fit together, and users are free to change these if they like.

                      The article also explicitly addressed how to change colors (such as code backgrounds) properly. Nowhere in the article did I mention font sizes. Maybe I wasn’t clear enough.

                      The article itself practices what it preaches; it uses default fonts without the resizing issues you describe, at least on the graphical browser engines I tested (Blink, Webkit, Gecko, Links, Netsurf, Dillo, and Trident [Trident tested via webpagetest.org]).

                      1. 1

                        Most browsers default to Courier and Helvetica or a variation (Courier New and Arial). They absolutely do not match. Courier is a slab serif font. Remove the gray background and you should see there is quite a mismatch between the two.

                        1. 1

                          I’ve since replaced the grey background with a soft border to better accommodate users who override the default fg/bg colors; try reloading and skipping the browser cache. I don’t see too great a mismatch, but this probably comes down to personal preference. And the best way to satisfy users with the strongest personal preferences is to use their preferred fonts.

                    2. 1

                      The problem with very many sites using web fonts is that a) they don’t specify any fallback fonts, or at least b) they are not designed with the fallback fonts in mind.

                      I block all web fonts (except icon fonts, which don’t even get me started…) in my browser, and many sites look terrible.

                      1. 2

                        That just seems like an implementation defect rather than a problem with the concept of webfonts. I always test with webfonts disabled to make sure the results are reasonable.

                    3. 9

                      This is all very cool, but it is 2020 and we still can’t share mathematics through the web (as well as gopher, and gemini for that matter) without using images, scripts or SVG. Considering that the web was envisioned as a way for academics and scientists to share knowledge, this is saddening. We should already have a lightweight way of sharing maths by now, readable using text only tools such as Lynx or w3m.

                      1. 3

                        a lightweight way of sharing maths by now, readable using text only tools such as Lynx or w3m.

                        How would this work in Lynx, because terminals have very limited graphical drawing capabilities, so more complex equations would be difficult or even impossible to render in Lynx, I think?

                        1. 2

                          You can use KaTeX, not requiring Javascript when pre-rendered and using math fonts.

                          1. 2

                            I agree, it’s a sad state of affairs that the best approach for math on the web is to add JavaScript which parses and renders latex.

                            1. 1

                              why not store the rendered product and serve it directly

                              1. 2

                                It’s possible obviously, but it sucks that the web has no native support for math.

                                I can’t, for example, copy/paste parts of an <img> tag. I can’t, easily and safely, let users in a comment form write math expressions. The web’s lack of support for math is, I assume, one of the big reasons why places like lobste.rs and reddit don’t support math expressions in comments. If MathML could’ve been relied on, I’m sure someone would’ve popularized a Markdown-flavor with math support already.

                            2. 1

                              You have multiple options:

                              1. Use PDF/LaTeX. These can have complex formatting, hyperlinks, and equations.

                              2. Use MathML, the standard for equations in HTML.

                              3. Use unicode characters, like tex-conceal.vim does. I don’t recommend using more than a tiny amount of this.

                              1. 6

                                Use PDF/LaTeX. These can have complex formatting, hyperlinks, and equations.

                                This is not web.

                                Use MathML, the standard for equations in HTML

                                Only Firefox renders MathML, and the page size gets huge very fast.

                                Use unicode characters, like tex-conceal.vim does. I don’t recommend using more than a tiny amount of this.

                                Not good enough when we want to write complex formulas with a lot of symbols.

                                1. 1

                                  Yeah, I agree that all three options are far from ideal. But those are our options that don’t resort to scripting (that I’m aware of; please LMK if there are others).

                                  Websites like Wikipedia seem to use MathML when it’s available, falling back to images. This approach seems to be the best available.

                            3. 6

                              The author dares to dictate to me their text. This is pure, unbridled arrogance – an assertion that the author’s thoughts and words are, somehow, more important than my own and deserving of being forced on me against my will! The only truly correct textual website is one which consists of a blank textarea, into which I will supply my thoughts. I realize that many people do in fact browse the web expecting to be exposed to others’ thoughts and words, but refusing to publish your own words makes your website easier to use for me, since I do not need to waste my valuable time blanking all text from your page before replacing it with the text I would have preferred.

                              Yes, this is sarcastic, and yes, this parodies the attitude presented toward fonts. A user who is opinionated about font choices always has the option to universally disable sites’ ability to show any font other than the user’s preference; fonts, and every other aspect of styling, are always only suggestions, never absolute dictates, as user-agents which allow universal imposition of the user’s preference over the page author’s preference always exist.

                              Thus it is not arrogance for the author of a page to suggest fonts, or other styling – rather it is arrogance for the reader of the page not to be content with the ability to say “I will automatically override your suggestion when I view this”, and instead to further demand of the author “you must never even presume to suggest!” Authors can suggest, and readers can ignore suggestions, and this is how the web ought to work. If the author of this specific page does not care for that, it appears a more amenable alternative to the web (for this author, at least) is already available to use, if perhaps not as convenient in terms of audience size.

                              1. 3

                                How do you go about changing the font for a website if it’s unreadable to you? Do you think the average user will know how to do this?

                                1. 2

                                  How do you go about changing the font for a website…?

                                  You have multiple options. The three I’m familiar with are changing the default “sans-serif” font in your browser preferences (easy), editing your widget toolkit (gtk, Qt, etc.) config file, or adjusting fontconfig’s “sans-serif” alias (more complex).

                                  Do you think the average user will know how to do this?

                                  No. I figured this response would come up, so I addressed it in the article. See the dedicated section

                                2. 2

                                  Edit: I updated the article to address your suggestion of global stylesheet overrides. Diff

                                  Thanks for the feedback. I should probably address why expecting users to globally override stylesheets is a bad idea. For instance, automatically overriding all fonts tends to break websites that use custom fonts to display icons.

                                  Not all websites are simple textual websites. There are times when it’s a good idea to assert branding over user preferences; I never said it was arrogant to do so. Perhaps I didn’t phrase this well.

                                  With Gemini and gopher, authors only send content and semantic information while user agents choose how to style it. On the Web, defaults need some slight tweaking for the site layout (and maybe a dark mode). But for textual websites, that’s enough. Tweaking the styles too much will make a website look out of place in the user’s system. This might be what you want, in which case this article doesn’t apply to you; it only applies to websites that revolve around text.

                                  1. 3

                                    This is inconsistent, though: you are wanting it to be good for users to set global preferences in one paragraph, and bad in another. You can’t have it both ways – either users should set preferences (in which case those preferences will override page authors’ suggestions), or they shouldn’t (in which case they’ll get the page author’s suggestion).

                                    And that’s without getting into the way you dismiss all font-family options other than serif, sans-serif, and monospace as “branding”. Authors do often have a variety of reasons for their font choices which have nothing whatsoever to do with “branding”, but you simply declare by fiat that no such reason could possibly exist.

                                    Consider a site like this one, for example. The author of that site has strong and informed ideas about how text and type ought to be set for web display, and they include the idea that default fonts are a sort of desperate last resort to be brought out in certain specific situations, but otherwise avoided.

                                    And let’s break down this comment:

                                    Beyond basic layout and optionally supporting dark mode, authors should not dictate the presentation of their websites; that is the job of the user agent. Most websites are not important enough to look completely different from the rest of the user’s system.

                                    First of all, authors do not and cannot “dictate” presentation, as I’ve already pointed out to you. They can merely offer a suggestion which will be applied as a default. And the core model of the web is a three-layered platform of content (HTML), style (CSS), and interactivity (DOM). This is not a new idea; it is how the web has been fundamentally designed for decades now. The notion that the web should be utterly unstyled save by user-agents was not a consensus view 20 years ago (I know, I was there), and isn’t today, nor should it be. Similarly, the idea that websites ought to look like “the rest of the user’s system” was a catastrophic failure, and most of the CSS features intended to make this easy were deliberately (like the “system colors” of CSS2) deprecated and removed from the standards many years ago. Not to mention, web pages which look like “the rest of the user’s system” can be actively dangerous to the user!

                                    All in all, you mostly seem to have immense difficulty with the idea that others might have different preferences than you do and, under the guise of “user choice”, you are essentially demanding that everyone else just switch to having your preferences. This is the only reason I can come up with for your repeated description of suggested fonts/styling/etc. as an author trying to “dictate”, or your sneering at how alternative fonts or styling are merely “branding” or some sort of assertion of personal importance.

                                    If you want your site to look a certain way, you can achieve that, and you have. If you want other sites to look that way, you can do that too. But to demand that others throw away their ideas of what their sites ought to look like, in service to you who already have the capability to override their styling suggestions, is the very arrogance you attribute to those other authors. My suggestion is you learn to move past it.

                                    Finally:

                                    With Gemini and gopher, authors only send content and semantic information while user agents choose how to style it.

                                    This specific use case seems to have reinvented the feed reader. Gopher is dead and may rest in peace; there’s no need to continue iterating on it or building gopher-alikes for what you apparently want, since feed readers will do just fine and feeds can even exist in the absence of a publicly-hyperlinkable version of the articles contained within.

                                    1. 1

                                      I never referred to “branding” as “merely branding”. Branding isn’t always bad. The branding on Practical Typography servers a good purpose. I wouldn’t characterize Practical Typography as a textual site because the visual presentation has an important connection to its content; a website about typography should show good typography.

                                      First of all, authors do not and cannot “dictate” presentation, as I’ve already pointed out to you. They can merely offer a suggestion which will be applied as a default.

                                      I already explained why overriding website stylesheets isn’t a great solution; the diff is in my previous comment in this thread.

                                      the core model of the web is a three-layered platform of content (HTML), style (CSS), and interactivity (DOM). This is not a new idea; it is how the web has been fundamentally designed for decades now.

                                      I agree that the web is not fundamentally unstyled and dictated by user agents. That’s why I explicitly stated that my advice doesn’t apply to sites that value branding or interactivity. It only applies to the subset of the web consisting of textual content that doesn’t need to be styled by authors.

                                      All in all, you mostly seem to have immense difficulty with the idea that others might have different preferences than you do and, under the guise of “user choice” you are essentially demanding that everyone simply switch to having your preferences.

                                      The gist of my argument is that simple sites should be styled according to user preferences, not author preferences. It seems like you’re talking to yourself.

                                      This specific use case seems to have reinvented the feed reader.

                                      Not all users wish to subscribe. Some are first-timers; others just stop by now and then.

                                      Gopher is dead and may rest in peace; there’s no need to continue iterating on it or building gopher-alikes for what you apparently want

                                      A wise man once told me, “you mostly seem to have immense difficulty with the idea that others might have different preferences than you do…you are essentially demanding that everyone else just switch to having your preferences”

                                      Being unpopular is not the same as being dead; if it were, then IRC, mailing lists, gopher, Usenet, BSD on the desktop, etc. would all be dead; however, they all have passionate communities that I’d encourage you to approach with an open mind before you dismiss them. You’re welcome to be dismissive after understanding the culture of these communities. Not everyone is concerned with market share or being a good investment.

                                      1. 3

                                        I wouldn’t characterize Practical Typography as a textual site because the visual presentation has an important connection to its content; a website about typography should show good typography.

                                        The point is that it’s someone drawing on the centuries of experience typographers/typesetters have in making text easy for readers to consume, and offering concrete informed advice to achieve that. Its advice is incredibly applicable to a “textual site”. It is about making text functionally good.

                                        I already explained why overriding website stylesheets isn’t a great solution

                                        If all you truly want is for the entire web to look identically “unstyled” (which really means “styled as you personally prefer”), though, overriding site styles is the way to do it. That’s why browsers nowadays all have some type of minimalist/“reader”/“distraction-free” type of alternate viewer built in, for example – it’s a feature that explicitly caters to your use case and does the hard work of unapplying styling while preserving functionality for you.

                                        The gist of my argument is that simple sites should be styled according to user preferences, not author preferences.

                                        Based on your comments, it appears that the only sites you consider “simple” are those which already follow your rules, which is a circular argument and raises the question of why you’d need to advocate for anyone else to also follow those rules.

                                        You’re welcome to be dismissive after understanding the culture of these communities.

                                        To take an example: I still use IRC on a daily basis, and have for 20-ish years. But I don’t try to make every other medium I interact with behave the same as IRC, and I don’t demand that everyone who wants to talk to me hop on IRC to do it – I also use a variety of other chat platforms and protocols to communicate with people for work or for fun, and I understand that IRC is largely in the “Netcraft confirms it” stage of existence, likely to reduce down to a much smaller user base (and really has already begun doing so) and an even smaller fraction of live chat than it makes up today. And in that sense, yes, IRC likely is, or is soon to be, dead.

                                        But what you really seem to want is for everybody else to abandon what they’re doing and remake everything to suit your preference. I’m telling you you’ll likely get far more traction, and more of the end result you seem to want, from a plain-text RSS or Atom feed than you will from trying to get people to switch to Gopher, because much of what you seem to want is a reinvention of things feeds already are quite good at (and they already have significantly higher adoption among the technical audience you’re presumably writing for).

                                        1. 1

                                          If all you truly want is for the entire web to look identically “unstyled” (which really means “styled as you personally prefer”), though, overriding site styles is the way to do it.

                                          As I explained, doing so also breaks non-textual websites. It’s better for a textual websites to obey user preferences in the first place than to have users attempt to alter websites and hope that they don’t break. Textual websites don’t need fancy styles because styles aren’t a significant part of their content.

                                          Based on your comments, it appears that the only sites you consider “simple” are those which already follow your rules, which is a circular argument and raises the question of why you’d need to advocate for anyone else to also follow those rules.

                                          Simple sites are sites whose content is text with the occasional image. Practical Typography is about something visual that can be reflected in its site design–fonts–so it doesn’t fit into this category. If your blog was about why the color blue is the best background color in the world, then I probably won’t be too unhappy if you set your background color to blue (as long as your color palette follows accessibility guidelines). My article describes a baseline that has exceptions. I don’t think most blogs have significant exceptions.

                                          But what you really seem to want is for everybody else to abandon what they’re doing and remake everything to suit your preference.

                                          What I want is for everyone to suit everyone else’s preferences.

                                          I’m telling you you’ll likely get far more traction, and more of the end result you seem to want, from a plain-text RSS or Atom feed than you will from trying to get people to switch to Gopher

                                          It’s possible to advocate for multiple things at the same time. This article didn’t advocate for people to switch to gopher (that line was only half-serious; maybe that wasn’t obvious enough. Perhaps I should add an emoticon or something). I’d say that the ideal text-oriented blog should contain an RSS feed AND follow these guidelines.

                                          I don’t subscribe to the RSS feed for every blog I read; sometimes, I read a post in a browser. Users typically don’t subscribe to an RSS feed before they read a post or two in their browsers. Also, not all readers would like to subscribe. For example, I’m guessing that you read this article outside of your RSS reader.

                                          Finally, I should clarify that I’m not trying to be as black-and-white as I may seem. Authors of “best practices” lists typically don’t expect everyone to follow them to the dot. They’re called “best practices” instead of “the only valid practices” for a reason. This list is opinionated. I’m encouraging people to follow as many of these guidelines as possible when they’re relevant, but I’m not going to be pissed off if that doesn’t happen. A website isn’t “bad” if it’s suboptimal, it just isn’t “as good as it could be”.

                                          I should probably communicate that last bit better.

                                      2. 1

                                        I updated the article to further clarify that branding isn’t evil. Diff.

                                        Thanks for the feedback.

                                  2. 5

                                    There’s some irony here in that the 250kb club website stores its list of websites as a static JSON blob that’s rendered to HTML at runtime. The code crashes on FF 75.0, meaning no list gets rendered.

                                    TypeError: t.replaceAll is not a function

                                    1. 5

                                      Regarding fonts - there is also system-ui now supported by most browsers. And maybe ui-monospace, ui-serif, and ui-sans-serif are coming (seems to be supported only by Safari now).

                                      I use system-ui on my site. However, recently I often come across websites that don’t set any font settings (not even serif/sans-serif) and look clean. here is one example. I am now tempted going that direction as well.

                                      1. 2

                                        That’s indeed an interesting idea to not set any fonts at all.

                                        1. 1

                                          Another well known technical writer that does this is danluu. I think it has a nice transcendence element to it - being at a place where you simply don’t care about fonts in your content.

                                          1. 2

                                            Compare and contrast with another nerd hero, Gwern. Also almost all text but uses typographical flourishes all over the place.

                                            1. 2

                                              Hmmm I would say Gwen has nice style, but poor readability: we have footnotes, pop-up boxes, citations, bold elements, tags, ~5% of words have links to Wikipedia. I feel like when everything is emphasised - nothing is. danluu website is a lot more structured and clear. So, strictly on the readability scale, I would rate danluu typography higher.

                                              1. 1

                                                Three issues:

                                                1. I’m not sure how I’d categorize Gwern’s site; it seems to be in a grey area between textual web documents and more complex sites, since its typesetting is arguably a significant part of the content.
                                                2. I’m not sure if I agree with Gwern’s font choices. Italic serifs don’t render super well on low-res screens.
                                                3. Here’s how the site looks with my preferred darkmode addon: screenshot. My article states that websites should look good with most “dark mode” addons. Websites that follow my article’s advice should automatically support most dark mode addons out of the box without any additional effort.
                                                1. 1
                                                  1. It looks like it will fit in 250k.club, so I’ve submitted an issue to add it
                                                  2. The entire site is obviously emulating classic printed matter (just look at the drop caps!) but with modern affordances, like large Wikipedia previews, logos as subscripts to indicate the source of a link, &c. Using a serif font is part of that. (The main font is Source Serif Pro, which is an open-source font from Adobe).
                                                  3. The site has a dedicated dark mode setting (top right corner).
                                                  1. 2

                                                    The entire site is obviously emulating classic printed matter

                                                    Yes, that is very nice, but it looks more like an art project than just a blog. That’s not a bad thing; art projects are awesome!

                                                    I would prefer that most blogs focus on textual content, though. There’s a reason why the best practices for textual websites and printed materials are different. Most serif fonts aren’t as readable as sans-serif fonts on low-res screens.

                                                    The site has a dedicated dark mode setting (top right corner)

                                                    This isn’t visible without enabling scripts.

                                                    It’s better to use a User Query to enable dark mode, since that way the website will default to dark colors when the user prefers it. I addressed this in a dedicated section. Users can use the same browser/system controls to toggle dark/light mode on all compliant websites without JS.

                                                    I also updated the article with links to MDN docs on providing an alternate color scheme. Diff.

                                                2. 1

                                                  I find Gwern’s website aesthetically pleasing. There was a similar website I came across related to essays about philosophical debates which I regret not bookmarking.

                                          2. 4

                                            I’m with you regarding fonts, I just use sans-serif too: https://jlelse.blog/dev/sans-serif-only

                                            1. 4

                                              I would add one more: No JS. I’ve fully embraces js-less web on my blog (https://goel.io). Of course it’s not something everyone can do, but I think everyone should at least consider. JS has become a much bigger problem IMO than larger page sizes.

                                              1. 2

                                                One of the bullet points in the list of best practices:

                                                • No scripts or interactivity (preferably enforced at the CSP level)

                                                To me, no JS/wasm/interactivity is probably the most important item in the list.

                                              2. 2

                                                I think this would be great in linter form.

                                                1. 1

                                                  /me takes notes

                                                  I might give this a spin over winter break.

                                                2. 2

                                                  Lots of good ideas here. Maybe there should be a CSS media query to decide what css to apply. I’d rather choose readable-mode than dark-mode.

                                                  1. 2

                                                    I’d rather choose readable-mode than dark-mode.

                                                    Shouldn’t a text-centric website already be readable? :P

                                                    There’s a bigger list of CSS media queries to request certain features based on device form-factor and settings. CSS media queries are a subset of the greater category of CSS at-rules that apply conditionals to CSS.

                                                    1. 1

                                                      “readable” was not the word I should have used. I meant something more like “minimal” or “text-based”. Kind of like media="print".

                                                      1. 2

                                                        Yeah, plain-text versions are nice. If a media query for specifying a preference for plain text ever takes off, I’ll be sure to support it.

                                                        I currently link to the Gemini versions of my articles in the article footers for any plain-text-loving readers, but most people don’t have a Gemini client. I should set up a Gopher hole soon; most desktop readers have a gopher client whether they realize it or not (try curl-ing a gopher link and piping the output into your preferred $PAGER).

                                                        Mobile, non-CLI, non-Gemini and non-Gopher users might also like a pure text-only verison, though. Maybe I could link the raw Markdown/gemtext source files at the bottom, paired with Hugo’s --enableGitInfo. Thanks for the idea.

                                                  2. 2

                                                    The font choice is interesting and probably the most controversial of the points made in the article. I’m glad that this is discussed more prominently recently, but there is no satisfactory answer to my taste.

                                                    It appears that if you want a font stack that doesn’t load remote fonts (which I wholeheartedly agree with) the best resource is a blog post from 2010. After that it appears that web fonts took off and hardly any serious effort has been devoted to that. I find that unfortunate.

                                                    In the end it might the most reasonable approach to just leave the font settings untouched, as suggested in the article.

                                                    1. 6

                                                      I can kinda buy into not recommending remote fonts for bloat and/or privacy reasons, but recommending sans-serif fonts just because they may not look nice on lower resolutions feels like advice from 1999. Remember that the default typeface for Netscape Navigator was freaking Times New Roman.

                                                      1. 3

                                                        Remember that the default typeface for Netscape Navigator was freaking Times New Roman.

                                                        Wait, isn’t that still the default for most browsers (or at least a libre-equivalent of Times)?

                                                        1. 3

                                                          I just whipped up a test page[1] and don’t you know it, you’re right.

                                                          I see TNR as the typeface version of “PLACEHOLDER CHANGE ASAP”. People shit on Comic Sans, but at least choosing that is a deliberate choice. Leaving TNR as the default is just incredibly lazy.

                                                          [1] http://gerikson.com/t/nostyle.html

                                                          1. 2

                                                            What’s so wrong with Times New Roman? I see it used quite a lot, from leaving it default in professional blogs[1] to using it explicitly as a design choice[2]. And to me it looks good.

                                                            [1] https://stevelosh.com/
                                                            [2] https://fitzcarraldoeditions.com/

                                                            1. 3

                                                              I might have typographical PTSD from overexposure of TMN from the mid-90s. Both sites look tolerable on HiDPI displays, but the kerning of the apostrophe in A Man’s World is a disgrace.

                                                          2. 1

                                                            The default serif font is usually Liberation Seirf, Tinos, or Times New Roman. The default sans-serif is usually the font used by the UI toolkit or whatever fontconfig has ailased sans-serif to; in other words, the system or user’s preferred font.

                                                          3. 3

                                                            sans-serif fonts are generally easier for people with dyslexia or dyspraxia, too.

                                                            1. 1

                                                              That’s a very valid point. I’m personally for people being able to override styling to fit their needs. I’m not prepared to design my own site just for this circumstance, but if someone who faced accessibility issues raised concerns I’d be very happy to accomodate them.

                                                              Related - does dark mode help with these issues?

                                                              1. 2

                                                                Related - does dark mode help with these issues?

                                                                I don’t personally know. The British Dyslexia Association says that dark type on an off-white background is best, but they do not cite sources for this. https://www.bdadyslexia.org.uk/advice/employers/creating-a-dyslexia-friendly-workplace/dyslexia-friendly-style-guide

                                                                Edit: This paper finds that reading is faster with a warm coloured background than a cool colour. Bizarrely, they didn’t compare with white or off-white backgrounds, but it’s some empirical evidence.

                                                                1. 1

                                                                  Users can set system/browser preferences to request alternate color schemes or use different default colors. I addressed both in the article.

                                                            2. 2

                                                              the default typeface for Netscape Navigator was freaking Times New Roman.

                                                              This is a flaw, IMO. TNR isn’t optimized for displays. Most serif aren’t as readable as sans-serif fonts on low-res displays; not everyone’s using a high-res 96dpi+ screen.

                                                            3. 1

                                                              Thanks, article updated.

                                                              Diff.

                                                            4. 2

                                                              What is wrong with local fonts? I use a “font stack” like this:

                                                              font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
                                                              

                                                              I guess the argument is that the user agent should decide the presentation? That is a fuzzy line though. You don’t want to remove all CSS, after all.

                                                              1. 1

                                                                Those fonts may not be the user’s preferred sans-serif fonts.

                                                                From the article:

                                                                Beyond basic layout and optionally supporting dark mode, authors should not dictate the presentation of their websites; that is the job of the user agent. Most websites are not important enough to look completely different from the rest of the user’s system.

                                                                A personal example: I set my preferred fonts in my computer’s fontconfig settings. Now every website that uses sans-serif will have my preferred font. Sites with sans-serif blend into the users’ systems instead of sticking out.

                                                              2. 2

                                                                I agree with pretty much every point in this article, and it has inspired me to crush the size of some image-heavy posts on my site from 500k to 250k. One thing stuck out:

                                                                “But most users don’t change their fonts…”

                                                                Is this style of argument even common? Having the same font everywhere is better than every damn site looking different and forcing users to waste bandwidth downloading whatever font is the flavor of the day.

                                                                1. 7

                                                                  Having the same font everywhere is better than every damn site looking different and forcing users to waste bandwidth downloading whatever font is the flavor of the day.

                                                                  It’s not better, the styling of text has been incredibly important for centuries, and even today it’s a substantial and exciting mode of artistic expression. I don’t want a site about botany to have the same design constraints as my bank, and I want my site to have a design distinct from others’ because it’s fun to do that, as a designer.

                                                                  I do think browsers normalizing a reading mode type feature is good, and it is kinda sad that there’s no normalization of users opting out of different classes of asset (fonts, javascripts, etc.) but the web of 1992 isn’t what went mainstream.

                                                                  1. 1

                                                                    the styling of text has been incredibly important for centuries, and even today it’s a substantial and exciting mode of artistic expression.

                                                                    Users are free to set whatever preferred typography they wish. The great thing about computers is they enable users to easily alter content to suit their own personal preferences instead of having to use a publisher’s standard formatting.

                                                                    I want my site to have a design distinct from others’ because it’s fun to do that, as a designer.

                                                                    I don’t think this is a good thing. I recognize that it’s fun to design your site to suit your personal tastes, but readers have their own preferences too. Having one window on my desktop that looks radically different from everything else is distracting. Textual websites should focus on content and should respect the user’s preferred styling.

                                                                    As I stated multiple times in the article, not all websites are textual. The article only applies to text-oriented websites.

                                                                    The web of 1992 isn’t what went mainstream

                                                                    The web of 1992 didn’t die either. Non-mainstream websites still run just fine. Gopher didn’t go mainstream either, but my gopher client still works correctly.

                                                                    1. 2

                                                                      Users are free to set whatever preferred typography they wish. The great thing about computers is they enable users to easily alter content to suit their own personal preferences instead of having to use a publisher’s standard formatting.

                                                                      With you so far; sometimes I wish it was easier.

                                                                      Textual websites should focus on content and should respect the user’s preferred styling.

                                                                      I guess I’m fuzzy on “textual websites” and “content” here; is it a website where you only have paragraphs of text? Can you use emphasis or strength like in Markdown? If I’m explicitly talking about colors, do I get to have swatches? If an important character says something, can their text have a different color (this one is very popular) or a different typeface?

                                                                      I feel like everyone’s going to land on their own idea of acceptability for different kinds of format; I know I have different feelings about colors and typefaces throughout the day. However, it’s rare that a website has a format I can’t stand but content I desperately crave, so I manage (and I will not be changing how I make web pages).

                                                                      1. 1

                                                                        If you could hypothetically deliver the material in raw, basic HTML with the occasional embedded image (don’t actually do this; I’m not that hardcore) or in a readable markdown file, I’d characterize the website as a textual website.

                                                                        If you could deliver a webpage’s main content in a lobste.rs comment, replacing inline images with links, then I’d say that this post applies.

                                                                    2. 0

                                                                      CSS was a mistake

                                                                    3. 1

                                                                      Is this style of argument even common?

                                                                      Yes. Users who don’t use default settings appear to be in the minority.

                                                                      1. 1

                                                                        I don’t dispute that users don’t change the defaults. What I have a problem with is text looking very different across websites, which results in a11y problems. A common example is sites that put light gray text on a white background. It is possible to override stuff like that of course, but usually other things in the CSS conspire to make the result even worse.

                                                                    4. 2

                                                                      I’ve flagged this as off-topic because it contains almost no technical content and instead is a set of aesthetic preferences.

                                                                      1. 1

                                                                        This article wasn’t meant to be very technical. What made you think it was?

                                                                        1. 2

                                                                          That it was posted to lobste.rs, a site for techncal links and technical discussion

                                                                          1. 3

                                                                            While technical content was low, it wasn’t non-existent; the article covers aspects of web development such as cross-browser testing, fingerprinting, the pitfalls of browser features such as lazy loading, and command-line image optimization utilities. It also seemed relevant given that the 250 kb club recently got attention on lobste.rs.

                                                                            Of course, I might be wrong; whether or not this is relevant isn’t up to me. If other readers agree that this isn’t relevant, I’ll keep that in mind in the future and perhaps use a different tag or forum for similar content. I don’t think we should remove this post given the discussion that has followed.

                                                                            CC @cmcaine

                                                                            1. 2

                                                                              I also think 250kb club is off-topic, fwiw. It’s okay if you disagree or if the majority of users disagree. Just doing my small part to express preferences for the topic of the site. No hard feelings.

                                                                      2. 1

                                                                        Regarding HTTP/2 and the “It’s a free speed boost.”. Is that true for primarily text based websites? Last time I checked it wasn’t.

                                                                        HTTP/2’s main benefit is allowing more background requests, because it doesn’t hit the browsers connections limit, making only a single connection. I also assume that when following these rules Header compression doesn’t really make a difference, because there will be few and only short ones. In addition HTTP/2 has the downside that it might push already cached data, which your browser has to send “requests” to cancel.

                                                                        On top of that HTTP/2 sometimes bypasses optimizations (depending on server, configs, browsers, etc.).

                                                                        1. 1

                                                                          If you website is only text all contained in a single HTML file, then you’re probably right. If it contains a few inline images and a CSS file, then HTTP/2 is likely to give some advantages.

                                                                          it might push already cached data, which your browser has to send “requests” to cancel.

                                                                          TIL. Do you have any more info on this? I’d be interested to know more about the impact of said “‘requests’ to cancel.”

                                                                          1. 1

                                                                            If you website is only text all contained in a single HTML file, then you’re probably right. If it contains a few inline images and a CSS file, then HTTP/2 is likely to give some advantages.

                                                                            This does not necessarily make a big difference. Multiple connections are still possible, there is HTTP Keep Alive, and you might exhaust requests sequentially. It really depends on the specifics though. There were quite some people benchmarking this a few years ago and HTTP/2 did sometimes worse, sometimes better than HTTP/1.1 in real life setups. Pipelining exists in HTTP/1.1. So when not looking at benchmarks where one uses extreme cases of blocking loads things might look different.

                                                                            TIL. Do you have any more info on this? I’d be interested to know more about the impact of said “‘requests’ to cancel.”

                                                                            This is due to HTTP/2 Push which especially when you have a static file server (or something else utilizing this) potentially initializes pushes of file that the client already has cached.

                                                                            Section 8.2.2 of the HTTP/2 RFC describes how the PUSH_PROMISE frame is followed by delivering data, which the client can cancel with the CANCEL or REFUSED_STREAM frame.

                                                                            On another note this might also be interesting https://tools.ietf.org/html/rfc7540#section-10.4

                                                                            There’s also an article giving an overview

                                                                            Also for the story’s page I tried a website for a quick comparison and looks like with HTTP/2 everything put together takes 67ms longer.

                                                                            Don’t get this wrong however. As mentioned it really depends on the specifics and for many websites out there it’s an improvement. It’s just a wrong assumption that HTTP/2 is always a benefit.

                                                                            I can’t find it right now, but I also read an article about the implications of latency having an effect on which protocol behaves better (more in-depth than just general low vs high).

                                                                            1. 2

                                                                              Interesting; I updated the article. Diff.

                                                                              I tested HTTP/2 and HTTP/1.1 for my site locally, and results seem to vary; HTTP/2 doesn’t seem to consistently be slower when measuring TTFB and time to full load. One article in the pipeline will have many images, so I’ll probably hold off on more serious testing until then.

                                                                        2. 1

                                                                          Optimized images. You also might want to use HTML’s element, using jpg/png as a fallback for more efficient formats such as WebP or AVIF. Use tools such as oxipng to optimize images.

                                                                          I usually use optipng, and have recently heard of others, but this is the first time I’ve seen oxipng. The made me wonder, what the state of the art image optimiser is. Does anyone have experiences with this?

                                                                          1. 2

                                                                            AFAICT the best you can do right now is pngquant followed by advpng. I once wrote a deployment pipeline containing the commands/options pngquant -Q 90 -v -o … && advpng -z4 …

                                                                            Pngquant dithers the PNG to a few-colour representation. It does nothing for some PNGs and compresses others by a large factor. If you want a soundbite: Pngquant reduces the fidelity of window frames in screenshots, while leaving all the substantive matter unaffected.

                                                                            This is lossy, you should store the original asset so you can generate other/better formats later. Here’s a random lossy screenshot, just as a sample. Note the window borders.

                                                                            Advpng spends a lot of time trying different compression settings; the output is an ordinary PNG. It’s not lossy. Oxipng might beat advpng, I’d love to see a comparison of the two on a large image set.

                                                                            1. 1

                                                                              In my tests, oxipng -Z -o max --strip all (my preferred solution for lossless png compression) seems to beat advpng. I updated the article to reference pngquant, thanks! Diff

                                                                              1. 1

                                                                                Excellent. The update, but particularly for that testing.

                                                                            2. 1

                                                                              For many PNG, you can also consider pngquant which will reduce the palette. In my opinion, it’s really good and only has a small loss of quality. This also helps WebP compression.

                                                                              1. 1

                                                                                Updated. Thanks! Diff

                                                                              2. 1

                                                                                Edit: updated the article with more info. Diff.

                                                                                Oxipng is basically a parallelized optipng that optionally supports the better (and much slower) Zopfli compression algorithm to get the smallest size possible.

                                                                                I should also add a link to the manpage for cwebp, the standard webp encoder that comes with libwebp-tools, and jpegoptim. I use jpegoptim -s, cwebp -lossless -m 6 -z 9, and oxipng -Z -o max --strip all to optimize my images.

                                                                              3. 1

                                                                                I would add a caviat to the “no JavaScript”. If it’s necessary for accessibility, do it. It probably won’t hurt you, but it will make someone’s day. (Disclaimer: I don’t understand “no JS” arguments, so I’m biased.)

                                                                                1. 1

                                                                                  If it’s necessary for accessibility, do it.

                                                                                  Care to elaborate? My understanding is that web standards for accessibility features don’t require scripting.

                                                                                  I don’t understand “no JS” arguments

                                                                                  Plenty of other people much more intelligent than yours truly have written a great deal about this. I’ll give it a try:

                                                                                  • JS in webpages isn’t vetted by distro maintainers and isn’t straightforward to examine before running.
                                                                                  • JS is often chock-full of antifeatures (tracking, scrollbar hijacking, modals, paywalls)
                                                                                  • JS is often big. Disabling it can speed up load times and save on mobile data.
                                                                                  • JS is unnecessary for the kinds of websites that my post applies to. Given the aforementioned issues, it’s better not to use it.
                                                                                  1. 4

                                                                                    Care to elaborate? My understanding is that web standards for accessibility features don’t require scripting.

                                                                                    I wish that were the case. Here’s an example of some JS I use on my personal site.

                                                                                    I have a mobile navigation menu which appears when when the user presses a button). You need to change the menu button’s aria-expanded attribute to “true” when the menu contents are visible, and to “false” when they aren’t (ref).

                                                                                    PS: I’ve seen your responses to the comments. It’s rare that someone with opinionated views in tech is still respectful of other opinions. Thank you for your demeanor.

                                                                                    1. 4

                                                                                      TIL. I guess that as long as the site works perfectly well without JS, it isn’t that big a deal. There’s also the option of forgoing interactive menus in favor of regular links. Your site doesn’t seem to take much vertical space, so positioning the links at the bottom of the page instead of in a hamburger menu would probably work.

                                                                                      You’re also free to disregard my opinions; the fact that you’re taking accessibility into account at this level gives you enough brownie points for the Council of Textual Websites to overlook this infra me to shrug it off.

                                                                                      PS: I’ve seen your responses to the comments. It’s rare that someone with opinionated views in tech is still respectful of other opinions. Thank you for your demeanor.

                                                                                      Thanks. I find that combative and agressively defensive responses tend to solidify pre-existing opinions, and instead prefer to take the advice of one of my favorite xkcds by updating the article to clarify and emphasize missed points. I often struggle to express myself naturally, so I tend to avoid placing the fault on the reader.

                                                                                      1. 4

                                                                                        It’s rare that someone with opinionated views in tech is still respectful of other opinions. Thank you for your demeanor.

                                                                                        I’d like to echo this. There’s plenty in the linked post that I disagree with but @Seirdy has been open to other opinions and retained their good humor. This deserves respect.