State of Web Type
Like caniuse.com, but for typography features. Find out what’s supported in browsers today.
Like caniuse.com, but for typography features. Find out what’s supported in browsers today.
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.
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.
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 visualisations of science and nature.
Made with love by a designer with a molecular biology degree.
Richard never rants.
Here’s Richard ranting.
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.
The GPS system is a monumental network that provides a permanent “YouAreHere” sign hanging in the sky, its signal a constant, synchronised timecode.
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.
Here’s the font that Brian created at the line-mode browser hack day at CERN.
A fascinating look at how Flipboard combines art direction and algorithms to generate layouts.
A cute approach to pairing typefaces: treat it like a dating game.
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?)
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 nice little cheat sheet for simple simple typography wins.
Lovely little graphics inspired by New York architecture.
This is absolutely delightful, nicely weird, and thoroughly entertaining.
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.
A little sojourn around the Victorian internet.
Data visualisations that make no sense.
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.
You can download the PDF of Anton’s graphic novel Gather for free.
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.
Sit back, relax, and enjoy this classic documentary on graphic design, courtesy of its producer Edward Tufte.
The Victorian Internet indeed.
The battle between web fonts and performance. Ian Feather outlines some possible solutions, but of course, as always, the answer is “it depends”.
A wonderful essay about type on the web by Jessica.
Documenting history through photography.
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.
Who knew? The reissue of the classic thirteen-part Star Wars radio series was the first appearance of a proto-Proxima Nova.
A lovely way of demonstrating the differences between map projections. Drag for extra fun.
Jessica’s handy guide to writing the right quotes and accents on a Mac keyboard.
Chris takes a look at all the different ways you can use SVG today.
Vasilis examines the multitude of factors that could influence an ideal measure.
Some handy tips for starting off your responsive designs from the type out.
A clear explanation of the current state of homomorphic encryption.
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.
Everything you ever wanted to know about using SVG today.
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.
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.
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.
An intriguing extrapolation of current design trends: perhaps typographically-strong single-column layouts will become popular out of sheet necessity.
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
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.
A fascinating piece by James on trap streets, those fictitious places on maps that have no corresponding territory.
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.
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.
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.
A really nice piece on scale, ratio and rhythms in web design.
A fascinating look at what happens when you mash up beauty and ugliness in one typeface.
A nice little profile of local Brighton photographer extraordinaire, Lomokev.
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).
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.
Tim shows how to make a scalable three-line navicon in CSS.
A nifty service for creating a custom font with just the icons you need.
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.
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.
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.
Trent shares his ideas on handling line lengths in fluid, responsive layouts.
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.
An informative post on ligatures in web type from Elliot. And, oh yeah, he redesigned his site again (it’s unsurprisingly lovely).
An algorithmically-generated font sounds like a terrible idea but I actually quite like the end result.
There’s two years(!) of doctored headlines here. Yes, it’s puerile but it’s also very funny (to my puerile sensibilities).
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.
Anton is a fantastic artist. Therefore, this graphic novel will be fantastic. Therefore, you should back the hell out of it.
Cute. I gave Dan some advice. He made it look all pretty.
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.
Andy documents the kinds of symbols being used to represent revealable navigation on mobile.
Samantha put together this handy one-page site to explain Style Tiles as part of her South by Southwest presentation.
Using em-based media queries to incrementally bump up the font size for larger viewports.
Explore the shape of the underwater world of internet backbones.
Photographs from the archive of the New York Times.
Google are shutting down the Social Graph API. Twunts.
The Kiwi Foo Space Program (a weather balloon with an Android device attached) captured some beautiful images.
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.
Some of these pay-what-you-want fonts are actually rather nice.
Richard starts diving into some the nifty ligatures that are becoming available to us in OpenType fonts with CSS3.
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!
Before there were HTTP codes, there were telegraphic codes. The Victorian internet indeed!
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.
A good round-up of what web development means today …and what web developers need to do to keep pace.
Most of these are pretty over the top but they’re good proofs of concept.
Richard dives into the differences in how browsers handle kerning. Be sure to click through to the beautiful finished result.
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.
A stroke of genius: turning money itself into the carrier for infographics on wealth distribution in America.
A great article by guest author Ethan on the various approaches to sizing text in CSS.
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.
A responsively designed comic. Yeah, you heard me right. Responsive. Comic!
An insight into Elliot’s current design process which highlights the advantages of designing in the browser when you take a content-first approach.
This is may just be the best thing on the internet about data visualisation and statistics. And sex.
A set of default styles to get started on a mobile-first responsive design.
This handy matrix shows the effect of different -webkit-font-smoothing setting on various text combinations (serif/san-serif light/dark, etc.).
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.
I had a lovely conversation at the Update after-party with Georgie about the infographic dress she was wearing. It’s quite lovely.
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’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.