glyphic-co / glyphic-co/textblock
Though params refer to variable font grade, script changes font weight
- Dominant language
- JavaScript
- Stars
- 552
- Forks
- 15
- PR merge metrics
- No merged PRs in 30d
Description
Just noticed: the code that handles setting the variable grade in PR #25 uses the `font-variation-settings` with the `"wght"` flag:
https://github.com/glyphic-co/textblock/blob/934cf16a77f336710d8102bf374c118a2ac87a1e/src/textblock.js#L52-L53
This is based on the current 0.9.9 code:
https://github.com/glyphic-co/textblock/blob/567a0e3354f8c02469f2dc7c5f7c9f041a341f3e/src/textblock.js#L56
I'm new to variable fonts, but based on [MDN's Variable Font Guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide), it looks like font grade is specified not using the `"wght"` flag but rather the `"GRAD"` flag (capitalized because grade is a (less common) custom variation axis, unlike weight, which is a (more commonly used) registered axis).
The font used in demo.html, Source Sans Variable - Roman, contains only the weight variation axis. So perhaps the parameter names should be changed from `min/maxWidthVariableGrade` to `min/maxWidthFontWeight`? The `Variable` part could be dropped, since both variable and non-variable fonts' weights can be set using just the `font-weight` CSS property (non-variable fonts will just round to the nearest available weight); the `font-variation-settings` property that only works with variable fonts wouldn't need to be used.
The `VariableGrade` params could be retained in addition to `FontWeight` params, and the code could be updated accordingly, though a variable font with a grade axis should be used to demonstrate it.
Contributor guide
Assessment
This issue has not been assessed yet.