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

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

Open
gadenbuie opened this issue Sep 6, 2024 · 5 comments
Open

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

gadenbuie opened this issue Sep 6, 2024 · 5 comments

Comments

@gadenbuie
Copy link
Collaborator

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
Copy link
Collaborator Author

@gadenbuie
Copy link
Collaborator Author

In 1a94b55 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
Copy link
Collaborator Author

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
Copy link
Collaborator Author

gadenbuie commented Sep 25, 2024

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
Copy link
Collaborator Author

gadenbuie commented Oct 9, 2024

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

  • matplotlib
  • Typst (via Quarto)
  • ggplot2/ragg
  • Other plotting in Python

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

No branches or pull requests

1 participant