Add Modern Font Stacks #498

Jothsa · 2024-05-01T14:13:55Z

Let me know if there's anything else I need to do. I think it might be nice to have an explanation of the benefits of using these props over an external font, but I'm not sure where it would fit. Thanks!

stackblitz · 2024-05-01T14:13:57Z

Run & review this pull request in StackBlitz Codeflow.

argyleink · 2024-05-02T21:35:12Z

Look at all that tucked into nice little props 👍🏻
I do wonder if we need to break these modern font stacks into their own import?

wonder if we should put ^ these behind a summary details so they don't take up so much space? was cool when there were a few, but now there's a lot.

argyleink

overall the PR looks great! i've got a couple open questions to consider:

are these fonts better as an optional import rather than being part of the default bundle?
is the typography documentation section overwhelming now with all the typography example blocks? we could consider using the <details> element OR make a switcher that lets people choose a font prop from a dropdown, which updates an example or all the typography examples
how can we give @danklammer and Modern Font Stacks more cred for the values?

i'll pose it to the group in discord and see how folks feel about it

thanks for this, i'm excited about it 🙂

argyleink · 2024-05-02T21:36:02Z

docsite/index.html

+ --font-system-ui: system-ui, sans-serif;
+ --font-transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
+ --font-old-style: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
+ --font-humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
+ --font-geometric-humanist: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
+ --font-classical-humanist: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
+ --font-neo-grotesque: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
+ --font-monospace-slab-serif: 'Nimbus Mono PS', 'Courier New', monospace;
+ --font-monospace-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+ --font-industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
+ --font-rounded-sans: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
+ --font-slab-serif: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
+ --font-antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
+ --font-didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
+ --font-handwritten: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
+ --font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';


i'm curious if these need the quotes around them or not?

According to MDN, they're recommended but not required 🤷🏼‍♂️

docsite/index.html

src/props.fonts.css

argyleink · 2024-05-02T21:39:35Z

src/props.fonts.js

+ "--font-weight-1": "100",
+ "--font-weight-2": "200",
+ "--font-weight-3": "300",
+ "--font-weight-4": "400",
+ "--font-weight-5": "500",
+ "--font-weight-6": "600",
+ "--font-weight-7": "700",
+ "--font-weight-8": "800",
+ "--font-weight-9": "900",

- '--font-lineheight-00': '.95',
- '--font-lineheight-0': '1.1',
- '--font-lineheight-1': '1.25',
- '--font-lineheight-2': '1.375',
- '--font-lineheight-3': '1.5',
- '--font-lineheight-4': '1.75',
- '--font-lineheight-5': '2',
+ "--font-lineheight-00": ".95",
+ "--font-lineheight-0": "1.1",
+ "--font-lineheight-1": "1.25",
+ "--font-lineheight-2": "1.375",
+ "--font-lineheight-3": "1.5",
+ "--font-lineheight-4": "1.75",
+ "--font-lineheight-5": "2",


looks like a formatter changed all the quotes to it's preference and made it into the PR. can you trim these quote change commits from the PR please? 🙂

Sorry I missed that 😅

Jothsa · 2024-05-03T00:13:51Z

Good point about giving them more credit. I think it would also be nice to have some information explaining why people would want to use these over an external font. Maybe that explanation and better credit could be in a paragraph after the "Font Families" heading?

toastal · 2024-05-08T08:28:36Z

docsite/index.html

@@ -2114,6 +2114,22 @@ <h4>Font Families</h4>
 --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;


Tangent scope: I don’t see the purpose in trying to override the user agent’s sans-serif for these other ones. A lot of Linux machines come with Ubuntu or Roboto but that doesn’t mean that in is the font they set for their browsers fallback. Save some bytes & just skip it. Why not just ui-sans-serif, sans-serif?

I wrote a reply here, but after thinking about it, it's all legacy and designer preference. The point for me generally, is to give the user a font they're used to, not one we think looks better. That's what we load fonts and change headers for if we want, but not body copy.

