Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@mkitt
Last active April 8, 2024 23:07
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mkitt/5533326 to your computer and use it in GitHub Desktop.
Save mkitt/5533326 to your computer and use it in GitHub Desktop.
Helvetica Neue Font Stacks for SASS.
@function helvetica_neue_stack($weight, $variant)
@return "Helvetica Neue CE #{$weight} #{$variant}", "Helvetica Neue LT #{$weight} #{$variant}", "Helvetica Neue #{$weight} #{$variant}", "HelveticaNeue-#{$variant}", "Helvetica Neue #{$variant}", "Helvetica Neue", "Helvetica", "Arial", sans-serif
// Fonts
$sans-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif
$sans-neue-family: "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$sans-light-family: helvetica_neue_stack("45", "Light")
$sans-thin-family: helvetica_neue_stack("35", "Thin")
$sans-ultra-family: helvetica_neue_stack("25", "Ultra Light")
%sans-light
font-family: $sans-light-family
font-weight: 300
%sans-thin
font-family: $sans-thin-family
font-weight: 200
%sans-ultra
font-family: $sans-ultra-family
font-weight: 100
@mkitt
Copy link
Author

mkitt commented May 7, 2013

Based on the following article around whats preinstalled for most users. Seems to work with decent fallbacks. Still not 100%, so embedding the @font-face and font is way more reliable still.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment