Tags: graph

Robin Rendle › Ampersand 2015

A great run-down of this year’s excellent Ampersand conference.

I wish I had known that Robin was there—I’d like to thank him for his kind words about Chloe.

Tips for Creating and Exporting Better SVGs for the Web

Sara enumerates some handy tips aimed squarely at designers exporting SVGs. It focuses on Illustrator in particular but I’m sure a lot of this could equally apply to Sketch.

ampersand : ampersand2015 on Huffduffer

The audio is now up from all the talks at this year’s excellent Ampersand conference.

A Semiotic Approach to Designing Interfaces // Speaker Deck

This looks like a terrific presentation from Alla on iconography, semiotics, and communication.

Cosmos: The infographic book of space

This looks a great book of space-related infographics and data visualisation.

Best of all, there are truly interactive versions online.

System shock — Medium

This is such a delightful story of a brilliant mistake—true typographic nerdery and nostalgia.

Read all the way through for a free gift.

Miranj: Collateral Damage

Websites should not come with minimum software requirements.

Richard on Vimeo

The video of Richard’s great talk on responsive typography at the Up Front conference.

Explaining graphic design to four-year-olds — Medium

Sounds like a good exercise for explaining just about anything. Smart.

Deep Time : A History of the Earth

This infographic offers a visual way to explore the various stages of the Earth’s history using a 12 hour clock analogy.

Efficient Web Type, c. 1556

A long zoom and then a deep dive into web typography.

Clearleft Letterpress Day | Flickr - Photo Sharing!

This was a fun way to spend the day—getting my hands dirty with ink and type.

Wood type composited and ready to set

Google Web Fonts Typographic Project

Google Fonts aren’t renowned for their quality but this is a beautiful demonstration of what you can accomplish with them.

Web Typography – a handbook by Richard Rutter — Kickstarter

You’ll want to back this—you’ll want to back the hell out of this!

Hamburger icon: How these three lines mystify most people - BBC News

The controversial hamburger icon goes mainstream with this story on the BBC News site.

It still amazes me that, despite clear data, many designers cling to the belief that the icon by itself is understandable (or that users will “figure it out eventually”). Why the aversion to having a label for the icon?

Sound Mirrors

Before there was radar, there were acoustic mirrors along the coast of England—parabolic structures designed to funnel the distant sound of approaching aircraft.

Ari Weinkle — Feelers

By far the creepiest type experiment I have ever seen.

Submarine Cable Map 2015

This year’s map from TeleGeography is looking lovely.

Dev.Opera — The State of Web Type

If you don’t have time to poke around StateOfWebType.com here’s the short version.


A really nifty little bit of JavaScript that converts to smart quotes, apostrophes, ellipses, and em dashes.

(Initially it required jQuery but I tweaked it to avoid those dependencies and Yuri very kindly merged my pull request—such a lovely warm feeling when that happens.)

Seasonal posts × Katy DeCorah

This is such a simple little adjustment, but I think it’s kinda brilliant: tweaking the display of your site’s maps to match the season.

How we use web fonts responsibly, or, avoiding a @font-face-palm by Filament Group

Smart thinking here on the eternal dilemma with loading web fonts. Filament Group have thought about how the initial experience of the first page load could be quite different to subsequent page loads.

State of Web Type

Like caniuse.com, but for typography features. Find out what’s supported in browsers today.

Alien | Typeset In The Future

Typeset In The Future is back with another cracking analysis. This time—following on from 2001 and Moon—we’ve got Alien.

In her final recorded message before hypersleep, Ripley notes that she is the sole survivor of the Nostromo. What she forgets to mention is that she has not once in the past two hours encountered any Eurostile Bold Extended.

Beautiful web type — the best typefaces from the Google web fonts directory

Many of the free fonts available from Google are pretty bad, but this site showcases how some of them can be used to great effect.

The Nor: A Paranoid Cartography

James walks the site of London’s old wall, documenting the instruments of London’s new wall.

He wrote about his experience in “All Cameras Are Police Cameras.” It is a history lesson, a present lesson, and a future lesson, all in one.

Beautiful Maps

Cartography porn.

Tabletop Whale

Beautiful visualisations of science and nature.

Made with love by a designer with a molecular biology degree.

The Scourge of Helvetica Neue Light | Clagnut

Richard never rants.

Here’s Richard ranting.

Seeing Like a Network — The Message — Medium

How computers work:

One day, a man name Alan Turing found a magic lamp, and rubbed it. Out popped a genie, and Turing wished for infinite wishes. Then we killed him for being gay, but we still have the wishes.

Then we networked computers together:

The network is ultimately not doing a favor for those in power, even if they think they’ve mastered it for now. It increases their power a bit, it increases the power of individuals immeasurably. We just have to learn to live in the age of networks.

We are all nodes in many networks. This is a beautiful description of how one of those networks operates.

James Bridle — Where You Are

The GPS system is a monumental network that provides a permanent “YouAreHere” sign hanging in the sky, its signal a constant, synchronised timecode.

Tobias Frere-Jones: My Kind of Neighborhood

