I like a good em dash, me.
Monday, January 15th, 2018
Better Typography with Font Variants - Jonathan Harrell | CSS Blogger & Teacher, UI/UX Designer, Front-End Developer
A quick guide to all the
font-variant-... stuff in CSS.
Wednesday, January 3rd, 2018
Friday, December 15th, 2017
A rather handsome looking free serif typeface based on Gargantua. Spectral is available under an Open Font License.
Thursday, December 7th, 2017
These experiments with transitioning variable font styles on hover might be silly, but I can see the potential for some beautiful interaction design.
Tuesday, November 28th, 2017
Rob walks us through the typographic choices for his recent redesign:
Most of what I design that incorporates type has a typographic scale as its foundation, which informs the typeface choices and layout proportions. The process of creating that scale begins by asking what the type needs to do, and what role contrasting sizes will play in that.
Wednesday, November 8th, 2017
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.”)
Wednesday, November 1st, 2017
A really great case study of a code refactor by Mina, with particular emphasis on the benefits of CSS Grid, fluid typography, and accessibility.
Tuesday, October 31st, 2017
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.
Wednesday, October 4th, 2017
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
Monday, October 2nd, 2017
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.
Saturday, September 23rd, 2017
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.
Tuesday, August 29th, 2017
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?
Wednesday, August 23rd, 2017
Interface is a font for highly legible text on computer screens.
And it’s free!
Thursday, July 27th, 2017
A blog dedicated to documenting the letterforms on display in Berlin.
Sunday, June 25th, 2017
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.
Tuesday, June 20th, 2017
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.
Thursday, April 27th, 2017
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.
Tuesday, April 11th, 2017
I only just wrapped my head around the idea of variable fonts and now here’s colour fonts to really mess with my mind.