A typographic base that uses Compass's 0.13.alpha Vertical Rhythm and TeamSass's Modular Scale https://github.com/Team-Sass/modular-scale. Heavily inspired and built on Eric Meyer's example: https://gist.github.com/ericam/3601836

typography.scss

//Font Families
// -------------------------------------
$primary-font-regular: 'proxima_nova_rgregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$primary-font-italic: 'proxima_novaregular_italic', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$primary-font-semibold: 'proxima_nova_ltsemibold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$primary-font-semibold-italic: 'proxima_novasemibold_italic', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$primary-font-bold: 'proxima_nova_rgbold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$primary-font-bold-italic: 'proxima_novabold_italic', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$secondary-font: Georgia, Times, 'Times New Roman', serif;

// Modular Scale Settings https://gist.github.com/ericam/3601836
// -------------------------------------
$ratio: major-third() fifth();
$base-size: 16px;

// Modular Scale Genereated Values
// -------------------------------------
$normpx : $base-size;
$medpx : ms(1);
$smallpx : ms(-1);
$xsmallpx : ms(-2);
$xxsmallpx : ms(-3);
$xxxsmallpx : ms(-4);
$largepx : ms(2);
$xlargepx : ms(3);
$xxlargepx : ms(5);
$xxxlargepx : ms(8);
//Uncomment the mixin below to have Terminal list out the Pixel values that are being genereated.
//@include ms-list();

//Vertical Rhythm Settings
// -------------------------------------
$base-font-size: $base-size;
$base-line-height: $xxxsmallpx;//A smaller initial base line height allows for finer control over spacing between elements in layout.
$rhythm-unit: 'rem';
$rem-with-px-fallback: true;//Whether to output fallback values in px when using rem as the rhythm-unit.
$round-to-nearest-half-line: false;

@include establish-baseline();

html {
  color: $primary-dark;
	font-family: $primary-font-regular;
	@include adjust-leading-to(3);//Takes our nice small base line value and sets the line-height of all text to a nice minimum. http://atendesigngroup.com/blog/vertical-rhythm-compass
}

h1 {
	@include adjust-font-size-to($xxxlargepx);
	@include margin-trailer(2);//Used over and over again to provide an example of a way to use margin-trailer
}

h2 {
	@include adjust-font-size-to($xxlargepx);
	@include margin-trailer(2);
}

h3 {
	@include adjust-font-size-to($largepx);
	@include margin-trailer(2);
}
	
h4 {
	@include adjust-font-size-to($medpx);
	@include margin-trailer(2);
}
	
h5 {
	@include adjust-font-size-to($normpx);
	@include margin-trailer(2);
}

h6 {
	@include adjust-font-size-to($smallpx);
	@include margin-trailer(2);
}

p, pre, label {
	@include adjust-font-size-to($normpx);
	@include margin-trailer(2);
}

hr { 
	border: 0; 
	height: 0;
	margin: 0;
	@include trailing-border;
	@include margin-trailer(2);
}

ol, ul, dl {
	@include margin-trailer(2);
}

li {
	line-height: auto;
}

ul {
	@include unordered-inside;//Custom mixin
}

ol {
	@include ordered-inside;//Custom mixin
}

strong, b {
	font-weight: bold;
}

em, i , q {
	font-style: italic;
}

pre {
	white-space: pre;
	overflow: auto;
}

code {
	white-space: pre;
	font-family: monospace;
}