Fixing shitty WebKit text rendering for thin and quirky fonts

dabblet.css

/**
 * Fixing shitty WebKit text rendering for thin and quirky fonts
 */

html {
	font-family: 'Quicksand';
	font-size: 24px;
	padding: 1em 5em;
	-webkit-text-stroke-width: .25px;}

code {
	-webkit-text-stroke-width: 0;}
	
p + p {
	font-weight: 300;
	-webkit-text-stroke-width: .5px;}

dabblet.html

<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'>
<h1>Quicksand is quite a cute font.</h1>
<p><strong>Toggle the <code>-webkit-text-stroke</code> property to see the difference.</strong></p>
<p>It's been around for free for a while, but standard-PPI (ie non-retina, ie your PC) combined with horrifically unreliable browser text-rendering engines have made it impossible to commit to.</p>
<p>WebKit in particular is criminal. They change everything all the time. It used to be the unequivocal best text-rendering browser out there, but thin or particularly detailed glyphs have rendered as awfully badly sampled, unhinted, blocky lumps of shit for a while now. Chrome and Safari are the culprits &#8212; and usually hacks like toggling -webkit-backface-visibility will fix one and break the other. There've been all sorts of hacks for forcing it to resample, but all of them get squashed at some point. This one didn't work last time I tried it &#8212; but it does now!</p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}