3 ms·

> Lightweight: limit the size to 3KB (gzipped). $ curl -H 'accept-encoding: gzip' -I https://alvaromontoro.github.io/almond.css/dist/almond.min.css | grep co

> Lightweight: limit the size to 3KB (gzipped). $ curl -H 'accept-encoding: gzip' -I https://alvaromontoro.github.io/almond.css/dist/almond.min.css | grep content-length content-length: 4198 Looks like they slipped past their alleged limit and didn’t notice or didn’t update their documented target. My observation with this kind of stylesheet is that they normally do slip like this. I would also say that 19KB/4KB gzipped is not particularly lightweight for this type of stylesheet, though in its defence it is more thorough in its element coverage than most (… which just means that the significant majority of it will be dead code on most pages). For the rest, I’m not going to go into it (nothing stands out as particularly good or bad) save this one point that offends me greatly: --font-weight-bolder: 700; --font-weight-bold: 400; --font-weight-normal: 200; --font-weight-thin: 100; These figures are offensive. 700 is bold, 400 is normal, 300 is unpleasantly thin at 16px on most platforms and most fonts (macOS under default configuration being the exception, as they perform glyph dilation that no one else does), 200 is illegibly thin below maybe 30px, and 100 is hairline, not to be used below around 50px. The font stack of `Helvetica, Arial, sans-serif` is the dubious salvation of these weights (a dodgy font stack too, by the way, better simplified to just sans-serif), as I think (but certainly don’t know) that all platforms will by default resolve this to a font that does not possess a lighter weight than 400. But if someone has it resolve to a font that does contain a weight below 400, you’ve just wrecked the page for them.

