Generated by SassMeister.com.

SassMeister-input-HTML.markdown

This text is set in JAF Bernina Sans, backed up by a Verdana stack. It uses a Sass map to scope font-size and line-height measurements to those specific typefaces, as Robin Rendle described. (Em units and max-widths, too.) See the variables and mixins in this other Pen.

Look at this Pen's own CSS and you'll see what I really wanted to explore. The paragraph element uses Verdana (and its associated measurements) by default, and only uses Bernina (and its associated measurements) if Bernina has loaded properly. The wf-active class is via Typekit font events. Progressive enhancement FTW.

When the composition widens and reaches a breakpoint, its size gets bumped up — again, considering Verdana by default and Bernina only if Bernina is present.

---

Tim Brown • @nicewebtype

SassMeister-input.scss

// ----
// Sass (v3.3.3)
// Compass (v1.0.0.alpha.18)
// ----

/* Variables
------------------------------------------*/

// Font sizes & line-heights
$font-verdana: (
  stack: "Verdana, serif",
  
	base: (
		font-size: .9,
		line-height: 1.5,
    max-width: 35
	),
  
  text: (
    font-size: 1,
    line-height: 1.5,
    max-width: 35
  )
);

$font-bernina: (
    stack: "\"jaf-bernina-sans\", Verdana, serif", 
  
    base: (
		  font-size: 1,
  		line-height: 1.4,
      max-width: 33
    ),
  
    text: (
      font-size: 1.125,
      line-height: 1.4,
      max-width: 33
    )
 );

$font-default: $font-verdana;


// Breakpoints
$width-narrow: 40em;
$width-medium: 60em;
$width-wide: 80em;


/* Mixins
------------------------------------------*/

// FONTSET FUNCTIONS
// This function is intended to be called by other functions and can be used to get information from the Sass list above. The $feature can be any key from the Sass list such as line-height or font-size.
@function _fontset-feature($feature, $family:$font-default, $set: 'base'){
    $result: map-get(map-get($family, $set), $feature);
    @return ($result * 1em);
}

// Sets the family from the stack key in a Sass list
@function fontset-family($family) {
    $result: map-get($family, stack);
    @return unquote($result);
}

// FONT-SIZE + LINE-HEIGHT FUNCTIONS
// These functions return the font-size or line-height depending on the font-family list. To avoid duplication these functions call the fontset-feature function above.

@function calc-font-size($set, $family:$font-default) {
    @return _fontset-feature(font-size, $family, $set);
}

@function calc-line-height($set, $family:$font-default) {
    @return _fontset-feature(line-height, $family, $set);
}

@function calc-max-width($set, $family:$font-default) {
    @return _fontset-feature(max-width, $family, $set);
}

// FONT-SCALE MIXIN
// Applies the functions above into a mixin so that we can set font-size and line-height at the same time.
// If there is a font-family set there 
// Example: @include font-scale(small, $font-verdana);
@mixin font-scale ($font-size, $family:$font-default, $line-height:$font-size, $max-width:$font-size) {
    font-size: calc-font-size($font-size, $family);
    line-height: calc-line-height($line-height, $family);
    max-width: calc-max-width($max-width, $family);
    @if $family != $font-default {
        font-family: fontset-family($family);
    }
}

// Breakpoints
@mixin responsive($width) {
	@if $width == narrow-screens {
		@media only screen and (min-width: $width-narrow) {
			@content;
		}
	}
	@else if $width == medium-screens {
		@media only screen and (min-width: $width-medium) {
			@content;
		}
	}
	@else if $width == wide-screens {
		@media only screen and (min-width: $width-wide) {
			@content;
		}
	}
}

p {
  @include font-scale(base);
  .wf-active & {
    @include font-scale(base, $font-bernina);
  }
  @include responsive(narrow-screens) {
    @include font-scale(text);
    .wf-active & {
      @include font-scale(text, $font-bernina);
    }
  }
}

body {
  margin: 2em;
  font-family: fontset-family($font-verdana);
  color: #444;
  @include responsive(narrow-screens) {
    margin: 2em 4em;
  }
}

SassMeister-output.css

/* Variables
------------------------------------------*/
/* Mixins
------------------------------------------*/
p {
  font-size: 0.9em;
  line-height: 1.5em;
  max-width: 35em;
}
.wf-active p {
  font-size: 1em;
  line-height: 1.4em;
  max-width: 33em;
  font-family: "jaf-bernina-sans", Verdana, serif;
}
@media only screen and (min-width: 40em) {
  p {
    font-size: 1em;
    line-height: 1.5em;
    max-width: 35em;
  }
  .wf-active p {
    font-size: 1.125em;
    line-height: 1.4em;
    max-width: 33em;
    font-family: "jaf-bernina-sans", Verdana, serif;
  }
}

body {
  margin: 2em;
  font-family: Verdana, serif;
  color: #444;
}
@media only screen and (min-width: 40em) {
  body {
    margin: 2em 4em;
  }
}

SassMeister-rendered.html

<p>This text is set in <a href="https://typekit.com/fonts/jaf-bernina-sans">JAF Bernina Sans</a>, backed up by a Verdana stack. It uses a Sass map to scope font-size and line-height measurements to those specific typefaces, <a href="http://erskinedesign.com/blog/setting-typographic-scale-with-sass-maps/">as Robin Rendle described</a>. (Em units and max-widths, too.) See the variables and mixins in <a href="http://codepen.io/timbrown/pen/xrwvJ" target="_blank">this other Pen</a>.</p>

<p>Look at this Pen&#39;s own CSS and you&#39;ll see what I really wanted to explore. The paragraph element uses Verdana (and its associated measurements) by default, and only uses Bernina (and <em>its</em> associated measurements) if Bernina has loaded properly. The wf-active class is via <a href="http://help.typekit.com/customer/portal/articles/6787-font-events">Typekit font events</a>. Progressive enhancement FTW.</p>

<p>When the composition widens and reaches a breakpoint, its size gets bumped up — again, considering Verdana by default and Bernina <em>only if Bernina is present</em>.</p>

<hr>

<p>Tim Brown • <a href="http://twitter.com/nicewebtype">@nicewebtype</a></p>