Typography
Basics
- 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
- http://coding.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/
- 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/
- http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/
Video
Forum
Fonts
Historic
- http://en.wikipedia.org/wiki/Antiqua_(typeface_class)
- http://en.wikipedia.org/wiki/Baskerville - transitional, 'winner' of NYT gravitas test
- http://en.wikipedia.org/wiki/Bodoni - modern
Tools
- font-manager - A font management application for the GNOME desktop
- 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
Web
Free
Places with lots of free (and other) fonts. To be categorised.
Large repos
- http://www.fontsquirrel.com/
- http://openfontlibrary.org/
- http://www.dafont.com/
- http://www.exljbris.com/
- http://www.fontex.org/free.html
- http://www.fontyukle.net/en/
- http://www.1001freefonts.com/
Smaller collections
- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_fonts - ofl licensed
- http://theleagueofmoveabletype.com/
- http://www.feorag.com/freestuff/
- http://iginomarini.com/fell/the-revival-fonts/
- http://arkandis.tuxfamily.org/adffonts.html
- http://ftp.gnu.org/gnu/freefont/ [1]
- http://www.linuxlibertine.org/ [2]
- https://fedorahosted.org/liberation-fonts/ [3]
Sans-serif
- http://en.wikipedia.org/wiki/Futura_(typeface)
- http://www.fontsquirrel.com/fonts/Cantarell
- http://www.google.com/webfonts/specimen/Exo
- http://www.google.com/webfonts/specimen/Arvo
heading;
Serif
- http://en.wikipedia.org/wiki/Times_New_Roman
- http://en.wikipedia.org/wiki/Georgia_(typeface) - similar to timew new roman but with wider serifs
- http://en.wikipedia.org/wiki/Sabon
- FreeSerif (gnu font)
Slab serif
Terminal
Modernist/techno
- http://www.dafont.com/symtext.font?fpp=50&sort=date
- http://www.dafont.com/stitches.font
- http://www.dafont.com/imagine-font.font
- http://www.dafont.com/blox.font
- http://www.dafont.com/hexagon.font
- http://www.dafont.com/particulator.font
- http://www.dafont.com/grapple-brk.font
- http://www.dafont.com/simpletype.font
- http://www.dafont.com/supreme-fontaliciou.font
- http://www.dafont.com/demon-cubic-block-f.font
- http://www.dafont.com/quadro.font
- http://www.dafont.com/square-one.font
- http://www.dafont.com/smprvl.font
Other
Microsoft
Web fonts
@font-face { font-family: 'Font Name'; src: url('library/fonts/font-name.eot'); src: url('library/fonts/font-name.eot?#iefix') format('embedded-opentype'), url('library/fonts/font-name.woff') format('woff'), url('library/fonts/font-name.ttf') format('truetype'), url('library/fonts/font-name.svg#font-name') format('svg'); font-weight: normal; font-style: normal; }
- Font Squirrel: @font-face Kit Generator - Create font set to cover all browsers.
- Web Font Performance: Weighing @font-face Options and Alternatives - Feb 27th, 2012 - really good!
Repos, etc.
Tools
- http://somadesign.ca/projects/fontfriend/ - bookmarklet
- Fontue is a Rack-based, open-source, web font server built for Kernest.com
Kerning
Webfont icons
- Avoiding the blurs: web font icon rendering - 2 July, 2012
Guides
- How to make your own icon webfont - Jan 2, 2012
Sets
- OpenWeb Icons [8] - Font Awesome had no RSS-icon plus Open Web
- Font Awesome - The iconic font designed for use with Twitter Bootstrap
- Zocial button set with CSS. Entirely vector-based social buttons.
- Modern Pictograms is a typeface for interface designers and programmers. Designed in early 2011 for the Flatfile Wordpress theme, the pictograms stay sharp when used large or small. Install the OpenType file for Photoshop mockups and drop in the @font-face code into your CSS to embed them right in your Web page. Designed to work on web sites at sizes down to 18 pixels, but best at higher than 24 pixels.
- 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
Examples
- http://blog.echoenduring.com/2010/05/13/create-beautiful-css3-typography/
- http://net.tutsplus.com/tutorials/html-css-techniques/subtle-css3-typography-that-youd-swear-was-made-in-photoshop/
- http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow
- http://designshack.net/articles/css/css3-cookbook-7-super-easy-css-recipes-to-copy-and-paste
Responsive
- http://generatedcontent.org/post/21279324555/viewportunits
- Viewport Sized Typography - Apr 30 2012
- Responsive Typography: The Basics - June 2012
- 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
jQuery
- FitText - Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
Units
- 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
Management
Creating
Symbols
- Symbol Entities in HTML & XHTML
- Dingbats - 191 characters. A visual unicode database
ASCII
JS
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.