I’ve been doing designs in Sketch with ‘SF Pro Display’ and ‘SF Pro Text’ that I downloaded from https://developer.apple.com/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";
Post image

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

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

Post image

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?



Source link

Write A Comment