Jon Tangerine.

Pith & pulp — not an image, but perhaps a reversion to type.

Mugshot sketch of a face

Mug-sketch-shot, 1991→ More

Preface

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

Curious Asides

  1. Twitter moments.
  2. Flickr tableaus.
  3. Del.icio.us bookmarks.
  4. Lanyrd events.
  5. Explore asides

Lately in the Log

  1. Web Design as Narrative Architecture Wed, 30th Mar 2011 {5}

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

  2. Ides of March Tue, 15th Mar 2011 {3}

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

  3. 2010 in Restrospect Wed, 29th Dec 2010 {7}

    Analog, Mapalong, more tries at trans-Atlantic sleep, Cuba, Fontdeck, and my youngest son entering school; it all happened in…

  4. Web Fonts, Dingbats, Icons, and Unicode Wed, 18th Aug 2010 {7}

    Yesterday, Cameron Koczon shared a link to the dingbat font, Pictos, by the talented, Drew Wilson. Cameron predicted that…

  5. Reversed Logotype Mon, 24th May 2010 {15}

    This image shows a particular optical illusion that confronts us every day. Notice the difference between the black text on…

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

Conferences and Talks

  1. Ampersand

    Talk in progress. 17 Jun 2011 at Brighton Dome Corn Exchange, Brighton, UK.

  2. Creative co-operatives

    Q&A session. 16 Feb 2011 at The Coach House, 2 Upper York Street, Bristol..

  3. New Adventures in Web Design

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

  4. Brooklyn Beta

    21 Oct 201022 Oct 2010 at The Invisible Dog Art Center, Brooklyn, NY, USA.

  5. Ulster Festival of Art & Design

    Talking Typography with Elliot Jay Stocks.

    16 Jun 2010, Belfast, 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 — {36}

    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 — {15}

    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 NM in Self-promotion:

    Very intellectual post. I especially like the bit about us Brits being shy and reserved it’s so true :).

  2. By Martin in Reversed Logotype:

    The illusion is subtle, but definitely noticeable!

  3. By Martin in Typeface != Font:

    I didn’t even think that there is a real difference between font and typeface!

  4. By David Leader in The Paragraph in Web Typography & Design:

    This is an interesting article as it is the first time I’ve seen a justification of block paragraphs on the…

  5. By Sam Orchard in Display Type & the Raster Wars:

    On a similar note, I’ve noticed that a lot of custom fonts imported using the @font-face method suffer from…

  6. By Sam in Introducing Analog:

    Just thought I’d mention that the Analogue design is fantastic.

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

Work with me via ~ Analog ~ a creative consortium.