The gorgeous website for this year’s Ampersand conference might well be one of the first commercial uses of variable fonts in the wild. Here, Richard documents all the clever things Mark did to ensure good fallbacks for browsers that don’t yet support variable fonts.
Friday, January 26th, 2018
Tuesday, January 23rd, 2018
In fact, you can do more than saving the date: you can snap up a super early bird ticket for whopping £85 saving.
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.
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.
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?
Sunday, August 20th, 2017
Everyone’s been talking about
font-display: swap as a way of taking the pain out of loading web fonts, but here Chris looks at
font-display: optional and
font-display: fallback as well.
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.
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.
Friday, March 3rd, 2017
The new Clearleft website is live! Huzzah!
Many people have been working very hard on it and it’s all looking rather nice. But, as I said before, the site launch isn’t the end—it’s just the beginning.
There are some obvious next steps: fixing bugs, adding content, tweaking copy, and, oh yeah, that whole “testing with real users” thing. But there’s also an opportunity to have some fun on the front end. Now that the site is out there in the wild, there’s a real incentive to improve its performance.
Off the top of my head, these are some areas where I think we can play around:
- Font loading. Right now the site is just using
@font-face. A smart font-loading strategy—at least for the body copy—could really help improve the perceived performance.
- Responsive images. A long-term solution will require some wrangling on the back end, but I reckon we can come up with some way of generating different sized images to reference in
I’m looking forward to tinkering with some of those technologies. Each one should make an incremental improvement to the site’s performance. There are already some steps on the back-end that are making a big difference: upgrading to PHP7 and using HTTP2.
Now the real fun begins.
Tuesday, February 21st, 2017
Rich has posted a sneak peek of one part of his book on Ev’s blog.
We have a tradition here at Clearleft of having the occasional lunchtime braindump. They’re somewhat sporadic, but it’s always a good day when there’s a “brown bag” gathering.
Today Richard gave us a quick brown bag talk on variable web fonts. He talked us through how these will work on the web and in operating systems. We got a good explanation of how these fonts would get designed—the type designer designs the “extreme” edges of size, weight, or whatever, and then the file format itself can extrapolate all the in-between stages. So, in theory, one single font file can hold hundreds, thousands, or hundreds of thousands of potential variations. It feels like switching from bitmap images to SVG—there’s suddenly much greater flexibility.
A variable font is a single font file that behaves like multiple fonts.
There were a couple of interesting tidbits that Rich pointed out…
While this is a new file format, there isn’t going to be a new file extension. These will be
.ttf files, and so by extension, they can be
.woff2 files too.
This isn’t some proposed theoretical standard: an unprecedented amount of co-operation has gone into the creation of this format. Adobe, Apple, Google, and Microsoft have all contributed. Agreement is the hardest part of any standards process. Once that’s taken care of, the technical solution follows quickly. So you can expect this to land very quickly and widely.
This technology is landing in web browsers before it lands in operating systems. It’s already available in the Safari Technology Preview. That means that for a while, the very best on-screen typography will be delivered not in eBook readers, but in web browsers. So if you want to deliver the absolute best reading experience, look to the web.
And here’s the part that I found fascinating…
We can currently use numbers for the
font-weight property in CSS. Those number values increment in hundreds: 100, 200, 300, etc. Now with variable fonts, we can start using integers: 321, 417, 183, etc. How fortuitous that we have 99 free slots between our current set of values!
Well, that’s no accident. The reason why the numbers were originally specced in increments of 100 back in 1996 was precisely so that some future sci-fi technology could make use of the ranges in between. That’s some future-friendly thinking! And as Håkon wrote:
One of the reasons we chose to use three-digit numbers was to support intermediate values in the future. And the future is now :)
Needless to say, variable fonts will be covered in Richard’s forthcoming book.
Monday, January 9th, 2017
A wonderfully thoughtful piece from Robin, ranging from the printing technologies of the 15th century right up to the latest web technologies. It’s got all my favourite things in there: typography, digital preservation, and service workers. Marvellous!
Wednesday, December 28th, 2016
Wednesday, December 14th, 2016
The typography of a web book
I’m a sucker for classic old-style serif typefaces: Caslon, Baskerville, Bembo, Garamond …I love ‘em. That’s probably why I’ve always found the typesetting in Edward Tufte’s books so appealing—he always uses a combination of Bembo for body copy and Gill Sans for headings.
ET Book is a Bembo-like font for the computer designed by Dmitry Krasny, Bonnie Scranton, and Edward Tufte. It is free and open-source.
When I was styling Resilient Web Design, I knew that the choice of typeface would be one of the most important decisions I would make. Remembering that open source ET Book font, I plugged it in to see how it looked. I liked what I saw. I found it particularly appealing when it’s full black on full white at a nice big size (with lower contrast or sizes, it starts to get a bit fuzzy).
I love, love, love the old-style numerals of ET Book. But I was disappointed to see that ligatures didn’t seem to be coming through (even when I had enabled them in CSS). I mentioned this to Rich and of course he couldn’t resist doing a bit of typographic sleuthing. It turns out that the ligature glyphs are there in the source files but the files needed a little tweaking to enable them. Because the files are open source, Rich was able to tweak away to his heart’s content. I then took the tweaked open type files and ran them through Font Squirrel to generate WOFF and WOFF2 files. I’ve put them on Github.
For this book, I decided that the measure would be the priority. I settled on a measure of around 55 to 60 characters—about 10 or 11 words per line. I used a max-width of 27em combined with Mike’s brilliant fluid type technique to maintain a consistent measure.
It looks great on small-screen devices and tablets. On large screens, the font size starts to get really, really big. Personally, I like that. Lots of other people like it too. But some people really don’t like it. I should probably add a font-resizing widget for those who find the font size too shocking on luxuriously large screens. In the meantime, their only recourse is to fork the CSS to make their own version of the book with more familiar font sizes.
The visceral reaction a few people have expressed to the font size reminds me of the flak Jeffrey received when he redesigned his personal site a few years back:
Many people who’ve visited this site since the redesign have commented on the big type. It’s hard to miss. After all, words are practically the only feature I haven’t removed. Some of the people say they love it. Others are undecided. Many are still processing. A few say they hate it and suggest I’ve lost my mind.
I wonder how the people who complained then are feeling now, a few years on, in a world with Medium in it? Jeffrey’s redesign doesn’t look so extreme any more.
Resilient Web Design will be on the web for a very, very, very long time. I’m curious to see if its type size will still look shockingly large in years to come.
Saturday, December 10th, 2016
A fascinating piece by Eleanor on the typographic tweaking that the Wellcome team did to balance the competing needs of different users.
Monday, November 21st, 2016
Douglas Coupland on web typography.
When I discuss the internet’s feel and its random rodeo of fonts, I think of the freedom, naivety, laziness, greed, cluelessness and skill I see there — it’s a cyberplace as wondrous as the bubbling cradle of pea-soup goo from which life emerged. The internet has a rawness, a Darwinian evolutionary texture. It’s a place where metrics totally unrelated to print typography dictate the look and feel.