posit-dev / brand-yml

Unified branding with a single yaml file.
https://posit-dev.github.io/brand-yml/
MIT License
1 stars 0 forks source link

Should we allow character values of `font-weight`? #13

Open gadenbuie opened 1 month ago

gadenbuie commented 1 month ago

The spec currently restricts 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).

I suppose we should also reconsider the enum here to allow any value between 1 and 1000 following the CSS spec (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.

gadenbuie commented 1 month ago
gadenbuie commented 1 month ago

In https://github.com/posit-dev/brand-yml/commit/1a94b556cee5c9ab1ad95009bcdf163ec2dd0b13 we also use the same mapping as Quarto

BrandTypographyFontWeightMap: dict[
    str, BrandTypographyFontWeightRoundIntType
] = {
    "thin": 100,
    "extra-light": 200,
    "ultra-light": 200,
    "light": 300,
    "normal": 400,
    "regular": 400,
    "medium": 500,
    "semi-bold": 600,
    "demi-bold": 600,
    "bold": 700,
    "extra-bold": 800,
    "ultra-bold": 800,
    "black": 900,
}
gadenbuie commented 3 weeks ago

We also need to take into account variable fonts which can provide a range. In our case, we'd want font-weight to take an array of the values currently allowed for font-weight:

typography:
  fonts:
    # Local files 
    - family: Open Sans
      source: file
      files:
        - path: fonts/open-sans/OpenSans-Variable.ttf
          weight: [1, 999]
        - path: fonts/open-sans/OpenSans-Variable-Italic.ttf
          style: italic
          weight: [1, 999]

Here's the related CSS spec.

We should probably also default weight to auto in all places. This would obviate the need for weight in the above examples because they cover the full range of weights. But we would still need to account for variable font weights via ranges for other situations.

gadenbuie commented 3 weeks ago

Actually, we could either have font ranges specified in two different ways for file and GF-alike fonts or we could support a single syntax. Google Fonts already allow a list of font weights, e.g. weight: [400, 600], which we wouldn't want to interpret as a variable font weight range.

Instead, I think we should support weight: 400..600.

  1. For font files this becomes font-weight: 400 600; (opens sans ttf files)
  2. For Google Fonts (alike) this value is used directly in the import URL, 400..600. (Example Open Sans)
gadenbuie commented 1 week ago

Question: What other formats can use variable fonts via TTF or OTF? Or graphics devices, e.g. via ggplot2 or ragg, etc.?