heybokeh/pollen

Add typeset defaults?

Closed this issue · 4 comments

madeleineostoja commented

Opinionated pairings of line heights with the modular font scale for sans and serif font families.

  • Applies to: font
  • Property group: sans- and serif-

Values eg:

:root {
	--sans-0: var(--scale-0)/1.5, var(--font-sans);
}

Usage:

.paragraph {
  font: var(--sans-0);
}
crhallberg commented

I like this idea! The makers of the font Inter have a whole page about optimal letter-spacing and such if you're in need of a reference: https://rsms.me/inter/dynmetrics/

  • 👍1
daniel-j-h commented

What's your take on pairings for all-caps headlines, overlines, buttons / badges?

What I'm doing so far with pollen is setting a text-transform and then using for example --letter-lg for headlines to give it some more room to breath. Do you folks think this is a related use case for pairings? Or how are you folks handling this common use case?

madeleineostoja commented

So generally a best practice would be to create typeset stacks for all the use-cases you need in a project. Outside of letter spacing and text transforms (which is v annoying) you can set all the font properties in a font: … rule, which you’d make values for in your pollen config. For things like uppercase transforms you could make mixins/classes with both props.

There’s an example of typesets in the docs on configuration, and you can see how we do it at Bokeh ourselves here: https://github.com/heybokeh/design/blob/main/pollen.config.cjs, and an example typography class mixin here https://github.com/heybokeh/design/blob/8ca2be8789c5d8f1c40ac08255853f7d3e539c13/styles/lib/mixins.css#L2

The reason I’m not sold on including defaults for typesets like this in Pollen’s default config is exactly because they vary so much for every project, so I’m not sure how much value it would add. Taking tailwind as an example, their typesets (text-sm etc) often need a lot of tweaking. But again open to input!

  • ❤️1