Helper SCSS class to define the typography you use in your project
You can use inuitcss in your project by installing it using a package manager (recommended):
npm:
$ npm install sass-fonts --save
yarn:
$ yarn add sass-fonts
// SETTINGS
@import 'settings/settings.typography';
// TOOLS
@import 'sass-mq/mq'; // path depends on project setup
@import 'sass-fonts/tools/tools.family';
@import 'sass-fonts/tools/tools.font-size';
@import 'sass-fonts/tools/tools.typography';
Example for settings.fonts and settings.typography here.
settings.typography.scss
Notes
- $weight is optional and can be excluded
- $weight supports both font-weight integer (e.g. 300 / 700) or full string (e.g. bold / semi-bold)
- params for each breakpoint, e.g. mobile: (font-size, line-height, letter-spacing)
If using Google Fonts
@import url('https://fonts.googleapis.com/css?family=Overpass+Mono');
$overpass-mono: 'Overpass Mono', monospace;
// assign to $fonts map
$fonts: (
'overpass-mono': $overpass-mono,
);
$typographies: (
'h1': (
font: 'overpass-mono',
weight: 'bold', // or 700
breakpoints: (
mobile: (28px, 44px, 0.98px),
desktop: (36px, 56px, 1.26px)
),
),
'p': (
font: 'overpass-mono',
breakpoints: (
mobile: (18px, 30px, 0.6px),
desktop: (20px, 32px, 0.7px),
),
),
);
If using Webfonts (FontSquirrel etc)
@font-face {
font-family: 'muller';
font-style: normal;
font-weight: 700;
src:
url('../fonts/mullerblack-webfont.woff2') format('woff2'),
url('../fonts/mullerblack-webfont.woff') format('woff');
}
@font-face {
font-family: 'muller';
font-style: normal;
font-weight: 400;
src:
url('../fonts/mullerregular-webfont.woff2') format('woff2'),
url('../fonts/mullerregular-webfont.woff') format('woff');
}
$muller: 'muller', sans-serif;
// assign to $fonts map
$fonts: (
'muller': $muller,
);
$typographies: (
'h1': (
font: 'muller',
weight: 'bold', // or 700
breakpoints: (
mobile: (28px, 44px, 0.98px),
desktop: (36px, 56px, 1.26px)
),
),
'p': (
font: 'muller',
breakpoints: (
mobile: (18px, 30px, 0.6px),
desktop: (20px, 32px, 0.7px),
),
),
);
If using Typekit
@import url('https://use.typekit.net/[typekit_id].css');
$museo-sans: 'museo-sans';
// assign to $fonts map
$fonts: (
'museo-sans': $museo-sans,
);
$typographies: (
'h1': (
font: 'museo-sans',
weight: 'bold', // or 700
breakpoints: (
mobile: (28px, 44px, 0.98px),
desktop: (36px, 56px, 1.26px)
),
),
'p': (
font: 'museo-sans',
breakpoints: (
mobile: (18px, 30px, 0.6px),
desktop: (20px, 32px, 0.7px),
),
),
);
If using both Typekit and Google Fonts? We got you.
@import url('https://use.typekit.net/[typekit_id].css');
@import url('https://fonts.googleapis.com/css?family=Overpass+Mono');
$museo-sans: 'museo-sans';
$overpass-mono: 'Overpass Mono', monospace;
// assign to $fonts map
$fonts: (
'museo-sans': $museo-sans,
'overpass-mono': $overpass-mono,
);
$typographies: (
'h1': (
font: 'museo-sans',
weight: 'bold',
breakpoints: (
mobile: (28px, 44px, 0.98px),
desktop: (36px, 56px, 1.26px)
),
),
'p': (
font: 'overpass-mono',
breakpoints: (
mobile: (18px, 30px, 0.6px),
desktop: (20px, 32px, 0.7px),
),
),
);
Easy peasy.
There are a few ways to render your CSS using sass-fonts
's built in mixins.
sf-typography($tag, $important: false) 2.0.0
h1 {
@include sf-typography('h1');
}
h2, h3, h4, h5, h6 {
@include sf-typography('other-heading');
}
// @include sf-typography('h1', true); // forces !important
or if you opt not to set up a $typographies
and prefer to set your typography manually, just @include sf-family
and @include sf-font-size
(released in 2.0.2
) which utilizes inuitcss's @include inuit-font-size
sf-family($family, $weight: "regular", $important: false) 2.0.0
h1 {
@include sf-family('overpass-mono');
// Other Use Cases
// @include sf-family('overpass-mono', 'bold');
// @include sf-family('overpass-mono', 'bold', true); // forces !important
}
sf-font-size($font-size, $line-height, $letter-spacing, $important: false) 2.0.2
Sets the following properties for you: font-size
, line-height
and letter-spacing
. A fallback for browsers that do not support rem will also be provided for font-size
.
@include sf-font-size(16px, 24px, 0.5px);
@include sf-font-size(16px, 24px, 0.5px, true); // forces !important
In v2.0.0
you can now use integers for your font-weight
!
Font Weight | Default | |
---|---|---|
thin | 100 | |
extra-light | 200 | |
light | 300 | |
regular | 400 | !default |
medium | 500 | |
semi-bold | 600 | |
bold | 700 | |
extra-bold | 800 | |
black | 900 |
Create a Pull Request or submit an issue so I can fix them!
View our Changelog for recent changes!