search

vercel / geist-font

https://vercel.com/font
SIL Open Font License 1.1
2.13k stars 54 forks source link

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

Open kevinschaich opened 2 months ago

kevinschaich commented 2 months ago

Font Name (Geist Sans/Geist Mono):

Geist Mono:

image

Another code font e.g. Hack

image

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

luciascarlet commented 2 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 2 months ago

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

luciascarlet commented 2 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:

image

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 1 month 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 9 hours 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:

image

WezTerm with harfbuzz_features:

image

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.