Tags: graph

A Comprehensive Guide to Font Loading Strategies—zachleat.com

A terrific rundown of all your options when it comes to web font loading.

Legibility App

A handy tool for testing the legibility of different typefaces under all sorts of conditions.

ET Book · Edward Tufte on GitHub

I’ve always loved the way that Edward Tufte consistently uses Bembo to typeset his books. Here’s a version made for screen and freely licensed.

Typography Handbook

You can think of this as a short book or a long article, but either way it’s a handy overview of typography on the web:

A concise, referential guide on best web typographic practices.

Mind you, I take issue with this assertion:

Establishing a vertical rhythm is simple.

Typography for User Interfaces | Viljami Salminen

The history and physiology of text on screen. You can also see the slides from the talk that prompted this article.

Blade Runner | Typeset In The Future

I’ve seen letterforms you people wouldn’t believe…

Miscellany № 74: zombies always make a hash of things – Shady Characters

A thoroughly lovely look at the octothorpe that skewers a myth or two along the way.

BBC Blogs - Internet Blog - BBC UX&D on creating a GEL foundation for everyone

Al runs through the process of updating GEL—the BBC’s Global Experience Language design system. I particularly like the thought that’s gone into naming type sizes.

Webfonts Last by Frederic Marx

Some smart thoughts on web fonts.

what3words | Addressing the world

In this English language alternative to latitude and longitude coordinates, the Clearleft office is located at:

cross.rooms.quick

Beyond Work

An ongoing photography project from Curtis:

Beyond Work tells stories about humans at work, with no judgement or glorification. It’s an attempt at unearthing the social, cultural and functional world of work, that’s become invisible in everyday life.

The New York Herald, August 7, 1865

A transatlantic cable, hurrah!

chartd - responsive, retina-compatible charts with just an img tag

This could be a handy replacement for some Google Charts images of graphs. It uses SVG and is responsive by default.

I bet it wouldn’t be too tricky to use this to make some sparklines.

IndieWebCamp Nuremberg on Flickr

Great photos from a great gathering.

IndieWebCamp Nuremberg in motion

Aligning text smartly in CSS

Here’s a clever way to get text centred when it’s short, but left-aligned when it wraps.

№ ⸮ ‽ ℔ ⁊ ⸿  — or, a cavalcade of characters – Shady Characters

The numero sign, the reversed question mark, the interrobang, the l b bar symbol, the Tironian et, the capitulum, and the ironieteken.

Mapping Mountains · Mapzen

Everything you never wanted to know about conveying elevation information on maps, delivered in Peter’s always-entertaining style and illustrated with interactive examples.

Webfonts

I love good typography but I have to agree with the sentiment expressed here.

System fonts can be beautiful. Webfonts are not a requirement for great typography.

Why I like the new Met logo (and why you should give it a chance): Design Observer

Michael Bierut on that logo …and graphic design in general.

Graphic designers, whether we admit it or not, are trained for the short term. Most of the things we design have to discharge their function immediately, whether it’s a design for a book or a poster, a website or an infographic, a sign system, or a business card. In school critiques, architecture and industrial design students produce models. Graphic designers produce finished prototypes. As a result, the idea that we create things that are unfinished, that can only accrue value over time, is foreign to us. It’s so easy for us to visualize the future, and so hard to admit that we really can’t. That’s what we face every time we unveil a new logo.

Use rems for global sizing, use ems for local sizing | Clagnut

In this extract from his forthcoming book, Richard looks at when to use ems, when to use rems …and when to use ch (no, me neither).

Building Inspector by NYPL Labs

A wonderful Zooniverse-like project from the New York Public Library:

Help unlock New York City’s past by identifying buildings and other details on beautiful old maps.

The New Web Typography › Robin Rendle

A wonderfully thoughtful piece on typography, Jan Tschichold and the web. This really resonated with me:

It’s only been over the past year or so in which I’ve recognised myself as a ‘Web designer’ with a capital W, as I now believe that something happens to information and technology, and even typography itself, when people pass through these interconnected networks and interact with hypertext.

It’s for these reasons that I don’t believe in “digital design” or “designing for screens” and it’s why I’m often attracted to one particular side of this spectrum.

Robin proposes three “principles, suggestions, outlines, or rather things-that-I-ought-to-be nervous-about when setting text on the web”:

  1. We must prioritise the text over the font, or semantics over style.
  2. We ought to use and/or make tools that reveal the consequences of typographic decisions.
  3. We should acknowledge that web typography is only as strong as its weakest point.

