Tags: type



Tuesday, February 21st, 2017

Get started with variable fonts – Medium

Rich has posted a sneak peek of one part of his book on Ev’s blog.

Variable fonts

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.

When Google’s AMP format came out and I had done some investigating, I led a brown bag playback on that. Recently Mark did one on Fractal so that everyone knew how work on that was progressing.

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 .woff and .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.

Friday, February 10th, 2017

Decovar: A multistyle decorative variable font by David Berlow

Here’s one of them new-fangled variable fonts that’re all the rage. And this one’s designed by David Berlow. And it’s free!

Friday, February 3rd, 2017

Tuna - Typeface

I like the feel of this typeface a lot.

Bubbling, strong, but very accurate.

Wednesday, December 28th, 2016

Google Noto Fonts

Google’s Noto (short for no-tofu; tofu being the rectangle of unicode sadness) is certainly ambitious. It has glyphs from pretty much every known alphabet …including Ogham and Linear B!

Monday, December 19th, 2016

The math of CSS locks

A very very in-depth look at fluid typography in CSS using calc.

Saturday, December 10th, 2016

Accessibility Whack-A-Mole · An A List Apart Article

A fascinating piece by Eleanor on the typographic tweaking that the Wellcome team did to balance the competing needs of different users.

Friday, December 9th, 2016

Get the Balance Right: Responsive Display Text ◆ 24 ways

Some really great CSS tips from Rich on sizing display text for multiple viewports.

Wednesday, December 7th, 2016

What design sprints are good for — Cennydd Bowles

Cennydd enumerates what design sprints are good for:

  • generating momentum,
  • highlighting the scope of the design process,
  • developing the team, or
  • provoking core product issues.

And also what they’re not so good for:

  • reliable product design,
  • proposing sophisticated user research,
  • answering deep product-market fit questions, or
  • getting the green light.

Monday, November 21st, 2016

Designing for new digital rights

A series of quick’n’dirty prototypes to illustrate some of the design challenges involved in handling personal data:

If we don’t start exploring what the General Data Protection Regulation means for people, the same thing that happened with the cookie law will happen again.

These new rights have the potential to improve how our digital products and services work.

Saturday, November 19th, 2016


A marvellous piece of writing and design. The family drama of two brothers who revolutionised the world of diving and salvage, told through beautifully typeset hypertext…

…which for some reason is rendered entirely using client-side JavaScript. Unfathomable indeed.

Monday, November 7th, 2016

Friday, October 21st, 2016

How the Web Became Unreadable

Kevin writes a plea on Ev’s blog for better contrast in web typography:

When you build a site and ignore what happens afterwards — when the values entered in code are translated into brightness and contrast depending on the settings of a physical screen — you’re avoiding the experience that you create. And when you design in perfect settings, with big, contrast-rich monitors, you blind yourself to users. To arbitrarily throw away contrast based on a fashion that “looks good on my perfect screen in my perfectly lit office” is abdicating designers’ responsibilities to the very people for whom they are designing.

Saturday, October 8th, 2016

The last day of hot metal press before computers come in at The New York Times | Aeon Videos

The 1978 short film Farewell, etaoin shrdlu documents the changeover from linotype to digital typesetting at The New York Times.

An evenhanded treatment of the unremitting march of technological progress, Weiss’s film about an outmoded craft is stylistically vintage yet also immediate in its investigation of modernity.

Tuesday, October 4th, 2016

How to prototype in the browser | GDS design notes

This is a clever quick’n’dirty way of prototyping iterations on an existing site using dev tools and screenshots.

Wednesday, September 21st, 2016

The scorpion express | Butterick’s Practical Typography

This is easily the most wrong-headed piece of writing I’ve read in a long time.

“But cus­tomers ben­e­fit from smaller file sizes too, be­cause that makes web pages faster.” Cer­tainly, that was true in 1996. And some web de­vel­op­ers per­sist with po­lit­i­cal ob­jec­tions. But with to­day’s faster con­nec­tions—even on mo­bile—op­ti­miz­ing for file size is less use­ful than ever.

I’ll leave it to you to see the logical flaws in every one of the arguments presented here by Matthew Buterick. Meanwhile I’m going to get off his lawn.

Monday, September 19th, 2016

The Typekit Blog | Variable fonts, a new kind of font for flexible design

This is what Nick Sherman has been banging on about for years, and now the time has come for variable fonts …as long as typographers, browser makers, and standards bodies get behind it.

More details on Ev’s blog.

Monday, September 12th, 2016

Webfonts on the Prairie · An A List Apart Article

A good ol’ polemic in favour of using web fonts. It’s a good read although I strongly disagree with this line of reasoning:

The average internet speed in the United States today is three times as fast as it was in 2011.

But that americentric view is redeemed later on:

The World Wide Web may be a creation of the West, but now, at long last, it needs to get ready for the rest.

I may not agree with all the points in this article, but I think we can all agree that if we’re going to use web fonts, we must use them responsibly …otherwise users are going to treat them as damage and route around them.

Tuesday, September 6th, 2016

`font-display` for the Masses | CSS-Tricks

The font-display property is landing in browsers, and this is a great introduction to using it:

If you don’t know which option to use, then go with swap. Not only does it provide an optimal balance between custom fonts and accessibility of content, it provides the same font loading behavior that we’ve relied on JavaScript for. If you have fonts on the page that you’d like to have load, but could ultimately do without, consider going with fallback or optional when using font-display.

Until it’s more widely supported, you can continue to use a JavaScript solution, but even then you can feature detect first:

if ("fontDisplay" in document.body.style === false) {
  /* JavaScript font loading logic goes here. */

Wednesday, July 27th, 2016

FontShop | The Fonts of Star Trek

Yves Peters examines the typography of Star Trek. Unlike Typeset In The Future, which looks at on-screen typography, this article dives into titles and promotional posters.