Yannick Schall zapatoche

#Techniques for Anti-Aliasing @font-face on Windows

It all started with an email from a client: Do these fonts look funky to you? The title is prickly.

The font in question was Port Lligat Sans from Google Web Fonts.

The "prickly" is aliasing caused by lack of hinting

Bearded's Hourly Contract

Date: [[Date of Document]] Between [Our Company] and [Your Company]

Summary

We’re not big on formality, but sometimes it’s best to have a few simple things written down so that we’re all on the same page. In this contract you won’t find complicated legal terms or large passages of unreadable text. We have no desire to trick you into signing something that you might later regret. We do want what’s best for the safety of both parties, now and in the future.

	/* Hexagon kitty - By @LeaVerou
	Disappointingly inflexible, but still interesting methinks.
	*/

	.hexagon {
	display: inline-block;
	position: relative;
	width: 200px;
	height: 200px;
	transform: scale(1.25,.707) rotate(-45deg);

	/**
	* Text masking — The SVG way
	*/

	svg {
	width: 6em; height: 1.5em;
	font: 900 500%/1.2 'Arial Black', sans-serif;
	}

	text { fill: url(#wood); }

	{
	"name": "stylus-compile",
	"version": "0.0.1",
	"devDependencies": {
	"tiny-lr": "0.0.5",
	"gulp": "^3.5.5",
	"gulp-util": "^2.2.14",
	"gulp-csslint": "0.1.3",
	"gulp-livereload": "1.2.0",
	"gulp-autoprefixer": "0.0.6",

	/*
	*
	* Originally inspired by: http://designedbythomas.co.uk/blog/how-detect-width-web-browser-using-jquery
	*
	* Original source by https://gist.github.com/highrockmedia/3710930
	*
	* My contribution: I re-wrote some code it to fire as one function, so you're only editing values in one place.
	*
	*/

	// Deep Breaths //
	//////////////////

	// Gulp
	var gulp = require('gulp');

	// Sass/CSS stuff
	var sass = require('gulp-sass');
	var prefix = require('gulp-autoprefixer');
	var minifycss = require('gulp-minify-css');

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html lang="en">
	<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<style type="text/css">

	@media only screen and (max-width: 600px) {
	table[class="columns"],

	/* Vertically centered text with SVG */

	div {
	width: 300px;
	height: 150px;
	background: #f06;
	font: bold 150% sans-serif;
	text-shadow: 0 1px 2px rgba(0,0,0,.5);
	overflow: hidden; resize: both; /* just for this demo */
	color: white;

	// Released under MIT license: http://www.opensource.org/licenses/mit-license.php

	$('[placeholder]').focus(function() {
	var input = $(this);
	if (input.val() == input.attr('placeholder')) {
	input.val('');
	input.removeClass('placeholder');
	}
	}).blur(function() {
	var input = $(this);