Using San Francisco in HTML and CSS ⇥ furbo.org

Craig Hockenberry:

As a developer, there are often cases where we need to use the system font on web pages. Many times these pages are embedded in our apps and manage things like remote settings or documentation. In these contexts, matching the content to what the customer sees in their surrounding environment makes a big impact on the user experience. Think about how out of place an app feels when it displays Sparkle release notes in Lucida Grande while running on Yosemite.

We’ll soon be faced with a lot of surrounding content that’s displayed in San Francisco and will need ways to specify that same font in our CSS. It turns out that’s not a simple thing to do.

Hockenberry has a smart “hybrid” solution. What’s kind of fun about this discovery is how -apple-system-font — the self-descriptive system font declaration — renders on the current OS X/iOS releases. If you open his test page, you can see some subtle differences between Helvetica Neue (the red text) and the system version of Helvetica (the last three examples).