Jon Tangerine.

Preface

I’m Jon Tan, designer, and co-founder of Analog, Mapalong, and Fontdeck from Bristol, UK.

Curious Asides

1. Mapalong places.
2. Twitter moments.
3. Flickr tableaus.
4. Instagram fun.
5. Del.icio.us bookmarks.
6. Lanyrd events.
7. Explore asides →

Lately in the Log

1. We, Who Are Web Designers — Mon, 19th Sep 2011 {55}

   In 2003, my wife Lowri and I went to a christening party. We were friends of the hosts but we knew almost no-one else…

2. Ampersand, the Aftermath — Wed, 22nd Jun 2011 {1}

   The first Ampersand web typography conference took place in Brighton last Friday. Ampersand was ace. I’m going to say…

3. Design Festival, The Setup, and Upcoming Posts — Mon, 20th Jun 2011 {0}

   Wow, this has been a busy period. I’m just back from the Ampersand web typography conference in Brighton, and having a…

4. Web Design as Narrative Architecture — Wed, 30th Mar 2011 {9}

   Stories are everywhere. When they don’t exist we make up the narrative — we join the dots. We make…

5. Ides of March — Tue, 15th Mar 2011 {4}

   My friend and colleague, Chris, has shared a spiffing idea, the Ideas of March. He suggests: ‘If we all blog a little…

6. You can browse all entries in full via the log archive →

Conferences and Talks

1. An Event Apart, Seattle

   Talk is a work in progress. 02–04 Apr 2012 at Pier 66, Bell Harbour, Seattle, WA, USA.

2. Beyond Tellerand

   Welcome to the brave new world of web type. 20–22 Nov 2011 at Capitol Theatre, Düsseldorf, Germany.

3. Ampersand

   Screen First. 17 Jun 2011 at Brighton Dome Corn Exchange, Brighton, UK.

4. Insites Tour

   Q&A and storytelling. 21 Jul 2011 at Watershed, Bristol, UK.

5. New Adventures in Web Design

   Language and the Lizard Brain. 11 Jan 2011 at The Albert Hall, Nottingham, UK.

Featured from the Log

1. Quotation Marks & Texture — {21}

   A quick discourse on single versus double quotations marks (or inverted commas for us prosiac Brits) and typographic texture.

2. The Paragraph in Web Typography & Design — {38}

   The many styles of the humble paragraph from pre-history to the Web, with practical examples using CSS.

3. The Incredible Em & Elastic Layouts with CSS — {79}

   What is an “em”? Using ems to create an elastic layout with scalable images. Also in Italiano, Deutsch, Español & Russian.

4. What Future for Web Typography & Screen Fonts? — {12}

   The status of the core web fonts and the font-face property with a few thoughts on making quality faces ubiquitous.

5. Smoothing out the Creases in Web Fonts — {18}

   Exploring optimal anti-aliasing for core Web fonts and the rendering engines that make it all possible.

6. @font-face in IE: Making Web Fonts Work — {64}

   Exploring the ins and outs of @font-face linking with TrueType and Embedded OpenType (EOT) files using Fontin Regular by Jos Buivenga.

Remarks from the Log

1. By Nin Armangué Braun in We, Who Are Web Designers:

   This work is about research. It is like being a scientist and being asked about what you’ve discovered. You can…

2. By Mustafiz Rana in The Paragraph in Web Typography & Design:

   Paragraphs and puntuation are discussed in great detail.Thanks for this useful read.

3. By Ben Peachey in We, Who Are Web Designers:

   I usually go with “I’m a Kick-Ass Web Developer”. I even have it on my linkedin profile. Having…

4. By Tom Cooney in We, Who Are Web Designers:

   I work freelance from a small home studio in the middle of rural France. You should see the looks I get when I say…

5. By Chris Jokinen in We, Who Are Web Designers:

   My common response to the, “What do you do”, question has been: I’m a web-based programmer with a…

6. By Jack in We, Who Are Web Designers:

   My god but did I need to read this. I just nearly heard dramatic music fading in, in the background too. Yeah, the…

Snippets from the Silo

1. Font naming conventions

2. Ligatures test suite

3. Typographic spaces test suite

4. 12 Examples of paragraph typography

5. Placeholder markup

6. Core web fonts test suite

7. @font-face test with Fontin Regular by Jos Buivenga

8. Elastic Layout Example

9. Pixels to ems conversion for CSS