glyphic-co / glyphic-co/textblock

Though params refer to variable font grade, script changes font weight

Open
#29 6 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.