Skip to content

Conversation

gadenbuie
Copy link
Collaborator

@gadenbuie gadenbuie commented Sep 6, 2024

This PR updates the brand-font-weight definition to allow named font weight values and to support variable font weights. Currently the definition limits font weight to 1:9 * 100:

- id: brand-font-weight
  description: A font weight.
  enum: [100, 200, 300, 400, 500, 600, 700, 800, 900]
  default: 400

but CSS also allows normal (400), bold (700), lighter, and bolder. In CSS, the last two are relative font weights and are relative to the element's inherited value. In our case, however, I'd recommend we simply assign these values 100 (lighter) and 900 (bolder).

Here's the description of font-weight as a numeric value from MDN:

<number>
A <number> value between 1 and 1000, both values included. Higher numbers represent weights that are bolder than (or as bold as) lower numbers. This allows fine-grain control for variable fonts. For non-variable fonts, if the exact specified weight is unavailable, a fallback weight algorithm is used — numeric values that are divisible by 100 correspond to common weight names, as described in the Common weight name mapping section below.

In HTML outputs, we can pass numeric and named values through and let CSS handle the computation. In places where variable or named font weights aren't supported, I propose we round to the nearest named point (using our definition for lighter and bolder):

Name Value
lighter 100
normal 400
bold 700
bolder 900

@gadenbuie
Copy link
Collaborator Author

Instead of lighter and bolder, let's use absolute terms from common weight names.

@cscheid
Copy link
Collaborator

cscheid commented Sep 6, 2024

Quarto will add:

  - thin
  - extra-light
  - light
  - normal
  - regular
  - medium
  - semi-bold
  - demi-bold
  - bold
  - extra-bold
  - ultra-bold
  - black

@cscheid
Copy link
Collaborator

cscheid commented Sep 6, 2024

I'm going to close this in favor of 97b5660

@cscheid cscheid closed this Sep 6, 2024
@gadenbuie
Copy link
Collaborator Author

Looks great, thanks!

@gadenbuie gadenbuie deleted the brand/font-weight branch September 6, 2024 17:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants