Sven Wolfermann maddesigns

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 B

	// ----
	// Sass (v3.3.6)
	// Compass (v1.0.0.alpha.18)
	// Breakpoint (v)
	// ----

	@import "breakpoint";
	$small: 24em;
	$middle: 34em;
	$pair: 34em 65em;

	$base-font-size: 16px;
	$base-line-height: 1.5;

	// this value may vary for each font
	// unitless value relative to 1em
	$cap-height: 0.68;


	@mixin baseline($font-size, $scale: 2) {

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

	// A clean way to deal with z-index layers in Sass
	// Based on http://css-tricks.com/handling-z-index/
	// ---

	// A map of z layers

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

	// Hacking made easy
	// ---
	// A couple of Sass functions
	// To ease the pain of dealing
	// With special values for IE

	// ----
	// libsass (v0.7.0)
	// ----

	.test {
	background-color: hsla(347, 100%, 42%, 0.6);
	}

	.test2 {
	background-color: #e2ecf0; // Fallback

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

	// =============================================================================
	// Modernizr mixin
	//
	// Table of contents:
	// 1. Modernizr mixin

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


	%icon {
	font-family: 'zenicons';
	speak: none;
	font-style: normal;

	// ----
	// Sass (v3.3.0.rc.5)
	// Compass (v1.0.0.alpha.18)
	// ----

	// @mixin x-rem()
	//
	// mixin for easy use of rem with px as fallback
	// usage: @include x-rem(14px);
	// usage: @include x-rem(14px, font-size);