TypeTuner

Installation

To install TypeTuner, download the files in this repo and place them a folder called /typetuner/ in your Sass folder. Add @import 'typetuner/typetuner'; to your primary Sass file before you need to reference any font-sizes generated by this plugin.

Usage

Setting Variables

To configure TypeTuner for your project, declare the following variables and maps in your Sass project before importing TypeTuner.

Type Sizes

The list $fsizes contains a list of names for all the type sizes you'll need for your project. This can be whatever titles you like, just be sure to list them from smallest to largest.

Examples:

$fsizes: (small, medium, large, extra-large); $fsizes: (alpha, beta, gamma); $fsizes: (guppy, bluegill, bass, marlin, shark); $fsizes: (small, p, h6, h5, h4, h3, h2, h1);

Default:

$fsizes: (sm, p, bq, ssh, sh, h, hero);

Add "Small" Size

If you want to add a small type size (one step down from base on the scale in use), set:

$startsmall: true;

This is the default value.

Breakpoints

This plugin currently uses three maps to store breakpoint-related data. Please don't get too attached to this: it might change to a single map of nested maps for simplicity's sake. Until further notice, however, please set the following maps

Media Queries

The $breakpoints map contains breakpoint names (entirely up to you) and the measurement to set a min-width media query.

Default:

$breakpoints: (
	default: 20em,
	medium: 37.5em,
	large: 68em,
	xlarge: 82em
);

Base Font Sizes

If you'd like to set a different base font size per breakpoint, use the $bp-fs map to connect breakpoint names (the same ones used in $breakpoints) with font sizes.

Default:

$bp-fs: (
	default: 16px,
	medium: 18px,
	large: 21px,
	xlarge: 23px
);

Type Scales

Set a musical scale for type to follow at each breakpoint in $bp-scales. This map connects breakpoint names (again, from $breakpoints) to the names of musical scales found in /variables/_musical-scales.scss. As a general rule, select scales with more intervals for smaller screens: scales with fewer intervals will iterate and grow more quickly, creating larger sizes that take advantage of larger screens.

Default:

$bp-scales: (
  default: $hexatonic,
  medium: $pentatonic,
  large: $quad,
  xlarge: $major-triad
);

Extending Output

When TypeTuner runs its resp-sizes() mixin (which it does by default in _typetuner.scss, it will generate a series of silent placeholder selectors (%sm {}, %p {}, etc). To use these sizes in your project, @extend them in the appropriate selectors. Remember that font sizes inherit, so be careful not to over-@extend yourself. :)