Thijs van der Vossen tvandervossen

## gist:06c5b4dccf7c371bf896
The goal of this guide is to define a workflow for generating icon webfonts that are 1. optimized for “pixel perfect” rendering at specific font-sizes and that 2. render consistently across modern platforms and browsers.


Glyphs.app settings and workflow

When you create a new font, remove all glyphs generated by default (first select them, then use the “-” button at the bottom). Icons should be created within a Unicode Private Use Area (PUA), not at the Unicode code points of existing characters.

In Glyphs.app, choose File → Font Info (⌘I), then select the “Font” tab. Set “units per Em” to 2048. You can also set a “Family Name” here.

Switch to the “Masters” tab. Set “Ascender”, “Cap Height”, and “x-Height” to 2048 and “Descender” to -128.

## css.js
;(function() {
  var out = [], style

  // Scale up margins
  function scale(template, from, to, min, max, step) {
    for (width = from; width <= to; width += 2) {
      out.push('@media (min-width: ' + width + 'px) { ' +
        template.replace('[]', min + (width - from) / (to - from) * (max - min)) + ' }')
      if (width > screen.width && width > screen.height)
        break

## tk2fonts.rb
#!/usr/bin/env ruby
require "base64"

if ARGV[0].nil?
  puts "Usage: #{$0} <name.css>"
  exit 1
end

lines = File.readlines(ARGV[0])
font = {}

## Convert multiple woff fonts to otf
#!/usr/bin/env ruby

# Get the source for woff2sfnt from http://people.mozilla.org/~jkew/woff/woff-code-latest.zip

unless ARGV.empty?
  ARGV.each do |filename|
    if filename[-4..-1] == 'woff'
      `woff2sfnt #{filename} > #{filename[0...-4]}otf`
    end
  end

## alltweets.rb
#!/usr/bin/env ruby
require 'open-uri'
require 'rubygems'
require 'active_support'

account = 'thijs'
max_id = 18216684927

File.open("#{account}.txt", 'w') do |f|
  loop do

## spinner.html
<!DOCTYPE html>
<html>
<head>
<title>Spinner</title>
<meta charset="utf-8">
<style>
canvas, a { display: block; }
</style>
</head>
<body>

## strange.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="zepto_original.js"></script>
</head>
<body>
<div id="canvas"><div id="slide1"><img></div></div>
<script>
var slide = $('#slide1');

## tinymit.txt
© 1999 Bob. Anyone may use this work without restrictions as long
as this paragraph is included. The work is provided “as is”,
without warranty of any kind.

## pngstrip.rb
#!/usr/bin/env ruby

unless ARGV.empty?
  ARGV.each do |filename|
  `pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB #{filename} #{filename}.stripped`
  `mv #{filename}.stripped #{filename}`
  `touch #{filename}`
  end
else
  p "Usage: #{$0} filename"

## gist:660306
var start = 'touchstart', move = 'touchmove', end = 'touchend';
if (!device.hasTouch) { start = 'mousedown'; move = 'mousemove'; end = 'mouseup'; }

element.addEventListener(start, this.ontouchstart.bind(this), false);
element.addEventListener(move, this.ontouchmove.bind(this), false);
element.addEventListener(end, this.ontouchend.bind(this), false);
element.addEventListener('touchcancel', this.ontouchcancel.bind(this), false);
	The goal of this guide is to define a workflow for generating icon webfonts that are 1. optimized for “pixel perfect” rendering at specific font-sizes and that 2. render consistently across modern platforms and browsers.


	Glyphs.app settings and workflow

	When you create a new font, remove all glyphs generated by default (first select them, then use the “-” button at the bottom). Icons should be created within a Unicode Private Use Area (PUA), not at the Unicode code points of existing characters.

	In Glyphs.app, choose File → Font Info (⌘I), then select the “Font” tab. Set “units per Em” to 2048. You can also set a “Family Name” here.

	Switch to the “Masters” tab. Set “Ascender”, “Cap Height”, and “x-Height” to 2048 and “Descender” to -128.
	;(function() {
	var out = [], style

	// Scale up margins
	function scale(template, from, to, min, max, step) {
	for (width = from; width <= to; width += 2) {
	out.push('@media (min-width: ' + width + 'px) { ' +
	template.replace('[]', min + (width - from) / (to - from) * (max - min)) + ' }')
	if (width > screen.width && width > screen.height)
	break
	#!/usr/bin/env ruby
	require "base64"

	if ARGV[0].nil?
	puts "Usage: #{$0} <name.css>"
	exit 1
	end

	lines = File.readlines(ARGV[0])
	font = {}
	#!/usr/bin/env ruby

	# Get the source for woff2sfnt from http://people.mozilla.org/~jkew/woff/woff-code-latest.zip

	unless ARGV.empty?
	ARGV.each do \|filename\|
	if filename[-4..-1] == 'woff'
	`woff2sfnt #{filename} > #{filename[0...-4]}otf`
	end
	end
	#!/usr/bin/env ruby
	require 'open-uri'
	require 'rubygems'
	require 'active_support'

	account = 'thijs'
	max_id = 18216684927

	File.open("#{account}.txt", 'w') do \|f\|
	loop do
	<!DOCTYPE html>
	<html>
	<head>
	<title>Spinner</title>
	<meta charset="utf-8">
	<style>
	canvas, a { display: block; }
	</style>
	</head>
	<body>
	© 1999 Bob. Anyone may use this work without restrictions as long
	as this paragraph is included. The work is provided “as is”,
	without warranty of any kind.
	var start = 'touchstart', move = 'touchmove', end = 'touchend';
	if (!device.hasTouch) { start = 'mousedown'; move = 'mousemove'; end = 'mouseup'; }

	element.addEventListener(start, this.ontouchstart.bind(this), false);
	element.addEventListener(move, this.ontouchmove.bind(this), false);
	element.addEventListener(end, this.ontouchend.bind(this), false);
	element.addEventListener('touchcancel', this.ontouchcancel.bind(this), false);