An extract from Richard’s excellent book, this is a deep dive into styling tables for the web (featuring some CSS I had never even heard of).
Tables can be beautiful but they are not works of art. Instead of painting and decorating them, design tables for your reader.
(It also contains a splendid use of the term “crawl bar.”)
A really great case study of a code refactor by Mina, with particular emphasis on the benefits of CSS Grid, fluid typography, and accessibility.
A nice free and open source font designed for digital interfaces:
Inter UI is a font for highly legible text on computer screens.
The book draws together the many and varied uses of Futura that make it a universal language while simultaneously confirming its unique typographic voice. The book is a playful yet passionate rebuttal to the perceived dominance of Helvetica as the typeface of modern design.
A lovely interactive photo essay charting the results of what happens when evolution produces a life form that allows a planet to take selfies.
18F: Digital service delivery | Building a large-scale design system: How we created a design system for the U.S. government
Maya Benari provides an in-depth walkthrough of 18F’s mission to create a consistent design system for many, many different government sites.
When building out a large-scale design system, it can be hard to know where to start. By focusing on the basics, from core styles to coding conventions to design principles, you can create a strong foundation that spreads to different parts of your team.
There’s an interface inventory, then mood boards, then the work starts on typography and colour, then white space, and finally the grid system.
The lessons learned make for good design principles:
- Talk to the people
- Look for duplication of efforts
- Know your values
- Empower your team
- Start small and iterate
- Don’t work in a vacuum
- Reuse and specialize
- Promote your system
- Be flexible
Here’s the flow that eBay use for the font-loading. They’ve decided that on the very first page view, seeing a system font is an acceptable trade-off. I think that makes sense for their situation.
Interestingly, they set a flag for subsequent visits using
localStorage rather than a cookie. I wonder why that is? For me, the ability to read cookies on the server as well as the client make them quite handy for situations like this.
This book—released today—looks right up my alley.
After World War I, Smith used her talents to catch gangsters and smugglers during Prohibition, then accepted a covert mission to discover and expose Nazi spy rings that were spreading like wildfire across South America, advancing ever closer to the United States. As World War II raged, Elizebeth fought a highly classified battle of wits against Hitler’s Reich, cracking multiple versions of the Enigma machine used by German spies.
This forthcoming sci-fi quarterly publication looks intriguing:
Each issue contains a part of a previously untranslated novel as well as essays looking at the world through the lens of different writers.
I’m loving their typeface. It’s called Marvin. It was specially made for the magazine, and available to download and use for personal use for free.
Marvin gets its distinctive voice not only from its Art Nouveau vibe but also from its almost geometrically perfect construction. Its roundness and familiarity with Bauhaus typefaces shows its roots in geometric sans serifs at the same time.
A good introduction to variable fonts, and an exploration of the possible interface elements we might use to choose our settings: toggles? knobs? sliders? control pads?
Interface is a font for highly legible text on computer screens.
And it’s free!
The ability of the physical world — a floor, a wall — to act as a screen of near infinite resolution becomes more powerful the more time we spend heads-down in our handheld computers, screens the size of palms. In fact, it’s almost impossible to see the visual patterns — the inherent adjacencies — of a physical book unless you deconstruct it and splay it out on the floor.
Craig gives us a walkthrough—literally—of the process behind the beautiful Koya Bound book.
Deciding to make any book is an act of creative faith (and ego and hubris, but these aren’t all exclusionary). But before Dan and I sold any copies of Koya Bound, we walked atop the pages that would become the book, not really knowing if there existed an audience for the book.
A Weekly Journal of Visual Essays
Some lovely data visualisation here.
A blog dedicated to documenting the letterforms on display in Berlin.
This is a fun game (I scored a measly 73/100). The idea is to develop a feeling for the balance between font-size, line-height, and line length …just like the three sides of an equilateral triangle.
Too many of them still set line-height, font size and line width as independent features when in fact they should all be considered together. The equilateral triangle is a perfect representation of how the three features work in harmony.
Beautifully designed and typeset eBooks of royalty-free works—yours for the taking and reading.
There’s a styleguide if you want to get involved on the production side too.
This was my favourite talk from this year’s Interaction conference—packed full of insights, and delivered superbly.
It prompted so many thoughts, I found myself asking a question during the Q&A.
Photos of analogue interfaces: switches, knobs, levers, dials, buttons, so many buttons.
Fontlandia is yours to explore.
By leveraging AI and convolutional neural networks to draw higher-vision pattern recognition, we have created a tool that helps designers understand and see relationships across more than 750 web fonts.