The Iconic Work of Reid Miles

Reid Miles was an American modernist designer, a genius of his time, best known for his work for Blue Note Records through the 1950’s and 60’s. During this period he designed almost 500 record covers for the label. This article is a tribute to Miles, who’s work contin­ues to inspire me and many others.

It’s the summer of 1998—a long wait has finally come to an end. After saving for months I’ve acquired my first turntable. It’s Technics SL-1210 MK II and I am carrying it uphill towards home that is nearly two and a half miles further. The package weighs 26 pounds, not an easy task for the scrawny teenager I was back then.

He was a genius, ahead of his time, and the way he treated the typography as visual elements that can be broken apart and form something new still feels fresh.

I remember vividly how I after arriving tear apart the package, took out all the gleaming parts, put them together, and the great enthusiasm and eagerness I felt inside. I also remember how I connected the turntable to the speakers and played the first vinyls I had picked up months earlier.

There I was, eyes closed, letting the unison of the brasses sink into my brain.

Seventeen years later, that same turntable still looks and works like a brand new thing. It was and still is an amazingly well built piece. I feel the same about the work of Reid Miles. He was a genius, ahead of his time, and the way he treated the typography as visual elements that can be broken apart and form something new still feels fresh.[1]

I didn’t know it back then, but the day I bought the turntable and started collecting vinyls shaped my future career as a designer. Slowly through the years the jazz music and artworks of these 12" records became the main source of inspiration for me.

Miles’ Early Days

Reid Miles was born in Chicago on the 4th of July 1927, American Inde­pendence Day, making him only twelve years old when Blue Note was founded. When the Stock Market crashed in 1929, Miles’ parents divorced and he moved with his mother and younger sister to Long Beach, California. After high school Miles joined the Navy and, following his discharge, moved back to Los Angeles to enrol at Chouinard Art Institute.

According to Miles himself, he didn’t enrol because of some lofty ambitions towards art. He told in a series of interviews that he did it because of a girl who he was dating at the time. Miles had also just returned from World War II and could use the G.I. Bill education benefits. To him, it felt like a better idea to go to an easy art school than somewhere else. The dating didn’t work out—but three months later, things just clicked and Miles knew what he wanted to do.[2]

After finishing his studies at the Chouinard Art Institute, Miles headed towards New York to look for a job with the biggest portfolio he could possibly find.

If the portfolio didn’t fit on the desk, I wasn’t talking to the right person. You need a fierce competition to do good work and when I started out, I would be competing against 11 other people for a job as an assistant to an art director at a little agency.”

John Hermansader, an American painter and a graphic designer, gave Miles his first job in New York. One of Hermansader’s clients at the time was Blue Note Records, which eventually led to Miles’ involvement too.[2]

Blue Notes

In 1951, when Blue Note began releasing 10" records, Hermansader—who later hired Miles—was one of their first designers. Many don’t know that Hermansader, along with Paul Bacon, were the ones who did the ground­work for Blue Note’s design style, which Miles then continued to develop further with his own unique twist.

Late in 1955, Blue Note made the change to 12" record format. It was around this same time when the company hired Reid Miles as their Art Director and asked him to adapt their existing cover concepts to the new, larger format. Miles started his work from Blue Note BLP-1509 by Milt Jackson and The Thelonious Monk Quintet, and went on, designing almost 500 covers during a period of 15 years.

In the Fifties, Miles often worked in close collabora­tion with Andy Warhol, who helped him turn his concept designs to illustrations. One of the most famous results of this joint effort between the two is the cover of The Congregation by Johnny Griffin, which has reached an iconic status in the history of jazz. Later on Miles’ and Warhol’s relation­ship even led to him posing nude for one of Andy’s famous portraits.[5]

Although Warhol and artists such as Harold Feinstein were also working for Blue Note, it wasn’t until Reid Miles took over as the Art Director that the label could match the design style with its legendary ‘Blue Note sound.’ Whether this meant Miles’ creative use of black and white photographs or the way he treated the typography, “Miles made the cover sound like it knew what it lay in store for the listener” writes Felix Cromey in The Cover Art of Blue Note Records.[3]

Fifty Bucks an album…they loved it, thought it was modern, they thought it went with the music…one or two colors to work with at that time and some outrageous graphics!”

Reid Miles’ association with the label ended around 1967 when Alfred Lion, one of the founders of Blue Note, retired. Miles later returned permanently to Los Angeles, where he became famous for being paid $1,000,000/year to produce Coca-Cola ads that mimicked Normal Rockwell paintings. Quite a contrast to the fifty bucks an album that he was paid by Blue Note.

Miles continued working in his Hollywood studio for various clients until a massive coronary in 1993, which lead to his somewhat dramatic death.[4]


During the Fifties, when the design industry was in flux, Reid Miles pushed forward the way the typography is treated with his bold, playful designs, creative use of typefaces, and his distinct preference for contrast and asymmetry.

Personally, I’d like to think, that Reid Miles did the same to modern typography, as Charles and Ray Eames did to modern architecture and furniture.

I think typography in the early Fifties was in a renaissance period anyway. It happened especially on album covers because they were not so restrictive as advertising.”

– Reid Miles


