In case the author is here, the font size and weight sliders are visually broken for me. I just see a box occluding each label. I’m on mobile FF, works on Chrome though.
The “stack” is the sequence of typefaces that the browser will try. You prefer the first, you’ll fall back in order to the last until you find one that is present on the users machine.
The site tries shows font styles that are already available on people’s computers as part of their system fonts. If you pick one of these font listings for your CSS, then you don’t need to use web fonts. In that way, this site connects with the Stop Using Web Fonts article that’s also on the front page.
Yes, but formalizing what you used to do across platforms you hadn’t considered at that time. Basically it’s helping to answer the question “how am I most likely going to get a passably similar aesthetic across the permutation space of pre-installed font choices made by disparate vendors that don’t communicate with each other and can’t agree on a standard?”
I remember fiddling extensively to get fonts to appear similar in Windows/IE4 and Linux. Windows at the time had the meticulously hinted Verdana/Georgia/Tahoma TrueType fonts, whereas Linux (I think) only supported Type1 and bitmap fonts, and certainly couldn’t do hinting. Type1 fonts didn’t look good until you increased the point size to about 12-13, which was frankly too large for a resolution of 640x480.
I didn’t have access to a Macintosh at the time, and neither did anybody I knew, or I probably would’ve included them in my attempts.
I have to say, what the author did looks very good (and certainly better than my attempts at the time). I’m just amused by the word “modern”.
Pretty sure the “modern” is just to bring the stack collections up to date with current device trends; most of the other such stack recommendations out there are several years and numerous device generations out of date. The underlying problem predates the Windows/Mac/*nix trichotomy by at least the Gutenberg Press.
Yeah, but OSs ship with a lot more built-in fonts now, and nicer ones, so you don’t have to fall back on the same old Times/Arial/Verdana/Trebuchet/Georgia set. (Ugh. The only one of those I can still stand is Georgia.)
one of my favorite web performance tricks is to use media queries to identify “small screens” and give them a different font stack (like this – no custom fonts). Smart, modern browsers will never download the font files desktop (larger screen) devices use. Very cool way to cut up to hundreds of KB off a page load.
Why stop there! You could use a font stack with system fonts on big screens too and save even more hundreds of kB for even more users. As a bonus you’ll get better consistency across mobile and desktop.
That is the place where the most benefit will be found from no data transfer for font files, yes. You can do slightly better detection in javascript, but you still only get I think 3 or 4 network types (4g being the “fastest” of the named tiers). I can’t use media queries for that yet, though I wish it were available.
This the wrong heuristic though; a small viewport does not tell you anything about the device or its connection.
I might have a laptop tethered to a mobile hotspot and it might appreciate using less data.
I might have a tablet with a SIM but necessarily has a bigger screen.
I might have a beefy desktop machine with a tiling window manager whose splits often end up in smaller viewports despite being on a home network.
I might have docked my phone to get Ethernet and a keyboard to type a message on some dumb service that only has an ‘app’ but am continuing to do some more tasks in the setup
Why not always include a ‘good’–as in not throwing in Arial/Roboto/Ubuntu for no reason when it doesn’t match the characteristics for the preferred option (please fallback to the one I set in my UA)–font stack and using font-display to let the user agent decide want to do with these custom fonts?
I have been telling team members to stop using terms like “desktop” and “mobile” as some dichotomy. Variables now referenced like viewport-small or connection-slow to be precise and not make assumptions.
This is lovely, actually. I recently removed webfonts from my personal page, and used a very conservative system font stack. But now I’m going to use this to approximate what I had before.
Finally, someone recommending the right thing here. I get so (unnecessarily) infuriated when a site doesn’t fallback to the font I set in my user agent or operating system and instead throwing in Ubuntu and Arial for the system font stack for no reason. It’s always the same stack they copied from some guru that doesn’t know what they’re talking about and is now sitting default in a bunch of frameworks for some reason.
In case the author is here, the font size and weight sliders are visually broken for me. I just see a box occluding each label. I’m on mobile FF, works on Chrome though.
Can a designer explain what the word “stack” means in this context?
Is this a website that showcases my OS’s fonts?
The “stack” is the sequence of typefaces that the browser will try. You prefer the first, you’ll fall back in order to the last until you find one that is present on the users machine.
The site tries shows font styles that are already available on people’s computers as part of their system fonts. If you pick one of these font listings for your CSS, then you don’t need to use web fonts. In that way, this site connects with the Stop Using Web Fonts article that’s also on the front page.
so, pretty much what I used to do in 1998?
Yes, but formalizing what you used to do across platforms you hadn’t considered at that time. Basically it’s helping to answer the question “how am I most likely going to get a passably similar aesthetic across the permutation space of pre-installed font choices made by disparate vendors that don’t communicate with each other and can’t agree on a standard?”
I remember fiddling extensively to get fonts to appear similar in Windows/IE4 and Linux. Windows at the time had the meticulously hinted Verdana/Georgia/Tahoma TrueType fonts, whereas Linux (I think) only supported Type1 and bitmap fonts, and certainly couldn’t do hinting. Type1 fonts didn’t look good until you increased the point size to about 12-13, which was frankly too large for a resolution of 640x480.
I didn’t have access to a Macintosh at the time, and neither did anybody I knew, or I probably would’ve included them in my attempts.
I have to say, what the author did looks very good (and certainly better than my attempts at the time). I’m just amused by the word “modern”.
Pretty sure the “modern” is just to bring the stack collections up to date with current device trends; most of the other such stack recommendations out there are several years and numerous device generations out of date. The underlying problem predates the Windows/Mac/*nix trichotomy by at least the Gutenberg Press.
To be fair, someone born in 1998 is 25 now, it’s not surprising they’d not heard of this before…
Thanks for pointing that out :p
I feel old. Everyone else should also feel old.
Yeah, but OSs ship with a lot more built-in fonts now, and nicer ones, so you don’t have to fall back on the same old Times/Arial/Verdana/Trebuchet/Georgia set. (Ugh. The only one of those I can still stand is Georgia.)
In this case, it’s just a list of operating system native fonts to use for similarish appearances. You can see more detail at the GitHub page: https://github.com/system-fonts/modern-font-stacks.
one of my favorite web performance tricks is to use media queries to identify “small screens” and give them a different font stack (like this – no custom fonts). Smart, modern browsers will never download the font files desktop (larger screen) devices use. Very cool way to cut up to hundreds of KB off a page load.
Why stop there! You could use a font stack with system fonts on big screens too and save even more hundreds of kB for even more users. As a bonus you’ll get better consistency across mobile and desktop.
If you disable remote font loading, that’s what you get yes. Consistency between mobile and desktop is both not a goal, and not desirable.
Why on small screens? Is that just a heuristic for guessing whether a connection is slow?
That is the place where the most benefit will be found from no data transfer for font files, yes. You can do slightly better detection in javascript, but you still only get I think 3 or 4 network types (4g being the “fastest” of the named tiers). I can’t use media queries for that yet, though I wish it were available.
This the wrong heuristic though; a small viewport does not tell you anything about the device or its connection.
Why not always include a ‘good’–as in not throwing in Arial/Roboto/Ubuntu for no reason when it doesn’t match the characteristics for the preferred option (please fallback to the one I set in my UA)–font stack and using
font-displayto let the user agent decide want to do with these custom fonts?I have been telling team members to stop using terms like “desktop” and “mobile” as some dichotomy. Variables now referenced like
viewport-smallorconnection-slowto be precise and not make assumptions.This is lovely, actually. I recently removed webfonts from my personal page, and used a very conservative system font stack. But now I’m going to use this to approximate what I had before.
Finally, someone recommending the right thing here. I get so (unnecessarily) infuriated when a site doesn’t fallback to the font I set in my user agent or operating system and instead throwing in
UbuntuandArialfor the system font stack for no reason. It’s always the same stack they copied from some guru that doesn’t know what they’re talking about and is now sitting default in a bunch of frameworks for some reason.