Skip to content

Instantly share code, notes, and snippets.

@sumul
Created July 17, 2014 21:55
Show Gist options
  • Save sumul/2fbe259357888e8d677a to your computer and use it in GitHub Desktop.
Save sumul/2fbe259357888e8d677a to your computer and use it in GitHub Desktop.
A list of SASS variables to help manage numerical CSS font-weight values.
// Weights
$hairline-weight: 100;
$thin-weight: 200;
$light-weight: 300;
$normal-weight: 400;
$medium-weight: 500;
$semibold-weight: 600;
$bold-weight: 700;
$xbold-weight: 800;
$black-weight: 900;
// Synonyms
$regular-weight: $normal-weight;
$book-weight: $light-weight;
$xlight-weight: $hairline-weight;
$ultralight-weight: $hairline-weight;
$heavy-weight: $xbold-weight;
// Include fonts
// Order matters: normal, bold, italic, bold+italic
@font-face {
font-family: "MyFont";
font-weight: $normal-weight;
font-style: normal;
src: url("#{$fonts-path}/MyFont-Regular.eot");
// and the rest of the src urls...
}
@font-face {
font-family: "MyFont";
font-weight: $medium-weight;
font-style: normal;
src: url("#{$fonts-path}/MyFont-Medium.eot");
// and the rest of the src urls...
}
@font-face {
font-family: "MyFont";
font-weight: $bold-weight;
font-style: normal;
src: url("#{$fonts-path}/MyFont-Bold.eot");
// and the rest of the src urls...
}
@font-face {
font-family: "MyFont";
font-weight: $normal-weight;
font-style: italic;
src: url("#{$fonts-path}/MyFont-Italic.eot");
// and the rest of the src urls...
}
@font-face {
font-family: "MyFont";
font-weight: $medium-weight;
font-style: italic;
src: url("#{$fonts-path}/MyFont-Medium-Italic.eot");
// and the rest of the src urls...
}
@font-face {
font-family: "MyFont";
font-weight: $bold-weight;
font-style: italic;
src: url("#{$fonts-path}/MyFont-Bold-Italic.eot");
// and the rest of the src urls...
}
// Use 'em
body {
font-family: "MyFont", sans-serif;
}
p {
font-weight: $normal-weight;
}
em {
font-style: italic;
}
strong {
font-weight: $bold-weight;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment