Confusion between SF Pro Display and SF Pro Text. Something ain't right! [UPDATE: Chrome Bug]

20 days ago from

I've been doing designs in Sketch with SF Pro Display and SF Pro Text that I downloaded from Apple Fonts. These are the two system fonts that Apple uses (a.k.a. San Francisco). According to Apple, the system automatically uses SF Pro Text for any text <20pt, and SF Pro Display

=20pt. This matches the behavior I see in the browser when using the standard font stack in CSS.

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Sketch version

You can see the space between letters in Text is tighter than Display

However, in Sketch I am using the downloaded fonts..

Browser version

In the downloaded fonts the space between letters is tighter in Display and looser in Text.

I must be crazy, because the downloadable fonts I use in design tools seems swapped.

What am I missing here?

1 comment