Tags: typography

297

sparkline

Wednesday, November 8th, 2017

Web Typography: Designing Tables to be Read, Not Looked At · An A List Apart Article

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

Rebuilding slack.com – Several People Are Coding

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

Inter UI font family

A nice free and open source font designed for digital interfaces:

Inter UI is a font for highly legible text on computer screens.

Never Use Futura

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

eBay’s Font Loading Strategy | eBay Tech Blog

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

Visions - A Literary Science Fiction Magazine

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.

The story of its (re)construction is fascinating. (Thanks for the heads-up, Jason.)

Tuesday, August 29th, 2017

User Interfaces for Variable Fonts · An A List Apart Article

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 font family

Interface is a font for highly legible text on computer screens.

And it’s free!

Thursday, July 27th, 2017

Berlin Typography – Text and the City // Buchstaben und die Stadt

A blog dedicated to documenting the letterforms on display in Berlin.

Sunday, June 25th, 2017

The Equilateral Triangle of a Perfect Paragraph | Better Web Type

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

Standard Ebooks: Free and liberated ebooks, carefully produced for the true book lover.

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

Font Map · An AI Experiment by IDEO

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

Color fonts! WTF? 🌈

I only just wrapped my head around the idea of variable fonts and now here’s colour fonts to really mess with my mind.

Monday, March 20th, 2017

Untitled Sans & Serif Design Information · Klim Type Foundry

Two new typefaces, designed to be deliberately lacking in expression.

The write-up of the making of the typefaces is as open and honest as the finished output. This insight into the design process rings very, very true:

Post rationalisation is an open secret in the design industry. Only when a project is finished can it be written up, the messy process is delineated and everything seems to follow a logical sequence up until the final thing is unveiled, spotless and perfect.

However, I suspect the process is largely irrational for most designers. There is a point where all the input has been processed, all the shit drawings, tenuous concepts and small ideas have been thrown away and you just work towards the finish, too exhausted and distracted to even know if it’s worth anything or not. And, if you’re lucky, someone or something will come along and validate the work.

Sunday, March 19th, 2017

Better Web Typography for a Better Web

A free ten part email course on web typography for designers and developers. The end results will be gathered together into a book.

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.