search

googlefonts / opensans

Open Sans font
Other
212 stars 31 forks source link

Letter J starts too far to the left, causes alignment and clipping problems #50

Open justingrant opened 2 years ago

justingrant commented 2 years ago

The letter "J" in Open Sans extends past the left edge of where it should. This causes several problems:

image

This doesn't seem be to specific to web clients, because here's the same issue showing up in Microsoft Word (on MacOS). Note the J extends past the left edge of the caret.

image

This issue is a dupe of https://github.com/google/fonts/issues/4266 but this problem seems to be font-specific so I guessed that its natural home would be here instead of in the general Google Fonts repo. Feel free to close whichever one of these issues is in the wrong home.

If a fix is straightforward, I'd be happy to submit a PR but would need some direction as I know zero about building fonts!

kenmcd commented 2 years ago

Some of the characters are designed with a negative left side bearing. This is what you see with the uppercase J. But there is an alternative J which has a positive left side bearing. So if you apply stylistic set SS01 you will get this alternate J. See below (left is normal, right is with SS01 enabled).

J-vs J salt

justingrant commented 2 years ago

Good to know! Is it good to have the default rendering be vulnerable to clipping? Or does it not matter because even if the default isn't ideal, changing it would break too many websites?

Regardless, I'm glad that there's a workaround. But I can't figure out how to actually get that stylistic set to show up in a web page. I followed the stylistic sets example from MDN but it doesn't seem to display any differently in Chrome, FF, or Safari (on MacOS). Any idea how to get the behavior in your screenshot above to show up in CSS?

Example: (live at https://jsfiddle.net/bheyfkgp/) 

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter&family=Open+Sans">
    <style>
      body { font-size: 50px; padding: 20px; }
      .box { border: 1px solid red; }
      .top { font-family: "Open Sans"; }
      .ss01 { font-feature-settings: "ss01"; }
      .bottom { font-family: Inter; }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="top">Jurisdiction</div>
      <div class="top ss01">Jurisdiction (SS01)</div>
      <div class="bottom">Jackson, MS</div>
    </div>  
  </body>
</html>
image
kenmcd commented 2 years ago

But I can't figure out how to actually get that stylistic set to show up in a web page.

The Google Fonts API currently does not support stylistic sets. So if you want to use ss01 you will need to host the fonts locally.

Or does it not matter because even if the default isn't ideal, changing it would break too many websites?

I think that is the case. The original Open Sans has the long J with the negative left side bearing, and it did not have the alternate J like in the ss01 above. And that was 20+ years ago when the focus was on fonts for the desktop.

JelleTempelman commented 1 year ago

Hi, I am also struggling with this, and I can not get it to work. I've downloaded the Google Fonts, and added them locally to my project. I've added font-feature-settings: "ss01"; to my body, but it's still clipping the J. @justingrant Did you manage to find a workaround, or did you just use another font?

justingrant commented 1 year ago

@JelleTempelman I wasn't able to fix this. My workaround was to add more margin to text that starts with "J". Not a great fix.

JelleTempelman commented 1 year ago

Hi @justingrant thanks for the reply. Indeed not a great fix, even more so because in a input I can not change the margin/padding of the shadow element, so the problem will always presist there. I’ll look further in to it tomorrow. Thanks anyway!