A terrific rundown of all your options when it comes to web font loading.
A handy tool for testing the legibility of different typefaces under all sorts of conditions.
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.
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.
I’ve seen letterforms you people wouldn’t believe…
A thoroughly lovely look at the octothorpe that skewers a myth or two along the way.
Some smart thoughts on web fonts.
In this English language alternative to latitude and longitude coordinates, the Clearleft office is located at:
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.
A transatlantic cable, hurrah!
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.
Great photos from a great gathering.
Here’s a clever way to get text centred when it’s short, but left-aligned when it wraps.
The numero sign, the reversed question mark, the interrobang, the l b bar symbol, the Tironian et, the capitulum, and the ironieteken.
Everything you never wanted to know about conveying elevation information on maps, delivered in Peter’s always-entertaining style and illustrated with interactive examples.
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.
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.
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).
Mappa Mundi Rubrum.
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”:
- We must prioritise the text over the font, or semantics over style.
- We ought to use and/or make tools that reveal the consequences of typographic decisions.
- 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.
A delightful and informative booklet from 1928.
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.
We have some new
font keywords that are basically shortcuts to using the system fonts on a device. This article explains the details.
This geography lesson makes a nice companion piece to Johnny Cash has been everywhere, man.
A single page showing all the weights available from Google fonts at a glance.
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.
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.
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.
The audio is now up from all the talks at this year’s excellent Ampersand conference.
This looks like a terrific presentation from Alla on iconography, semiotics, and communication.
This is such a delightful story of a brilliant mistake—true typographic nerdery and nostalgia.
Read all the way through for a free gift.
Websites should not come with minimum software requirements.
An old-school styleguide.
The video of Richard’s great talk on responsive typography at the Up Front conference.
Sounds like a good exercise for explaining just about anything. Smart.
This infographic offers a visual way to explore the various stages of the Earth’s history using a 12 hour clock analogy.
A long zoom and then a deep dive into web typography.
This was a fun way to spend the day—getting my hands dirty with ink and type.
Google Fonts aren’t renowned for their quality but this is a beautiful demonstration of what you can accomplish with them.
You’ll want to back this—you’ll want to back the hell out of this!
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?
Before there was radar, there were acoustic mirrors along the coast of England—parabolic structures designed to funnel the distant sound of approaching aircraft.
By far the creepiest type experiment I have ever seen.
This year’s map from TeleGeography is looking lovely.
Alternative histories of communication.
(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.)
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.
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.
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.
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.