It’s certainly the earliest use of it that I’ve seen (commits from 2015). ttf web svg eot woff woff2 otf pfa bin pt3 ps cff t42 t11 dfont none. Although I discovered this late, it likely predates Facebook’s code above and may even be the origin of this aliased approach for system fonts. System Font CSS by Jonathan Neal, an awesome project to polyfill system-ui.When a locally aliased font doesn’t find an exact match for weight/style, does it use font-synthesis to render faux bold or faux italic?.Check out the System Font CSS project in the sources below. You could expand the San Francisco alias to support all of the weights Facebook listed above (and maybe even italic styles too).Inter features a tall x-height to aid in readability of mixed-case and lower-case text. This should work everywhere San Francisco is available. Inter is a variable font family carefully crafted & designed for computer screens.
(Yes, I know I recently wrote a blog post about anti-aliasing-that’s a different thing.) Add this little block into your project and it will globally alias (rename) Helvetica to Comic Sans MS (and Chalkboard SE, browser support). Then I'll introduce the new width styles in SF Pro: Condensed, Compressed, and Expanded.
I'll take you through the various available families, styles, and Optical Sizes. Are you tired of developers abusing the smooth traditionalism of Helvetica? Do you wish your web page was a little bit more fun? Do you also want to avoid discussing things with your peers? Well, do I have some code for you. We'll start with an overview of the San Francisco family of fonts.
