13 ms·

font-family: System UI; That's incorrect. It should be: font-family: system-ui; Author has it right in some CSS examples, but not the first one.

• andai 1y ago
  Also, if the name had been two words, it would need to be quoted, right? e.g. this wouldn't work either? font-family: Times New Roman; Edit: Well this and just "times" does work fine, which makes me wonder if it's been special cased due to being an older font, or if the matching is very permissive.
  • lblume 1y ago
    The matching is very permissive, and the example just works: https://codepen.io/leo848blume/pen/RNrppdj https://codepen.io/leo848blume/pen/RNrppdj
    • deleted 1y ago
      [deleted]
    • bmacho 1y ago
      For me it defaults to Times New Roman when it doesn't understand the font, so to check if it indeed works I had to change the default font in my browser
  • someothherguyy 1y ago
    https://drafts.csswg.org/css-fonts/#family-name-syntax https://drafts.csswg.org/css-fonts/#family-name-syntax
• noduerme 1y ago
  yknow what's also cool is specifying the font you want, so your website looks the way you want it to. This is generally referred to as "design" and, while considered an antipattern among people who entirely spurn aesthetics, it has something like a 3000 year history of getting people to engage with your content, assuming you have some.
  • arcanemachiner 1y ago
    Counterpoint: I never notice what font I'm reading unless someone changed it to an ugly one. This is generally referred to as "what pretty much everyone else thinks about your stupid font".
    • noduerme 1y ago
      Counter-counterpoint (from someone who minored in typography): The purpose of a font is to be transparent as glass to the data being transmitted to your eyes. That is why if you notice a font and think it's stupid, the designer has made a mistake. Also if you notice a font because the designer left it in your default Times New Roman, that is a mistake. If a layout artist does a good job, you should never notice a font in the body of text you're reading. You should only notice a font occasionally if they really want to highlight a header or something. The font is a carrier of information - lighting on the stage, not the main actor. And it must never assume the role of an actor unless the designer specifically intends it to. If you're a coder, you understand this extremely well, implicitly: You set up your IDE fonts and colors in a way that helps you see through the code. You don't want to be looking at letter forms when you're trying to grok something. This is also the job of designers: Creating typefaces and layouts so that people see through the text, to the meaning. Leaving your website in the system standard font basically screams "I do not give a shit about what is written here" and also possibly "I run a quacky conspiracy website" and me and most people will scroll past your writing as quickly as possible. But there is no font that has no connotation. Every font has subconscious meanings to readers. Knowing what these are is important. Times New Roman screams, "I'm still using Windows 98". Whereas Comic Sans screams, "I work in a shitty real estate office". Simple examples. But the art is much deeper than that, because Optima Sans and Univers read very differently to the general public in ways that I could spend another few pages explaining. Every choice you make with type implies something that sits as a layer on top of the text that's written in that typography. But if you do your job well, you make the artisanship transparent, and allow the content to shine. This is why typography is a bit of a black art, and why it's powerful. It subtly influences people in ways they don't notice and don't understand, while they're absorbing written information. Dig: https://en.wikipedia.org/wiki/Antiqua%E2%80%93Fraktur_dispute https://en.wikipedia.org/wiki/Antiqua%E2%80%93Fraktur_disput...