Re: [community-group] Typography type feedback (#102)

I think we should consider an approach which contains a parallel to [`@font-face` at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) - creating a separation of concerns between font-loading and typographic styling
### Font Face Tokens
With a fontFace token type, we could define all the required font characteristics for font loading
Current proposals related to defining a specific font-face through a family token, I've seen are in my opinion far too simplistic and allow opportunities for properties to be lost in translation.
The current state of the industry and design tooling has designers calling font-faces via their postScript names or fullName from a font's [Naming Table](https://learn.microsoft.com/en-us/typography/opentype/spec/name) however ensuring these fonts render correctly in production code is often an error-prone process with code pointing to the wrong font files, browsers adding extra-weight to fonts, instead of loading the correct typeface for a font-weight value, and misuse of the @font-face specification in code.
With a proper specification to define a fontFace, and link it to a specific font file, we could mitigate a lot of the headaches when it comes to working with fonts.
```
"my-font-face-token": {
 "$type": "fontFace",
 "$value": {
   ascentOverride,
   descentOverride,
   fontFamily
   fontWeight
   fontStretch
   fontVariationSettings
   fontFeatureSettings
   sizeAdjust
   src
   unicodeRange
 }
 "$extensions": {
  "com.vendor": {
  src: "vendor-specific-cdn-rules"
 }
}
```

Vendors could make use of $extensions to load fonts from their own CDNs, at a bare minimum 'src' could contain the postScript name for trying to find the file, either locally or from a database.
Other valuable information I could see being useful in a fontFace token is a 'License' property, allowing vendors and users to know the license of any font files they may be handling, given the concerns over font files and copyright

PANOSE might also be useful information to store, allowing vendors to get some high-level metrics for the font, without needing to actually touch a font file.

### Using font faces in typography tokens

With fontFace tokens it would become easy to call the necessary properties by making use of aliases
```
my-typography-token: {
 $type: "typography",
 $value: {
  fontSize: "2rem"
  lineHeight: 1.5
  text-decoration: "underline"
  fontFace: "{my-font-face-token}"
 }
}
```

-- 
GitHub Notification of comment by LukeFinch
Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/102#issuecomment-2146810241 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 4 June 2024 07:30:15 UTC