Some sleuthing uncovers an interesting twist in New York’s psychogeography:

All of the buildings have been demolished, and in some cases the entire street has since been erased. But a startling picture still emerged: New York once had a neighborhood for typography.

Meyrin: CERN Terminal Font « optional.is/required

Here’s the font that Brian created at the line-mode browser hack day at CERN.

Layout in Flipboard for Web and Windows — Flipboard Engineering

A fascinating look at how Flipboard combines art direction and algorithms to generate layouts.

Type Connection

A cute approach to pairing typefaces: treat it like a dating game.

2001: A Space Odyssey | Typeset In The Future

Okay, this might just be my new favourite blog:

This site is dedicated to all aspects of movie and TV typography and iconography as it appears in Sci-Fi and fantasy movies.

The first post is all about 2001, and the writing is just the right shade of fun.

I’m already looking forward to future posts. (See what I did there?)

Photography, hello — Software ate the camera, but freed the photograph by Craig Mod

Craig recently had a piece published in the New Yorker called Goodbye, Cameras. It’s good …but this follow-on piece on his own site is truly wonderful.

Read. Absorb. Ponder.

Being close to the network does not mean being on Facebook, thought it can mean that, too. It does not mean pushing low-res images to Instagram, although there’s nothing wrong with that. What the network represents, in my mind, is a sort of ledger of humanity. The great shared mind. An image’s distance to it is the difference between contributing or not contributing to that shared ledger.

A Pocket Guide to Master Every Day’s Typographic Adventures

A nice little cheat sheet for simple simple typography wins.

Windows of New York | A weekly illustrated atlas

Lovely little graphics inspired by New York architecture.

Steve & Steve: a graphic novel by Patrick Sean Farley

This is absolutely delightful, nicely weird, and thoroughly entertaining.

How to see through the cloud

This is a great explanatory piece from James Bridle in conjunction with Mozilla’s Webmaker. It’s intended for a younger audience, but its clear description of how web requests are resolved is pitch-perfect primer for anyone.

The web isn’t magic. It’s not some faraway place we just ‘connect’ to, but a vast and complex system of computers, connected by actual wires under the ground and the oceans. Every time you open a website, you’re visiting a place where that data is stored.

WTF Visualizations

Data visualisations that make no sense.

Edible Geography

I’m not sure how I managed to miss this site up until now, but it’s right up my alley: equal parts urban planning, ethnography, and food science.

Anton Peck Illustration - Gather eBook

You can download the PDF of Anton’s graphic novel Gather for free.

Butterick’s Practical Typography

There’s a lot of very opinionated advice here, and I don’t agree with all of it, but this is still a very handy resource that’s been lovingly crafted.

Inge Druckrey: Teaching to See on Vimeo

Sit back, relax, and enjoy this classic documentary on graphic design, courtesy of its producer Edward Tufte.

Web Fonts and the Critical Path - Ian Feather

The battle between web fonts and performance. Ian Feather outlines some possible solutions, but of course, as always, the answer is “it depends”.

Jessica Hische - Upping Your Type Game

A wonderful essay about type on the web by Jessica.

Histories Past

Documenting history through photography.

National Geographic Found

Celebrating 125 years of National Geographic, this Tumblr blog is a curated collection of photography from the archives. Many of the pictures are being published for the first time.

First public use of what Became Proxima Nova by Mark Simonson

Who knew? The reissue of the classic thirteen-part Star Wars radio series was the first appearance of a proto-Proxima Nova.

Map Projection Transitions

A lovely way of demonstrating the differences between map projections. Drag for extra fun.

Quotes and Accents

Jessica’s handy guide to writing the right quotes and accents on a Mac keyboard.

Using SVG on CSS-Tricks

Chris takes a look at all the different ways you can use SVG today.

Logical breakpoints for your responsive design

Vasilis examines the multitude of factors that could influence an ideal measure.

Prototyping Responsive Typography

Some handy tips for starting off your responsive designs from the type out.

Alice and Bob in Cipherspace

A clear explanation of the current state of homomorphic encryption.

Responsive typography demo

This is a pretty wacky experiment in altering font size based on the user’s distance from the screen (allow the page to access your camera and enable the “realtime” option for some real fun). I don’t know how much real-world application this has, but it’s a cute’n’fun exercise.

Submarine Cable Map

This year’s TeleGeography map of the undersea network looks beautiful—inspired by old maps. I love the way that latency between countries is shown as inset constellations.

Mercator Puzzle!

This is fun. Drag the red country outlines around and slot them into place on the map. Sounds easy, right? But the distorting effect of the Mercator projection makes it a lot tougher than it looks.

Actual Facebook Graph Searches

Another Tom Scott project:

I had to take one more quick, cheap shot — and I think a Tumblr blog is the quickest, cheapest shot it’s possible to take.

The responsive web will be 99.9% typography

An intriguing extrapolation of current design trends: perhaps typographically-strong single-column layouts will become popular out of sheet necessity.

Sparkicons and the humble hyperlink by Mark Boulton

I really like Mark’s idea of standardised “sparkicons” …for a while there, reading this, I was worried he was going to propose something like Snap Preview. shudder