moritzwarhier 5y ago
Came to the comments because of this. Font renders very thin on my Android device (Firefox and Chrome). Setting the default font size to 200 should strike every web developer as a questionable idea. It doesn't look "elegant" or anything like that to me, it just looks off and unpleasant for regular text, with the bonus of being hard to read. Recently I had to implement a web design where the default font weight was 300. Same there, just seems like a bad idea to me. Fads come and go. Ultra light fonts mostly just feel like a signifier for poorly thought-out promo content to me. Reminds me of early 2000s print ads too. Don't mean to insult the author, the same description perfectly fits the site that I had to implement.
- chrismorgan 5y ago
  Setting the default size to 300 should strike every web developer as questionable—outside Apple’s ecosystem (where it’s more likely to pan out), it’s just narrowly tolerable in some fonts, but in most it’s outright painful on (as probably the most extreme example) Windows with a low-DPI screen. For typical meanings of 300 weight, I’d generally say flat-out don’t use it below 20px. 200, on the other hand, is unquestionably bad for body-sized type, and no one sane will disagree. (Useful related research work here: Accessible Perceptual Contrast Algorithm, APCA, is being developed to replace the old and terrible contrast ratio calculations used in WCAG; and it takes font weight into account! https://www.myndex.com/APCA/ https://www.myndex.com/APCA/ lets you explore this and see it visually. I said a minimum of 20px for 300 weight; APCA will tend to be a little more lenient than me, and declares a minimum acceptable font size of 17px for 300 black on white.)
  - moritzwarhier 5y ago
    I employed another questionable technique in that project to avoid the default font-weight of 300. The specific custom font that the design required didn't have a semibold variant, only medium. So I declared the "Light" variant as 400 in the @font-face declaration and put regular at 500, medium at 600. So many more "requirements" of this client and my employer were terrible, I tried my best to improve or avoid them. Too many animations, huge images, stupid scroll-related effects etc. There are multiple stakeholders involved and I tried my best to voice concerns and positively influence decisions. In the end I just have to move on and look for better work.
5350-uiop-1130 5y ago
I'm glad you're not doing my code reviews sheesh
- chrismorgan 5y ago
  I’m curious what you’re objecting to. Assuming it’s the font weights thing: I expressed it that strongly because what’s written there really is catastrophically, disastrously wrong, so that in any place where it fully takes effect (as I say, its dubious salvation is that most systems won’t do what was requested) all text will be extremely thin, with a fair chance of being genuinely illegible. It does no one any good to water down code reviews. To be sure, human sensibilities must be taken into account, but prevarication is futile and dilution harmful.
  - 5350-uiop-1130 5y ago
    I just think if you're going to eviscerate someone's hobby project then you should at least have the tact to balm it with some encouragement. >catastrophically, disastrously wrong maybe it's a semantic thing, for me i wouldn't ever describe anything to do with html, css or fonts as being "catastrophically wrong". it's a subjective opinion. that kind of hyperbolic language is not appropriate when reviewing someone's code, it could be someone who just recently started learning...
    - chrismorgan 5y ago
      > it's a subjective opinion. No, it’s objective. Font weight 200 at body text sizes is unequivocally bad, and should never under any circumstances be done. It’s in the same ballpark as using #ddd on #fff for your body text. As for the phrase “catastrophically, disastrously wrong”: yes, it is particularly extreme, and I didn’t use that in the original writing (nor would I be likely to) but only in qualifying the specific point in the reply, doubling down on my judgement, and I think it’s reasonable in that context, matching the definitions of the words—though certainly on the extreme side. The specific catastrophe here is that if the user’s fonts allow the style to have full effect, the page is rendered completely illegible. This is a catastrophe and a disaster for that user. It’s similar to putting aria-hidden="true" on your body element, which will be a catastrophe and disaster for your site for that blind user who needs to use your service. To be sure it’s not on the scale of a flood that drowns an entire city, but the words are not reserved only for events of such magnitude. Sharing a thing with others in a way that indicates that you think it’s suitable for general use, especially encouraging such use, is an invitation for frank criticism. Most people that use such things won’t know better, which makes spreading such awareness more important.
1_player 5y ago
Here's yet another macOS developer with that setting that makes all fonts too bold, and then creates websites with very thin fonts. They're everywhere. https://m.imgur.com/cKqFxvV https://m.imgur.com/cKqFxvV https://stackoverflow.com/questions/52485803/mac-os-x-mojave-font-thinner-on-chrome-how-to-fix https://stackoverflow.com/questions/52485803/mac-os-x-mojave...

moritzwarhier 5y ago

Came to the comments because of this. Font renders very thin on my Android device (Firefox and Chrome). Setting the default font size to 200 should strike every web developer as a questionable idea. It doesn't look "elegant" or anything like that to me, it just looks off and unpleasant for regular text, with the bonus of being hard to read. Recently I had to implement a web design where the default font weight was 300. Same there, just seems like a bad idea to me. Fads come and go. Ultra light fonts mostly just feel like a signifier for poorly thought-out promo content to me. Reminds me of early 2000s print ads too. Don't mean to insult the author, the same description perfectly fits the site that I had to implement.

chrismorgan 5y ago
Setting the default size to 300 should strike every web developer as questionable—outside Apple’s ecosystem (where it’s more likely to pan out), it’s just narrowly tolerable in some fonts, but in most it’s outright painful on (as probably the most extreme example) Windows with a low-DPI screen. For typical meanings of 300 weight, I’d generally say flat-out don’t use it below 20px. 200, on the other hand, is unquestionably bad for body-sized type, and no one sane will disagree. (Useful related research work here: Accessible Perceptual Contrast Algorithm, APCA, is being developed to replace the old and terrible contrast ratio calculations used in WCAG; and it takes font weight into account! https://www.myndex.com/APCA/ https://www.myndex.com/APCA/ lets you explore this and see it visually. I said a minimum of 20px for 300 weight; APCA will tend to be a little more lenient than me, and declares a minimum acceptable font size of 17px for 300 black on white.)
- moritzwarhier 5y ago
  I employed another questionable technique in that project to avoid the default font-weight of 300. The specific custom font that the design required didn't have a semibold variant, only medium. So I declared the "Light" variant as 400 in the @font-face declaration and put regular at 500, medium at 600. So many more "requirements" of this client and my employer were terrible, I tried my best to improve or avoid them. Too many animations, huge images, stupid scroll-related effects etc. There are multiple stakeholders involved and I tried my best to voice concerns and positively influence decisions. In the end I just have to move on and look for better work.

5350-uiop-1130 5y ago

I'm glad you're not doing my code reviews sheesh

chrismorgan 5y ago
I’m curious what you’re objecting to. Assuming it’s the font weights thing: I expressed it that strongly because what’s written there really is catastrophically, disastrously wrong, so that in any place where it fully takes effect (as I say, its dubious salvation is that most systems won’t do what was requested) all text will be extremely thin, with a fair chance of being genuinely illegible. It does no one any good to water down code reviews. To be sure, human sensibilities must be taken into account, but prevarication is futile and dilution harmful.
- 5350-uiop-1130 5y ago
  I just think if you're going to eviscerate someone's hobby project then you should at least have the tact to balm it with some encouragement. >catastrophically, disastrously wrong maybe it's a semantic thing, for me i wouldn't ever describe anything to do with html, css or fonts as being "catastrophically wrong". it's a subjective opinion. that kind of hyperbolic language is not appropriate when reviewing someone's code, it could be someone who just recently started learning...
  - chrismorgan 5y ago
    > it's a subjective opinion. No, it’s objective. Font weight 200 at body text sizes is unequivocally bad, and should never under any circumstances be done. It’s in the same ballpark as using #ddd on #fff for your body text. As for the phrase “catastrophically, disastrously wrong”: yes, it is particularly extreme, and I didn’t use that in the original writing (nor would I be likely to) but only in qualifying the specific point in the reply, doubling down on my judgement, and I think it’s reasonable in that context, matching the definitions of the words—though certainly on the extreme side. The specific catastrophe here is that if the user’s fonts allow the style to have full effect, the page is rendered completely illegible. This is a catastrophe and a disaster for that user. It’s similar to putting aria-hidden="true" on your body element, which will be a catastrophe and disaster for your site for that blind user who needs to use your service. To be sure it’s not on the scale of a flood that drowns an entire city, but the words are not reserved only for events of such magnitude. Sharing a thing with others in a way that indicates that you think it’s suitable for general use, especially encouraging such use, is an invitation for frank criticism. Most people that use such things won’t know better, which makes spreading such awareness more important.

1_player 5y ago

Here's yet another macOS developer with that setting that makes all fonts too bold, and then creates websites with very thin fonts. They're everywhere. https://m.imgur.com/cKqFxvV https://m.imgur.com/cKqFxvV https://stackoverflow.com/questions/52485803/mac-os-x-mojave-font-thinner-on-chrome-how-to-fix https://stackoverflow.com/questions/52485803/mac-os-x-mojave...