Foundation 5. Reestablish font inheritance using the SCSS $font-size variables

foundation-globals.scss

// Convert units
// Eg.
//   font-size: convert-unit(16rem, em);
//    >> font-size: 16em;
//
//   font-size: convert-unit(16em, rem);
//    >> font-size: 16rem;
//
//   font-size: convert-unit(16em, px);
//    >> font-size: 16rpx;

@function convert-unit($val, $unit) {
	@return strip-units($val) + $unit;
}


// Bring back font-size inheritance for Foundation 5
// Add this class to the content container and change the font-size accordingly
// Eg.
//   HTML markup
//     <article class="MainContent u-textFormat">
//   Font size with REM assuming html has a default font size of 16px
//     .MainContent { font-size: 1.25rem; }
//   or font size with pixels
//     .MainContent { font-size: 20px; }
// Then all <p> tags would have a font-size of 20px;

.u-textFormat {
	font-size: 1rem;

	h1 {
		font-size: convert-unit($h1-font-size, em);
	}

	h2 {
		font-size: convert-unit($h2-font-size, em);
	}

	h3 {
		font-size: convert-unit($h3-font-size, em);
	}

	h4 {
		font-size: convert-unit($h4-font-size, em);
	}

	h5 {
		font-size: convert-unit($h5-font-size, em);
	}

	h6 {
		font-size: convert-unit($h6-font-size, em);
	}

	p {
		font-size: convert-unit($paragraph-font-size, em);
	}

	ul,
	ol,
	dl {
		font-size: convert-unit($list-font-size, em);
	}

	blockquote cite {
		font-size: convert-unit($blockquote-cite-font-size, em);
	}

	table caption {
		font-size: convert-unit($table-caption-font-size, em);
	}

	table thead tr th,
	table thead tr td {
		font-size: convert-unit($table-head-font-size, em);
	}

	table tfoot tr th,
	table tfoot tr td {
		font-size: convert-unit($table-foot-font-size, em);
	}

	table tr th,
	table tr td {
		font-size: convert-unit($table-row-font-size, em);
	}
}

output.css

.u-textFormat {
  font-size: 1rem;
}

.u-textFormat h1 {
  font-size: 2.75em;
}

.u-textFormat h2 {
  font-size: 2.3125em;
}

.u-textFormat h3 {
  font-size: 1.6875em;
}

.u-textFormat h4 {
  font-size: 1.4375em;
}

.u-textFormat h5 {
  font-size: 1.125em;
}

.u-textFormat h6 {
  font-size: 1em;
}

.u-textFormat p {
  font-size: 1em;
}

.u-textFormat ul,
.u-textFormat ol,
.u-textFormat dl {
  font-size: 1em;
}

.u-textFormat blockquote cite {
  font-size: 0.8125em;
}

.u-textFormat table caption {
  font-size: 1em;
}

.u-textFormat table thead tr th,
.u-textFormat table thead tr td {
  font-size: 0.875em;
}

.u-textFormat table tfoot tr th,
.u-textFormat table tfoot tr td {
  font-size: 0.875em;
}

.u-textFormat table tr th,
.u-textFormat table tr td {
  font-size: 0.875em;
}