accoutrement-type
v4.0.2
Published
Sass typography and webfont utilities.
Downloads
498
Readme
Accoutrement-Type
Sass typography and webfont helpers by OddBird. Gather all your fonts into a single map, access them by name, and easily import the webfonts. Also includes helpers for accessibility and pseudo-elements.
More Accoutrement Tools
- Init provides light-weight browser-normalization.
- Color provides color-palette management and contrast-ratio utilities.
- Scale helps manage scale patterns like font-sizes, margins, and gutters.
- Layout provides layout utilities such as box-sizing, intrinsic ratios, z-index management, named media-queries, and a clearfix.
Quick Start
Install the package with npm or yarn:
npm install accoutrement-type
yarn add accoutrement-type
Import the library:
@import '<path-to>/accoutrement-type/sass/type';
Configure your font settings:
// Define what webfont formats need importing
$font-formats: 'woff' 'ttf';
// Set the a path to your fonts directory
$font-path: '../fonts/';
$fonts: (
// describe locally-hosted font files for import and access
'heading': (
'name': 'maven',
'stack': ('helvetica', 'arial', sans-serif),
'normal': 'maven/maven_pro_regular-webfont',
'bold': 'maven/maven_pro_bold-webfont',
),
// describe CDN fonts for access
'body': (
'name': 'Source Sans Pro',
'stack': ('Helvetica Neue', 'Helvetica', 'Arial', sans-serif),
),
// provide aliases for any font you need
'alias': 'body', // create aliases when useful
);
Import one font at a time with font-face()
or all your local webfonts with import-webfonts()
:
// Import one font by configuration key, with custom formats
@include font-face('body', 'otf' 'svg');
// Import all local fonts
@include import-webfonts;
Set your font-family anywhere, using the semantic names you defined earlier:
html {
@include font-family('body');
}
h1, h2, h3 {
@include font-family('heading');
}