gem install typeup
The base font size.
The line length or measure. If you want to measure in characters, I suggest you divide the amount of characters you want with 1,5 and turn that into
ems. For example, 45 characters ->
(45/1,5) * 1em = 30em.
Multiplier for the final line height. Use this to fine tune the baseline.
Ratio for Modular Scale. You can find a list of ratios here. You can also use your own ratio such as
Multiplier for headings’ spacing above. The value to be multiplied is the calculated line height of the heading.
Multiplier for headings’ spacing below. The value to be multiplied is the calculated line height of the heading.
The amount of baseline shift for all headings. Will be applied using
position: relative and
Multiplier for a specific heading’s spacing above. The value to be multiplied is the calculated line height of the heading.
Multiplier for a specific heading’s spacing below. The value to be multiplied is the calculated line height of the heading.
The amount of baseline shift for a specific heading. Will be applied using
position: relative and
A boolean deciding whether the $fontSize value you give TypeUp is pixel snapped.
The browser base font size that TypeUp does its calculations from. You shouldn’t have to change this.
The minimum line height that TypeUp sets for any element. Unless you’re working with some funky typesetting, you don’t need to change this.
If true, will clone each headings styles into a corresponding .headingN cllass using @extend. This would get you classes like .heading2, .heading3 that you can use to style text without giving it a semantic heading element type.
The modular scale number that is assigned to h1. Next one gets 3, next one gets 2, etc. The modular scale cuts off at 0, so with the default settings h5 and h6 get a modular scale number of 0.
@include typeup-body($fontSize, $lineLength, $xHeight);
The typeup-body mixin should be included by itself, not under any selector. If you do not supply any arguments, they will be fetched from the settings variables.
@include typeup-container($fontSize, $lineLength, $xHeight);
The typeup-container mixin should be used when you want the rules to apply only inside a specific element. It should be included inside a selector. This mixin also establishes the width of the element with $lineLength.
If you do not supply any arguments, they will be fetched from the settings variables.
@include typeup-spacer( $size-in-ems, $before: $headingLinesBefore, // uses default value if not supplied $after: $headingLinesAfter, // uses default value if not supplied $baselineShift: $headingBaselineShift, // optional $overrideSpacingWithBaseline: $overrideSpacingWithBaseline // uses default value if not supplied );
The spacer mixin is used to give vertical rhythm to headings inside TypeUp, but you can use it for other things.
This is how it works:
$size-in-ems, in half increments
margin-topand after to get
$overrideSpacingWithBaselineis true (default is false), the before and after values are multiplied by the global line height instead of the calculated one.
You could use the mixin to make simple paragraphs:
@include typeup-spacer($fontSize, 0, 1, 0, false); which would apply a line-height and some margin to the bottom. Or any other element where you have a differing font size - line height will be adjusted correctly.
@import "typeup", the
$typeup-lineHeight variable (line height in
ems) is put in the global namespace. You can use it to establish spacing for other elements. When you
@include typeup-container() or
@include typeup-body() the variable is overwritten with the new calculated lineHeight.