4 ms·

Hello Jack. I'm the creator of Interface. Indeed many glyphs's outlines comes from Roboto (though fitted into different glyph boxes.) The "playground" feature

Hello Jack. I'm the creator of Interface. Indeed many glyphs's outlines comes from Roboto (though fitted into different glyph boxes.) The "playground" feature of the website even has a feature for comparing Interface with Roboto. When you do, and you look at the details, you'll find that Interface is actually quite different from Roboto, at least as far as "different" goes with utilitarian UI fonts. https://rsms.me/interface/lab/?size=22&compare=roboto https://rsms.me/interface/lab/?size=22&compare=roboto

fastball 9y ago
You should probably be loading the Roboto font via Google Fonts or similar, because my system does not have Roboto installed by default, so it is defaulting to serif in your comparison. At least I think that's the issue.
- STRiDEX 9y ago
  If you have homebrew you can do: brew cask install font-roboto
  - hk__2 9y ago
    You got downvoted because the issue is not that fastball doesn’t have Roboto on their computer; it’s the website assumption that everyone has it.
    - lanewinfield 9y ago
      I'd say doubly, because no Cask with this name exists. (Looks like you have to run brew tap caskroom/fonts first :) )
      - hk__2 9y ago
        That’s true; I didn’t try the above command :)
- rasmusfabbe 9y ago
  Roboto is already being loaded from google fonts (https://github.com/rsms/interface/blob/b91dd3af/docs/lab/index.html#L657 https://github.com/rsms/interface/blob/b91dd3af/docs/lab/ind...) However, I think Chrome might do something weird where it fails to actually load the font files when later the font family "Roboto" is requested (https://github.com/rsms/interface/blob/b91dd3af/docs/lab/index.html#L674 https://github.com/rsms/interface/blob/b91dd3af/docs/lab/ind...) — a common hack for this issue is to have an invisible element in the document that explicitly uses the font and forces the browser to load it at document-load time. Could try that hack here. Anyhow, the version of Roboto served from google fonts is an older version and a subset of the "real" roboto, as can be fetched from roboto's source code repository. If you have Roboto installed locally, you probably have the more recent and more complete version installed and will likely want to compare with that (rather than what's on google fonts.) Edit: https://twitter.com/stuartpb/status/900484392472109056 https://twitter.com/stuartpb/status/900484392472109056 points out that @import must be at the beginning of a style declaration. Website has been updated.
jack_jennings 9y ago
Hi Rasmus, I think that at the point size at which this is meant to be used—e.g. around 11px (https://rsms.me/interface/lab/?size=11&compare=roboto https://rsms.me/interface/lab/?size=11&compare=roboto) —the differences between the two become harder to distinguish. The issue is really that the character of the type is going to be dictated by the systematic decisions: stroke weight, x-height, proportion, spacing. Starting from Roboto and not changing these parameters in your solution means drastically limiting how far away from the original source that you can realistically get. In the end, changing the stroke endings and changing the bounding box of some characters in invisible in the intended use case. Here is a screenshot comparing Roboto (11.5px) to InterfaceRSMS (11px), which illustrates: http://imgur.com/a/nl5mp http://imgur.com/a/nl5mp There are plenty of UI typefaces out there that take a noticeably different approach, an easy comparison to Lucida Grande is probably enough to justify the point. (EDIT: for completeness, http://imgur.com/a/CjD06 http://imgur.com/a/CjD06)
- davidad_ 9y ago
  FWIW, I do find Interface to be subjectively noticeably more pleasant than Roboto in the comparison here.
  - jack_jennings 9y ago
    The comparison is not great for objective comparison—the metrics of Interface have been changed so that 11px =/= 11px from one to the other… this was the best approximation that I could get in-browser. Usually you'd want to set the two typefaces up so that the x-height is the same, and in this case Roboto is probably slightly larger still, and hence a bit darker in overall color.
    - rasmusfabbe 9y ago
      Actually, I think you want to compare apples & apples, meaning Font A and Font B at the same size and line height.
      - 9y ago

fastball 9y ago

You should probably be loading the Roboto font via Google Fonts or similar, because my system does not have Roboto installed by default, so it is defaulting to serif in your comparison. At least I think that's the issue.

STRiDEX 9y ago
If you have homebrew you can do: brew cask install font-roboto
- hk__2 9y ago
  You got downvoted because the issue is not that fastball doesn’t have Roboto on their computer; it’s the website assumption that everyone has it.
  - lanewinfield 9y ago
    I'd say doubly, because no Cask with this name exists. (Looks like you have to run brew tap caskroom/fonts first :) )
    - hk__2 9y ago
      That’s true; I didn’t try the above command :)
rasmusfabbe 9y ago
Roboto is already being loaded from google fonts (https://github.com/rsms/interface/blob/b91dd3af/docs/lab/index.html#L657 https://github.com/rsms/interface/blob/b91dd3af/docs/lab/ind...) However, I think Chrome might do something weird where it fails to actually load the font files when later the font family "Roboto" is requested (https://github.com/rsms/interface/blob/b91dd3af/docs/lab/index.html#L674 https://github.com/rsms/interface/blob/b91dd3af/docs/lab/ind...) — a common hack for this issue is to have an invisible element in the document that explicitly uses the font and forces the browser to load it at document-load time. Could try that hack here. Anyhow, the version of Roboto served from google fonts is an older version and a subset of the "real" roboto, as can be fetched from roboto's source code repository. If you have Roboto installed locally, you probably have the more recent and more complete version installed and will likely want to compare with that (rather than what's on google fonts.) Edit: https://twitter.com/stuartpb/status/900484392472109056 https://twitter.com/stuartpb/status/900484392472109056 points out that @import must be at the beginning of a style declaration. Website has been updated.

jack_jennings 9y ago

Hi Rasmus, I think that at the point size at which this is meant to be used—e.g. around 11px (https://rsms.me/interface/lab/?size=11&compare=roboto https://rsms.me/interface/lab/?size=11&compare=roboto) —the differences between the two become harder to distinguish. The issue is really that the character of the type is going to be dictated by the systematic decisions: stroke weight, x-height, proportion, spacing. Starting from Roboto and not changing these parameters in your solution means drastically limiting how far away from the original source that you can realistically get. In the end, changing the stroke endings and changing the bounding box of some characters in invisible in the intended use case. Here is a screenshot comparing Roboto (11.5px) to InterfaceRSMS (11px), which illustrates: http://imgur.com/a/nl5mp http://imgur.com/a/nl5mp There are plenty of UI typefaces out there that take a noticeably different approach, an easy comparison to Lucida Grande is probably enough to justify the point. (EDIT: for completeness, http://imgur.com/a/CjD06 http://imgur.com/a/CjD06)

davidad_ 9y ago
FWIW, I do find Interface to be subjectively noticeably more pleasant than Roboto in the comparison here.
- jack_jennings 9y ago
  The comparison is not great for objective comparison—the metrics of Interface have been changed so that 11px =/= 11px from one to the other… this was the best approximation that I could get in-browser. Usually you'd want to set the two typefaces up so that the x-height is the same, and in this case Roboto is probably slightly larger still, and hence a bit darker in overall color.
  - rasmusfabbe 9y ago
    Actually, I think you want to compare apples & apples, meaning Font A and Font B at the same size and line height.
    - 9y ago