Typography

Basics

• The Elements of Typographic Style Applied to the Web

• W3C: CSS Fonts Module Level 3
• HTML5 Rocks: Quick Guide to implement webfonts via @font-face - HTML5 Rocks - Aug. 2, 2010

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

• Wikipedia: Web Open Font Format
• @font-face generator - Font Squirrel service for converting to webfonts
• sfnt2woff - convert existing TrueType/OpenType fonts to WOFF format

• Microsoft: The New Web Typography - -font-feature-settings

Articles

• Web Design is 95% Typography - iA, Oct 2006

• Typographic Design Patterns and Best Practices
• 50 Helpful Typography Tools And Resources - May 6th, 2010
• The Perfect Paragraph - Nov 29th, 2011
• One More Time: Typography Is The Foundation Of Web Design - July 24th, 2012

• http://opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye-people-hearken-o-earth/
• http://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces/

Forum

• http://typophile.com/

Responsive

• Responsive Typography: The Basics- June 2012
• http://trentwalton.com/2012/06/19/fluid-type/ Fluid Type] - June 19th, 2012
• Responsive Type References - reference for comparing responsive use of [web]fonts

• stackoverflow: @font-face: bold in FF is bolder than in Chrome

Units

• EmChart

• How to size text using ems - 18 May 2004

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

• Font sizing with rem - CSS3 unit

The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

Scale

• traditional scale (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72)
• Fibonacci sequence (e.g. 16 – 24 – 40 – 64 – 104)

copy font size

• x1.5 line height
• x27.8 line length

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

Software

• http://oep-h.com/fontmatrix/

Fonts

• https://wiki.archlinux.org/index.php/Fonts
• https://wiki.archlinux.org/index.php/Font_Configuration

• Build better CSS font stacks

Tools

• font-manager - A font management application for the GNOME desktop

• http://fontmatrix.net/
  • http://oep-h.com/fontmatrix/
  • http://en.wikipedia.org/wiki/Fontmatrix
  • http://www.straightedgelinux.com/switch/apps/user/fontmatrix.html

• http://opcion.sourceforge.net/
  • http://sourceforge.net/projects/opcion/

• https://savannah.nongnu.org/projects/fontypython
  • https://launchpad.net/fontypython
  • http://starsunflowerstudio.blogspot.co.uk/2012/07/introduction-to-linux-font-management.html

• http://manpages.ubuntu.com/manpages/hardy/man1/defoma.1.html - debian font app.

• http://unixhelp.ed.ac.uk/CGI/man-cgi?xlsfonts+1 - list x fonts

Terminal

• Monospace/Fixed Width Programmer's Fonts

• http://www.proggyfonts.com/index.php?menu=download
• http://www.kottke.org/plus/type/silkscreen/

Free

• http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL

• http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_fonts
• http://theleagueofmoveabletype.com/

• https://github.com/greyscalepress/font-specimens
• http://dejavu-fonts.org/wiki/Main_Page
• http://sourceforge.net/projects/sourcesans.adobe/files/

• http://www.fontsquirrel.com/
• http://openfontlibrary.org/
• http://www.feorag.com/freestuff/
• http://www.dafont.com/
• http://iginomarini.com/fell/the-revival-fonts/
• http://www.linuxlibertine.org/index.php?id=86&L=1
• http://www.exljbris.com/
• http://www.fontex.org/free.html
• http://www.fontyukle.net/en/
• http://www.1001freefonts.com/
• http://hellohappy.org/beautiful-web-type/
• http://www.fontgirl.com/
• http://www.fontspace.com/
• http://www.fonts2u.com/index.html

Symbols

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

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

ASCII

• http://en.wikipedia.org/wiki/FIGlet

JS

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

Software

• 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.

Testing

• http://ffffallback.com/