phuu/sparksvg · GitHub

Remember when I made that canvas sparkline script? Remember when Stuart grant my wish for an SVG version? Well, now Tom has gone one further and created a hosted version on sparksvg.me

Not a fan of sparklines? Bars and circles are also available.

CABINET // Trap Streets

A fascinating piece by James on trap streets, those fictitious places on maps that have no corresponding territory.

Jan V. White

Eight of Jan White’s excellent books on graphic design are now available for free online, licensed under CC0 …they’re in the public domain now.

All he asks in return is that you might buy one of his books still in print, and maybe make a donation to the Internet Archive.

Jan V. White is a mensch.

Collect + share + discover type combinations.

A lovely new service from Mike Stenhouse: install the bookmarklet and then when you come across a website with a nice combination of fonts, you can save a snapshot of the page (and its fonts) for later perusal. You can then browse those fonts on Typekit, Fontdeck, MyFonts or Google Fonts.


A new project from James, keeping track of the sites of illegal drone strikes.

❍ IcoMoon

This is a great free service for generating small subsetted icon fonts. Launch the app and have a play around — you can choose from the icons provided or you can import your own SVG shapes.

Nice touch: you can get the resulting font (mapped to your choice of unicode characters) base-64 encoded for your stylesheet.

Rhythm And Proportion In Grids And Type - Vanseo Design

A really nice piece on scale, ratio and rhythms in web design.

Beauty and Ugliness in Type design | I love typography, the typography and fonts blog

A fascinating look at what happens when you mash up beauty and ugliness in one typeface.

Kev aka Lomokev- Brighton street photographer: YouTube

A nice little profile of local Brighton photographer extraordinaire, Lomokev.

Responsive Measure: A jQuery plugin for responsive typography

Here’s something that Josh debuted at Smashing Conference: a script for responsive designs to adjust font-sizes based on a desired line-length.

Inevitably, it’s a jQuery plugin but I’m sure somebody could fork it to create a standalone version (hint, hint).

heather powazek champ - Message in a bottle: The Mirror Project

The Mirror Project is back! The Mirror Project is back!

This warms the cockles of my nostalgic little heart.


The not-so-new-but-hella-fun aesthetic.

Mobile Navigation Icons | TimKadlec.com

Tim shows how to make a scalable three-line navicon in CSS.

Fontello - easy iconic fonts composer

A nifty service for creating a custom font with just the icons you need.

Distant Shape: 10 Years of Daring Fireball

A nice visualisation of Apple’s transition From desktop to mobile over ten years, one Daring Fireball article at a time.

Oh, and happy birthday, Daring Fireball.

Matthew Butterick: Reversing the Tide of Declining Expectations

I don’t agree with everything in this presentation—there’s a nostalgic bias to the non-existent “good ol’ days”—but this is still very engaging and thought-provoking.

80’s Touch

The Old Aesthetic. It’s eighties-tastic!


It’s really good to see more providers of icon font sets. These look very nicely designed indeed.

Fluid Type | Trent Walton

Trent shares his ideas on handling line lengths in fluid, responsive layouts.

A City Like Ours - Street Photography – St. John’s, Newfoundland

I’m in St. John’s right now. Once you start perusing this excellent photoblog, you’re going to feel like you’re there too.

Tomorrow’s web type today: The fine flourish of the ligature » Blog » Elliot Jay Stocks

An informative post on ligatures in web type from Elliot. And, oh yeah, he redesigned his site again (it’s unsurprisingly lovely).

Avería – The Average Font

An algorithmically-generated font sounds like a terrible idea but I actually quite like the end result.

The Daily Torygraph

There’s two years(!) of doctored headlines here. Yes, it’s puerile but it’s also very funny (to my puerile sensibilities).

Myself, quantified | Extenuating Circumstances

Dan writes about how data saved his life. That is not an exaggeration.

He describes how, after receiving some very bad news from his doctor, he dived into the whole “quantified self” thing with his health data. Looking back on it, he concludes:

If I were still in the startup game, I have a pretty good idea of which industry I’d want to disrupt.

GATHER. A Graphic Novel by Anton Peck — Kickstarter

Anton is a fantastic artist. Therefore, this graphic novel will be fantastic. Therefore, you should back the hell out of it.

“Authenticity,” an article by Dan Mall

Cute. I gave Dan some advice. He made it look all pretty.

Google are about to murder a good friend of mine — Glenn Jones

Glenn gives a rational thoughtful explanation of why he’s as pissed off as I am about Google’s destruction of the Social Graph API.

We need a standard show navigation icon for responsive web design | Stuff & Nonsense

Andy documents the kinds of symbols being used to represent revealable navigation on mobile.

Style Tiles

Samantha put together this handy one-page site to explain Style Tiles as part of her South by Southwest presentation.

Scaling with EM units

Using em-based media queries to incrementally bump up the font size for larger viewports.

The world’s undersea internet cables - interactive | Technology | guardian.co.uk

Explore the shape of the underwater world of internet backbones.

The Lively Morgue

Photographs from the archive of the New York Times.