6 ms·

I agree with the general sentiment of the page, with one exception: It’s better to use WOFF webfonts for the fonts on the page instead of using what were “Web s

I agree with the general sentiment of the page, with one exception: It’s better to use WOFF webfonts for the fonts on the page instead of using what were “Web safe” fonts back in 2005 or so. With the rise of Android phones which, by and large, do not have licenses for the old 1990s “Microsoft Core Fonts” (Verdana/Gerogia/Arial/etc.), doing something like “font-family: Georgia, Serif” no longer guarantees a consistent look from platform to platform. What I use is a heavily optimized and subsetted web font stack which is placed in a single 114KB CSS file separate from the web page; I use inline fonts instead of linking to individual font files to remove the number of pages needed to load to render my page. I use WOFF for maximum browser compatibility, although this is becoming a non-issue with Microsoft seriously sunsetting IE11. This way, my webpage will look the same in any web browser with WOFF support, regardless of what fonts a given phone or OS use for “Georgia” or what not. In addition, with the exceptions of Arial and Georgia, the Microsoft Core fonts are quite dated looking; using Verdana here in 2021 gives the page a “made in the first 2000s decade” look to it. I also, for browsers without WOFF, have a fairly long font stack, so that the web page looks reasonable even without a webfont.

jeroenhd 5y ago
I wish browsers came with some kind of configuration panel for fonts. All the font control I wish to give websites is the choice between serif and sans-serif. Let web fonts be opt-in rather than opt-out. Let the browser pick a good one and be done with it, no need for every website to transfer an entire font file to my computer. Browsers already used to have some kind of control for this, though on mobile you don't really see it often anymore. Designers seem to put a lot of value in fonts but I honestly don't care. Most of the fancy fonts decrease readability and just serve some kind of desire by the designer to have a certain brand. I don't care about your brand because 99% of the time I won't ever come back to your website and even if I do, it won't be because you picked out some bespoke almost-Arial-but-not-really font.
- strenholme 5y ago
  I wish browsers came with some kind of configuration panel for fonts. Your wish has been granted. In Firefox: * Click on the hamburger menu in the upper right hand side (the three horizontal lines) * Choose “Adjustments” or “Configuration” * Scroll down and look for “Language and Appearance“ * Choose “Latin” in the top of the “fonts for” menu * Click on “advanced” * Choose a suitable sans, serif, and monospace font * Unclick the “Let webpages choose their own fonts, instead of the fonts above” * Click on “OK” Wording in quotes is approximate.
