Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(brand): Allow named weights and numeric values in brand-font-weight #10737

Closed
wants to merge 1 commit into from

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