There’s an in-depth look at applying progressive enhancement to web type, and every single link in the resources section at the end is worth investigating.

Oh, and of course it’s beautifully typeset.

How To Write Telegrams Properly by Nelson E. Ross

A delightful and informative booklet from 1928.

The Leica Q — Craig Mod

Set aside some time: Craig is reviewing a camera again (and you remember how epic that was last time).

The Facebook-Loving Farmers of Myanmar - The Atlantic

A fascinating slice of ethnographic research in Myanmar by Craig. There’s no mention of the web, which is certainly alarming, but then again, that’s not the focus of the research.

Interestingly, while Facebook is all omnipresent and dominant, nobody is using it the way that Facebook wants: all the accounts are basically “fake”.

What I found fascinating are the ways that people have found to bypass app stores. They’re basically being treated as damage and routed ‘round. So while native apps are universal, app stores would appear to be a first world problem.

Now if there were only some kind of universally accessible distribution channel that didn’t require any kind of installation step …hmmm.

Using System Fonts in the Browser

We have some new font keywords that are basically shortcuts to using the system fonts on a device. This article explains the details.

Telegraph

A handy new service from Aaron, for those situations when you need to manually send webmentions.

20 Years Ago Today

A lovely reminiscence from Matt on how he came to fall in love with the World Wide Web.

I really hope he posts this on his own site—it’ll be a shame when this disappears along with everything else being posted to Medium.

Better Google Web Fonts

A single page showing all the weights available from Google fonts at a glance.

CSS Font Rendering Controls Module Level 1

This is already starting to land in browsers, which makes me very happy—the ability to specify how you want fonts to load/swap without needing a clever bit of JavaScript.

The Moral Character of Cryptographic Work by Phillip Rogaway (PDF)

It’s a PDF and it’s an academic paper, but this rousing call to arms is a remarkably clear and engrossing read.

With few exceptions, the atomic scientists who worked on disarmament were not the same individuals as those who built the bomb. Their colleagues—fellow physicists—did that. Cryptographers didn’t turn the Internet into an instrument of total surveillance, but our colleagues—fellow computer scientists and engineers—did that.

It concludes with a series of design principles for the cryptographic community:

  • Attend to problems’ social value. Do anti-surveillance research.
  • Be introspective about why you are working on the problems you are.
  • Apply practice-oriented provable security to anti-surveillance problems.
  • Think twice, and then again, about accepting military funding.
  • Regard ordinary people as those whose needs you ultimately aim to satisfy.
  • Be open to diverse models. Regard all models as suspect and dialectical.
  • Get a systems-level view. Attend to that which surrounds our field.
  • Learn some privacy tools. Use them. Improve them.
  • Stop with the cutesy pictures. Take adversaries seriously.
  • Design and build a broadly useful cryptographic commons.
  • Choose language well. Communication is integral to having an impact.

We need to erect a much expanded commons on the Internet. We need to realize popular services in a secure, distributed, and decentralized way, powered by free software and free/open hardware. We need to build systems beyond the reach of super-sized companies and spy agencies. Such services must be based on strong cryptography. Emphasizing that prerequisite, we need to expand our cryptographic commons.

I Dreamed of a Perfect Database | New Republic

A really nice piece by Paul Ford on the history of databases and the dream of the Semantic Web.

Sometimes I get a little wistful. The vision of a world of connected facts, one big, living library, remains beautiful, and unfulfilled.

One thing though: the scrolling on this page is sooooo janky that I had to switch off JavaScript just to read these words comfortably.

Creating a Web Type Lockup | CSS-Tricks

A really great idea from Chris: using SVG to create the web equivalent of type lockups that can scale with all the control you want, while still maintaining accessibility.

Speaking of accessibility, Emil’s comment is very useful indeed.

A Little Less Metacrap - Broken Links

Peter writes a follow-up to my post on metadata markup pointing out that Twitter will fall back to Open Graph values.

Learn Sketch 3 - Design+Code

A very handy introduction to Sketch from an iOS-specific book. See also the subsequent chapter, Mastering Sketch 3.

The proto-internet | Intelligent Life magazine

Mapping the submarine cables of the Victorian internet.

And by the way, why did nobody tell me about Cartophilia before now? I’m very disappointed in you.

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.

yurivictor/typebetter

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.