A toolkit for managing and scaling typography on the web using LibSass.

Typomatic2 is a LibSass version of Typomatic, a toolkit for setting up your project typography using Sass and Compass.

• Clone the repo into your project.
• Run npm install to install the required dependencies

Base font size of your project (set in PX, will be recalculated)

$base-font-size: 16px;

Base line-height (1.5 x 16px = 24px)

$base-line-height: 1.5;

Set whether typomatic should output classes for your predefined type scale values or not (defaults to false)

$type-output-classes: false;

The class prefix of the classes generated by typomatic-init mixin

$type-prefix: 'type';

The class separator between the type prefix and the size from the type scale map (ex. .type--large)

$type-class-separator: '--';

Type units (rem or px)

$type-units: "rem";

The CSS property of the type-weight mixin (needed because some web type services provide a different font-family for each weight). Use "font-weight" if you use weights in a format such as "300", or "regular", and "font-family" if you have a different font family for each weight.

$type-weight-cssproperty: "font-weight";

$type-scale: (
    small: (
        font-size: 14px,
        base-lines: 1
    ),
    base: (
        font-size: $base-font-size,
        base-lines: 1
    ),
    medium: (
        font-size: 25px,
        base-lines: 1.5
    ),
    large: (
        font-size: 31px,
        base-lines: 1.5
    )
);

$type-weight: (
    light: 300,
    regular: 400,
    bold: 700
);

@include typomatic-baseline;

@include typomatic-init;

@include type-scale($type-scale, $extend, $base-lines);

@include type-weight($type-weight);

@include border-leader($lines, $border-width, $border-style);

@include border-trailer($lines, $border-width, $border-style);

The border-leader and the border-trailer mixins default to $lines: 1, $border-width: 1, $border-style: solid