I could def see a version of Open Props updated to shed that legacy preference noise.
Opened #500

toastal · 2024-05-08T08:30:50Z

docsite/index.html

@@ -2114,6 +2114,22 @@ <h4>Font Families</h4>
 --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
 --font-serif: ui-serif, serif;
 --font-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace;


Additionally, what is the point of this? Users can set the font in the user agent for monospace just as much. ui-monospace, monospace is more appropriate than ignoring the user’s settings for this long stack that users might not want (personally for instance, I hate Fira Mono / Fira Code, & would be mad if that showed up before the font I have set in my browser, Berkeley Mono).

This seems way more opinionated than this project needs to be for defaults. If you do have an opinion, an override like --font-mono: var(--font-monospace-slab-serif) makes more sense which I think fits better with the goals of this font-stack patch.

I agree that these could be removed if modern font stacks are added.

The fact that paid fonts are ahead of the stack & aren’t a part of operating system too feels like an unnecessary ad.

let's remove it! I agree. if you include it in this PR, go ahead and indicate in the commit it fixes #500 👍🏻

toastal · 2024-05-08T08:43:31Z

docsite/index.html

@@ -2114,6 +2114,22 @@ <h4>Font Families</h4>
 --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
 --font-serif: ui-serif, serif;


This one gets it. :)

Jothsa · 2024-05-08T13:24:51Z

I've got finals this week and next week so I won't be able to do much here until after that

argyleink · 2024-06-04T01:22:54Z

I've got finals this week and next week so I won't be able to do much here until after that

hope finals went well! let us know if you need help closing this out. it's a sweet addition.

Jothsa · 2024-06-04T01:33:43Z

They did (still waiting for some results though 😶)! Thanks! So sorry for the delay— life’s been coming at me and my ADHD has had me hyperfixating on another project (built with open-props) lol. I’ll get back to this pr soon!

Jothsa added 2 commits May 1, 2024 09:05

add fonts

0ee0f66

remove --font-emoji

4da10f5

argyleink requested changes May 2, 2024

View reviewed changes

toastal reviewed May 8, 2024

View reviewed changes

argyleink mentioned this pull request Jun 4, 2024

Consider removing all the fallback fonts and just let the system pick the default #500

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Modern Font Stacks #498

Add Modern Font Stacks #498

Jothsa commented May 1, 2024 •

edited

stackblitz bot commented May 1, 2024

argyleink commented May 2, 2024

argyleink left a comment

argyleink May 2, 2024

Jothsa May 3, 2024

argyleink May 2, 2024

Jothsa May 3, 2024

Jothsa commented May 3, 2024 •

edited

toastal May 8, 2024 •

edited

argyleink Jun 4, 2024

toastal May 8, 2024 •

edited

Jothsa May 8, 2024

toastal May 8, 2024

argyleink Jun 4, 2024

toastal May 8, 2024

Jothsa commented May 8, 2024

argyleink commented Jun 4, 2024

Jothsa commented Jun 4, 2024

		@@ -2114,6 +2114,22 @@ <h4>Font Families</h4>
		--font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;

		@@ -2114,6 +2114,22 @@ <h4>Font Families</h4>
		--font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
		--font-serif: ui-serif, serif;

Add Modern Font Stacks #498

Are you sure you want to change the base?

Add Modern Font Stacks #498

Conversation

Jothsa commented May 1, 2024 • edited

stackblitz bot commented May 1, 2024

argyleink commented May 2, 2024

argyleink left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jothsa commented May 3, 2024 • edited

toastal May 8, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

toastal May 8, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jothsa commented May 8, 2024

argyleink commented Jun 4, 2024

Jothsa commented Jun 4, 2024

Jothsa commented May 1, 2024 •

edited

Jothsa commented May 3, 2024 •

edited

toastal May 8, 2024 •

edited

toastal May 8, 2024 •

edited