1. 18
  1. 13

    I’ll take the unpopular side and say that I appreciate good typography on a website, and am happy to pay the bandwidth costs to get something that is a pleasure to read. The only thing I don’t like is getting a bunch of trackers as well, so I prefer if sites serve their own fonts directly, though I understand that is a bit of an ask for non-tech-savvy folk.

    I liked how the author redesigned the various types of quotes and pull-outs to be more uniform. However, I think they’re a bit too minimal. If I were to do it, I’d doing something more to tell the different types apart instead of only the different icons at the top.

    1. 2

      If you have a preferred font, you can change your browser’s default serif/sans-serif/monospace fonts to make every site’s default fonts respect your typographic preferences and save your bandwidth (along with the bandwidth of all the viewers of your website). I find this to be a much better practice than forcing my typographic preferences upon everyone.

      I wrote about this in more detail on my own site: An opinionated list of best practices for textual websites.

    2. 8

      A local font stack is all well and good, but Helvetica and Arial, et al are just…well…boring.

      This is my only disagreement with the article. I prefer to just use the user’s default font. Sure, that is boring but I personally don’t find much value in every site having their own “exciting” font. I just want to see my nice, readable default font almost everywhere. (Some things like games have a reasonable excuse to use their own.)

      So drop the font stack altogether and just leave the default. Or if you really must font: sans-serif (or serif). Or the newfangled ui-sans-serif (if I remember that correctly).

      Of course the downside is that a lot of browsers use garbage default fonts by default…

      1. 8

        Of course the downside is that a lot of browsers use garbage default fonts by default…

        This is the real underlying problem. The overwhelming vast majority of users don’t even know they can change the default font much less know how to.

        1. 6

          100%. Which is super disappointing because it would take browsers very little effort to fix.

          Firefox doesn’t even default to my system font by default (which is quite nice) so I need to teach it to follow my system font which ~0% of users will do.

        2. 7

          Helvetica and Arial, et al are just…well…boring.

          Boring is good! Most of the time, typography’s job is to get out of the way. Browser-default sans-serif is usually what you want, with a slight bump to the size.

          1. 4

            If everyone needs to bump the size maybe we should petition browsers to make the default bigger…

            1. 2

              Agree! font-size: 16pt; is a much better default.

          2. 4

            I just want to see my nice, readable default font almost everywhere.

            This is why I disable custom fonts entirely i my browser. Makes me laugh when a bad website (looking at anything created by Google) uses idiotic icon fonts, but whatever, those sites aren’t worth using anyway.

            1. 2

              I’ve done this on-and-off but I’m not completely sold. Luckily icon fonts are somewhat falling out of style but I think there are legitimate uses for custom fonts, especially for things that are more wacky and fun. I think it is just a shame that they are abused (IMHO) on just about every website.

              1. 4

                Not somewhat. Fonts for icons have not been a recommended practice in since 2014 when the people shifted to SVG icons via symbols. Prevalence is likely devs that learned about icon fonts at one point, especially in the past when IE compatibility took away many options, and those people do not do enough front-end to bother keeping up with most trends.

            2. 3

              The people who think to change their browser’s default font are probably the same people who can figure out how to force websites to use the default font.

              Shipping a font with a site is the same as any other styling: helpful for the average user, overridable by the power user.

              1. 2

                I’m kind of interested right now in both improving my website’s typography and getting rid of things like background images and web fonts. The page is already pretty light, but it can be lighter, and I’m questioning the value of the fonts I’m using. I do want to exercise some choice in fonts, though. The ui-sans-serif (etc) look like good options, but so far they’re only supported on Safari. I’m probably going to do some research on a local font stack that doesn’t include awful fonts like Helvetica and Times New Roman, has a reasonable chance of working cross-platform, and falls back to serif, sans-serif, and monospace.

                1. 4

                  I don’t know that many people think Helvetica is “awful”.

                  Just cut things. Cut the background images entirely; replace with a nice single color. Start by cutting all the web fonts: specify serif and sans-serif and no more than four or five sizes of each. Make sure your margins are reasonable and text column widths are enjoyable. How many colors are you using? Is there enough contrast?

                  Once you’ve stripped everything back to a readable, comfortable page, see what you actually need to distinguish yourself rather that trying a bunch of trends. What image are you trying to project? Classic and authoritative? Modern? Comedic? Simple? Fashionable? Pick one approach and try to align things to that feel.

                  1. 1

                    Helvetica and Times New Roman are de facto standards for a reason. They’re solid, utilitarian typefaces. I wish more sites used them.