Generate Type Scales With Stackswell

Save time with Stackswell’s latest release and create type systems in seconds!

Stackswell’s Create Type System Window Thingy

How To Create A New Type System
1. Create a new type layer, this will be your base type layer for the type scale
2. Set the base font size (probably 16px), no need to set the line height.
3. Set the typeface
4. Set the text layer’s color
5. Select the text layer and go to Plugins > Stackswell > Create Type System

Notes:
• No need to worry about the naming conventions or slashes. Stackswell will name and nest all the layers for you.
• The base type layer you select will become the p tag for your extra-small breakpoint.

Settings

Type Scale
Font Size x Type Scale Ratio = Next Font Size
Type Scale is the ratio that will be used to build out the type levels in the scale. It will start with the base font size you set and multiply by the ratio.

Line Height
Font Size x Line Height Ratio = Line Height
Line Height is the ratio that will calculate each type level’s line height. To calculate this we multiply the current level’s font size by the line height ratio.

Alignment
The Alignment check boxes will generate a type scale for each alignment box checked.

Paragraph
Line Height x Paragraph Ratio = Paragraph Spacing
Paragraph is set as a ratio based on your line height. If you want the space of the line height to match the paragraph spacing use 1. If you don’t want any paragraph spacing use 0.

Breakpoint Scale
Font Size of breakpoint x Breakpoint Scale Ratio = Font Size
Breakpoint Scale is the ratio that the type will be scaled between breakpoints.

Breakpoints
The Breakpoint checkboxes will generate a type scale for each box that is checked.

Color Name
Color Name will substitute the hex code with whatever is placed in this box. So you could do something like “Primary Blue”.

Rounding
Rounding let’s you define how you want your scales to be rounded. There are four options. None, normal and multiples of 4 (for you material people) and multiples of 8.

Scales and Ratios

Minor Second: 1.067
Major Second: 1.125
Minor Third: 1.125
Major Third: 1.25
Perfect Fourth: 1.333
Augmented Fourth: 1.414
Perfect Fifth: 1.5
Minor Sixth: 1.6
Golden Section: 1.618
Major Sixth: 1.667
Minor Seventh: 1.778
Major Seventh: 1.875
Octave: 2
Major Tenth: 2.5
Major Eleventh: 2.667
Major Twelfth: 3
Double Octave: 4