Oh, Windows :(

Windows CSS Type Bug

Sorry Windows users, I just discovered this bug. At first I thought it was just IE being IE, but looks like it's just a Windows issue. The typeface, Frontage Bold is designed to be stacked, but for some reason this seems to be yet another case of a Microsoft product not doing math correctly.

Linux (you know the free one) renders the same type perfectly.

• Update •

I've fixed this Windows specific bug, but I'm not very happy with it because doing so required js-sniffing which is something I always try to avoid. Since the issue is specific to the operating system and not a particular browser or feature, I didn't have much of a choice other than to detect the operating system with JavaScript. Non-Windows users still get the pure CSS type, windows users get an image fallback.


$('html').addClass('browser-' + BrowserDetect.browser.toLowerCase()).addClass('os-' + BrowserDetect.OS.toLowerCase());


.os-windows {
	.megahead {
		@include image-set('../img/megahead_curved_type_windows.png', '../img/megahead_curved_type_windows_@2X.png?nc=' + $nc);
		@include breakpoint(480px) {
			@include image-set('../img/megahead_curved_type_mobile_windows.png', '../img/megahead_curved_type_mobile_windows_@2X.png?nc=' + $nc);
		div {
		h1 {
			line-height: inherit;
			@extend .ir;

Comments (0)

Add a Comment

Allowed tags: <b><i><br>Comment:

** iPods render type better than Windows 8 **