Tags: graph

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).

Contrast Rebellion - to hell with low-contrast fonts!

A cute website that’s a call-to-arms against low-contrast text on the web.

BBC - BBC Internet Blog: BBC World Service Language Websites: user experience and typography

A fascinating look at the intersection of typography and internationalisation on the BBC’s World Service site.

Tweeter Street

Portraits of people that tweet, what they tweet, where they tweet.

Beautiful Swear Words

A swear word a day, typeset.

An iPhoneography and Mobile Photography Conference

The world’s first mobile photography conference will take place in San Francisco on September 24th this year, featuring Dan Rubin, Jessica Zollman and more.

Dear Photograph

Atemporality can be very moving.

Ampersand Conference 2011 Focuses on Web Typography | The FontFeed

An incredibly detailed write-up of Ampersand.

Ampersand, the Aftermath — Jon Tan 陳

Jon’s glowing write-up of Ampersand. Feel the love!

Notes from Ampersand conference — My Digest — Laura Kalbag

Excellent notes from Ampersand by Laura. Rather than describing each talk individually, she has documented the emergent themes.

Red Pop - the big red button for your iPhone camera!

Brendan’s latest product looks like it’ll be a thing of beauty. But he needs help getting it funded on Kickstarter. If you like taking pictures with your iPhone, I suggest you back this project.

Web Typography – The Book

Mark, Richard and Jon are writing a book together (on web typography, of course). It will undoubtedly be excellent.

Christopher Boffoli Photography

Homunculi in a landscape of food.

jayzombiegram

Jessica is gathering all her Instagram photos into one blog. She really has quite an incredible eye.

Fuck yeah Keming!

A celebration of horrendous kerning all over the internet.

Lexadecimal

Hexadecimal colours and their corresponding dictionary definitions. Cute.

The Ampersand Story | Clagnut § Brighton · Typography · Clearleft · Conferences

Getting the background on Ampersand from Richard is getting me very excited for the conference.

Fit To Scale | Trent Walton

More documentation of a responsive redesign, this time from Trent Walton. Be sure to check out the FitText jQuery plug-in that was created as a result.

Font sizing with rem - Snook.ca

Well, ya learn something new every day …or at least I did. I had no idea about the rem unit—relative em—for font-sizing in CSS.

From Me To You

The humble animated .gif is turning into an art form.

FFFFALLBACK - A simple tool for bulletproof web typography.

A useful bookmarklet that suggests font stacks to match up with the web fonts on whatever page you happen to be viewing.