A selection of Reid Miles’ designs from the 1950’s and 60’s. Most of these covers Miles designed for Blue Note, but there are few others included as well. Let the work speak for itself. ❦

Reid Miles’ cover design

View all designs

The Many Faces of The Web

During the winter 2014, me and my family rented an apartment from San Diego, CA for few months through my work. While staying there, we had an AT&T hotspot device that provided the network connection. For us, relying on this device, meant constant drops of connection, network latency like we’ve never seen before, and websites that were completely broken because Java­Script wasn’t loading at all. A part of this can be explained by the poor reception at the location where we were staying, but overall, the whole experience put me thinking.

All these contexts, where our web­sites are viewed in, vary so wildly that we have to start paying more attention to how we design and build. The web is fragile and the situation isn’t going to change any time soon.

Stop breaking the web

Universality is in the core of the World Wide Web, so we should embrace it and build websites that are available to, and accessible by, everyone.

There’s this thought in my head that, like a broken record, keeps repeating to me and everyone around: “Stop breaking the web.” And if I think about it more, I realize it’s related to this funda­mental idea that I have, which makes me want to push the web forward and make it a better place. Because isn’t that what we, the designers and developers of this medium, should strive for and be proud of?

On a bigger scale, I mean things like making our websites accessible to everyone. Making them work with different input methods like touch, mouse, keyboard or voice. Making them load and perform fast. Providing everyone access to this vast network of connected things. And if we don’t strive for all of this, what’s the point of working on the web? To me, this is what the web is and has always been about. Making people’s lives better. Making information accessible to everyone—wherever, whenever and as fast as possible.

The thing about the web that still fascinates me after all these years, is how universally accessible it is. How you can publish something out there and how someone on the other side of this planet can just pick up a connected device and access that content. Even more fascinating, use assistive technology that reads the content for the user. But—it’s also so easy to break this connection if we don’t pay attention.

How we build

I feel like there’s a growing trend in our industry to forget accessi­bility. To not pay attention. Forget progressively enhanced experiences. Forget the universality of the medium that we are working on. Forget that not every­one on this planet has the latest and greatest devices or the connection speeds that we, ourself, might have.

This worries me and puts me thinking.

Instead of coming up with all these new tools and JavaScript frame­works, shouldn’t we try to emphasize the importance of learning the underlying funda­mentals of the web? Teach those who are just stepping to this medium and starting their careers. By not making our stack more and more complex, but by telling about the best practices that should guide our work and the importance of basic things.

Why accessibility is important and why does it make a difference. Why is progressive enhancement important. Why everyone doesn’t have to get the same experience and why it isn’t even a sane goal. Why do we need perfor­mance budgets. Why it’s important to make websites work even when JavaScript doesn’t load. Why we can’t rely on a browser feature to be available. Why we need to focus on features and constraints rather than browsers and devices. And so on and so on.

Embrace the medium

The web is more than just a set of protocols and agreements—HTTP, URLs, HTML. It’s also built with a set of principles that—much like the principles underlying the internet itself—are founded on ideas of universality and accessibility (as Jeremy Keith states it).

We are designing and building experiences for a medium, where it’s not possible to control our user’s age, abilities, context, device, browser, screen size, operating system, connection speed, or even the input method they are using. The contexts, where our websites will be eventually viewed in, are a mix of variables we can’t control.

Universality is in the core of the World Wide Web, so we should embrace it and build websites that are available to, and accessible by, everyone. We are designing and building for the many faces of the web.

Dear Web, I want to make you a better place. ❦

Dashes in Web Typography

This is an experiment I did months ago, but eventually never ended up posting it here. I had already forgotten the whole thing until it few weeks ago suddenly started popping up on my Twitter and Facebook timelines via other people. It’s a simple one pager you can use for example as a cheatsheet for various dashes.

Dashes in Web Typography

Read the article

Molten Leading

Manually adjusting line-height with media queries for optimum readability across vast number of screen sizes can be hard. What makes it even harder, is, that instead of the screen width, the line-height should be relative to its container’s width and its font settings in order to achieve proper readability and appropriate spacing.

Molten Leading is a tiny JavaScript plugin that automatically adjusts line-height based on element width for optimum readability across vast number of devices.

Thanks to @Wilto, there has been a jQuery plugin called “Molten Leading” around for quite some time already which makes it possible to automate this process and define a minimum width at which the adjustment starts, a maximum element width where it stops, and a minimum and maximum line-height to adjust through.

I wanted to use something similar in one of my latest projects, but I didn’t want to introduce new dependencies to external JavaScript libraries just because of this one feature. I also wanted something that would have a bit better performance, so I decided to write a custom version of Molten Leading without any library dependencies. All this is now available on GitHub too, so take a look and give it a spin.


  • Automatically adjust line-height based on element width.
  • Works in all browsers, including IE6 and up.
  • Uses requestAnimationFrame for the best possible performance.
  • Free to use in both commercial and non-commercial projects.
  • Doesn’t require external JavaScript libraries.
  • Supports px, em and rem CSS units.
  • Weighs only 1.17kb minified and Gzip’ed.
  • Supports multiple instances.

Responsive Line Height


Molten Leading on GitHub