Skip to content

Instantly share code, notes, and snippets.

@tedw
Forked from gpessia/Helvetica Neue stack
Last active October 27, 2022 20:14
Show Gist options
  • Save tedw/69576a543fbfe6cedb3d4c3fa0284eab to your computer and use it in GitHub Desktop.
Save tedw/69576a543fbfe6cedb3d4c3fa0284eab to your computer and use it in GitHub Desktop.
Helvetica Neue CSS font-family stacks
// Fallback font stack
// These system fonts support multiple weights.
// Demo http://output.jsbin.com/morukug/quiet
// Cross-browser results https://workflowy.com/s/BHZf.wXqmEGAjs4
$sans: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
/**
* Helvetica Neue Normal
*/
$helvetica-neue:
HelveticaNeue,
Helvetica Neue,
HelveticaNeueRoman,
HelveticaNeue-Roman,
Helvetica Neue Roman,
$sans;
@mixin helvetica-neue() {
font-family: $helvetica-neue;
}
// Black
$helvetica-neue-black:
HelveticaNeueBlack,
HelveticaNeue-Black,
Helvetica Neue Black,
HelveticaNeue,
Helvetica Neue,
Roboto-Black,
Roboto Black,
Arial Black,
$sans;
@mixin helvetica-neue-black() {
font-family: $helvetica-neue-black;
font-weight: 900;
}
// Heavy
$helvetica-neue-heavy:
HelveticaNeueHeavy,
HelveticaNeue-Heavy,
Helvetica Neue Heavy,
HelveticaNeue,
Helvetica Neue,
Arial Black,
$sans;
@mixin helvetica-neue-heavy() {
font-family: $helvetica-neue-heavy;
font-weight: 800;
}
// Bold
$helvetica-neue-bold:
HelveticaNeueBold,
HelveticaNeue-Bold,
Helvetica Neue Bold,
HelveticaNeue,
Helvetica Neue,
$sans;
@mixin helvetica-neue-bold() {
font-family: $helvetica-neue-bold;
font-weight: 700;
}
// Medium
$helvetica-neue-medium:
HelveticaNeueMedium,
HelveticaNeue-Medium,
Helvetica Neue Medium,
HelveticaNeue,
Helvetica Neue,
$sans;
@mixin helvetica-neue-medium() {
font-family: $helvetica-neue-medium;
font-weight: 600;
}
$helvetica-neue-light:
HelveticaNeueLight,
HelveticaNeue-Light,
Helvetica Neue Light,
HelveticaNeue,
Helvetica Neue,
Roboto-Light,
Roboto Light,
$sans;
@mixin helvetica-neue-light() {
font-family: $helvetica-neue-light;
font-weight: 300;
}
$helvetica-neue-thin:
HelveticaNeueThin,
HelveticaNeue-Thin,
Helvetica Neue Thin,
HelveticaNeue,
Helvetica Neue,
$sans;
@mixin helvetica-neue-thin() {
font-family: $helvetica-neue-thin;
font-weight: 200;
}
$helvetica-neue-ultralight:
HelveticaNeueUltraLight,
HelveticaNeue-Ultra-Light,
Helvetica Neue Ultra Light,
HelveticaNeue,
Helvetica Neue,
$sans;
@mixin helvetica-neue-thin() {
font-family: $helvetica-neue-ultralight;
font-weight: 100;
}
/**
* Helvetica Neue Extended
*/
/* Helvetica Neue Black Extended Font Stack */
.{font-family: "HelveticaNeueBlackExtended", "HelveticaNeue-Black-Extended", "Helvetica Neue Black Extended", "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif; font-weight:800; font-stretch:expanded;}
/* Helvetica Neue Heavy Extended Font Stack */
.{font-family: "HelveticaNeueHeavyExtended", "HelveticaNeue-Heavy-Extended", "Helvetica Neue Heavy Extended", "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif; font-weight:700; font-stretch:expanded;}
/* Helvetica Neue Bold Extended Font Stack */
.{font-family: "HelveticaNeueBoldExtended", "HelveticaNeue-Bold-Extended", "Helvetica Neue Bold Extended", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:600; font-stretch:expanded;}
/* Helvetica Neue Medium Extended Font Stack */
.{font-family: "HelveticaNeueMediumExtended", "HelveticaNeue-Medium-Extended", "Helvetica Neue Medium Extended", "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:500; font-stretch:expanded;}
/* Helvetica Neue Regular Extended Font Stack */
.{font-family: "HelveticaNeueExtended", "HelveticaNeue-Extended", "Helvetica Neue Extended", "HelveticaNeueRomanExtended", "HelveticaNeue-Roman-Extended", "Helvetica Neue Roman Extended", "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:400; font-stretch:expanded;}
/* Helvetica Neue Light Extended Font Stack */
.{font-family: "HelveticaNeueLightExtended", "HelveticaNeue-Light-Extended", "Helvetica Neue Light Extended", "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:300; font-stretch:expanded;}
/* Helvetica Neue Thin Extended Font Stack */
.{font-family: "HelveticaNeueThinExtended", "HelveticaNeue-Thin-Extended", "Helvetica Neue Thin Extended", "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:200; font-stretch:expanded;}
/* Helvetica Neue Ultra Light Extended Font Stack */
.{font-family: "HelveticaNeueUltraLightExtended", "HelveticaNeue-Ultra-Light-Extended", "Helvetica Neue Ultra Light Extended", "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:100; font-stretch:expanded;}
/**
* Helvetica Neue Condensed
*/
/* Helvetica Neue Black Condensed Font Stack */
.{font-family: "HelveticaNeueBlackCondensed", "HelveticaNeue-Black-Condensed", "Helvetica Neue Black Condensed", "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Arial Narrow", "Arial", sans-serif; font-weight:800; font-stretch:condensed;}
/* Helvetica Neue Heavy Condensed Font Stack */
.{font-family: "HelveticaNeueHeavyCondensed", "HelveticaNeue-Heavy-Condensed", "Helvetica Neue Heavy Condensed", "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Arial Narrow", "Arial", sans-serif; font-weight:700; font-stretch:condensed;}
/* Helvetica Neue Bold Condensed Font Stack */
.{font-family: "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:600; font-stretch:condensed;}
/* Helvetica Neue Medium Condensed Font Stack */
.{font-family: "HelveticaNeueMediumCondensed", "HelveticaNeue-Medium-Condensed", "Helvetica Neue Medium Condensed", "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:500; font-stretch:condensed;}
/* Helvetica Neue Regular Condensed Font Stack */
.{font-family: "HelveticaNeueCondensed", "HelveticaNeue-Condensed", "Helvetica Neue Condensed", "HelveticaNeueRomanCondensed", "HelveticaNeue-Roman-Condensed", "Helvetica Neue Roman Condensed", "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:400; font-stretch:condensed;}
/* Helvetica Neue Light Condensed Font Stack */
.{font-family: "HelveticaNeueLightCondensed", "HelveticaNeue-Light-Condensed", "Helvetica Neue Light Condensed", "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:300; font-stretch:condensed;}
/* Helvetica Neue Thin Condensed Font Stack */
.{font-family: "HelveticaNeueThinCondensed", "HelveticaNeue-Thin-Condensed", "Helvetica Neue Thin Condensed", "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Arial Narrow", "Arial", sans-serif; font-weight:200; font-stretch:condensed;}
/* Helvetica Neue Ultra Light Condensed Font Stack */
.{font-family: "HelveticaNeueUltraLightCondensed", "HelveticaNeue-Ultra-Light-Condensed", "Helvetica Neue Ultra Light Condensed", "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Arial Narrow", "Arial", sans-serif; font-weight:100; font-stretch:condensed;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment