5 ms·

I used to think fonts didn't matter. This changed when I had a takehome with a simple UI, some rows of text with alignment and some borders. The entire thing lo

I used to think fonts didn't matter. This changed when I had a takehome with a simple UI, some rows of text with alignment and some borders. The entire thing looked off until I setup the font that was in the spec. The difference with the "correct" font was so big it was hard to believe. I still think most of the time sticking to system is good enough. But I can see the custom font point of view if you strive for something more.

pavlov 3y ago
I’m a big fan of typography, but I also strongly feel that applications (both native and web) should use system fonts and obey any user preferences for weight and size. It’s a question of both accessibility and UX productivity. Switching to a different application shouldn’t be a jarring context switch. The user should be in control of their desktop environment, not the branding department at company X who insists that everything they release should be using font Y this year and then font Z the next. These changes bring no user benefits. It’s different for software and content that actually tells a story. Games and web sites have a lot more freedom for custom design, and typeface choices are an elemental part of that. I just wish more designers understood the distinction between telling a story and enabling people to be productive.
- tdudhhu 3y ago
  I create a lot of webapps. The last couple of years I started using only system-ui as font @ 100% size. Nobody ever commented about this because it just looks good. When you are building a web experience I can understand the need for other fonts (although I block downloading external fonts). But I totally agree with you when it comes to (web) apps.
  - tazu 3y ago
    > The last couple of years I started using only system-ui as font @ 100% size. Question because I'm a frontend noob. How do you achieve "100% size"? I've just been using font-size: 16px on the body element (which seems wrong), but I don't know how to word a search query for this.
    - tdudhhu 3y ago
      Very easy: don't set a size and use em units in your CSS. font-size: 1em; Imho it's also much better to use em units for margins and paddings because this will make everything look like it belongs together, even for users that use a very large font size.

pavlov 3y ago

I’m a big fan of typography, but I also strongly feel that applications (both native and web) should use system fonts and obey any user preferences for weight and size. It’s a question of both accessibility and UX productivity. Switching to a different application shouldn’t be a jarring context switch. The user should be in control of their desktop environment, not the branding department at company X who insists that everything they release should be using font Y this year and then font Z the next. These changes bring no user benefits. It’s different for software and content that actually tells a story. Games and web sites have a lot more freedom for custom design, and typeface choices are an elemental part of that. I just wish more designers understood the distinction between telling a story and enabling people to be productive.

tdudhhu 3y ago
I create a lot of webapps. The last couple of years I started using only system-ui as font @ 100% size. Nobody ever commented about this because it just looks good. When you are building a web experience I can understand the need for other fonts (although I block downloading external fonts). But I totally agree with you when it comes to (web) apps.
- tazu 3y ago
  > The last couple of years I started using only system-ui as font @ 100% size. Question because I'm a frontend noob. How do you achieve "100% size"? I've just been using font-size: 16px on the body element (which seems wrong), but I don't know how to word a search query for this.
  - tdudhhu 3y ago
    Very easy: don't set a size and use em units in your CSS. font-size: 1em; Imho it's also much better to use em units for margins and paddings because this will make everything look like it belongs together, even for users that use a very large font size.