Open gadenbuie opened 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,
}
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.
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
.
font-weight: 400 600;
(opens sans ttf files)400..600
. (Example Open Sans)Question: What other formats can use variable fonts via TTF or OTF? Or graphics devices, e.g. via ggplot2
or ragg
, etc.?
The spec currently restricts font weight to
1:9 * 100
but CSS also allows
normal
(400),bold
(700),lighter
, andbolder
. 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):