Tags: graph

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.

-… ..- .-. .-. .. – — .— ..- … – .. -.-. . | Burrito Justice

A little sojourn around the Victorian internet.

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.

collision detection: “Wired Love”: A tale of catfishing, OK Cupid, and sexting … from 1880

The Victorian Internet indeed.

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.

A primer to front-end SVG hacking by David Bushell – Web Design & Front-end Development

Everything you ever wanted to know about using SVG today.

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.

Dronestagram

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.

rekall

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!

Symbolset

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.

Official Google Blog: Renewing old resolutions for the new year

Google are shutting down the Social Graph API. Twunts.

Camping at Kiwifoo | Flickr - Photo Sharing!

The Kiwi Foo Space Program (a weather balloon with an Android device attached) captured some beautiful images.

Camping at Kiwifoo

Pictos

In an interesting new twist, Pictos now allows you to put together a custom subset of their icons as a font that can be served from their server just like any other webfont service.

Lost Type Co-op | Browse Fonts

Some of these pay-what-you-want fonts are actually rather nice.

Using OpenType font features with CSS 3: Part 1 | Fontdeck Blog

Richard starts diving into some the nifty ligatures that are becoming available to us in OpenType fonts with CSS3.

Emigre Web Fonts

Emigre’s font library is now available as web fonts that you can self-host (providing you take some protective measures with .htaccess). That means Mrs. Eaves is available for the screen. W00t!

telegraphic and signal codes : scans, transcriptions

Before there were HTTP codes, there were telegraphic codes. The Victorian internet indeed!

Rebecca Cottrell » Where visual design fits in a design process

I think Rebecca is on to something here. Everyone has been so quick to self-identify as a UX designer while marginalising visual design as a purely surface-level layer …but it’s all part of the design process.

How To Build a Modern Website in 2011 - Tom Milway - Blog

A good round-up of what web development means today …and what web developers need to do to keep pace.

Typography Effects with CSS3 and jQuery

Most of these are pretty over the top but they’re good proofs of concept.

Heaven Devoid of Stars – a tale of cross-browser kerning | Clagnut § Browsers · Typography · CSS techniques

Richard dives into the differences in how browsers handle kerning. Be sure to click through to the beautiful finished result.

The Icon Handbook | The Hickensian | Hicksdesign

Jon gives us a run-through on what to expect from his new book. I’ve had a sneak peek and it looks amazing—I can’t wait to get my hands on a copy.

Occupy George

A stroke of genius: turning money itself into the carrier for infographics on wealth distribution in America.

Type study: Sizing the legible letter « The Typekit Blog

A great article by guest author Ethan on the various approaches to sizing text in CSS.

Elena Font Family | Process Type Foundry

A lovely new typeface from Nicole Dotin that’s available to purchase as a web font under the very reasonable terms of the Process license agreement.

Sly Mongoose: A Responsive Digital Comic Proof-of-Concept

A responsively designed comic. Yeah, you heard me right. Responsive. Comic!

The typography-out approach in the world of browser-based web design » Blog » Elliot Jay Stocks

An insight into Elliot’s current design process which highlights the advantages of designing in the browser when you take a content-first approach.

10 Charts About Sex « OkTrends

This is may just be the best thing on the internet about data visualisation and statistics. And sex.

Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit

A set of default styles to get started on a mobile-first responsive design.

Test page for -webkit-font-smoothing | Christoph Zillgens

This handy matrix shows the effect of different -webkit-font-smoothing setting on various text combinations (serif/san-serif light/dark, etc.).

Ole: the quest for aurorae on Vimeo

The story behind one of the winning photographs at this year’s Astronomy Photographer Of The Year that I was lucky enough to attend. This is beautiful.

Making the QR Code InfoDressShe Bytes - Exploring Digital Art, Technology, Design

I had a lovely conversation at the Update after-party with Georgie about the infographic dress she was wearing. It’s quite lovely.

Stubbornella » Blog Archive » Don’t Style Headings Using HTML5 Sections

Nicole provides a step-by-step explanation of why it will probably benefit you to add classes to your headings to ensure consistent styling without writing overly-verbose CSS.

Jake Archibald - Font-Face - Good vs Legal on Vimeo

Jake’s talk at DIBI earlier this year was absolutely fantastic. It features a rape reference, a story about pissing, and a Human Centipede metaphor.

It’s also very, very informative. Watch this.

agile approach | The Anatomy of a Design Decision: Examiner’s 2012 Campaign Site

Samantha gives the rundown of a hands-on use of Style Tiles.

davidnewton.ca | The Current State of Hyphenation on the Web

A valiant attempt to polyfill support for hyphenation in browsers other than the latest Safari and Firefox.

Hyphenation arrives in Firefox and Safari | Fontdeck Blog

Finally. Hyphenation on the web.

Pretty much the only forms of Western literature that don’t use hyphenation are children’s books and websites. Until now.

Responsive Web Design! | Jessica Hische

Jessica Hische has redesigned her site in a lovely and responsive manner.

Web Typography for the Lonely

A collection of experiments in typography using canvas, SVG, JavaScript and whatever else it takes.

TRY HELVETICA

A cute idea: see how signs (mostly in Brazil) would look if they were set in Helvetica.

Writing in the Margins: Manicules « A Pretty Book

A lovely little ode to the manicule.

Explorations in Typography / Mastering the Art of Fine Typesetting

What a great way to sell a book with “explorations” in the title—play around with the font size, leading, alignment (and browser window size).