google / google/fonts

[tag tool] Large feature, support tagging regions of design spaces

Open
#8,033 11 comments 0 reactions 1 assignee Claimed by @m4rc1e View on GitHub
I Tools / workflow / repo Tag tool / Tags definition
Dominant language
HTML
Stars
20.5k
Forks
2.9k
Avg merge
1d 21h
Merged PRs (30d)
95

Description

- [ ] "Design space **sampling**"

I think this is the easiest way, where we just sample the design space as a set of instances. The tagger tool therefore can provide a nice broad set of instances from: (a) every named position listed in the STAT able, or (b) if an axis has no STAT values, all of the values named in the axis registry, or (c) the min/def/max values if the axis has no named values in the registry; except for (d) opsz where you can use min/def/max only to start, and later the "green dot" algo to cut down, once available.

Then the tool just shows these the same as the default instance, and can use the API URL as a key, instead of the plain family name where the default instance is implicit. (The API URL puts a CSV in your CSV, so I guess we need to convert the comma separator to another character in the tagging tool page's output, so it still exports plain CSV, like using semicolons instead, as demo'd below, or we need the GF team to convert from CSV to TSV... ;)

| family:axes@values | category | value |
|--|--|--:|
`Recursive` | /Expressive/Stiff | 73
`Recursive:slnt,wght,CASL,CRSV,MONO@-15,1000,1,1,1` | /Expressive/Stiff | 0
`Recursive:slnt,wght,CASL,CRSV,MONO@-15,1000,1,1,1` | /Script/Handwritten | 80
`Recursive:slnt,wght,CASL,CRSV,MONO@-15,1000,1,1,1` | /Script/Informal | 80

And if users want to tag additional instance locations, they can just use the current UI to switch to the tag they want to set a value to, copy and paste a GF API URL into the current "Add family" text input box (where it is converted to semicolon under the hood) and then give it a value.

- [ ] "Design space **mapping**"

This is trickier, where we want to tag regions of a design space with a value - visualizing the ranges is the problem. https://fontbureau.github.io/TypeRoof provides a possible inspiration, where there are keyframes to tween through in a motion-graphic view... but also we can just avoid it completely, and deal with this as an abstraction, to start, and just pick the middle value of each range, and representing the line just like the above ;)

The API URL scheme already supports ranges, so that could be something like this

| family:axes@values | category | value |
|--|--|--:|
| Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0.25..1,1,0..1 | /Script/Handwritten | 80

While the API URL scheme doesn't have a shorthand for 'full axis', that is a UI button in the fonts.google.com "Selection Embed Code" UI:

Screenshot 2024-08-15 at 4 26 45 PM

So it might be better to support that as well as explicit full ranges, like this

| family:axes@values | category | value |
|--|--|--:|
| `Recursive:slnt,wght,CASL,CRSV,MONO@*,*,0.25..1,1,*` | /Script/Handwritten | 80

We could also assume unstated values are not the default instance, but the full (`*`) range, to simplify even further, but that isn't the current assumption afaik.

Then, after being able to give a region a single value, there's tagging a region with an interpolating value. Again, let's start with a region defined as a line through the design space defined by a start instance and an end instance, that has a 1:1 linear corresponding start and end tag value:

| family:axes@values start | family:axes@values end | category | value start | value end |
|--|--|--|--:|--:|
| `Recursive:slnt,wght,CASL,CRSV,MONO@*,*,0.25,0.5,*` | `Recursive:slnt,wght,CASL,CRSV,MONO@*,*,1,1,*` | /Script/Handwritten | 50 | 100

Since the region is a line through the design space, a single slider with a looping play button that walks up and down the min/max (also seen on https://fontgauntlet.com) that shows the tag value, would be fine.

While I can see it is possible to define an area of design space with 3+ corners, and then give each corner a tag value, I think starting with a limit of 2 'corners' to define a line only, is good to start.

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.