haze83
2/15/2018 - 5:11 PM

inDesign tracking 2 CSS letter-spacing

convert indesign tracking value to the css letter-spacing equivalent

// convert indesign tracking value to css letter-spacing

@function tracking-to-letter-spacing($tracking: 0) {
	@return $tracking / 1000 * 1em;
}

@mixin tracking-to-letter-spacing($tracking: 0) {
	letter-spacing: tracking-to-letter-spacing($tracking);
}

// manually sample
.text-wide-manually {
	letter-spacing: 40 / 1000 * 1em;
}

// function sample
.text-wide-function {
	letter-spacing: tracking-to-letter-spacing(40);
}

// mixin sample
.text-wide-mixin {
	@include tracking-to-letter-spacing(40);
}