Add Uniwidth variants

[naiyerasif]

Since, Inter is widely used on the web, a uniwidth variant of the font will help avoid layout shifts when a state change is indicated by a change in weight.

Additional context Consider a button with text displayed in regular weight. The weight is styled to shift to bold when a user hovers / focuses on the button. Currently, changing the weight changes the dimensions of the button. In case of uniwidth variant, this would not happen.

For more context, please refer to Lisa Staudinger's excellent piece on Uniwidth typefaces for interface design. The following GIF from the mentioned article showcases this request (with a comparison between IBM Plex Sans which is not a uniwidth font and Recursive which is).

[KrasnayaPloshchad]

This could be done by adding hwid feature

[rsms]

Thanks @KrasnayaPloshchad but I think @naiyerasif is asking for a monospace version of inter; where the width of all glyphs is the same. My understanding is that fwid is specifically for CJK fullwidth glyphs and wouldn't be appropriate nor probably solve the problem in this case.

Recursive is an example of a variable font with a custom MONO axis which accomplishes what is being asked for.

However, Inter Mono is currently not planned. It might never happen. There are simply so many good, freely-available monospace typefaces out there, many that works well with Inter.

Here are a few freely-available fonts you can try @naiyerasif with Inter: JetBrains Mono, Recursive, Roboto Mono, Hack, Inconsolata (I see you're already using Recursive :–)

[rsms]

Duplicate of #128

[naiyerasif]

@rsms I am definitely not asking for monospace version 😺 . Once again I'll quote from Lisa's article linked above:

A monospaced font, also called non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space (e.g. an uppercase A is the same width as a lowercase w, or a €-sign ). Monospaced fonts are traditionally used for typewriters, or nowadays for setting computer code.

Uniwidth typefaces, on the other hand, are proportionally-spaced typefaces, but every character occupies the same space across different cuts or weights. What this means in practice is that no matter which weight you set your text in, it will never change its length or cause text to reflow.

Uniwidth typefaces solve a very specific problem: text reflow / layout shifts when font-weight is used as a cue to indicate a change on an event (like focus or hover of a cursor). I have already embedded a gif above that illustrates this.

[rsms]

Got it! Thanks for the clarification. It would be too much work to do this manually for a second family I think, but it may be possible to generate automatically from source. I'm thinking something like this:

for each glyph
  let L' & R' be the relative LSB & RSB for current bounding box
  let W be max(x)-min(x) of all masters for glyph
  adjust LSB & RSB while keeping the ratios L' & R', so that glyph's width is equal to W

This may be good enough. Thoughts?

[naiyerasif]

@rsms Automating this would make sense.

I'm definitely not qualified enough to comment on how part. Maybe @KrasnayaPloshchad can remark on that?

[robzg420]

I think you can simulate the uniwidth behaviour by adjusting the letter spacing. Not a scalable solution, but it might help in some cases. In this example, I added letter-spacing: 0.02em; to the smaller weight.

[naiyerasif]

It has been a while since I raised this request. I've found a new usecase for adding a GRAD axis: it allows me to adjust the contrast for a font to support light and dark modes. An example of this in action using Roboto Flex is here: https://youtu.be/8B7xOgp5Aow