Typography

Basics

• http://www.w3.org/TR/css3-fonts/
• http://www.html5rocks.com/en/tutorials/webfonts/quick/
• http://ie.microsoft.com/testdrive/graphics/opentype/opentype-fontbureau/index.html

• The history of a model for fonts on the Web - w3c talk

• http://www.goodwebfonts.com/

• http://www.fontsquirrel.com/fontface/generator - service for converting to webfonts
  • check compatability/shims
• http://people.mozilla.com/~jkew/woff/ - sfnt2woff, convert existing TrueType/OpenType fonts to WOFF format

• FontForge - An outline font editor that lets you create your own postscript, truetype, opentype, cid-keyed, multi-master, cff, svg and bitmap (bdf, FON, NFNT) fonts, or edit existing ones. Also lets you convert one format to another.

• https://github.com/thefella/Responsive-type-references
• http://informationarchitects.net/blog/responsive-typography-the-basics/
• http://trentwalton.com/2012/06/19/fluid-type/

• http://stackoverflow.com/questions/8942625/font-face-bold-in-ff-is-bolder-than-in-chrome

Articles

• Web Design is 95% Typography - iA, Oct 2006
• One More Time: Typography Is The Foundation Of Web Design - July 24th, 2012

Units

• How to size text using ems - 18 May 2004
• http://snook.ca/archives/html_and_css/font-size-with-rem - css3 unit

font-size: 62.5%;
  set 1em equal to 10px

Outline

• HTML5 Doctor: Document Outlines - July 12th, 2011

body
header
  nav

  hgroup
  h1
  h2
  h3
  p, ul
small, aside
footer

Kerning

• http://www.w3.org/TR/css3-fonts/#font-kerning-prop
• http://adamdscott.com/typography/kerning-for-the-web/

• http://adamdscott.com/typography/kerning-for-the-web/
• http://designshack.net/articles/typography/kerning-live-web-type-with-jquery-and-lettering-js/
• http://blog.typekit.com/2011/06/03/type-study-a-better-kerning-experience-with-kern-js/

• http://logofontandlettering.com/kernking.html - kerning ipsum

Font symbols

• http://news.ycombinator.com/item?id=3672526
• http://news.ycombinator.com/item?id=3675301

• http://bens.me.uk/2012/web-font-icon-canvas-rendering

Webfont symbols

Guides

• How to make your own icon webfont - Jan 2, 2012

• Make a dingbat font with Inkscape
• YouTube: How to Make a Font with Inkscape 0.47

Basic

• Symbol Entities in HTML & XHTML
• Dingbats - 191 characters. A visual unicode database

Fonts

• OpenWeb Icons - Font Awesome had no RSS-icon plus Open Web
  • https://github.com/pfefferle/openwebicons

• Font Awesome - The iconic font designed for use with Twitter Bootstrap
  • https://github.com/FortAwesome/Font-Awesome

• Zocial button set with CSS. Entirely vector-based social buttons.
  • https://github.com/samcollins/css-social-buttons

• Symbolset - $

• http://nicolasgallagher.com/lab/css3-social-signin-buttons/
• http://nicolasgallagher.com/lab/css3-facebook-buttons/

• http://fontello.com/ - generate sets!

• http://www.alessioatzeni.com/meteocons/ - weather icons

JS

• http://letteringjs.com/
• http://fittextjs.com/