§ 3.3 Unicode Ampersands

With the unicode-range property we can avoid using verbose markup and only target the characters we like according to the unicode unique identifier. We also harness the power of the %placeholder in Sass allowing like minded selectors to string together this shared property in a DRY way from one single declaration. Copy and paste the Sass below into Codepen and check out the output for yourself. Hint: create multiple classes.

Amper & Sands

_typeplate.scss
//Unicode Ampersand @font-face
$amp-fontface-name: Ampersand !default;
$amp-fontface-source: local('Georgia'), local('Garamond'), local('Palatino'), local('Book Antiqua') !default;
$amp-fontface-fallback: local('Georgia') !default;

// Allows for our ampersand element to have differing
// font-family from the ampersand unicode font-family.
$amp-font-family: Verdana, sans-serif !default;

@font-face {
	font-family: '#{$amp-fontface-name}';
	src: $amp-fontface-source;
	unicode-range: U+0026;
}

// Ampersand fallback font for unicode range
@font-face {
	font-family: '#{$amp-fontface-name}';
	src: $amp-fontface-fallback;
	unicode-range: U+270C;
}

@mixin ampersand($amp-font-family...) {
	font-family: $amp-font-family;
}

%ampersand-placeholder {
	@include ampersand($amp-fontface-name, $amp-font-family);
}

// Call your ampersand on any element you wish from another stylesheet
// using this Sass extend we've provided. For exmaple:
//
// <h6 class="ampersand">Dewey Cheat 'em & Howe</h6>
//
// .ampersand { @extend %ampersand-placeholder; }
↑ back to top