lmm 5y ago
Why is looking the same what you want? Future fonts will probably suit future changes in display technology (e.g. the shift back to serifs as screen density has increased) and/or future shifts in written language (compare blackletter or Fraktur style to today's scripts). If you want your website to be readable in the future, letting future platforms display it with their default font seems far more dependable than trying to control how it looks pixel-by-pixel.
- strenholme 5y ago
  Serif fonts have looked more or less the same since 1465. [1] Blackletter fonts didn’t last very long, because they were not very legible, and were quickly replaced. Sans Serif (Grotesque) for formal printed material is newer, probably around 200 years old, but is also widely established. Regardless, on my personal website, I use serif lettering for most text, because while it’s slightly less readable at 75dpi, retina displays are common enough (e.g. pretty much any phone in use today has retina level resolution) that serif text makes more sense. [2] Also, the only open source font the great Matthew Carter (Verdana, Georgia) has made is a serif: Bitstream Charter and its derivative Charis SIL. The English language is much more likely to change to the point today’s English can only be read by linguists and researchers before typefaces undergo any significant change. [1] https://ilovetypography.com/2016/04/18/the-first-roman-fonts/ https://ilovetypography.com/2016/04/18/the-first-roman-fonts... [2] Regardless, I have gone to a lot of effort to make my Charis SIL/Bitstream Charter derivative as readable as possible on a 75dpi display.
winrid 5y ago
114kb is bigger than a whole product we sell (uncompressed!). For some design focused sites I get it. But personally, I like the system font stack: https://systemfontstack.com/ https://systemfontstack.com/
- Wevah 5y ago
  Modern browsers also support the `system-ui` font family keyword. (https://caniuse.com/?search=system-ui https://caniuse.com/?search=system-ui)
  - winrid 5y ago
    Oooo neat!
- YokoSix 5y ago
  Thanks for this, I'm going to try it on my personal website.
- strenholme 5y ago
  Reading through the discussions about those system font stacks, a couple of observations I have made myself: * Linux desktop fonts are a mess. Two examples: “Helvetica” on Linux often times points to a Ghostscript font with vertical alignment problems when used in a browser, and the “Roboto” font for Android can use Linux rendering problems as the GitHub team discovered. * Chrome has had significant font rendering issues. GitHub’s designer mentions subtle kerning issues with the San Francisco font in Chrome on MacOS; I’ve seen some pretty serious font rendering issues with Chrome in Windows, where fonts end up being about 10-20% lighter. * Very little consideration has been given to how the system font stacks look on Android phones, who are about 40% of the web browsing public. By hosting the fonts on the web page [1], we eliminate these problems. The Linux and Android font rendering mess is resolved by just providing our own fonts [2]; I have dealt with the Chrome rendering mess by very carefully testing the fonts in Windows on a low-resolution 75dpi display until they looked as good as possible on this “lowest common denominator” display [3], while looking good in other browsers and on higher resolution displays. MacOS, nicely enough, always renders the fonts nicely, even on older Macbook Airs and external 75dpi displays. Another thing: All of the fonts are OFL open source fonts, and, as a matter of principle, I prefer that no proprietary fonts are used to display my web page. [1] Yes, 114kb is huge for late 1990s web designers who had to push everything over a dialup link, but it’s a drop in the bucket these days, even with cell phones with 3gb/month on low end plans. I went to a lot of effort with Zopfli and very aggressive subsetting to make the font CSS file as small as possible. [2] There’s an issue with the % on Linux, since Linux insists on using its own hinting, resulting in one of the bowls being taller than the other bowl. Besides that, the font looks great in Linux. [3] I spent days tweaking ttfautohunt settings for the font with Chrome/Windows as my reference, and made the font a little thicker by using Charis SIL for body text instead of the smaller in size but thinner Bitstream Charter.

jeroenhd 5y ago

I wish browsers came with some kind of configuration panel for fonts. All the font control I wish to give websites is the choice between serif and sans-serif. Let web fonts be opt-in rather than opt-out. Let the browser pick a good one and be done with it, no need for every website to transfer an entire font file to my computer. Browsers already used to have some kind of control for this, though on mobile you don't really see it often anymore. Designers seem to put a lot of value in fonts but I honestly don't care. Most of the fancy fonts decrease readability and just serve some kind of desire by the designer to have a certain brand. I don't care about your brand because 99% of the time I won't ever come back to your website and even if I do, it won't be because you picked out some bespoke almost-Arial-but-not-really font.

strenholme 5y ago
I wish browsers came with some kind of configuration panel for fonts. Your wish has been granted. In Firefox: * Click on the hamburger menu in the upper right hand side (the three horizontal lines) * Choose “Adjustments” or “Configuration” * Scroll down and look for “Language and Appearance“ * Choose “Latin” in the top of the “fonts for” menu * Click on “advanced” * Choose a suitable sans, serif, and monospace font * Unclick the “Let webpages choose their own fonts, instead of the fonts above” * Click on “OK” Wording in quotes is approximate.

lmm 5y ago

Why is looking the same what you want? Future fonts will probably suit future changes in display technology (e.g. the shift back to serifs as screen density has increased) and/or future shifts in written language (compare blackletter or Fraktur style to today's scripts). If you want your website to be readable in the future, letting future platforms display it with their default font seems far more dependable than trying to control how it looks pixel-by-pixel.

strenholme 5y ago
Serif fonts have looked more or less the same since 1465. [1] Blackletter fonts didn’t last very long, because they were not very legible, and were quickly replaced. Sans Serif (Grotesque) for formal printed material is newer, probably around 200 years old, but is also widely established. Regardless, on my personal website, I use serif lettering for most text, because while it’s slightly less readable at 75dpi, retina displays are common enough (e.g. pretty much any phone in use today has retina level resolution) that serif text makes more sense. [2] Also, the only open source font the great Matthew Carter (Verdana, Georgia) has made is a serif: Bitstream Charter and its derivative Charis SIL. The English language is much more likely to change to the point today’s English can only be read by linguists and researchers before typefaces undergo any significant change. [1] https://ilovetypography.com/2016/04/18/the-first-roman-fonts/ https://ilovetypography.com/2016/04/18/the-first-roman-fonts... [2] Regardless, I have gone to a lot of effort to make my Charis SIL/Bitstream Charter derivative as readable as possible on a 75dpi display.

winrid 5y ago

114kb is bigger than a whole product we sell (uncompressed!). For some design focused sites I get it. But personally, I like the system font stack: https://systemfontstack.com/ https://systemfontstack.com/

Wevah 5y ago
Modern browsers also support the `system-ui` font family keyword. (https://caniuse.com/?search=system-ui https://caniuse.com/?search=system-ui)
- winrid 5y ago
  Oooo neat!
YokoSix 5y ago
Thanks for this, I'm going to try it on my personal website.
strenholme 5y ago
Reading through the discussions about those system font stacks, a couple of observations I have made myself: * Linux desktop fonts are a mess. Two examples: “Helvetica” on Linux often times points to a Ghostscript font with vertical alignment problems when used in a browser, and the “Roboto” font for Android can use Linux rendering problems as the GitHub team discovered. * Chrome has had significant font rendering issues. GitHub’s designer mentions subtle kerning issues with the San Francisco font in Chrome on MacOS; I’ve seen some pretty serious font rendering issues with Chrome in Windows, where fonts end up being about 10-20% lighter. * Very little consideration has been given to how the system font stacks look on Android phones, who are about 40% of the web browsing public. By hosting the fonts on the web page [1], we eliminate these problems. The Linux and Android font rendering mess is resolved by just providing our own fonts [2]; I have dealt with the Chrome rendering mess by very carefully testing the fonts in Windows on a low-resolution 75dpi display until they looked as good as possible on this “lowest common denominator” display [3], while looking good in other browsers and on higher resolution displays. MacOS, nicely enough, always renders the fonts nicely, even on older Macbook Airs and external 75dpi displays. Another thing: All of the fonts are OFL open source fonts, and, as a matter of principle, I prefer that no proprietary fonts are used to display my web page. [1] Yes, 114kb is huge for late 1990s web designers who had to push everything over a dialup link, but it’s a drop in the bucket these days, even with cell phones with 3gb/month on low end plans. I went to a lot of effort with Zopfli and very aggressive subsetting to make the font CSS file as small as possible. [2] There’s an issue with the % on Linux, since Linux insists on using its own hinting, resulting in one of the bowls being taller than the other bowl. Besides that, the font looks great in Linux. [3] I spent days tweaking ttfautohunt settings for the font with Chrome/Windows as my reference, and made the font a little thicker by using Charis SIL for body text instead of the smaller in size but thinner Bitstream Charter.