Css font sets
Just add HTML!
Getting started
npm install fontset --savescss examples
Use included fonts
// Override default settings here
@import 'node_modules/fontset/fonts/.scss'; // See all scss font sets
.my-selector {
@include fontset;
}Use other fonts
// Import fonts with css @font-face or from a third party such as Google Fonts
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:300,400,500');
// Define font families and font weights
$fontset-primary-family: 'Roboto Slab', sans-serif;
$fontset-primary-weight: 400;
$fontset-secondary-family: 'Roboto', sans-serif;
$fontset-secondary-weight: 300;
$fontset-secondary-weight-bold: 400;
@import 'node_modules/fontset/fonts/index.scss';
.my-selector {
@include fontset;
}scss settings
See all default settings
Note: The syntax highlighting below is rendered using highlight.js.
General
// Font families
$fontset-primary-family: null !default;
$fontset-primary-weight: bold !default;
$fontset-secondary-family: $fontset-primary-family !default;
$fontset-secondary-weight: normal !default;
$fontset-secondary-weight-bold: bold !default;
$fontset-family-monospace: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !default;
// Colors
$fontset-color-primary: deeppink !default;
$fontset-color-primary-contrast: #fff !default;
$fontset-color-secondary: #f0f0f0;
$fontset-color-secondary-contrast: #404040;
// Indentation for blockquotes, lists, e.t.c.
$fontset-indent: 14 28 !default;
Responsive
// The minimum and maximum width of the page content.
// These values will prevent properties with vw units from getting too small or too large.
$fontset-min-width: 320px !default;
$fontset-max-width: 1200px !default;
// Bottom margins for paragraphs, tables and other block elements.
// The first value is rendered on screens narrower than $fontset-min-width
// The second value is rendered on screens wider than $fontset-max-width
$fontset-block-margin-bottom: 14 28 !default;
// If $fontset-unit is rem, this value should be equal to to the font-size of <html>.
$fontset-rem-base: 16 !default;
Elements
// Font sizes containing two values will be scaled responsively.
// Modular scale:
// Narrow screens: 16px, Minor Third 1.200
// Wide screens: 14px, Perfect fourth 1.333
$fontset-elements: (
// html- font- font- line- font- font-
// element family size height weight style
a: null null null null null,
abbr: null null null null null,
address: secondary 14 1.5 secondary-bold normal,
blockquote: secondary (14, 16) 1.75 secondary null,
button: secondary (14, 16) 1.25 secondary-bold null,
dt: secondary (14, 16) 1.5 secondary-bold null,
dd: secondary (14, 16) 1.5 secondary null,
figcaption: secondary (14, 14) 1.5 secondary-bold null,
h1: primary (29.03, 50.52) 1 primary null,
h2: primary (24.19, 37.9) 1.25 primary null,
h3: primary (20.16, 28.43) 1.25 primary null,
h4: primary (16.8, 21.33) 1.25 primary null,
h5: primary (14, 16) 1.25 primary null,
h6: primary (11.67, 12) 1.25 primary null,
b: null null null bolder null,
cite: null null null null italic,
code: monospace null null null null,
del: null null null null null,
em: null null null null italic,
i: null null null null italic,
ins: null null null null null,
mark: null null null null null,
nav: secondary (14, 16) 1.25 secondary-bold null,
strong: null null null bolder null,
summary: secondary (14, 16) 1.5 secondary-bold null,
li: secondary (14, 16) 1.25 secondary null,
p: secondary (14, 16) 1.75 secondary null,
pre: monospace 14 1.5 null null,
caption: primary (14, 16) 1.25 primary null,
th: secondary (14, 16) 1.25 secondary-bold null,
td: secondary 14 1.25 secondary null
) !default;
// a
$fontset-a-transition: color .25s ease !default;
$fontset-a-color-link: inherit !default;
$fontset-a-color-visited: inherit !default;
$fontset-a-color-hover: $fontset-color-primary !default;
$fontset-a-color-focus: $fontset-color-primary !default;
$fontset-a-color-active: $fontset-color-primary !default;
// abbr
$fontset-abbr-border-bottom: 1px dotted $fontset-color-primary !default;
// blockquote
$fontset-blockquote-border-width: 2px !default;
$fontset-blockquote-border-color: $fontset-color-secondary !default;
$fontset-blockquote-indent: $fontset-indent;
// button
$fontset-button-padding: .625em 1.25em !default;
$fontset-button-color: $fontset-color-primary-contrast !default;
$fontset-button-background-color: $fontset-color-primary !default;
$fontset-button-disabled-color: #eee !default;
$fontset-button-disabled-background-color: #ccc !default;
$fontset-button-states: shadow !default;
// code
$fontset-code-color: $fontset-color-primary !default;
// dl
$dl-indent: $fontset-indent !default;
// hr
$fontset-hr-color: $fontset-color-primary !default;
// lists
$fontset-list-indent: $fontset-indent !default;
// mark
$fontset-mark-background-color: $fontset-color-primary !default;
$fontset-mark-color: $fontset-color-primary-contrast !default;
// pre
$fontset-pre-padding: 1.25em .625em !default;
$fontset-pre-background-color: $fontset-color-secondary !default;
$fontset-pre-color: $fontset-color-secondary-contrast !default;
// table
$fontset-table-border-color: $fontset-color-secondary !default;
States
$fontset-states-shadow-transition: box-shadow .25s ease !default;
Rendering
// Setting this to a css selector will cause all css to be rendered immediately after importing the file.
// Example: $fontset-selector: '.fontset';
// If null, no css will be rendered until the fontset mixin is included.
// Example: .fontset { @include fontset }
$fontset-selector: null !default;Vanilla HTML / CSS
<link rel="stylesheet" href="node_modules/fontset/fonts/roboto-slab_roboto.css" />
...
<div class="fontset">
<!-- Vanilla HTML -->
</div>