Lowercase letter `L` looks too similar to number `1`

vercel / geist-font

https://vercel.com/font

SIL Open Font License 1.1

2.49k stars 65 forks source link

Lowercase letter `L` looks too similar to number `1` #102

Open kevinschaich opened 7 months ago

kevinschaich commented 7 months ago

Font Name (Geist Sans/Geist Mono):

[ ] Geist Sans
[x] Geist Mono

Geist Mono:

Another code font e.g. Hack

I think it's distracting – the whole purpose of a mono font is to remove ambiguity between characters.

luciascarlet commented 7 months ago

ss03 makes the "l" design look similar to the one in Hack. I much prefer that and I always enable that when using Geist in editors. Kind of wish it was the default, but I also think this is very much a stylistic preference.

kevinschaich commented 7 months ago

Sorry @luciascarlet what's ss03 you're referring to?

luciascarlet commented 7 months ago

Stylistic set 3. A lot of fonts include stylistic sets that can be activated via OpenType features. This is what it looks like:

Edit: Huh, not sure what's up with the rendering here; this may itself be worth investigating. I used Geist Mono Variable at 500 weight, with AA set to "antialiased" in VS Code, so no stem darkening on macOS. Appears to happen on the bolder weight too.

kevinschaich commented 6 months ago

Thanks @luciascarlet. Are there docs on how one would go about using it in HTML/React etc.? Or could you provide a quick ex?

cmattinson commented 4 months ago

@kevinschaich Enabling the OpenType features depends on your environment, most will allow changing the stylistic sets.

With VS Code you can enable them with theeditor.fontLigatures setting:

WezTerm with harfbuzz_features:

CSS with font-feature-settings

font-feature-settings: "ss01" 1, "ss03" 1, "ss04" 1;

There are 9 stylistic sets for alternate glyphs but I can't find the official documentation for them, I have to open the font with Font Gauntlet to see them.