Tumgik
#a bongo true sales book
Text
Tumblr media
6 notes · View notes
schradioactive · 6 years
Text
Oh, Celebrity Encounters
Tumblr media
Oh, celebrity encounters. For no other reason than to not mention Duran Duran (whom I’ve never met—despite their attempts to reach me since this blog started blowing up), here are a few recollections of crossing paths with somewhat popular people. Guy Chadwick – Everybody remembers the lead singer of alternative British rockers The House of Love, right? The band played Nashville’s 328 Performance Hall in summer 1990, but I was too young to attend the 18-and-over show. Undeterred, I went to the club that day and found Guy in the alley smoking a cigarette. I said, “Mr. Chadwick, may I shake your hand?” What a nerd. Some 29 years later, The House of Love still makes excellent records, and Chadwick has a successful window repair business in England. Chuck Norris – In 2004 I was a publicist at a Christian book publisher that signed this legend to write his autobiography. It was at the height of those “Chuck Norris Facts” emails that were going around plus the Walker, Texas Ranger lever featured on Late Night with Conan O’Brien (see link). This was a marketing department’s dream come true, and through some series of events, we dined with him at a convention in Orlando. He was kind, and I can say I’ve had lunch with Chuck Norris. Oliver North – Here’s another person I met through working at the publishing company that released several of his best-selling books. I wasn’t in any position to form an opinion of him, but I remember watching the Iran-Contra coverage in 1987. And if you had told 14-year-old me that I’d talk to that guy on the phone in 2009 to brainstorm about sales copy for his forthcoming novel, I would have been like, “I don’t think so. In 2009 I’m going to be a rock star.” Alas.  Michael W. Smith – If you live in Nashville, this guy may not seem like a celebrity since many people know him from church or wherever, but he has seen a million faces and pop-rocked them all. Growing up, it was a rite of passage to hear his kind of syrupy song “Friends” at goodbye events while holding back tears. In 2011, I got to write the biography for his instrumental album, Glory. It was a real treat to talk at his recording studio and see what a truly talented composer he is behind the scenes. Todd Barry – Comedy is essential—right up there with rain, tea, cats, Anne Tyler novels, and used CDs. But I’d never been to a stand-up show until summer 2018 when I bought a ticket for this guy’s “Crowd Work” tour. He improvises the entire set based on audience interaction, and it’s remarkable. Todd also played bongos in Flight of the Conchords—so extra points for that. After the show he sold posters outside Zanies. We took a selfie. You’ll have to trust me—the picture is on my old dead phone.
4 notes · View notes
riichardwilson · 4 years
Text
Inspired Design Decisions With Emmett McBain: Art Direction As Social Equity
Emmett McBain was a Black American graphic designer whose work had a remarkable impact on the representation of Black Americans in advertising. He co-founded what became the biggest Black-owned agency in the USA. McBain designed almost 75 record covers by the time he was 24, and in the penultimate of his Inspired Design Decisions series, Andy Clarke will explain how his work can inspire what we design for the web.
Along with advertising, selling is a skill that people often frown on. It’s true: no one likes someone coercing or misleading them, and nobody enjoys being interrupted.
But being sold to well — by a salesperson who understands your aspirations, motivations, and needs — can be an experience that benefits buyers and sellers.
Learning how to sell was one of the best things I did early on in my working life. Back then, I sold photographic equipment, and although I never enjoyed the stress which came from meeting sales targets, I always enjoyed meeting with photographers.
Finding new customers often meant cold-calling, knocking on a studio door, and frequently being rejected. I spent time talking about someone’s work before I mentioned the products my company paid me to sell. I was genuinely interested in photography, but also I’d learned that understanding someone’s problems was as crucial as explaining how my products could help solve them.
What I learned has served me immeasurably well since I stopped selling cameras and started selling my talent. It’s helped me deal with people, not least in presenting (read: selling) my ideas to clients.
It’s a fact of life that not always the best idea or the best execution wins a pitch or presentation. It’s often the idea which is being sold by the best salesperson.
Selling ideas should become one of your best skills, so learn to sell. Learn how to talk about your work so that the person you’re selling to understands your ideas and why they should buy them from you. Learn to inspire people with your words as well as your work. Make them feel like they’re so much a part of your ideas that they simply must buy from you.
As a Black American graphic designer who worked in advertising during the 1950s, ’60s, and ’70s, Emmett McBain not only had incredible talent, he also understood how to sell to other African Americans.
He knew that to sell his clients’ products, his designs needed to resonate with Black audiences, by showing images they related to and language which was familiar to them.
As a grey-bearded Englishman, it’s not easy for me to understand cultural perspectives which are different from mine. But, I’ve learned the value of making designs that speak to people whatever they look like and wherever they live. Not only to sell my clients’ products to them but so that everyone feels their needs are being listened to and their importance understood.
Born in Chicago in 1935, Emmett McBain was an African American graphic designer whose work had a remarkable impact on the representation of African Americans in advertising.
McBain studied at several art schools and graduated after studying commercial art at the American Academy of Art in Chicago.
Vince Cullers and Associates—the first African American-owned full-service advertising agency in the USA was founded in 1958. Cullers believed that “selling Black” needed “thinking Black” if advertisers were to reach African American consumers. He not only sold to African Americans but helped to educate them in advertising and employ them at his agency. One of those employees was the newly graduated Emmett McBain.
From left: Shirley & Lee, Let The Good Times Roll, 1956. Basso-Valdambrini Quintet — Exciting 6, 1967. Davis, Miles — Blue Haze by Tom Hannan, 1956. Bird — Diz — Bud — Max by Burt Goldblatt, 1954. (Large preview)
With two years of commercial experience behind him, McBain left Vince Cullers and moved to Playboy Records as an assistant art editor. But, he didn’t stay in a junior role for long and quickly became Playboy’s promotion art director. McBain carved out a niche as a cover artist, and in 1958 his Playboy Jazz All-Stars album art was named Billboard Magazine’s Album Cover of the Week.
In 1959, McBain moved on from Playboy, but he didn’t leave behind his work on album covers. His newly-founded design studio McBain Associates regularly worked with Mercury Records, and he designed over 75 album covers by the time he was 24.
Several record cover designs by McBain Associates during the 1960s. (Large preview)
McBain returned to Vince Cullers Advertising as its creative director in 1968 and made some of his most important contributions to advertising for Black Americans.
Before the 1960s, Black consumers were largely ignored by brand-name manufacturers and the mainstream advertising industry which served them. Advertising to African Americans was limited mainly to newspapers specific to Black audiences.
White clients were reticent to spend money selling to African Americans as advertisers saw black consumers as having little disposable income. In the politically charged atmosphere of the time, companies were also afraid to associate their brands with African Americans.
African Americans were unrepresented in the advertising industry too, and the number of Black people working in advertising was tiny. But, in the mid-1960s, advertising agencies began to recruit African Americans. These agencies hoped their experiences would make clients’ messages more relatable to African American audiences who, by then, spent almost $30 billion each year.
Left: Where the flavor is, advertisement for Philip Morris by Burrell-McBain Inc. Center: True Two, an advertisement for Lorillard Tobacco Company by Vince Cullers Advertising, Inc. in 1968. Right: Black is Beautiful, an advertisement for Vince Cullers Advertising, Inc., creative direction by Emmett McBain in 1968. (Large preview)
McBain’s work featured positive messages for African Americans and the Black community. He used images of everyday people in usual surroundings for clients who included Newport’s menthol cigarettes, Philip Morris’ Marlboro, and SkinFood Cosmetics’ beauty products specifically for Black skin. Like Vince Cullers, McBain knew that selling to Black consumers meant understanding their different needs. He understood that — as his future partner, copywriter Thomas Burrell said — “Black people are not dark-skinned white people.”
In 1971, Emmett McBain partnered with Burrell to form Burrell-McBain Inc., which they described in an advertisement as “An Advertising Agency for the Black Commercial Market.” Rather than exploit Black Americans, Burrell and McBain aimed to form authentic and respectful relationships with Black audiences.
Before Burrell and McBain, the iconic white cowboy was the face of Marlboro cigarettes. But, McBain’s Marlboro man was more relatable to African American smokers. Whereas Marlboro’s cowboy was shown in an idealized version of the American West, McBain’s Black characters were seen smoking in everyday surroundings.
Their Marlboro campaign was a huge success and Burrell and McBain went on to win Coca-Cola and McDonald’s as clients, helping them become the largest Black-owned advertising agency in America.
McBain left the agency he co-founded in 1974 and set out on a career as an artist. He opened his art gallery, The Black Eye, and formed a consultancy — also called The Black Eye — which helped agencies to better connect with the African American community.
Emmett McBain died of cancer in 2012 and since then has been recognized by AIGA, the Society of Typographic Arts, and the Art Directors Clubs of Chicago and Detroit.
Sadly, there hasn’t been a book published about Emmett McBain and his contribution to advertising and design. I haven’t heard his name mentioned at design conferences or seen him referenced in articles relating to modern-day design and particularly the web.
McBain’s later work had a profound impact on advertising from the 1960s onwards, but I’m especially fond of his record cover designs. The burst with energy which reflects the jazz music McBain loved. His colors are exciting and vibrant. His choice of typefaces and the ways he deconstructed and rebuilt type are inspiring. There’s plenty to inspire us in the work of Emmett McBain.
Aligning Vertical Content
Whichever graphic style I choose, the HTML needed to implement this first McBain-inspired design is identical. I need three structural elements; a header which contains my SVG logo and headlines, main, and an aside which includes a table of Citroën DS production numbers:
<header> <svg>…</svg> <div> <svg>…</svg> <svg>…</svg> </div> </header> <main> <p>…</p> </main> <aside> <table>…</table> </aside>
The vertical direction and circles in this first design was inspired by Emmett McBain’s Guitars Woodwind & Bongos record cover, 1960. (Large preview)
For scalability across screen sizes, I use SVGs for the two headlines in my header. Using SVG provides an extra degree of consistency for the second headline’s stroked text, but I mustn’t forget accessibility.
In issue 8, I explained how to help people who use assistive technology using adding ARIA to SVGs. I add an ARIA role attribute, plus a level attribute which replaces the missing semantics. Adding a title element also helps assistive technology understand the difference between several blocks of SVG, but browsers won’t display this title:
<svg role="heading" aria-level="1" aria-label="Citroën DS"> <title>Citroën DS</title> <path>…</path> </svg>
When someone reads numerical tabular data, their eyes scan down columns and then across rows. (Large preview)
To begin this design, I add basic foundation styles for every screen size starting with foreground and background colours:
body { background-color: #fff; color: #262626; }
I add pixel precise dimensions to the SVG elements in my header, then use auto horizontal margins to centre the Citroën logo:
header > svg { margin: 0 auto; width: 80px; } header div svg { max-height: 80px; }
In his inspiring design, Emmet McBain included vertical black stripes to add structure to his layout. To achieve a similar effect without adding extra elements to my HTML, I add dark borders to both the left and right sides of my main paragraph:
main p { padding: .75rem 0; border-right: 5px solid #262626; border-left: 5px solid #262626; }
The same technique adds a similar effect to my table of Citroën DS production numbers. I add the two outer borders to my table:
aside table { width: 100%; border-right: 5px solid #262626; border-left: 5px solid #262626; border-collapse: collapse; }
Then, I add a third rule to the right of my table headers:
aside th { padding-right: .75rem; padding-left: .75rem; border-right: 5px solid #262626; }
By ensuring every cell fills half the width of my table, this vertical stripe runs down the centre, from top to bottom:
aside th, aside td { width: 50%; box-sizing: border-box; }
When someone reads numerical tabular data like these pairs of years and production numbers, their eyes scan down the year column. Then, they follow across to see how many cars Citroën manufactured during that year. People might also compare production numbers looking for either high or low numbers.
To make their comparisons easier, I align production numbers to the right:
aside td { text-align: right; }
Depending on the OpenType features available in the font you’ve chosen, you can also improve tabular data readability by specifying lining rather than old-style numerals. Some old-style numerals—including 3, 4, 7, and 9 — have descenders which can drop below the baseline. These make longer strings of numbers more difficult to read. Lining numerals, on the other hand, include numbers that sit on the baseline.
(Large preview)
OpenType features also control the width of numerals which makes comparing strings of numbers in a table easier. Whereas proportional numbers can be different sizes, tabular numerals are all the same width so tens, hundreds, and thousands will be more precisely aligned:
aside td { font-variant-numeric: lining-nums tabular-nums; }
(Large preview)
Finally, I introduce the circle motif to the bottom of this small screen design. I don’t want to include these circular images in my HTML, so I use a CSS generated content data URI where the image file is encoded into a string:
aside:after { content: url("data:image/svg+xml…"); }
When someone reads numerical tabular data, their eyes scan down columns and then across rows. (Large preview)
I’m frequently surprised at how few changes I need to make to develop designs for multiple screen sizes. Switching from small screens to medium-size designs often requires no more than minor changes to type sizes and introducing simple layout styles.
I start by horizontally aligning the Citroën logo and SVG headlines in my header. On medium and large screens, this logo comes first in my HTML, and the headlines come second. But visually the elements are reversed. Flexbox is the ideal tool for making this switch, simply by changing the default flex-direction value from row to flex-direction: row-reverse:
@media (min-width: 48em) { header { display: flex; flex-direction: row-reverse; align-items: flex-start; } }
Earlier, I gave my logo a precise width. But, I want the headlines to fill all the remaining horizontal space, so I give their parent division a flex-grow value of 1. Then, I add a viewport-based margin to keep the headlines and logo apart:
header div { flex-grow: 1; margin-right: 2vw; }
For this medium-size design, I developed the layout using a symmetrical three-column grid, which I apply to both main and aside elements:
main, aside { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
Then, using the same technique I used for the aside element previously, I generate two images for the main element and place them into the first and third columns in my grid:
main:before { grid-column: 1; content: url("data:image/svg+xml…"); } main:after { grid-column: 3; content: url("data:image/svg+xml…"); }
I repeat the process for the aside element, with this new :after content replacing the generated image I added for small screens:
aside:before { grid-column: 1; content: url("data:image/svg+xml…"); } aside:after { grid-column: 3; content: url("data:image/svg+xml…"); }
The extra space available on medium-size screens allows me to introduce more of the vertical stripe motif, which is inspired by Emmett McBain’s original design. The vertical borders on the left and right of the main paragraph are already in place, so all that remains is for me to change its writing-mode to vertical-rl and rotate it by 180 degrees:
main p { justify-self: center; writing-mode: vertical-rl; transform: rotate(180deg); }
Some browsers respect grid properties and will stretch a table to the full height of the grid row without help. Others need a little help, so for them, I give my production numbers table an explicit height which adds an even amount of space between its rows:
aside table { height: 100%; }
The full effect of this McBain-inspired design comes when screens are wide enough to display main and aside elements side-by-side. I apply a simple two-column symmetrical grid:
@media (min-width: 64em) { body { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } }
Then, I place the main and aside elements using line numbers, with the header spanning the full-width of my layout:
header { grid-column: 1 / -1; } main { grid-column: 1; } aside { grid-column: 2; }
Left: Circular motifs in this version of my design. Right: Colourful portraits of the iconic Citroën DS replace the original circles. (Large preview)
Looking Unstructured
The bright colours and irregular shapes of blocks in this next design are as unexpected as the jazz which inspired Emmett McBain’s original. While the arrangement of these layout might look unstructured, the code I need to develop it certainly isn’t. In fact, there are just two structural elements, header and main:
<header> <svg id="logo">…</svg> <h1>…</h1> <p>…</p> <svg>…</svg> </header> <main> <small>…</small> <h2>…</h2> <p>…</p> </main>
The bright colours and irregular shapes in this design was inspired by Emmett McBain’s The Legend of Bix record cover, 1959. (Large preview)
I start by applying background and foreground colours, plus a generous amount of padding to allows someone’s eyes to roam around and through spaces in the design:
body { padding: 2rem; background-color: #fff; color: #262626; }
Those brightly coloured blocks would dominate the limited space available on a small screen. Instead, I add the same bright colours to my header:
header { padding: 2rem 2rem 4rem; background-color: #262626; } header h1 { color: #c2ce46; } header p { color: #fc88dc; }
Irregular shapes are an aspect of this design which I want visible at every screen size, so I use a polygon path to clip the header. Only areas inside the clip area remain visible, everything else turns transparent:
header { -webkit-clip-path: polygon(…); clip-path: polygon(…); }
Attention to even the smallest details of typography lets people know that every aspect of a design has been carefully considered. A horizontal line in the small element at the start of my main content changes length alongside the text.
I don’t want to add a presentational horizontal rule to my HTML, and instead opt for a combination of Flexbox and pseudo-elements in my CSS. First, I style the small element’s text:
main small { font-size: .8em; letter-spacing: .15em; line-height: .8; text-transform: uppercase; }
Then, I add an :after pseudo-element with a thin bottom border which matches the colour of my text:
main small:after { content: ""; display: block; margin-left: .75rem; border-bottom: 1px solid #262626; }
Colourful content brings this small-screen design to life. (Large preview)
Adding flex properties aligns the text and my pseudo-element to the bottom of the small element. By giving the pseudo-element a flex-grow value of 1 allows it to change its width to compliment longer and shorter strings of text:
main small { display: flex; align-items: flex-end; } main small:after { flex-grow: 1; }
I enjoy surprises, and there’s more to my second-level “Champion de France” headline than meets the eye.
Almost ten years ago, Dave Rupert released Lettering.js, a jQuery plugin which uses Javascript to wrap individual letters, lines, and words text with span elements. Those separate elements can then be styled in any number of ways. With just one multi-coloured element in this design, I apply the same technique without serving a script:
<h2>Champion <span>d</span><span>e</span> <span>F</span><span>r</span><span>a</span><span>n</span><span>c</span><span>e</span></h2>
Then, I give each selected letter its own colour:
h2 span:nth-of-type(1) { color: #c43d56; } h2 span:nth-of-type(2) { color: #905dd8; } h2 span:nth-of-type(3) { color: #377dab; }
I’ve always viewed the challenge of responsive design as an opportunity to be creative and to make the most of every screen size. The extra space available on medium and large screens allows me to introduce the large, irregularly shaped blocks of color, which makes this design unexpected.
First, I apply grid properties and an eight-column symmetrical grid to the body element:
@media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(8, 1fr); } }
Then, I place my header into three of those columns. With the coloured blocks now visible, I change the header’s background colour to a dark grey:
header { grid-column: 4 / 7; background-color: #262626; }
Centring content both horizontally and vertically was a challenge before Flexbox, but now aligning and justifying my header content is simple:
header { display: flex; flex-direction: column; align-items: center; justify-content: center; }
I change the colour of my header’s text elements:
header h1 { color: #fed36e; } header p { color: #fff; }
Then, I apply negative horizontal margins, so my header overlaps elements close to it:
header { margin-right: 1.5vw; margin-left: -1.5vw; }
My main element needs no extra styling, and I place it onto my grid using line numbers:
main { grid-column: 7 / -1; }
Elements needed to develop a design needn’t be in HTML. Pseudo-elements created in CSS can take their place, which keeps HTML free from any presentation. I use a :before pseudo-element applied to the body:
body:before { display: block; content: ""; }
Then, I add a data URI background image which will cover the entire pseudo-element regardless of its size:
body:before { background-image: url("data:image/svg+xml…"); background-position: 0 0; background-repeat: no-repeat; background-size: cover; }
CSS Grid treats pseudo-elements just like any other, allowing me to place those colourful blocks into my grid using line numbers:
body:before { grid-column: 1 / 4; }
Whereas developers mostly use media query breakpoints to introduce significant changes to a layout, sometimes, only minor changes are needed to tweak a design. Jeremy Keith calls these moments “tweakpoints.”
This medium-size McBain-inspired design works well at larger sizes, but I want to tweak its layout and add more detail to the very largest screens. I start by adding four extra columns to my grid:
@media (min-width: 82em) { body { grid-template-columns: repeat(12, 1fr); } }
Then I reposition the generated colour blocks, header, and main elements using new line numbers:
body:before { grid-column: 1 / 8; } header { grid-column: 7 / 10; } main { grid-column: 9 / -1; }
These elements now overlap, so to prevent them from forming new rows in my grid, I give them all the same grid-row value:
body:before, header, main { grid-row: 1; }
This tweak to my design adds another block of colour between the header and main. To preserve the semantics of my HTML, I add a pseudo-element and a data URI image before my main content:
main:before { display: block; content: url("data:image/svg+xml…"); float: left; margin-right: 2vw; width: 10vw; }
The monochrome version (left) has an entirely different feeling from the brightly coloured blocks in my chosen design (right.) (Large preview)
Deconstructing Type-images
Early in his career, Emmett McBain’s record cover designs showed he had a flair for typography. He was often playful with type, deconstructing, and rebuilding it to form unexpected shapes. This control over type has never been easy online, but SVG makes almost everything possible.
Deconstructing and rebuilding it to form unexpected shapes adds character to even the smallest screens. (Large preview)
This next McBain-inspired design relies on SVG and just two structural HTML elements; a header which contains the large type-based graphic, a main element for my content:
<header> <h1>…</h1> <p>…</p> <svg>…</svg> </header> <main> <h2>…<h2> <div>…</div> <svg>…</svg> </main>
I need very few foundation styles to start developing this design. First, I add background and foreground colours and padding inside my two elements:
body { background-color: #fff; color: #262626; } header, main { padding: 2rem; }
Second, I define styles for my type which includes both headings and the paragraph of text which follows them:
h1, h2, h1 + p { letter-spacing: .05em; line-height: 1.4; text-transform: uppercase; }
I give my main content a rich purple background which matches the Citroën’s colour in the panel opposite:
main { background-color: #814672; color: #fff; }
This design is dominated by a large graphic that includes a profile of the Citroën DS and a stylized type-image of the words “Champion de France.” The arrangement of its letters would be tricky to accomplish using CSS positioning and transforms, making SVG the perfect choice.
This SVG contains three groups of paths. The first includes outlines of the words “Champion de:”
<svg> <g id="champion-de"> <path>…</path> </g> </svg>
The next group includes paths for the brightly coloured arrangement of letters. I give each letter a unique id attribute to make it possible to style them individually:
<g id="france"> <path id="letter-f">…</path> <path id="letter-r">…</path> <path id="letter-a">…</path> <path id="letter-n">…</path> <path id="letter-c">…</path> <path id="letter-e">…</path> </g>
Medium-size screens allow me to transform the type-image and introduce columns to my main content. (Large preview)
Then, I add class attributes to group of paths which make up the Citroën DS profile. With these attributes in place, I can adjust the car’s colours to complement different colour themes and even change them across media query breakpoints:
<g id="citroen"> <path class="car-paint">…</path> <path class="car-tyres">…</path> <path class="car-wheels">…</path> <path class="car-shadow">…</path> <path class="car-lights">…</path> <path class="car-stroke">…</path> </g>
Medium-size screens allow me to tweak the positions of my Citroën DS profile and type-image:
@media (min-width: 48em) { header svg { margin-bottom: -6rem; transform: scale(.85) translateY(-4rem) rotate(-20deg); } }
The order of these transforms is important, as various combinations of rotate, scale, and translate give subtly different results. Then, I add columns to my main content:
main div { column-width: 14em; column-gap: 2rem; }
Until now, this main content comes after my header in the document flow. For larger screens, I want those elements to sit side-by-side, so I apply grid properties and twelve columns to the body:
@media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(12, 1fr); } }
I place the header and main into my grid using line numbers. The header spans seven columns, while the main content spans only five, producing an asymmetrical layout from a symmetrical grid:
header { grid-column: 1 / 8; } main { grid-column: 8 / -1; }
The type-image in this design was inspired by Emmett McBain’s Caravan record cover for Eddie Layton and his organ. (Large preview)
Scaling Graphical Text
The distinction between SVG and HTML has become blurred, the more I use SVG into my work. SVG is an XML-based format and is entirely at home when it’s incorporated into HTML. This final McBain-inspired design relies on SVG in HTML not just for its striking imagery, but also for text.
Most of my styling is visible to people who use even the smallest screens. (Large preview)
To develop this striking red and black design, I need four structural HTML elements. A header contains an image of the iconic Citroën DS. The banner division includes a large headline developed using SVG text. The main element includes my running text, and finally an aside for supplementary content:
<svg>…</svg> <header> <svg>…</svg> </header> <div id="banner"> <svg>…</svg> </div> <main> <div id="heading"> <svg role="heading" aria-level="1">…</svg> </div> <div class="content"> <p class="dropcap">…</p> <p>…</p> </div> </main> <aside> <small>…</small> <svg role="heading" aria-level="2">…</svg> <p>…</p> <figure>…</figure> <svg role="heading" aria-level="2">…</svg> <p>…</p> </aside>
I used to think using SVG to render text was as inappropriate as setting text within images but having used SVG more, I realize I was wrong.
In issue 8, I explained how like HTML text, SVG text is accessible and selectable. It also has the advantage of being infinitely style-able using clipping paths, gradient fills, filters, masks, and strokes.
The banner division’s headline includes two text elements. The first contains the large word “Champion,” the second contains “de France.” Pairs of x and y coordinates on each tspan element place those words precisely where I want them to develop a solid slab of text:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 850 360"> <title>Champion de France</title> <g fill="#ff" fill-rule="evenodd"> <text> <tspan class="title__dropcap" x="0" y="240">C</tspan> <tspan class="title" x="180" y="160">hampion</tspan> </text> <text> <tspan class="title__small" x="600" y="260">de France</tspan> </text> </g> </svg>
Whether I choose to incorporate this SVG into my HTML or link to it as an external image, I can use CSS to define its style. This headline is a linked image, so I add my styles to the SVG file:
<svg> <style type="text/css"> <![CDATA[ text { color: #fff; } .title { font-family: Clarendon URW; font-size: 150px; } .title__dropcap { font-family: Clarendon URW; font-size: 300px; text-transform: lowercase; } .title__small { font-family: Obviously; font-size: 85px; text-transform: uppercase; } ]]> </style> </svg>
I start by adding foundation colour and typography styles. I’ve chosen to indent the start of each new paragraph, so I remove all bottom margins and add a 2ch wide indent to every subsequent paragraph:
body { background-color: #a73448; color: #fff; } .content p { margin-bottom: 0; } .content p + p { text-indent: 2ch; }
The dark grey background and red text of my aside element are opposite to those elsewhere in my design. Increasing lightness and saturation makes colours appear more vibrant against dark backgrounds:
aside { background-color: #262626; color: #d33c56; }
Medium-size screens allow me to tweak the design of my content to get the most from the extra space available. (Large preview)
Medium-size screens allow me to tweak the design of my content to get the most from the extra space available. I use two different multiple-column layout properties. First, specifying two columns of variable widths for my content division. Then, any number of columns which will all have a width of 16em:
@media (min-width: 48em) { .content { column-count: 2; column-gap: 2rem; } aside { column-width: 16em; column-gap: 2rem; } }
The typography in this design was inspired by Emmett McBain’s Bill Harris, Jazz Guitar record cover, 1960. (Large preview)
Most of my styling is visible to people who use even the smallest screens, so developing a large-screen layout involves applying grid properties and twelve columns to the body element:
@media (min-width: 64em) { body { display: grid; grid-template-columns: repeat(12, 1fr); } }
I place the Citroën logo into the first column:
body > svg { grid-column: 1; }
Then, the header which contains an image of the iconic DS spans four columns:
header { grid-column: 3 / span 4; }
Both the banner division with its stylish SVG headline and my main content’s running text occupy eight columns:
#banner, main { grid-column: 1 / span 8; }
And finally, the reversed-theme aside element occupies three columns on the right of my design. To ensure this content spans every row from the top to bottom of my layout, I place it using row line numbers:
aside { grid-column: 10 / -1; grid-row: 1 / 6; }
Even a limited colour palette like this one offers plenty of creative options. (Large preview)
Read More From The Series
NB: Smashing members have access to a beautifully designed PDF of Andy’s Inspired Design Decisions magazine and full code examples from this article. You can also buy the PDF and examples from this, and every issue from Andy’s website.
(ra, yk, il)
Website Design & SEO Delray Beach by DBL07.co
Delray Beach SEO
source http://www.scpie.org/inspired-design-decisions-with-emmett-mcbain-art-direction-as-social-equity/ source https://scpie.tumblr.com/post/624894511645114369
0 notes
scpie · 4 years
Text
Inspired Design Decisions With Emmett McBain: Art Direction As Social Equity
Emmett McBain was a Black American graphic designer whose work had a remarkable impact on the representation of Black Americans in advertising. He co-founded what became the biggest Black-owned agency in the USA. McBain designed almost 75 record covers by the time he was 24, and in the penultimate of his Inspired Design Decisions series, Andy Clarke will explain how his work can inspire what we design for the web.
Along with advertising, selling is a skill that people often frown on. It’s true: no one likes someone coercing or misleading them, and nobody enjoys being interrupted.
But being sold to well — by a salesperson who understands your aspirations, motivations, and needs — can be an experience that benefits buyers and sellers.
Learning how to sell was one of the best things I did early on in my working life. Back then, I sold photographic equipment, and although I never enjoyed the stress which came from meeting sales targets, I always enjoyed meeting with photographers.
Finding new customers often meant cold-calling, knocking on a studio door, and frequently being rejected. I spent time talking about someone’s work before I mentioned the products my company paid me to sell. I was genuinely interested in photography, but also I’d learned that understanding someone’s problems was as crucial as explaining how my products could help solve them.
What I learned has served me immeasurably well since I stopped selling cameras and started selling my talent. It’s helped me deal with people, not least in presenting (read: selling) my ideas to clients.
It’s a fact of life that not always the best idea or the best execution wins a pitch or presentation. It’s often the idea which is being sold by the best salesperson.
Selling ideas should become one of your best skills, so learn to sell. Learn how to talk about your work so that the person you’re selling to understands your ideas and why they should buy them from you. Learn to inspire people with your words as well as your work. Make them feel like they’re so much a part of your ideas that they simply must buy from you.
As a Black American graphic designer who worked in advertising during the 1950s, ’60s, and ’70s, Emmett McBain not only had incredible talent, he also understood how to sell to other African Americans.
He knew that to sell his clients’ products, his designs needed to resonate with Black audiences, by showing images they related to and language which was familiar to them.
As a grey-bearded Englishman, it’s not easy for me to understand cultural perspectives which are different from mine. But, I’ve learned the value of making designs that speak to people whatever they look like and wherever they live. Not only to sell my clients’ products to them but so that everyone feels their needs are being listened to and their importance understood.
Born in Chicago in 1935, Emmett McBain was an African American graphic designer whose work had a remarkable impact on the representation of African Americans in advertising.
McBain studied at several art schools and graduated after studying commercial art at the American Academy of Art in Chicago.
Vince Cullers and Associates—the first African American-owned full-service advertising agency in the USA was founded in 1958. Cullers believed that “selling Black” needed “thinking Black” if advertisers were to reach African American consumers. He not only sold to African Americans but helped to educate them in advertising and employ them at his agency. One of those employees was the newly graduated Emmett McBain.
From left: Shirley & Lee, Let The Good Times Roll, 1956. Basso-Valdambrini Quintet — Exciting 6, 1967. Davis, Miles — Blue Haze by Tom Hannan, 1956. Bird — Diz — Bud — Max by Burt Goldblatt, 1954. (Large preview)
With two years of commercial experience behind him, McBain left Vince Cullers and moved to Playboy Records as an assistant art editor. But, he didn’t stay in a junior role for long and quickly became Playboy’s promotion art director. McBain carved out a niche as a cover artist, and in 1958 his Playboy Jazz All-Stars album art was named Billboard Magazine’s Album Cover of the Week.
In 1959, McBain moved on from Playboy, but he didn’t leave behind his work on album covers. His newly-founded design studio McBain Associates regularly worked with Mercury Records, and he designed over 75 album covers by the time he was 24.
Several record cover designs by McBain Associates during the 1960s. (Large preview)
McBain returned to Vince Cullers Advertising as its creative director in 1968 and made some of his most important contributions to advertising for Black Americans.
Before the 1960s, Black consumers were largely ignored by brand-name manufacturers and the mainstream advertising industry which served them. Advertising to African Americans was limited mainly to newspapers specific to Black audiences.
White clients were reticent to spend money selling to African Americans as advertisers saw black consumers as having little disposable income. In the politically charged atmosphere of the time, companies were also afraid to associate their brands with African Americans.
African Americans were unrepresented in the advertising industry too, and the number of Black people working in advertising was tiny. But, in the mid-1960s, advertising agencies began to recruit African Americans. These agencies hoped their experiences would make clients’ messages more relatable to African American audiences who, by then, spent almost $30 billion each year.
Left: Where the flavor is, advertisement for Philip Morris by Burrell-McBain Inc. Center: True Two, an advertisement for Lorillard Tobacco Company by Vince Cullers Advertising, Inc. in 1968. Right: Black is Beautiful, an advertisement for Vince Cullers Advertising, Inc., creative direction by Emmett McBain in 1968. (Large preview)
McBain’s work featured positive messages for African Americans and the Black community. He used images of everyday people in usual surroundings for clients who included Newport’s menthol cigarettes, Philip Morris’ Marlboro, and SkinFood Cosmetics’ beauty products specifically for Black skin. Like Vince Cullers, McBain knew that selling to Black consumers meant understanding their different needs. He understood that — as his future partner, copywriter Thomas Burrell said — “Black people are not dark-skinned white people.”
In 1971, Emmett McBain partnered with Burrell to form Burrell-McBain Inc., which they described in an advertisement as “An Advertising Agency for the Black Commercial Market.” Rather than exploit Black Americans, Burrell and McBain aimed to form authentic and respectful relationships with Black audiences.
Before Burrell and McBain, the iconic white cowboy was the face of Marlboro cigarettes. But, McBain’s Marlboro man was more relatable to African American smokers. Whereas Marlboro’s cowboy was shown in an idealized version of the American West, McBain’s Black characters were seen smoking in everyday surroundings.
Their Marlboro campaign was a huge success and Burrell and McBain went on to win Coca-Cola and McDonald’s as clients, helping them become the largest Black-owned advertising agency in America.
McBain left the agency he co-founded in 1974 and set out on a career as an artist. He opened his art gallery, The Black Eye, and formed a consultancy — also called The Black Eye — which helped agencies to better connect with the African American community.
Emmett McBain died of cancer in 2012 and since then has been recognized by AIGA, the Society of Typographic Arts, and the Art Directors Clubs of Chicago and Detroit.
Sadly, there hasn’t been a book published about Emmett McBain and his contribution to advertising and design. I haven’t heard his name mentioned at design conferences or seen him referenced in articles relating to modern-day design and particularly the web.
McBain’s later work had a profound impact on advertising from the 1960s onwards, but I’m especially fond of his record cover designs. The burst with energy which reflects the jazz music McBain loved. His colors are exciting and vibrant. His choice of typefaces and the ways he deconstructed and rebuilt type are inspiring. There’s plenty to inspire us in the work of Emmett McBain.
Aligning Vertical Content
Whichever graphic style I choose, the HTML needed to implement this first McBain-inspired design is identical. I need three structural elements; a header which contains my SVG logo and headlines, main, and an aside which includes a table of Citroën DS production numbers:
<header> <svg>…</svg> <div> <svg>…</svg> <svg>…</svg> </div> </header> <main> <p>…</p> </main> <aside> <table>…</table> </aside>
The vertical direction and circles in this first design was inspired by Emmett McBain’s Guitars Woodwind & Bongos record cover, 1960. (Large preview)
For scalability across screen sizes, I use SVGs for the two headlines in my header. Using SVG provides an extra degree of consistency for the second headline’s stroked text, but I mustn’t forget accessibility.
In issue 8, I explained how to help people who use assistive technology using adding ARIA to SVGs. I add an ARIA role attribute, plus a level attribute which replaces the missing semantics. Adding a title element also helps assistive technology understand the difference between several blocks of SVG, but browsers won’t display this title:
<svg role="heading" aria-level="1" aria-label="Citroën DS"> <title>Citroën DS</title> <path>…</path> </svg>
When someone reads numerical tabular data, their eyes scan down columns and then across rows. (Large preview)
To begin this design, I add basic foundation styles for every screen size starting with foreground and background colours:
body { background-color: #fff; color: #262626; }
I add pixel precise dimensions to the SVG elements in my header, then use auto horizontal margins to centre the Citroën logo:
header > svg { margin: 0 auto; width: 80px; } header div svg { max-height: 80px; }
In his inspiring design, Emmet McBain included vertical black stripes to add structure to his layout. To achieve a similar effect without adding extra elements to my HTML, I add dark borders to both the left and right sides of my main paragraph:
main p { padding: .75rem 0; border-right: 5px solid #262626; border-left: 5px solid #262626; }
The same technique adds a similar effect to my table of Citroën DS production numbers. I add the two outer borders to my table:
aside table { width: 100%; border-right: 5px solid #262626; border-left: 5px solid #262626; border-collapse: collapse; }
Then, I add a third rule to the right of my table headers:
aside th { padding-right: .75rem; padding-left: .75rem; border-right: 5px solid #262626; }
By ensuring every cell fills half the width of my table, this vertical stripe runs down the centre, from top to bottom:
aside th, aside td { width: 50%; box-sizing: border-box; }
When someone reads numerical tabular data like these pairs of years and production numbers, their eyes scan down the year column. Then, they follow across to see how many cars Citroën manufactured during that year. People might also compare production numbers looking for either high or low numbers.
To make their comparisons easier, I align production numbers to the right:
aside td { text-align: right; }
Depending on the OpenType features available in the font you’ve chosen, you can also improve tabular data readability by specifying lining rather than old-style numerals. Some old-style numerals—including 3, 4, 7, and 9 — have descenders which can drop below the baseline. These make longer strings of numbers more difficult to read. Lining numerals, on the other hand, include numbers that sit on the baseline.
(Large preview)
OpenType features also control the width of numerals which makes comparing strings of numbers in a table easier. Whereas proportional numbers can be different sizes, tabular numerals are all the same width so tens, hundreds, and thousands will be more precisely aligned:
aside td { font-variant-numeric: lining-nums tabular-nums; }
(Large preview)
Finally, I introduce the circle motif to the bottom of this small screen design. I don’t want to include these circular images in my HTML, so I use a CSS generated content data URI where the image file is encoded into a string:
aside:after { content: url("data:image/svg+xml…"); }
When someone reads numerical tabular data, their eyes scan down columns and then across rows. (Large preview)
I’m frequently surprised at how few changes I need to make to develop designs for multiple screen sizes. Switching from small screens to medium-size designs often requires no more than minor changes to type sizes and introducing simple layout styles.
I start by horizontally aligning the Citroën logo and SVG headlines in my header. On medium and large screens, this logo comes first in my HTML, and the headlines come second. But visually the elements are reversed. Flexbox is the ideal tool for making this switch, simply by changing the default flex-direction value from row to flex-direction: row-reverse:
@media (min-width: 48em) { header { display: flex; flex-direction: row-reverse; align-items: flex-start; } }
Earlier, I gave my logo a precise width. But, I want the headlines to fill all the remaining horizontal space, so I give their parent division a flex-grow value of 1. Then, I add a viewport-based margin to keep the headlines and logo apart:
header div { flex-grow: 1; margin-right: 2vw; }
For this medium-size design, I developed the layout using a symmetrical three-column grid, which I apply to both main and aside elements:
main, aside { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
Then, using the same technique I used for the aside element previously, I generate two images for the main element and place them into the first and third columns in my grid:
main:before { grid-column: 1; content: url("data:image/svg+xml…"); } main:after { grid-column: 3; content: url("data:image/svg+xml…"); }
I repeat the process for the aside element, with this new :after content replacing the generated image I added for small screens:
aside:before { grid-column: 1; content: url("data:image/svg+xml…"); } aside:after { grid-column: 3; content: url("data:image/svg+xml…"); }
The extra space available on medium-size screens allows me to introduce more of the vertical stripe motif, which is inspired by Emmett McBain’s original design. The vertical borders on the left and right of the main paragraph are already in place, so all that remains is for me to change its writing-mode to vertical-rl and rotate it by 180 degrees:
main p { justify-self: center; writing-mode: vertical-rl; transform: rotate(180deg); }
Some browsers respect grid properties and will stretch a table to the full height of the grid row without help. Others need a little help, so for them, I give my production numbers table an explicit height which adds an even amount of space between its rows:
aside table { height: 100%; }
The full effect of this McBain-inspired design comes when screens are wide enough to display main and aside elements side-by-side. I apply a simple two-column symmetrical grid:
@media (min-width: 64em) { body { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } }
Then, I place the main and aside elements using line numbers, with the header spanning the full-width of my layout:
header { grid-column: 1 / -1; } main { grid-column: 1; } aside { grid-column: 2; }
Left: Circular motifs in this version of my design. Right: Colourful portraits of the iconic Citroën DS replace the original circles. (Large preview)
Looking Unstructured
The bright colours and irregular shapes of blocks in this next design are as unexpected as the jazz which inspired Emmett McBain’s original. While the arrangement of these layout might look unstructured, the code I need to develop it certainly isn’t. In fact, there are just two structural elements, header and main:
<header> <svg id="logo">…</svg> <h1>…</h1> <p>…</p> <svg>…</svg> </header> <main> <small>…</small> <h2>…</h2> <p>…</p> </main>
The bright colours and irregular shapes in this design was inspired by Emmett McBain’s The Legend of Bix record cover, 1959. (Large preview)
I start by applying background and foreground colours, plus a generous amount of padding to allows someone’s eyes to roam around and through spaces in the design:
body { padding: 2rem; background-color: #fff; color: #262626; }
Those brightly coloured blocks would dominate the limited space available on a small screen. Instead, I add the same bright colours to my header:
header { padding: 2rem 2rem 4rem; background-color: #262626; } header h1 { color: #c2ce46; } header p { color: #fc88dc; }
Irregular shapes are an aspect of this design which I want visible at every screen size, so I use a polygon path to clip the header. Only areas inside the clip area remain visible, everything else turns transparent:
header { -webkit-clip-path: polygon(…); clip-path: polygon(…); }
Attention to even the smallest details of typography lets people know that every aspect of a design has been carefully considered. A horizontal line in the small element at the start of my main content changes length alongside the text.
I don’t want to add a presentational horizontal rule to my HTML, and instead opt for a combination of Flexbox and pseudo-elements in my CSS. First, I style the small element’s text:
main small { font-size: .8em; letter-spacing: .15em; line-height: .8; text-transform: uppercase; }
Then, I add an :after pseudo-element with a thin bottom border which matches the colour of my text:
main small:after { content: ""; display: block; margin-left: .75rem; border-bottom: 1px solid #262626; }
Colourful content brings this small-screen design to life. (Large preview)
Adding flex properties aligns the text and my pseudo-element to the bottom of the small element. By giving the pseudo-element a flex-grow value of 1 allows it to change its width to compliment longer and shorter strings of text:
main small { display: flex; align-items: flex-end; } main small:after { flex-grow: 1; }
I enjoy surprises, and there’s more to my second-level “Champion de France” headline than meets the eye.
Almost ten years ago, Dave Rupert released Lettering.js, a jQuery plugin which uses Javascript to wrap individual letters, lines, and words text with span elements. Those separate elements can then be styled in any number of ways. With just one multi-coloured element in this design, I apply the same technique without serving a script:
<h2>Champion <span>d</span><span>e</span> <span>F</span><span>r</span><span>a</span><span>n</span><span>c</span><span>e</span></h2>
Then, I give each selected letter its own colour:
h2 span:nth-of-type(1) { color: #c43d56; } h2 span:nth-of-type(2) { color: #905dd8; } h2 span:nth-of-type(3) { color: #377dab; }
I’ve always viewed the challenge of responsive design as an opportunity to be creative and to make the most of every screen size. The extra space available on medium and large screens allows me to introduce the large, irregularly shaped blocks of color, which makes this design unexpected.
First, I apply grid properties and an eight-column symmetrical grid to the body element:
@media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(8, 1fr); } }
Then, I place my header into three of those columns. With the coloured blocks now visible, I change the header’s background colour to a dark grey:
header { grid-column: 4 / 7; background-color: #262626; }
Centring content both horizontally and vertically was a challenge before Flexbox, but now aligning and justifying my header content is simple:
header { display: flex; flex-direction: column; align-items: center; justify-content: center; }
I change the colour of my header’s text elements:
header h1 { color: #fed36e; } header p { color: #fff; }
Then, I apply negative horizontal margins, so my header overlaps elements close to it:
header { margin-right: 1.5vw; margin-left: -1.5vw; }
My main element needs no extra styling, and I place it onto my grid using line numbers:
main { grid-column: 7 / -1; }
Elements needed to develop a design needn’t be in HTML. Pseudo-elements created in CSS can take their place, which keeps HTML free from any presentation. I use a :before pseudo-element applied to the body:
body:before { display: block; content: ""; }
Then, I add a data URI background image which will cover the entire pseudo-element regardless of its size:
body:before { background-image: url("data:image/svg+xml…"); background-position: 0 0; background-repeat: no-repeat; background-size: cover; }
CSS Grid treats pseudo-elements just like any other, allowing me to place those colourful blocks into my grid using line numbers:
body:before { grid-column: 1 / 4; }
Whereas developers mostly use media query breakpoints to introduce significant changes to a layout, sometimes, only minor changes are needed to tweak a design. Jeremy Keith calls these moments “tweakpoints.”
This medium-size McBain-inspired design works well at larger sizes, but I want to tweak its layout and add more detail to the very largest screens. I start by adding four extra columns to my grid:
@media (min-width: 82em) { body { grid-template-columns: repeat(12, 1fr); } }
Then I reposition the generated colour blocks, header, and main elements using new line numbers:
body:before { grid-column: 1 / 8; } header { grid-column: 7 / 10; } main { grid-column: 9 / -1; }
These elements now overlap, so to prevent them from forming new rows in my grid, I give them all the same grid-row value:
body:before, header, main { grid-row: 1; }
This tweak to my design adds another block of colour between the header and main. To preserve the semantics of my HTML, I add a pseudo-element and a data URI image before my main content:
main:before { display: block; content: url("data:image/svg+xml…"); float: left; margin-right: 2vw; width: 10vw; }
The monochrome version (left) has an entirely different feeling from the brightly coloured blocks in my chosen design (right.) (Large preview)
Deconstructing Type-images
Early in his career, Emmett McBain’s record cover designs showed he had a flair for typography. He was often playful with type, deconstructing, and rebuilding it to form unexpected shapes. This control over type has never been easy online, but SVG makes almost everything possible.
Deconstructing and rebuilding it to form unexpected shapes adds character to even the smallest screens. (Large preview)
This next McBain-inspired design relies on SVG and just two structural HTML elements; a header which contains the large type-based graphic, a main element for my content:
<header> <h1>…</h1> <p>…</p> <svg>…</svg> </header> <main> <h2>…<h2> <div>…</div> <svg>…</svg> </main>
I need very few foundation styles to start developing this design. First, I add background and foreground colours and padding inside my two elements:
body { background-color: #fff; color: #262626; } header, main { padding: 2rem; }
Second, I define styles for my type which includes both headings and the paragraph of text which follows them:
h1, h2, h1 + p { letter-spacing: .05em; line-height: 1.4; text-transform: uppercase; }
I give my main content a rich purple background which matches the Citroën’s colour in the panel opposite:
main { background-color: #814672; color: #fff; }
This design is dominated by a large graphic that includes a profile of the Citroën DS and a stylized type-image of the words “Champion de France.” The arrangement of its letters would be tricky to accomplish using CSS positioning and transforms, making SVG the perfect choice.
This SVG contains three groups of paths. The first includes outlines of the words “Champion de:”
<svg> <g id="champion-de"> <path>…</path> </g> </svg>
The next group includes paths for the brightly coloured arrangement of letters. I give each letter a unique id attribute to make it possible to style them individually:
<g id="france"> <path id="letter-f">…</path> <path id="letter-r">…</path> <path id="letter-a">…</path> <path id="letter-n">…</path> <path id="letter-c">…</path> <path id="letter-e">…</path> </g>
Medium-size screens allow me to transform the type-image and introduce columns to my main content. (Large preview)
Then, I add class attributes to group of paths which make up the Citroën DS profile. With these attributes in place, I can adjust the car’s colours to complement different colour themes and even change them across media query breakpoints:
<g id="citroen"> <path class="car-paint">…</path> <path class="car-tyres">…</path> <path class="car-wheels">…</path> <path class="car-shadow">…</path> <path class="car-lights">…</path> <path class="car-stroke">…</path> </g>
Medium-size screens allow me to tweak the positions of my Citroën DS profile and type-image:
@media (min-width: 48em) { header svg { margin-bottom: -6rem; transform: scale(.85) translateY(-4rem) rotate(-20deg); } }
The order of these transforms is important, as various combinations of rotate, scale, and translate give subtly different results. Then, I add columns to my main content:
main div { column-width: 14em; column-gap: 2rem; }
Until now, this main content comes after my header in the document flow. For larger screens, I want those elements to sit side-by-side, so I apply grid properties and twelve columns to the body:
@media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(12, 1fr); } }
I place the header and main into my grid using line numbers. The header spans seven columns, while the main content spans only five, producing an asymmetrical layout from a symmetrical grid:
header { grid-column: 1 / 8; } main { grid-column: 8 / -1; }
The type-image in this design was inspired by Emmett McBain’s Caravan record cover for Eddie Layton and his organ. (Large preview)
Scaling Graphical Text
The distinction between SVG and HTML has become blurred, the more I use SVG into my work. SVG is an XML-based format and is entirely at home when it’s incorporated into HTML. This final McBain-inspired design relies on SVG in HTML not just for its striking imagery, but also for text.
Most of my styling is visible to people who use even the smallest screens. (Large preview)
To develop this striking red and black design, I need four structural HTML elements. A header contains an image of the iconic Citroën DS. The banner division includes a large headline developed using SVG text. The main element includes my running text, and finally an aside for supplementary content:
<svg>…</svg> <header> <svg>…</svg> </header> <div id="banner"> <svg>…</svg> </div> <main> <div id="heading"> <svg role="heading" aria-level="1">…</svg> </div> <div class="content"> <p class="dropcap">…</p> <p>…</p> </div> </main> <aside> <small>…</small> <svg role="heading" aria-level="2">…</svg> <p>…</p> <figure>…</figure> <svg role="heading" aria-level="2">…</svg> <p>…</p> </aside>
I used to think using SVG to render text was as inappropriate as setting text within images but having used SVG more, I realize I was wrong.
In issue 8, I explained how like HTML text, SVG text is accessible and selectable. It also has the advantage of being infinitely style-able using clipping paths, gradient fills, filters, masks, and strokes.
The banner division’s headline includes two text elements. The first contains the large word “Champion,” the second contains “de France.” Pairs of x and y coordinates on each tspan element place those words precisely where I want them to develop a solid slab of text:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 850 360"> <title>Champion de France</title> <g fill="#ff" fill-rule="evenodd"> <text> <tspan class="title__dropcap" x="0" y="240">C</tspan> <tspan class="title" x="180" y="160">hampion</tspan> </text> <text> <tspan class="title__small" x="600" y="260">de France</tspan> </text> </g> </svg>
Whether I choose to incorporate this SVG into my HTML or link to it as an external image, I can use CSS to define its style. This headline is a linked image, so I add my styles to the SVG file:
<svg> <style type="text/css"> <![CDATA[ text { color: #fff; } .title { font-family: Clarendon URW; font-size: 150px; } .title__dropcap { font-family: Clarendon URW; font-size: 300px; text-transform: lowercase; } .title__small { font-family: Obviously; font-size: 85px; text-transform: uppercase; } ]]> </style> </svg>
I start by adding foundation colour and typography styles. I’ve chosen to indent the start of each new paragraph, so I remove all bottom margins and add a 2ch wide indent to every subsequent paragraph:
body { background-color: #a73448; color: #fff; } .content p { margin-bottom: 0; } .content p + p { text-indent: 2ch; }
The dark grey background and red text of my aside element are opposite to those elsewhere in my design. Increasing lightness and saturation makes colours appear more vibrant against dark backgrounds:
aside { background-color: #262626; color: #d33c56; }
Medium-size screens allow me to tweak the design of my content to get the most from the extra space available. (Large preview)
Medium-size screens allow me to tweak the design of my content to get the most from the extra space available. I use two different multiple-column layout properties. First, specifying two columns of variable widths for my content division. Then, any number of columns which will all have a width of 16em:
@media (min-width: 48em) { .content { column-count: 2; column-gap: 2rem; } aside { column-width: 16em; column-gap: 2rem; } }
The typography in this design was inspired by Emmett McBain’s Bill Harris, Jazz Guitar record cover, 1960. (Large preview)
Most of my styling is visible to people who use even the smallest screens, so developing a large-screen layout involves applying grid properties and twelve columns to the body element:
@media (min-width: 64em) { body { display: grid; grid-template-columns: repeat(12, 1fr); } }
I place the Citroën logo into the first column:
body > svg { grid-column: 1; }
Then, the header which contains an image of the iconic DS spans four columns:
header { grid-column: 3 / span 4; }
Both the banner division with its stylish SVG headline and my main content’s running text occupy eight columns:
#banner, main { grid-column: 1 / span 8; }
And finally, the reversed-theme aside element occupies three columns on the right of my design. To ensure this content spans every row from the top to bottom of my layout, I place it using row line numbers:
aside { grid-column: 10 / -1; grid-row: 1 / 6; }
Even a limited colour palette like this one offers plenty of creative options. (Large preview)
Read More From The Series
NB: Smashing members have access to a beautifully designed PDF of Andy’s Inspired Design Decisions magazine and full code examples from this article. You can also buy the PDF and examples from this, and every issue from Andy’s website.
(ra, yk, il)
Website Design & SEO Delray Beach by DBL07.co
Delray Beach SEO
source http://www.scpie.org/inspired-design-decisions-with-emmett-mcbain-art-direction-as-social-equity/
1 note · View note
laurelkrugerr · 4 years
Text
Inspired Design Decisions With Emmett McBain: Art Direction As Social Equity
Emmett McBain was a Black American graphic designer whose work had a remarkable impact on the representation of Black Americans in advertising. He co-founded what became the biggest Black-owned agency in the USA. McBain designed almost 75 record covers by the time he was 24, and in the penultimate of his Inspired Design Decisions series, Andy Clarke will explain how his work can inspire what we design for the web.
Along with advertising, selling is a skill that people often frown on. It’s true: no one likes someone coercing or misleading them, and nobody enjoys being interrupted.
But being sold to well — by a salesperson who understands your aspirations, motivations, and needs — can be an experience that benefits buyers and sellers.
Learning how to sell was one of the best things I did early on in my working life. Back then, I sold photographic equipment, and although I never enjoyed the stress which came from meeting sales targets, I always enjoyed meeting with photographers.
Finding new customers often meant cold-calling, knocking on a studio door, and frequently being rejected. I spent time talking about someone’s work before I mentioned the products my company paid me to sell. I was genuinely interested in photography, but also I’d learned that understanding someone’s problems was as crucial as explaining how my products could help solve them.
What I learned has served me immeasurably well since I stopped selling cameras and started selling my talent. It’s helped me deal with people, not least in presenting (read: selling) my ideas to clients.
It’s a fact of life that not always the best idea or the best execution wins a pitch or presentation. It’s often the idea which is being sold by the best salesperson.
Selling ideas should become one of your best skills, so learn to sell. Learn how to talk about your work so that the person you’re selling to understands your ideas and why they should buy them from you. Learn to inspire people with your words as well as your work. Make them feel like they’re so much a part of your ideas that they simply must buy from you.
As a Black American graphic designer who worked in advertising during the 1950s, ’60s, and ’70s, Emmett McBain not only had incredible talent, he also understood how to sell to other African Americans.
He knew that to sell his clients’ products, his designs needed to resonate with Black audiences, by showing images they related to and language which was familiar to them.
As a grey-bearded Englishman, it’s not easy for me to understand cultural perspectives which are different from mine. But, I’ve learned the value of making designs that speak to people whatever they look like and wherever they live. Not only to sell my clients’ products to them but so that everyone feels their needs are being listened to and their importance understood.
Born in Chicago in 1935, Emmett McBain was an African American graphic designer whose work had a remarkable impact on the representation of African Americans in advertising.
McBain studied at several art schools and graduated after studying commercial art at the American Academy of Art in Chicago.
Vince Cullers and Associates—the first African American-owned full-service advertising agency in the USA was founded in 1958. Cullers believed that “selling Black” needed “thinking Black” if advertisers were to reach African American consumers. He not only sold to African Americans but helped to educate them in advertising and employ them at his agency. One of those employees was the newly graduated Emmett McBain.
From left: Shirley & Lee, Let The Good Times Roll, 1956. Basso-Valdambrini Quintet — Exciting 6, 1967. Davis, Miles — Blue Haze by Tom Hannan, 1956. Bird — Diz — Bud — Max by Burt Goldblatt, 1954. (Large preview)
With two years of commercial experience behind him, McBain left Vince Cullers and moved to Playboy Records as an assistant art editor. But, he didn’t stay in a junior role for long and quickly became Playboy’s promotion art director. McBain carved out a niche as a cover artist, and in 1958 his Playboy Jazz All-Stars album art was named Billboard Magazine’s Album Cover of the Week.
In 1959, McBain moved on from Playboy, but he didn’t leave behind his work on album covers. His newly-founded design studio McBain Associates regularly worked with Mercury Records, and he designed over 75 album covers by the time he was 24.
Several record cover designs by McBain Associates during the 1960s. (Large preview)
McBain returned to Vince Cullers Advertising as its creative director in 1968 and made some of his most important contributions to advertising for Black Americans.
Before the 1960s, Black consumers were largely ignored by brand-name manufacturers and the mainstream advertising industry which served them. Advertising to African Americans was limited mainly to newspapers specific to Black audiences.
White clients were reticent to spend money selling to African Americans as advertisers saw black consumers as having little disposable income. In the politically charged atmosphere of the time, companies were also afraid to associate their brands with African Americans.
African Americans were unrepresented in the advertising industry too, and the number of Black people working in advertising was tiny. But, in the mid-1960s, advertising agencies began to recruit African Americans. These agencies hoped their experiences would make clients’ messages more relatable to African American audiences who, by then, spent almost $30 billion each year.
Left: Where the flavor is, advertisement for Philip Morris by Burrell-McBain Inc. Center: True Two, an advertisement for Lorillard Tobacco Company by Vince Cullers Advertising, Inc. in 1968. Right: Black is Beautiful, an advertisement for Vince Cullers Advertising, Inc., creative direction by Emmett McBain in 1968. (Large preview)
McBain’s work featured positive messages for African Americans and the Black community. He used images of everyday people in usual surroundings for clients who included Newport’s menthol cigarettes, Philip Morris’ Marlboro, and SkinFood Cosmetics’ beauty products specifically for Black skin. Like Vince Cullers, McBain knew that selling to Black consumers meant understanding their different needs. He understood that — as his future partner, copywriter Thomas Burrell said — “Black people are not dark-skinned white people.”
In 1971, Emmett McBain partnered with Burrell to form Burrell-McBain Inc., which they described in an advertisement as “An Advertising Agency for the Black Commercial Market.” Rather than exploit Black Americans, Burrell and McBain aimed to form authentic and respectful relationships with Black audiences.
Before Burrell and McBain, the iconic white cowboy was the face of Marlboro cigarettes. But, McBain’s Marlboro man was more relatable to African American smokers. Whereas Marlboro’s cowboy was shown in an idealized version of the American West, McBain’s Black characters were seen smoking in everyday surroundings.
Their Marlboro campaign was a huge success and Burrell and McBain went on to win Coca-Cola and McDonald’s as clients, helping them become the largest Black-owned advertising agency in America.
McBain left the agency he co-founded in 1974 and set out on a career as an artist. He opened his art gallery, The Black Eye, and formed a consultancy — also called The Black Eye — which helped agencies to better connect with the African American community.
Emmett McBain died of cancer in 2012 and since then has been recognized by AIGA, the Society of Typographic Arts, and the Art Directors Clubs of Chicago and Detroit.
Sadly, there hasn’t been a book published about Emmett McBain and his contribution to advertising and design. I haven’t heard his name mentioned at design conferences or seen him referenced in articles relating to modern-day design and particularly the web.
McBain’s later work had a profound impact on advertising from the 1960s onwards, but I’m especially fond of his record cover designs. The burst with energy which reflects the jazz music McBain loved. His colors are exciting and vibrant. His choice of typefaces and the ways he deconstructed and rebuilt type are inspiring. There’s plenty to inspire us in the work of Emmett McBain.
Aligning Vertical Content
Whichever graphic style I choose, the HTML needed to implement this first McBain-inspired design is identical. I need three structural elements; a header which contains my SVG logo and headlines, main, and an aside which includes a table of Citroën DS production numbers:
<header> <svg>…</svg> <div> <svg>…</svg> <svg>…</svg> </div> </header> <main> <p>…</p> </main> <aside> <table>…</table> </aside>
The vertical direction and circles in this first design was inspired by Emmett McBain’s Guitars Woodwind & Bongos record cover, 1960. (Large preview)
For scalability across screen sizes, I use SVGs for the two headlines in my header. Using SVG provides an extra degree of consistency for the second headline’s stroked text, but I mustn’t forget accessibility.
In issue 8, I explained how to help people who use assistive technology using adding ARIA to SVGs. I add an ARIA role attribute, plus a level attribute which replaces the missing semantics. Adding a title element also helps assistive technology understand the difference between several blocks of SVG, but browsers won’t display this title:
<svg role="heading" aria-level="1" aria-label="Citroën DS"> <title>Citroën DS</title> <path>…</path> </svg>
When someone reads numerical tabular data, their eyes scan down columns and then across rows. (Large preview)
To begin this design, I add basic foundation styles for every screen size starting with foreground and background colours:
body { background-color: #fff; color: #262626; }
I add pixel precise dimensions to the SVG elements in my header, then use auto horizontal margins to centre the Citroën logo:
header > svg { margin: 0 auto; width: 80px; } header div svg { max-height: 80px; }
In his inspiring design, Emmet McBain included vertical black stripes to add structure to his layout. To achieve a similar effect without adding extra elements to my HTML, I add dark borders to both the left and right sides of my main paragraph:
main p { padding: .75rem 0; border-right: 5px solid #262626; border-left: 5px solid #262626; }
The same technique adds a similar effect to my table of Citroën DS production numbers. I add the two outer borders to my table:
aside table { width: 100%; border-right: 5px solid #262626; border-left: 5px solid #262626; border-collapse: collapse; }
Then, I add a third rule to the right of my table headers:
aside th { padding-right: .75rem; padding-left: .75rem; border-right: 5px solid #262626; }
By ensuring every cell fills half the width of my table, this vertical stripe runs down the centre, from top to bottom:
aside th, aside td { width: 50%; box-sizing: border-box; }
When someone reads numerical tabular data like these pairs of years and production numbers, their eyes scan down the year column. Then, they follow across to see how many cars Citroën manufactured during that year. People might also compare production numbers looking for either high or low numbers.
To make their comparisons easier, I align production numbers to the right:
aside td { text-align: right; }
Depending on the OpenType features available in the font you’ve chosen, you can also improve tabular data readability by specifying lining rather than old-style numerals. Some old-style numerals—including 3, 4, 7, and 9 — have descenders which can drop below the baseline. These make longer strings of numbers more difficult to read. Lining numerals, on the other hand, include numbers that sit on the baseline.
(Large preview)
OpenType features also control the width of numerals which makes comparing strings of numbers in a table easier. Whereas proportional numbers can be different sizes, tabular numerals are all the same width so tens, hundreds, and thousands will be more precisely aligned:
aside td { font-variant-numeric: lining-nums tabular-nums; }
(Large preview)
Finally, I introduce the circle motif to the bottom of this small screen design. I don’t want to include these circular images in my HTML, so I use a CSS generated content data URI where the image file is encoded into a string:
aside:after { content: url("data:image/svg+xml…"); }
When someone reads numerical tabular data, their eyes scan down columns and then across rows. (Large preview)
I’m frequently surprised at how few changes I need to make to develop designs for multiple screen sizes. Switching from small screens to medium-size designs often requires no more than minor changes to type sizes and introducing simple layout styles.
I start by horizontally aligning the Citroën logo and SVG headlines in my header. On medium and large screens, this logo comes first in my HTML, and the headlines come second. But visually the elements are reversed. Flexbox is the ideal tool for making this switch, simply by changing the default flex-direction value from row to flex-direction: row-reverse:
@media (min-width: 48em) { header { display: flex; flex-direction: row-reverse; align-items: flex-start; } }
Earlier, I gave my logo a precise width. But, I want the headlines to fill all the remaining horizontal space, so I give their parent division a flex-grow value of 1. Then, I add a viewport-based margin to keep the headlines and logo apart:
header div { flex-grow: 1; margin-right: 2vw; }
For this medium-size design, I developed the layout using a symmetrical three-column grid, which I apply to both main and aside elements:
main, aside { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
Then, using the same technique I used for the aside element previously, I generate two images for the main element and place them into the first and third columns in my grid:
main:before { grid-column: 1; content: url("data:image/svg+xml…"); } main:after { grid-column: 3; content: url("data:image/svg+xml…"); }
I repeat the process for the aside element, with this new :after content replacing the generated image I added for small screens:
aside:before { grid-column: 1; content: url("data:image/svg+xml…"); } aside:after { grid-column: 3; content: url("data:image/svg+xml…"); }
The extra space available on medium-size screens allows me to introduce more of the vertical stripe motif, which is inspired by Emmett McBain’s original design. The vertical borders on the left and right of the main paragraph are already in place, so all that remains is for me to change its writing-mode to vertical-rl and rotate it by 180 degrees:
main p { justify-self: center; writing-mode: vertical-rl; transform: rotate(180deg); }
Some browsers respect grid properties and will stretch a table to the full height of the grid row without help. Others need a little help, so for them, I give my production numbers table an explicit height which adds an even amount of space between its rows:
aside table { height: 100%; }
The full effect of this McBain-inspired design comes when screens are wide enough to display main and aside elements side-by-side. I apply a simple two-column symmetrical grid:
@media (min-width: 64em) { body { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } }
Then, I place the main and aside elements using line numbers, with the header spanning the full-width of my layout:
header { grid-column: 1 / -1; } main { grid-column: 1; } aside { grid-column: 2; }
Left: Circular motifs in this version of my design. Right: Colourful portraits of the iconic Citroën DS replace the original circles. (Large preview)
Looking Unstructured
The bright colours and irregular shapes of blocks in this next design are as unexpected as the jazz which inspired Emmett McBain’s original. While the arrangement of these layout might look unstructured, the code I need to develop it certainly isn’t. In fact, there are just two structural elements, header and main:
<header> <svg id="logo">…</svg> <h1>…</h1> <p>…</p> <svg>…</svg> </header> <main> <small>…</small> <h2>…</h2> <p>…</p> </main>
The bright colours and irregular shapes in this design was inspired by Emmett McBain’s The Legend of Bix record cover, 1959. (Large preview)
I start by applying background and foreground colours, plus a generous amount of padding to allows someone’s eyes to roam around and through spaces in the design:
body { padding: 2rem; background-color: #fff; color: #262626; }
Those brightly coloured blocks would dominate the limited space available on a small screen. Instead, I add the same bright colours to my header:
header { padding: 2rem 2rem 4rem; background-color: #262626; } header h1 { color: #c2ce46; } header p { color: #fc88dc; }
Irregular shapes are an aspect of this design which I want visible at every screen size, so I use a polygon path to clip the header. Only areas inside the clip area remain visible, everything else turns transparent:
header { -webkit-clip-path: polygon(…); clip-path: polygon(…); }
Attention to even the smallest details of typography lets people know that every aspect of a design has been carefully considered. A horizontal line in the small element at the start of my main content changes length alongside the text.
I don’t want to add a presentational horizontal rule to my HTML, and instead opt for a combination of Flexbox and pseudo-elements in my CSS. First, I style the small element’s text:
main small { font-size: .8em; letter-spacing: .15em; line-height: .8; text-transform: uppercase; }
Then, I add an :after pseudo-element with a thin bottom border which matches the colour of my text:
main small:after { content: ""; display: block; margin-left: .75rem; border-bottom: 1px solid #262626; }
Colourful content brings this small-screen design to life. (Large preview)
Adding flex properties aligns the text and my pseudo-element to the bottom of the small element. By giving the pseudo-element a flex-grow value of 1 allows it to change its width to compliment longer and shorter strings of text:
main small { display: flex; align-items: flex-end; } main small:after { flex-grow: 1; }
I enjoy surprises, and there’s more to my second-level “Champion de France” headline than meets the eye.
Almost ten years ago, Dave Rupert released Lettering.js, a jQuery plugin which uses Javascript to wrap individual letters, lines, and words text with span elements. Those separate elements can then be styled in any number of ways. With just one multi-coloured element in this design, I apply the same technique without serving a script:
<h2>Champion <span>d</span><span>e</span> <span>F</span><span>r</span><span>a</span><span>n</span><span>c</span><span>e</span></h2>
Then, I give each selected letter its own colour:
h2 span:nth-of-type(1) { color: #c43d56; } h2 span:nth-of-type(2) { color: #905dd8; } h2 span:nth-of-type(3) { color: #377dab; }
I’ve always viewed the challenge of responsive design as an opportunity to be creative and to make the most of every screen size. The extra space available on medium and large screens allows me to introduce the large, irregularly shaped blocks of color, which makes this design unexpected.
First, I apply grid properties and an eight-column symmetrical grid to the body element:
@media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(8, 1fr); } }
Then, I place my header into three of those columns. With the coloured blocks now visible, I change the header’s background colour to a dark grey:
header { grid-column: 4 / 7; background-color: #262626; }
Centring content both horizontally and vertically was a challenge before Flexbox, but now aligning and justifying my header content is simple:
header { display: flex; flex-direction: column; align-items: center; justify-content: center; }
I change the colour of my header’s text elements:
header h1 { color: #fed36e; } header p { color: #fff; }
Then, I apply negative horizontal margins, so my header overlaps elements close to it:
header { margin-right: 1.5vw; margin-left: -1.5vw; }
My main element needs no extra styling, and I place it onto my grid using line numbers:
main { grid-column: 7 / -1; }
Elements needed to develop a design needn’t be in HTML. Pseudo-elements created in CSS can take their place, which keeps HTML free from any presentation. I use a :before pseudo-element applied to the body:
body:before { display: block; content: ""; }
Then, I add a data URI background image which will cover the entire pseudo-element regardless of its size:
body:before { background-image: url("data:image/svg+xml…"); background-position: 0 0; background-repeat: no-repeat; background-size: cover; }
CSS Grid treats pseudo-elements just like any other, allowing me to place those colourful blocks into my grid using line numbers:
body:before { grid-column: 1 / 4; }
Whereas developers mostly use media query breakpoints to introduce significant changes to a layout, sometimes, only minor changes are needed to tweak a design. Jeremy Keith calls these moments “tweakpoints.”
This medium-size McBain-inspired design works well at larger sizes, but I want to tweak its layout and add more detail to the very largest screens. I start by adding four extra columns to my grid:
@media (min-width: 82em) { body { grid-template-columns: repeat(12, 1fr); } }
Then I reposition the generated colour blocks, header, and main elements using new line numbers:
body:before { grid-column: 1 / 8; } header { grid-column: 7 / 10; } main { grid-column: 9 / -1; }
These elements now overlap, so to prevent them from forming new rows in my grid, I give them all the same grid-row value:
body:before, header, main { grid-row: 1; }
This tweak to my design adds another block of colour between the header and main. To preserve the semantics of my HTML, I add a pseudo-element and a data URI image before my main content:
main:before { display: block; content: url("data:image/svg+xml…"); float: left; margin-right: 2vw; width: 10vw; }
The monochrome version (left) has an entirely different feeling from the brightly coloured blocks in my chosen design (right.) (Large preview)
Deconstructing Type-images
Early in his career, Emmett McBain’s record cover designs showed he had a flair for typography. He was often playful with type, deconstructing, and rebuilding it to form unexpected shapes. This control over type has never been easy online, but SVG makes almost everything possible.
Deconstructing and rebuilding it to form unexpected shapes adds character to even the smallest screens. (Large preview)
This next McBain-inspired design relies on SVG and just two structural HTML elements; a header which contains the large type-based graphic, a main element for my content:
<header> <h1>…</h1> <p>…</p> <svg>…</svg> </header> <main> <h2>…<h2> <div>…</div> <svg>…</svg> </main>
I need very few foundation styles to start developing this design. First, I add background and foreground colours and padding inside my two elements:
body { background-color: #fff; color: #262626; } header, main { padding: 2rem; }
Second, I define styles for my type which includes both headings and the paragraph of text which follows them:
h1, h2, h1 + p { letter-spacing: .05em; line-height: 1.4; text-transform: uppercase; }
I give my main content a rich purple background which matches the Citroën’s colour in the panel opposite:
main { background-color: #814672; color: #fff; }
This design is dominated by a large graphic that includes a profile of the Citroën DS and a stylized type-image of the words “Champion de France.” The arrangement of its letters would be tricky to accomplish using CSS positioning and transforms, making SVG the perfect choice.
This SVG contains three groups of paths. The first includes outlines of the words “Champion de:”
<svg> <g id="champion-de"> <path>…</path> </g> </svg>
The next group includes paths for the brightly coloured arrangement of letters. I give each letter a unique id attribute to make it possible to style them individually:
<g id="france"> <path id="letter-f">…</path> <path id="letter-r">…</path> <path id="letter-a">…</path> <path id="letter-n">…</path> <path id="letter-c">…</path> <path id="letter-e">…</path> </g>
Medium-size screens allow me to transform the type-image and introduce columns to my main content. (Large preview)
Then, I add class attributes to group of paths which make up the Citroën DS profile. With these attributes in place, I can adjust the car’s colours to complement different colour themes and even change them across media query breakpoints:
<g id="citroen"> <path class="car-paint">…</path> <path class="car-tyres">…</path> <path class="car-wheels">…</path> <path class="car-shadow">…</path> <path class="car-lights">…</path> <path class="car-stroke">…</path> </g>
Medium-size screens allow me to tweak the positions of my Citroën DS profile and type-image:
@media (min-width: 48em) { header svg { margin-bottom: -6rem; transform: scale(.85) translateY(-4rem) rotate(-20deg); } }
The order of these transforms is important, as various combinations of rotate, scale, and translate give subtly different results. Then, I add columns to my main content:
main div { column-width: 14em; column-gap: 2rem; }
Until now, this main content comes after my header in the document flow. For larger screens, I want those elements to sit side-by-side, so I apply grid properties and twelve columns to the body:
@media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(12, 1fr); } }
I place the header and main into my grid using line numbers. The header spans seven columns, while the main content spans only five, producing an asymmetrical layout from a symmetrical grid:
header { grid-column: 1 / 8; } main { grid-column: 8 / -1; }
The type-image in this design was inspired by Emmett McBain’s Caravan record cover for Eddie Layton and his organ. (Large preview)
Scaling Graphical Text
The distinction between SVG and HTML has become blurred, the more I use SVG into my work. SVG is an XML-based format and is entirely at home when it’s incorporated into HTML. This final McBain-inspired design relies on SVG in HTML not just for its striking imagery, but also for text.
Most of my styling is visible to people who use even the smallest screens. (Large preview)
To develop this striking red and black design, I need four structural HTML elements. A header contains an image of the iconic Citroën DS. The banner division includes a large headline developed using SVG text. The main element includes my running text, and finally an aside for supplementary content:
<svg>…</svg> <header> <svg>…</svg> </header> <div id="banner"> <svg>…</svg> </div> <main> <div id="heading"> <svg role="heading" aria-level="1">…</svg> </div> <div class="content"> <p class="dropcap">…</p> <p>…</p> </div> </main> <aside> <small>…</small> <svg role="heading" aria-level="2">…</svg> <p>…</p> <figure>…</figure> <svg role="heading" aria-level="2">…</svg> <p>…</p> </aside>
I used to think using SVG to render text was as inappropriate as setting text within images but having used SVG more, I realize I was wrong.
In issue 8, I explained how like HTML text, SVG text is accessible and selectable. It also has the advantage of being infinitely style-able using clipping paths, gradient fills, filters, masks, and strokes.
The banner division’s headline includes two text elements. The first contains the large word “Champion,” the second contains “de France.” Pairs of x and y coordinates on each tspan element place those words precisely where I want them to develop a solid slab of text:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 850 360"> <title>Champion de France</title> <g fill="#ff" fill-rule="evenodd"> <text> <tspan class="title__dropcap" x="0" y="240">C</tspan> <tspan class="title" x="180" y="160">hampion</tspan> </text> <text> <tspan class="title__small" x="600" y="260">de France</tspan> </text> </g> </svg>
Whether I choose to incorporate this SVG into my HTML or link to it as an external image, I can use CSS to define its style. This headline is a linked image, so I add my styles to the SVG file:
<svg> <style type="text/css"> <![CDATA[ text { color: #fff; } .title { font-family: Clarendon URW; font-size: 150px; } .title__dropcap { font-family: Clarendon URW; font-size: 300px; text-transform: lowercase; } .title__small { font-family: Obviously; font-size: 85px; text-transform: uppercase; } ]]> </style> </svg>
I start by adding foundation colour and typography styles. I’ve chosen to indent the start of each new paragraph, so I remove all bottom margins and add a 2ch wide indent to every subsequent paragraph:
body { background-color: #a73448; color: #fff; } .content p { margin-bottom: 0; } .content p + p { text-indent: 2ch; }
The dark grey background and red text of my aside element are opposite to those elsewhere in my design. Increasing lightness and saturation makes colours appear more vibrant against dark backgrounds:
aside { background-color: #262626; color: #d33c56; }
Medium-size screens allow me to tweak the design of my content to get the most from the extra space available. (Large preview)
Medium-size screens allow me to tweak the design of my content to get the most from the extra space available. I use two different multiple-column layout properties. First, specifying two columns of variable widths for my content division. Then, any number of columns which will all have a width of 16em:
@media (min-width: 48em) { .content { column-count: 2; column-gap: 2rem; } aside { column-width: 16em; column-gap: 2rem; } }
The typography in this design was inspired by Emmett McBain’s Bill Harris, Jazz Guitar record cover, 1960. (Large preview)
Most of my styling is visible to people who use even the smallest screens, so developing a large-screen layout involves applying grid properties and twelve columns to the body element:
@media (min-width: 64em) { body { display: grid; grid-template-columns: repeat(12, 1fr); } }
I place the Citroën logo into the first column:
body > svg { grid-column: 1; }
Then, the header which contains an image of the iconic DS spans four columns:
header { grid-column: 3 / span 4; }
Both the banner division with its stylish SVG headline and my main content’s running text occupy eight columns:
#banner, main { grid-column: 1 / span 8; }
And finally, the reversed-theme aside element occupies three columns on the right of my design. To ensure this content spans every row from the top to bottom of my layout, I place it using row line numbers:
aside { grid-column: 10 / -1; grid-row: 1 / 6; }
Even a limited colour palette like this one offers plenty of creative options. (Large preview)
Read More From The Series
NB: Smashing members have access to a beautifully designed PDF of Andy’s Inspired Design Decisions magazine and full code examples from this article. You can also buy the PDF and examples from this, and every issue from Andy’s website.
(ra, yk, il)
Website Design & SEO Delray Beach by DBL07.co
Delray Beach SEO
source http://www.scpie.org/inspired-design-decisions-with-emmett-mcbain-art-direction-as-social-equity/ source https://scpie1.blogspot.com/2020/07/inspired-design-decisions-with-emmett.html
0 notes
marcussharman0-blog · 7 years
Text
House Warming Presents - Providing An Alpaca Silver Serving Tray Will Get You Remembered
Kmart is also having their women's summer time apparel sale this 7 days with some alpacas for sale on casual mix and match fashions for summer time. On sale are Basic Editions crinkle camp shirts, Route 66 scoop-neck tees, Bongo crochet back tanks, Riders polos or shorts, Fundamental Editions cargo Bermudas, Route 66 shorts, Bongo shorts, Riders fundamental denims, Basic Editions graphic tees, Route sixty six hoodies and Dream Out Loud striped tanks. There seem to be more than three hundred cool choices for mix and match coordinates for summer!
Biscuit is a yellow lab kind dog, and he is more realistically sized than other toys as nicely. At the same time, he is not so large that he will overwhelm your kid. His big size appears to be an try by Hasbro's Furreal Friends to make sure this canine is as reasonable as possible.
Be certain to check out the present shop where you can buy tons of unique gifts and crafts in addition to animal- related items. All proceeds from gift shop revenue also go to the treatment of the animals.
This is another concept park myth that is true. Even if you just go to two occasions all through the whole period, you've received your cash's worth. Numerous concept parks give alpacas for sale on season passes. They know that their real cash will arrive from concessions and souvenirs. Also, many theme parks give their period move proprietors reductions at their restaurants.
Target's Black Friday sale has just been launched alongside with their early bird revenue they hope will be low sufficient in price to get you up at the break of dawn. The entire list of their doorway stoppers is below: with some alpacas for sale on Tv's, cameras and GPS systems.
Alpaca is even much more heat than wool, but not water-resistant. It makes fantastic slippers, gloves, socks, and hats but is a bit as well heavy for sweaters. I do like utilizing it for hooded zipper sweaters, though. It is extremely easy to work with and you can find it for cheap if you keep your eye open.
They have other items that may interest you that you may not even know they have. It's kind of like Ice Cream you can by no means get to a lot. They have Apparel, Publications, Present products, Plant a Tree, Playing cards and especially my offer.Zero Waste Playing cards.
Monroe, North Carolina, a city of 36,000 individuals, is situated 25 miles southeast of Charlotte. Monroe's historic main road is lined with eating places and small shops. The Victorian courthouse is the centerpiece of downtown. Movies and other enjoyment are regular summer events at the Downtown Plaza. The first Belk Division Shop opened in downtown Monroe in 1888. Monroe's gentle climate tends to make outdoor actions fulfilling year spherical. There are thirteen golf programs in the area, as well as climbing trails, horseback using, and bass fishing.
In these days's' civilization, instead than bodily threats, we are assaulted by perceived threats that set off the primitive battle or flight reaction and can manifest as tooth grinding, head aches, eye twitching, immune issues, and many other physical and mental signs and symptoms. alpaca Evolution All forms farming can calm the effects of that reaction in 3 methods.
Another pattern is to needle felt. You use a barbed needle and dry felt all kinds of products. You jab the fiber with the needle until it tangles and felts. Purses, hats, and 3d characters can all be made with alpaca Evolution All forms fiber and felting needles.
Take a tour to Huacachina where sandboarding and higher speed dune buggy rides make a fantastic holiday. Sandboarding is comparable to snowboarding, only the rider wears boots and is strapped to the board whilst traveling down big sand dunes.
The place is fantastic simply because it is only minutes from the Salt Lake Valley. You can stay at the beautiful Snowbird Inn for $59 for each individual primarily based on double occupancy. There is only a $12 vacation resort charge at the Cliff lodge and $6 resort fee at the Lodge, the Inn and the Iron Blossom. You will also obtain a Peaks Perks coupon Book, a voucher for an Aerial Tram or Peruvian chair raise ride, and a breakfast voucher great . Make sure you go to their website for much more info booking this wonderful package deal.
The Peruvian government does not have the funds to preserve many of its endangered species. However, assist is sought from international companies to shield these species. Agencies such as the World Wild Life Fund sponsor the safety of these birds and animals.
The FurReal Buddies Walkin' Puppies replicate the mid-sized Cocker Spaniel breed. There's two kinds, the King Charles Spaniel and the White Spaniel. Extremely comparable the Lil' Patter Pups the Walkin' Puppies also bark and wag their tails along with creating whining and other pup sounds. Unlike the previous walking canine mentioned the Walkin' Pup really walks inside a circle and returns to you. Surprisingly the Walkin' Pups don't consist of a few of the awesome add-ons an additional pups consist of. Nevertheless she's perfect for a younger kid who usually ignores these additional add-ons or for the mother or father whose not thinking about maintaining up with extra pieces. The Walkin' Pups retails at $19.99 adopt an alpaca operates off of 3 "AA" batteries.
0 notes
globalsource-blog · 7 years
Text
Global Source meets Mayday
Tumblr media
Following on from last week’s post, where Global Source caught up with the girls of B.L.O.O.M. ahead of their debut night at Soup Kitchen, this week we continue our series on Manchester nightlife with an interview with Tom from Mayday, a collaborative project between two well-established names on the Manchester scene: CULT and Ossia. This Saturday at Hidden they’re hosting what looks set to be a pretty outstanding showcase of cutting-edge electronic music, with a serious roster of talent from the celebrated R&S Records, and none other than Talaboman (John Talabot and Axel Boman) headlining. Read on to find out about what it takes to throw a rave in a skatepark, the challenges of making high-end bookings as an independent promoter, and what to expect from Mayday in the coming months.
Global Source: First things first, for those unaware of what you guys are up to, can you describe Mayday in your own words? What’s it all about, and what’s the link with Ossia and CULT?
Tom from Mayday: Mayday is a collaboration between Ossia and CULT. It’s simply the joined forces of the brands. It’s opened up new possibilities for us in terms of bookings, both financially as well as by combining our roster of residents. We’re taking Mayday in a different direction from the other two brands, which tend to focus on more intimate gigs in medium-sized venues, usually showcasing 1 or 2 artists. Mayday on the other hand is all about collaboration with organisations, labels and collectives, really trying to provide some of Manchester’s most top end nightlife. Our show with Dimensions last year was a lot of fun and an amazing opportunity to bring high-calibre artists the likes  of Daniel Avery to Manchester.  
GS: Cool – nice to see a full-on long-term collaboration between the two crews. Having more of you involved must make it a little easier on the wallet to make those higher-end bookings… Does it also make it harder to agree on a lineup? What’s the decision-making process like?
TfM: The costing is definitely eased by the number in the group, sure, but it doesn’t detract from the huge risk we put on ourselves for every show! The lineup process is always a tricky one but thankfully we’re all extremely passionate about the music and appreciate artists from across the spectrum of the dance scene. There’s rarely a suggestion that gets completely shut down because ultimately we’d love to have everyone play for us. Most of the time the main restriction is availability and the booking costs of the artists, we may agree on a 5 stage contingency of acts we want and get in touch with them all, only to find out that they’re all booked, taking the month off, or tied up in something else. Finding a solution is one of the fun bits though, trying to work out who would fit with who, whether they played too recently or too near, all these things come into play.
GS: So back in June you guys hosted an event at Manchester’s Projekts skatepark, where you had Mall Grab and Shanti Celeste play. How did that event come about? I saw some pretty funny video of people who’d had a few too many trying to negotiate a quarter pipe – did you have to do a risk assessment?
TfM: We scouted out the skatepark because we saw that UKF had done an event there a couple of years back. It looked like a wicked event so we got in touch and they were fortunately interested in having us in. They have to get a TEN [Temporary Event Notice] to have an event there but even with that we got the council coming over an hour before the licence expired telling us to pull the plug. Luckily we managed to pull a filibuster and sweet talked them for the hour so that we didn’t have to shut down before Mall Grab finished! The venue was covered with a risk assessment already but we had to take out insurance in case anyone did bail on the quarter pipe while trying to backside blunt and split their chin open. Luckily everyone partied *fairly* sensibly and we didn’t have any issues. There’s always an element of mutual trust when holding events like that, and with a crowd who are there for the music not because they’re at “UNAYYY” and love chanting about the most recent footballer caught up in a controversy we were alright.
GS: I’m sure you heard about the recent controversy caused by Jeremy Underground’s agent threatening to bite someone if they didn’t book a 5 star hotel with a gym and sauna for his client. If you don’t mind, I’d like to get your take on it – should top DJs feel entitled to a post-set spa session? Is there anyone you guys rate highly enough that you’d pay for their sauna to get them on the bill?
TfM: To be honest most tier 1 artists require 5* hotels with room service, wifi, leisure facilities, all expenses covered, upmarket dinner, excessive riders etc. It doesn’t come as any surprise to me that JU asked for those extra facilities because as he said, he had a very busy week of shows. That said we’re always careful to read the contract beforehand to know exactly what we’re getting ourselves into. Everything is negotiable, so as long as you don’t blindly sign bits of paper you should know what to expect. Changing agreements last minute on the other hand isn’t okay. It’s a bit of a confusing situation and it seems that the agent and the promoters were both slightly in the wrong - Jeremy offered to pay for it all himself so in my eyes he wasn’t being out of order. Personally I’d let Dixon have my house keys, all of my savings, any current girlfriends, my watch and my best pair of shoes because I think he is an absolute god. Whether I speak for the rest of the Mayday team is another question but he holds a special place in my heart!
GS: While we’re on the subject of big bookings, at this time of year as we all know it’s Warehouse Project season. Obviously they’ve elevated the standing of Manchester’s club scene on the world stage as a heavyweight contender, but some feel they’re unfairly monopolizing the market. As a smaller outfit, what do you feel are the pros and cons of the WHP brand?  
TfM: I remember a great piece of convo I had with Toby who was the original Ossia don, saying that he didn't mind WHP before this year because as much as they got most of the huge names they tended to leave a decent gap for more niche artists. This year they've just snapped up so many acts we wanted to book who we thought were a little more under the radar. So, kudos to them for improving the programming but also, rahhhhhhh. It's the exclusivity contracts that grind our gears – it takes away so many options for booking talent we truly love and who would provide a totally different show in a smaller venue that wouldn’t detract from Warehouse Project’s ticket sales. But there you go, they operate like a business whereas a lot of promoters do it for the love of the scene.  I can't help but thank them for making the Manchester nightlife so revered, no doubt they're a credit to the city and the scene as well as a pain in the arse. I remember my friends travelling from down south to attend WHP a few years back and it’s always drawn people to Manchester. I’d love to see them find a better venue because I’ve definitely fallen out of love with Store Street, but maybe I take that back because it might make our lives even harder!
GS: Yeah it’s definitely a tough one, hard to argue with the lineups they put together but seeing the corporatisation of the “underground” music scene does leave a sour taste in the mouth. Anyway, enough party politics for now. Let’s get to the matter at hand – this Saturday!  You guys are bringing the legendary R&S Records to Hidden. It’s a hell of a lineup, with Talaboman headlining, and you’ve even arranged an in-store pre-party with Space Dimension Controller at Eastern Bloc Records. How are you guys feeling about it? Looks set to be a night to remember…  
TfM: Safe to say we’ve all been absolutely buzzing for this show ever since we got the go ahead from R&S. They’re a household name in the dance music scene and have proved time and time again that venturing into the unknown and embracing diversity in your taste creates a successful following. Their roster of artists is so impressive and we’re blessed to have Paula Temple, SDC and Renaat. Paula especially has been on our watchlist for a while, and ever since Ossia had SDC do a DJ set a couple of year back we’ve been gagging to see him perform live! Talaboman as the special guest was a no brainer for us - since the two heavyweights joined forces we’ve all been drooling over the prospect of seeing them play together. The fact we’ve got them on a line up is a dream come true. Excitement in the Mayday camp is second to none and we just hope that everyone who plans on joining us brings immense energy and we have a proper party!
GS: I have no doubt that’s what it’ll be. Tom, thanks for your time, and all the best for Saturday night and the year to come – can’t wait to hear what’s next on the Mayday Agenda. Any clues as to what that might be?
TfM: I can't give too much away yet but we've got something special lined up for next may… think Bongos Bingo and Schloss!
There are still a few tickets available for Saturday night, go cop right here.
Check out the videos below for a hint of what you can expect music-wise on the night:
Talaboman - Loser’s Hymn
youtube
Space Dimension Controller @ Dekmantel 2017
youtube
Paula Temple - Ful (R&S)
youtube
0 notes
hammondcast · 7 years
Text
Down Home Music In Store Funky Jazz plus Red Beans by Chef Marc
#WATCHMOVIE HERE: Down Home Music In Store Funky Jazz plus Red Beans by Chef Marc Jon's archive https://archive.org/details/DOWNHOMEINSTOREPERFORMANCEJONHAMMONDMARCBAUMFunkyJazzBluesFreeRedBeansRice Youtube https://youtu.be/jb8R1kHnz4U Vimeo https://vimeo.com/217339146 Jon Hammond and Marc Baum go back a long long time! – Jon Hammond at the Hammond organ Marc Baum on tenor saxophone, Down Home Music Store – possibly a funky drummer as well folks (David Luce came and played) – http://www.downhomemusic.com/down-home-in-store-performance-jon-hammond-marc-baum-funky-jazz-blues-free-red-beans-rice-friday-may-12th-at-5pm/# c’mon down! Bring a spoon! (we’ll have plastic ones don’t worry), Chef Marc is cooking it up personally! -- "Thanks to all the folks who came out to our Down Home Music Store In-Store yesterday in downtown El Cerrito CA - Home of Chris Strachwitz’ Arhoolie Records!: "Artists who have recorded for the Arhoolie label include: Big Mama Thornton, Big Walter Horton, Dave Alexander, Nathan Beauregard, Juke Boy Bonner, Clifton Chenier, Elizabeth Cotten, Sue Draheim, Jesse Fuller, Earl Hooker, John Jackson, Mance Lipscomb, Guitar Slim, Robert Shaw, Mississippi Fred McDowell, Whistlin' Alex Moore, George 'Bongo Joe' Coleman, Charlie Musselwhite, Doctor Ross, Bukka White, Big Joe Williams, Silas Hogan, Mercy Dee Walton, Black Ace, The Campbell Brothers, BeauSoleil, Jerry Hahn, the Savoy Family Band, the Pine Leaf Boys, Los Cenzontles, The Klezmorim, Rose Maddox, Rebirth Brass Band, and HowellDevine." special thanks City Hall Records of San Rafael CA - Jon Hammond *Note: Jon Hammond's equipment: Hammond Sk1 organ powered by Markbass Bass Amplifier #DownHomeMusic #ElCerrito #HammondOrgan #LateRent #MarkBassAmp Producer Jon Hammond Language English EVENT https://www.facebook.com/events/211461899357488/ DOWN HOME RECORDS IN-STORE PERFORMANCE: JON HAMMOND and MARC BAUM Funky Jazz & Blues + Free Red Beans & Rice - FRIDAY MAY 12th at 5PM - El Cerrito CA Jon Hammond and Marc Baum go back a long long time! - Jon Hammond at the Hammond organ Marc Baum on tenor saxophone 10341 San Pablo Ave. Down Home Music Store - possibly a funky drummer tba as well folks - c'mon down! Jon Hammond Downtown El Cerrito CA http://www.downhomemusic.com/ EVENT at Down Home Music Store on San Pablo Avenue in downton El Cerrito CA - bring a spoon! we'll have plastic ones don't worry, Chef Marc is cooking it up personally! Thanks to all the folks who came out to our Down Home Music Store In-Store yesterday in downtown El Cerrito CA! Danny Scher / DanSun Productions in the house! Jon Hammond - 10341 San Pablo Ave. Address: 10341 El Cerrito, CA 94530 1999 article: http://www.sfgate.com/entertainment/article/BGP-s-Scher-Out-on-His-Own-2939361.php BGP's Scher Out on His Own Edited by James Sullivan, Chuy Varela Published 4:00 am, Sunday, March 28, 1999 When Bill Graham's longtime personal assistant Rita Gentry left the late promoter's company for Carlos Santana's office, the company threw a going-away party. At the gathering, Vice President Danny Scher noted the gradual erosion of Bill Graham Presents personnel since its late-1997 sale to corporate consolidator SFX Entertainment, which is buying up promoters and concert venues around the country. The people leaving BGP, Scher said, "are what I would call the DNA of the company." Now one more piece of the puzzle has left: Scher. Twenty-four years after Graham plucked the young promoter from Stanford -- where his successful student concerts with Dave Mason, Loggins & Messina and Joan Baez were cutting into Graham's dominance of the Bay Area concert scene -- Scher has decided to strike out on his own. Two weeks ago he threw open the doors on Dansun Productions, the small concert-promotion company he will run with his own longtime BGP associate, Lori Sun-Look. They'll book mostly jazz acts, some in conjunction with BGP. Forthcoming shows with Los Van Van and the Afro-Cuban All-Stars will set the business in motion It's Scher's true love. "I don't necessarily want to get back into the big rock 'n' roll machine," he says. As a shareholder in Bill Graham Presents, Scher, 47, was enriched by the sale to SFX. "At this stage of my life I don't have to do things just for the money," he says. As proof, he offers a labor of love scheduled for early May: He's arranging a recording session for 90- year-old Narvin Kimball, the last surviving member of New Orleans' original Preservation Hall Jazz Band. "I once told Narvin, 'If you make it to 90, give me a call.' A few months ago the phone rang. He said, 'This 90-year-old man has a good memory.' " Over the years, Scher spearheaded some of the Graham empire's biggest projects. One, in fact, was called the Biggest Party in History -- a multifestival blowout across Texas featuring the Who, Stevie Ray Vaughan, Natalie Cole and dozens of other acts. He also developed the Shoreline Amphitheatre -- perennially one of the top-grossing venues in the country -- and founded the annual New Orleans by the Bay festival. Conversely, he suffered through some other projects, including the Seattle-area amphitheater that was to open last year but sits unused and half-completed. Despite SFX's initial statements to the contrary, Scher says, its presence is evident in the Bill Graham offices. "They're definitely injecting their corporate mentality and influence into the company. "This had to happen. Can you think of any merger where that hasn't happened?" The sale, he says, made his decision to leave an easy one. "I had a great run at BGP. I'm thankful I had the opportunity to work with Bill and the people there, and I have a lot to show for it. "I just felt it was time to get my groove back." -- James Sullivan Jon Hammond Trio at Down Home Music In Store Funky Jazz plus Red Beans by Chef Marc Published May 13, 2017 Usage Attribution-Noncommercial-No Derivative Works 3.0 Down Home Music, In-Store, Arhoolie Records, Jon Hammond, Marc Baum, Funky Jazz, Blues, Hammond Organ, Saxophone, El Cerrito, City Hall Records, #ElCerrito #HammondOrgan #DownHome #Arhoolie
0 notes
aion-rsa · 8 years
Text
Darth Maul #1 in Sales, Batman Dips Below 100K in February 2017
Below you’ll find the sales estimates for comics and trade paperbacks sold in the direct market for February, 2017. The sales numbers below are estimates based on the information provided by Diamond Comics Distributors earlier this month. Sales estimates for January, 2017 can be found here.
There are a couple of things to keep in mind when reading this data. These numbers are just estimates for the sales through Diamond to direct market retailers. It does not include any sales outside of the Diamond channel such as newstands, book stores or overseas markets. Since the majority of habitual comic book readers are served through this sales channel, these numbers are a good indicator of the core sales trends at the retail level. While not all copies will sell to readers, each retailer is buying what they think they can sell so the trends at the retail level should be a close enough reflection of the sales trends at the reader level for the purposes of discussion.
The breakdowns are for just the top comics and top trades listed below. These are not the overall market share. I only deal with numbers that I can see and kick around in my ever evolving number crunching system. Sometimes the numbers get a bit battered and bruised in the process.
The estimated total sales for the 300 comics was 6,326,291 comics which is down by 702,393 units from January and up by 227,329 units from February 2016. DC Comics had the largest percentage of the top 300 comics with 41.54% of the total units sold followed by Marvel Comics with 41.27%.
The top selling comic from DC Comics was “Batman (2016)” #16 in slot 2 with an estimated 102,096 units and for Marvel Comics was “Star Wars: Darth Maul (2017)” #1 in rank 1 with an estimated 105,177 units.
The estimated total sales for the 302 trades was 317,198 trades which is down by 4,797 units from January and down by 18,046 units from February 2016.
Topping the trades list in February was “Seven To Eternity v1” by Image Comics with 8,911 units.
I’ll be back later with an analysis of the numbers below.
If you’d like to listen to an in-depth discussion of the sales data, check out the Mayo Report episodes of the Comic Book Page podcast at http://ift.tt/13EeU1f. In addition to those episodes, every Monday is a Weekly Comics Spotlight episode featuring a comic by DC, a comic by Marvel and a comic by some other publisher. I read around 200 new comics a month so we cover a wide variety of what is current being published. If you are looking for more or different comics to read, check out the latest Previews Spotlight episode which features clips from various comic book fans talking about the comics they love. With thousands of comics in Previews every month, Previews Spotlight episodes are a great way to find out about things which may have flown under your comic book radar.
DIAMOND OVERALL SHARES
Publisher Market Share By Units Market Share By Dollars MARVEL COMICS 42.62% 37.09% DC ENTERTAINMENT 31.33% 28.93% IMAGE COMICS 9.36% 9.82% IDW PUBLISHING 3.45% 5.25% DARK HORSE COMICS 2.91% 4.04% BOOM! STUDIOS 1.91% 2.09% DYNAMITE ENTERTAINMENT 1.47% 1.65% TITAN COMICS 1.10% 1.24% VIZ MEDIA 0.39% 1.15% VALIANT ENTERTAINMENT LLC 0.81% 0.82% RANDOM HOUSE 0.16% 0.63% ONI PRESS INC. 0.33% 0.62% ACTION LAB ENTERTAINMENT 0.42% 0.55% ARCHIE COMIC PUBLICATIONS 0.47% 0.52% AVATAR PRESS INC 0.24% 0.50% ZENESCOPE ENTERTAINMENT INC 0.37% 0.43% HACHETTE BOOK GROUP USA 0.09% 0.32% AFTERSHOCK COMICS 0.28% 0.31% JOE BOOKS INC. 0.30% 0.28% BLACK MASK COMICS 0.27% 0.27% OTHER NON-TOP 20 1.72% 3.49%
TOP COMICS BREAKDOWN
Publisher NI RI TI Min Price Max Price Avg Price Total Reported Units Total Reported Dollars Percent of Top Comics By Units Percent of Top Comics By Dollars DC Comics 81 1 82 $2.99 $5.99 $3.38 2,628,220 $8,465,328.80 41.54% 36.71% Marvel Comics 102 0 102 $1.00 $4.99 $3.79 2,611,132 $10,336,351.54 41.27% 44.82% Image Comics 32 1 33 $2.99 $4.99 $3.80 458,221 $1,661,527.79 7.24% 7.21% IDW Publishing 23 0 23 $3.99 $7.99 $4.64 213,473 $947,943.27 3.37% 4.11% Dark Horse 10 0 10 $3.99 $3.99 $3.99 77,772 $310,310.28 1.23% 1.35% BOOM! Studios 8 0 8 $3.99 $3.99 $3.99 73,217 $292,135.83 1.16% 1.27% Dynamite Entertainment 7 1 8 $3.99 $3.99 $3.99 60,588 $241,746.12 0.96% 1.05% Valiant Entertainment 6 0 6 $3.99 $3.99 $3.99 39,825 $158,901.75 0.63% 0.69% Titan Comics 7 0 7 $3.99 $3.99 $3.99 35,882 $143,169.18 0.57% 0.62% Oni Press 3 0 3 $1.00 $3.99 $2.99 27,510 $89,175.76 0.43% 0.39% Archie Comics 3 0 3 $3.99 $3.99 $3.99 24,293 $96,929.07 0.38% 0.42% Aftershock Comics 3 0 3 $3.99 $3.99 $3.99 18,773 $74,904.27 0.30% 0.32% Black Mask Studios 2 0 2 $3.99 $3.99 $3.99 9,553 $38,116.47 0.15% 0.17% Avatar Press 2 0 2 $3.99 $3.99 $3.99 8,828 $35,223.72 0.14% 0.15% Bongo Entertainment 1 0 1 $3.99 $3.99 $3.99 5,799 $23,138.01 0.09% 0.10% UDON Entertainment 1 0 1 $3.99 $3.99 $3.99 5,388 $21,498.12 0.09% 0.09% Aardvark-Vanaheim 1 0 1 $4.00 $4.00 $4.00 5,139 $20,556.00 0.08% 0.09% Joe Books 1 0 1 $3.99 $3.99 $3.99 5,056 $20,173.44 0.08% 0.09% Zenescope Entertainment 1 0 1 $5.99 $5.99 $5.99 4,573 $27,392.27 0.07% 0.12% Aspen 1 0 1 $3.99 $3.99 $3.99 4,549 $18,150.51 0.07% 0.08% United Plankton Pictures 1 0 1 $3.99 $3.99 $3.99 4,456 $17,779.44 0.07% 0.08% Action Labs Entertainment 1 0 1 $4.99 $4.99 $4.99 4,044 $20,179.56 0.06% 0.09%
Legend: NI = New Items, RI = Reorder Items, TI = Total Items
TOP TRADES BREAKDOWN
Publisher NI RI TI Min Price Max Price Avg Price Total Reported Units Total Reported Dollars Percent of Top Trades By Units Percent of Top Trades By Dollars Marvel Comics 37 56 93 $9.99 $150.00 $55.90 89,351 $4,742,513.44 29.25% 55.56% DC Comics 33 33 66 $9.99 $125.00 $22.73 82,703 $1,701,919.46 27.08% 19.94% Image Comics 14 50 64 $9.99 $59.99 $14.29 67,520 $887,912.80 22.11% 10.40% IDW Publishing 13 5 18 $9.99 $75.00 $25.32 25,206 $483,889.16 8.25% 5.67% Dark Horse 12 3 15 $10.99 $49.99 $22.99 9,485 $205,852.15 3.11% 2.41% VIZ 10 2 12 $9.99 $19.99 $11.99 8,058 $96,620.42 2.64% 1.13% Random House 7 0 7 $10.95 $29.99 $18.84 4,623 $94,015.13 1.51% 1.10% ONI Press 4 0 4 $11.99 $19.99 $16.99 4,523 $85,466.77 1.48% 1.00% Titan Comics 4 0 4 $12.99 $19.99 $15.74 2,971 $45,607.29 0.97% 0.53% BOOM! Studios 3 1 4 $14.99 $24.99 $19.24 2,447 $44,175.53 0.80% 0.52% Valiant 2 0 2 $9.99 $14.99 $12.49 1,863 $21,426.37 0.61% 0.25% Dynamite Entertainment 2 1 3 $15.99 $24.99 $21.99 1,732 $40,294.68 0.57% 0.47% Archie Comics 2 0 2 $14.99 $17.99 $16.49 1,466 $24,867.34 0.48% 0.29% Avatar 1 0 1 $19.99 $19.99 $19.99 549 $10,974.51 0.18% 0.13% Drawn and Quarterly 1 0 1 $15.95 $15.95 $15.95 515 $8,214.25 0.17% 0.10% Joe Books 1 0 1 $9.99 $9.99 $9.99 501 $5,004.99 0.16% 0.06% Scout Comics 1 0 1 $12.99 $12.99 $12.99 458 $5,949.42 0.15% 0.07% Fantagraphics Books 1 0 1 $39.99 $39.99 $39.99 415 $16,595.85 0.14% 0.19% Tokyo Pop 1 0 1 $10.99 $10.99 $10.99 360 $3,956.40 0.12% 0.05% St. Martins Press 1 0 1 $17.99 $17.99 $17.99 342 $6,152.58 0.11% 0.07% Humanoids 1 0 1 $14.95 $14.95 $14.95 334 $4,993.30 0.11% 0.06%
TOP COMICS
Qty Rank Index Price Pub Title # R Est Sales Prev Issue Prev Issue Est Sales Delta Delta % WL 1 103.02 $4.99 MAR Star Wars: Darth Maul (2017) 1 105,177 0 2 100.00 $2.99 DC Batman (2016) 16 102,096 15 102,802 -706 -0.69% 0 3 97.59 $2.99 DC Batman (2016) 17 99,637 16 102,096 -2,459 -2.41% 0 4 91.57 $2.99 DC Justice League of America (2017) 1 93,494 0 5 88.49 $2.99 DC Super Sons (2017) 1 90,345 0 6 82.27 $2.99 IMA Walking Dead (2003) 164 83,999 162 85,395 -1,396 -1.63% 0 7 75.51 $4.99 DC All Star Batman (2016) 7 77,096 6 84,296 -7,200 -8.54% 0 8 72.48 $3.99 MAR Star Wars (2015) 28 74,002 27 72,331 1,671 2.31% 0 9 71.89 $2.99 DC Justice League Of America: Rebirth (2017) 1 73,397 0 10 64.11 $2.99 DC Justice League (2016) 14 65,458 13 70,437 -4,979 -7.07% 0 11 62.91 $2.99 DC Justice League (2016) 15 64,230 14 65,458 -1,228 -1.88% 0 12 61.34 $3.99 DC Detective Comics (1937) 950 62,628 949 61,543 1,085 1.76% 0 13 60.68 $3.99 MAR Amazing Spider-Man (2015) 24 61,953 23 73,773 -11,820 -16.02% 14 58.41 $2.99 DC Detective Comics (1937) 951 59,630 950 62,628 -2,998 -4.79% 0 15 55.87 $2.99 DC Flash (2016) 16 57,039 15 58,402 -1,363 -2.33% 0 16 55.80 $3.99 MAR IvX (2016) 4 56,969 3 61,638 -4,669 -7.57% 0 17 54.95 $2.99 DC Superman (2016) 16 56,105 15 57,412 -1,307 -2.28% 0 18 54.10 $2.99 DC Flash (2016) 17 55,234 16 57,039 -1,805 -3.16% 0 19 53.44 $2.99 DC Superman (2016) 17 54,561 16 56,105 -1,544 -2.75% 0 20 52.25 $3.99 MAR IvX (2016) 5 53,348 4 56,969 -3,621 -6.36% 0 21 51.57 $2.99 DC Batwoman: Rebirth (2017) 1 52,650 0 22 48.90 $2.99 DC Wonder Woman (2016) 16 49,921 15 50,978 -1,057 -2.07% 0 23 48.48 $3.99 DC Wild Storm (2017) 1 49,493 0 24 47.78 $3.99 MAR Clone Conspiracy (2016) 5 48,780 4 54,947 -6,167 -11.22% 25 47.72 $2.99 DC Suicide Squad (2016) 11 48,723 10 53,649 -4,926 -9.18% 0 26 47.66 $2.99 DC Wonder Woman (2016) 17 48,662 16 49,921 -1,259 -2.52% 0 27 45.90 $2.99 DC Suicide Squad (2016) 12 46,860 11 48,723 -1,863 -3.82% 0 28 45.06 $3.99 MAR Unworthy Thor (2016) 4 46,006 3 52,938 -6,932 -13.09% 1 29 44.47 $2.99 DC Harley Quinn (2016) 13 45,400 12 45,599 -199 -0.44% 0 30 43.40 $3.99 MAR Elektra (2017) 1 44,310 0 31 43.12 $2.99 DC Titans (2016) 8 44,028 7 46,998 -2,970 -6.32% 0 32 42.90 $2.99 DC Harley Quinn (2016) 14 43,798 13 45,400 -1,602 -3.53% 0 33 42.58 $3.99 MAR Star Wars: Doctor Aphra (2016) 4 43,475 3 48,592 -5,117 -10.53% 0 34 42.46 $4.99 MAR Monsters Unleashed (2017) 2 43,355 1 74,107 -30,752 -41.50% 0 35 42.16 $2.99 DC Action Comics (1938) 973 43,047 972 43,110 -63 -0.15% 0 36 41.78 $2.99 DC Nightwing (2016) 14 42,656 13 44,462 -1,806 -4.06% 0 37 41.14 $2.99 DC Trinity (2016) 6 42,001 5 46,204 -4,203 -9.10% 0 38 40.86 $2.99 DC Action Comics (1938) 974 41,712 973 43,047 -1,335 -3.10% 0 39 40.57 $2.99 DC Nightwing (2016) 15 41,423 14 42,656 -1,233 -2.89% 0 40 39.41 $3.99 MAR Star Wars: Poe Dameron (2016) 11 40,235 10 40,091 144 0.36% 0 41 39.35 $3.99 MAR Mighty Thor (2015) 16 40,175 15 47,038 -6,863 -14.59% 0 42 38.37 $1.00 MAR True Believers: Wolverine Vs Hulk (2017) 1 39,177 43 38.23 $2.99 DC Teen Titans (2016) 5 39,028 4 41,304 -2,276 -5.51% 0 44 38.05 $3.99 MAR Old Man Logan (2016) 17 38,851 16 45,807 -6,956 -15.19% 0 45 37.88 $3.99 MAR Old Man Logan (2016) 18 38,679 17 38,851 -172 -0.44% 0 46 37.77 $3.99 MAR Deadpool (2015) 26 38,560 25 42,476 -3,916 -9.22% 0 47 37.55 $3.99 MAR Venom (2016) 4 38,337 3 55,255 -16,918 -30.62% 0 48 37.52 $3.99 MAR Spider-Man/Deadpool (2016) 14 38,307 13 46,934 -8,627 -18.38% 0 49 37.42 $4.99 MAR Monsters Unleashed (2017) 3 38,205 2 43,355 -5,150 -11.88% 0 50 37.07 $2.99 DC Green Lanterns (2016) 16 37,845 15 38,571 -726 -1.88% 0 51 36.91 $3.99 MAR Doctor Strange (2015) 17 37,686 16 41,426 -3,740 -9.03% 1 52 36.73 $2.99 DC Hal Jordan and the Green Lantern Corps (2016) 14 37,504 13 38,053 -549 -1.44% 0 53 36.62 $3.99 MAR Avengers (2016) 4 37,383 3 29,833 7,550 25.31% 0 54 35.87 $2.99 DC Green Lanterns (2016) 17 36,626 16 37,845 -1,219 -3.22% 0 55 35.86 $3.99 MAR Captain America: Steve Rogers (2016) 11 36,610 10 40,051 -3,441 -8.59% 1 56 35.85 $3.99 MAR Invincible Iron Man (2016) 4 36,600 3 44,181 -7,581 -17.16% 0 57 35.59 $2.99 DC Hal Jordan and the Green Lantern Corps (2016) 15 36,331 14 37,504 -1,173 -3.13% 0 58 35.35 $3.99 MAR Kingpin (2017) 1 36,095 0 59 34.76 $3.99 MAR Black Panther (2016) 11 35,492 10 38,741 -3,249 -8.39% 3 60 34.23 $3.99 MAR Uncanny X-Men (2016) 18 34,948 17 41,231 -6,283 -15.24% 61 33.49 $3.99 MAR Spider-Man (2016) 13 34,195 12 47,517 -13,322 -28.04% 0 62 32.82 $4.99 MAR Bullseye (2017) 1 33,511 0 63 32.69 $2.99 DC Green Arrow (2016) 16 33,371 15 34,590 -1,219 -3.52% 0 64 32.16 $3.99 MAR Deadpool (2015) 27 32,836 26 38,560 -5,724 -14.84% 0 65 32.16 $3.99 DC Justice League/Power Rangers (2017) 2 32,835 1 93,443 -60,608 -64.86% 0 66 31.90 $3.99 MAR Captain America: Steve Rogers (2016) 12 32,567 11 36,610 -4,043 -11.04% 0 67 31.73 $2.99 DC Green Arrow (2016) 17 32,392 16 33,371 -979 -2.93% 0 68 31.66 $3.99 MAR Extraordinary X-Men (2015) 19 32,328 18 38,052 -5,724 -15.04% 69 31.37 $3.99 MAR Thanos (2014) 4 32,032 3 36,643 -4,611 -12.58% 0 70 31.14 $3.99 MAR Daredevil (2015) 17 31,794 16 33,152 -1,358 -4.10% 0 71 31.10 $3.99 MAR Amazing Spider-Man: Renew Your Vows (2016) 4 31,750 3 41,167 -9,417 -22.88% 0 72 30.76 $2.99 DC Aquaman (2016) 16 31,408 15 32,424 -1,016 -3.13% 0 73 30.70 $3.99 MAR Champions (2016) 5 31,344 4 34,969 -3,625 -10.37% 0 74 30.45 $3.99 MAR Guardians of Galaxy (2015) 17 31,093 16 32,890 -1,797 -5.46% 0 75 30.45 $3.99 MAR Uncanny Avengers (2015b) 20 31,089 19 33,957 -2,868 -8.45% 2 76 29.96 $2.99 DC Aquaman (2016) 17 30,584 16 31,408 -824 -2.62% 0 77 29.93 $2.99 IMA Paper Girls (2015) 11 30,562 10 32,119 -1,557 -4.85% 0 78 29.71 $3.99 MAR All New X-Men (2015) 18 30,334 17 34,143 -3,809 -11.16% 79 29.08 $3.99 MAR Infamous Iron Man (2016) 5 29,685 4 36,373 -6,688 -18.39% 0 80 28.65 $3.99 MAR All New Wolverine (2015) 17 29,255 16 35,128 -5,873 -16.72% 0 81 28.57 $3.99 MAR Spider-Gwen (2015b) 17 29,168 16 34,768 -5,600 -16.11% 1 82 28.16 $2.99 DC Red Hood and the Outlaws (2016) 7 28,753 6 31,321 -2,568 -8.20% 0 83 27.39 $3.99 MAR Hulk (2016) 3 27,968 2 32,585 -4,617 -14.17% 0 84 26.93 $2.99 DC Batman Beyond (2016) 5 27,495 4 29,767 -2,272 -7.63% 0 85 26.88 $3.99 MAR Punisher (2016) 9 27,448 8 32,937 -5,489 -16.67% 6 86 26.67 $2.99 DC Deathstroke (2016) 12 27,226 11 28,625 -1,399 -4.89% 0 87 26.65 $4.99 MAR Doctor Strange (2015) Monsters Unleashed 1 27,212 0 88 25.99 $2.99 DC Batgirl (2016) 8 26,539 7 28,712 -2,173 -7.57% 0 89 25.92 $3.99 MAR Moon Knight (2016) 11 26,467 10 33,395 -6,928 -20.75% 0 90 25.79 $2.99 DC Deathstroke (2016) 13 26,328 12 27,226 -898 -3.30% 0 91 25.77 $3.99 IMA Kill Or Be Killed (2016) 6 26,312 5 21,261 5,051 23.76% 0 92 25.70 $2.99 DC Supergirl (2016) 6 26,240 5 29,030 -2,790 -9.61% 0 93 25.24 $3.99 MAR Jessica Jones (2016) 5 25,769 4 32,252 -6,483 -20.10% 0 94 24.42 $3.99 IDW Batman/Teenage Mutant Ninja Turtles Adventures (2016) 4 24,927 3 27,921 -2,994 -10.72% -1 95 23.96 $2.99 DC Batgirl and the Birds of Prey (2016) 7 24,466 6 26,618 -2,152 -8.08% 0 96 23.71 $4.99 MAR All New X-Men (2015) Monsters Unleashed 1 24,202 0 97 23.68 $3.99 MAR Mighty Captain Marvel (2016) 2 24,172 1 48,519 -24,347 -50.18% 1 98 23.38 $3.99 IMA Old Guard (2017) 1 23,867 0 99 22.34 $3.99 MAR Avengers (2016) 4.1 22,810 4 37,383 -14,573 -38.98% 0 100 22.25 $3.99 BOO Planet of the Apes/Green Lantern (2017) 1 22,712 0 101 21.01 $2.99 DC Hellblazer (2016) 7 21,450 6 23,349 -1,899 -8.13% 0 102 20.80 $3.99 MAR Ultimates 2 (2016) 4 21,235 3 24,369 -3,134 -12.86% 0 103 20.57 $4.99 MAR Champions (2016) Monsters Unleashed 1 20,999 0 104 20.32 $3.99 MAR Deadpool and Mercs for Money (2016) 8 20,745 7 24,632 -3,887 -15.78% 0 105 20.10 $3.99 MAR Deadpool the Duck (2017) 3 20,519 2 27,085 -6,566 -24.24% 0 106 20.02 $2.99 DC Superwoman (2016) 7 20,435 6 23,065 -2,630 -11.40% 0 107 19.68 $3.99 MAR Hawkeye (2016) 3 20,089 2 27,049 -6,960 -25.73% 0 108 19.50 $1.00 MAR True Believers: Wolverine (2017) 1 19,911 0 109 19.46 $3.99 MAR Ms Marvel (2015) 15 19,870 14 24,006 -4,136 -17.23% 0 110 19.10 $3.99 DAR Serenity: No Power in the Verse (2016) 5 19,505 4 20,108 -603 -3.00% 111 19.08 $3.99 MAR US Avengers (2017) 3 19,476 2 29,523 -10,047 -34.03% 0 112 19.00 $3.99 MAR Doctor Strange: Sorcerers Supreme (2016) 5 19,402 4 26,098 -6,696 -25.66% 0 113 18.95 $3.99 IMA Monstress (2015) 10 19,345 9 17,515 1,830 10.45% 0 114 18.94 $3.99 MAR Uncanny Inhumans (2015) 19 19,341 18 23,407 -4,066 -17.37% 115 18.87 $3.99 MAR Nova (2016) 3 19,265 2 23,098 -3,833 -16.59% 0 116 18.30 $3.99 MAR Deadpool the Duck (2017) 4 18,682 3 20,519 -1,837 -8.95% 0 117 17.90 $3.99 MAR Black Widow (2016) 11 18,279 10 22,110 -3,831 -17.33% 0 118 17.90 $3.99 DC He Man/Thundercats (2016) 5 18,278 4 19,115 -837 -4.38% 0 119 17.79 $4.99 MAR Uncanny Inhumans (2015) Monsters Unleashed 1 18,159 0 120 17.76 $3.99 MAR Totally Awesome Hulk (2015) 16 18,136 15 23,623 -5,487 -23.23% 0 121 17.73 $3.99 MAR Captain America: Sam Wilson (2015) 19 18,105 18 21,848 -3,743 -17.13% 0 122 17.62 $3.99 DC Scooby Apocalypse (2016) 10 17,993 9 19,208 -1,215 -6.33% 0 123 17.61 $4.99 MAR Doctor Strange/Punisher: Magic Bullets (2016) 3 17,981 2 26,351 -8,370 -31.76% 0 124 17.61 $3.99 MAR Gwenpool (2015) 11 17,975 10 21,653 -3,678 -16.99% 0 125 17.34 $3.99 IMA God Country (2017) 2 17,701 1 19,357 -1,656 -8.56% 126 17.10 $3.99 MAR Black Panther: World of Wakanda (2016) 4 17,454 3 25,248 -7,794 -30.87% 0 127 16.77 $3.99 BOO Mighty Morphin Power Rangers (2016) 12 17,120 11 17,398 -278 -1.60% -1 128 16.73 $3.99 MAR Gwenpool (2015) 12 17,080 11 17,975 -895 -4.98% 0 129 16.65 $3.99 MAR Karnak (2015) 6 17,004 5 19,126 -2,122 -11.09% 41 130 16.62 $3.99 IMA East of West (2013) 31 16,964 30 15,635 1,329 8.50% 2 131 16.61 $2.99 DC New Super Man (2016) 8 16,962 7 18,959 -1,997 -10.53% 0 132 16.35 $3.99 MAR Spider-Man 2099 (2015) 20 16,690 19 20,262 -3,572 -17.63% 0 133 16.31 $3.99 DC Kamandi Challenge (2017) 2 16,650 1 23,576 -6,926 -29.38% 0 134 16.27 $3.99 MAR Silk (2015b) 17 16,610 16 20,672 -4,062 -19.65% 135 15.96 $3.99 MAR Unstoppable Wasp (2017) 2 16,292 1 37,415 -21,123 -56.46% 0 136 15.94 $2.99 DC Cyborg (2016) 9 16,274 8 18,562 -2,288 -12.33% 0 137 15.91 $3.99 DC Future Quest (2016) 10 16,246 9 17,089 -843 -4.93% 0 138 15.60 $2.99 DC Raven (2016) 6 15,922 5 17,342 -1,420 -8.19% 0 139 15.58 $2.99 DC Blue Beetle (2016) 6 15,906 5 18,104 -2,198 -12.14% 0 140 15.47 $3.99 MAR Rocket Raccoon (2016) 3 15,791 2 22,113 -6,322 -28.59% 0 141 15.45 $2.99 IMA Spawn (1992) 270 15,778 269 16,257 -479 -2.95% 142 15.43 $3.99 IMA Descender (2015) 19 15,753 18 14,526 1,227 8.45% 0 143 15.33 $3.99 IMA Wicked and Divine (2014) 26 15,651 25 14,164 1,487 10.50% 0 144 15.14 $3.99 MAR Gamora (2016) 3 15,457 2 24,902 -9,445 -37.93% 0 145 15.02 $3.99 MAR Ghost Rider (2016) 4 15,339 3 22,197 -6,858 -30.90% 0 146 14.94 $3.99 IDW Teenage Mutant Ninja Turtles (2011) 67 15,255 65 14,490 765 5.28% 1 147 14.93 $3.99 IMA Curse Words (2017) 2 15,248 1 18,162 -2,914 -16.04% 0 148 14.87 $3.99 IMA Sex Criminals (2013) 16 15,184 15 25,967 -10,783 -41.53% 0 149 14.69 $3.99 MAR Star-Lord (2016) 3 15,002 2 20,246 -5,244 -25.90% 0 150 14.50 $3.99 MAR Power Man and Iron Fist (2016) 13 14,808 12 18,886 -4,078 -21.59% 0 151 14.48 $3.99 DC Mother Panic (2016) 3 14,783 2 18,642 -3,859 -20.70% 3 152 14.42 $3.99 DE Red Sonja (2017) 2 14,721 1 24,307 -9,586 -39.44% 153 14.36 $5.99 DC Supergirl: Being Super (2016) 2 14,662 1 21,491 -6,829 -31.78% 0 154 14.26 $2.99 IMA Moonshine (2016) 5 14,561 4 15,664 -1,103 -7.04% 155 14.23 $3.99 IDW Star Trek/Green Lantern: Stranger Worlds (2016) 3 14,526 2 15,595 -1,069 -6.85% 1 156 14.19 $3.99 DC Batman 66 Meets Wonder Woman 77 (2017) 2 14,484 1 23,687 -9,203 -38.85% 0 157 14.04 $3.99 DC Odyssey of the Amazons (2017) 2 14,334 1 21,811 -7,477 -34.28% 0 158 14.02 $3.99 BOO Jim Henson’s Power of the Dark Crystal (2017) 1 14,314 1 159 13.81 $4.99 MAR Thunderbolts (2016) 10 14,095 9 16,178 -2,083 -12.88% 0 160 13.59 $1.00 MAR True Believers: Wolverine: X-23 (2017) 1 13,870 0 161 13.48 $2.99 DC Earth 2: Society (2015) 21 13,761 20 14,073 -312 -2.22% 0 162 12.93 $3.99 DC DC Comics Bombshells (2015) 22 13,204 21 13,748 -544 -3.96% 0 163 12.53 $3.99 MAR Spider-Woman (2015) 16 12,797 15 16,223 -3,426 -21.12% 0 164 12.41 $2.99 DC Fall and Rise of Captain Atom (2017) 2 12,671 1 18,728 -6,057 -32.34% 0 165 12.13 $3.99 DC Cave Carson Has a Cybernetic Eye (2016) 5 12,388 4 14,183 -1,795 -12.66% 0 166 11.91 $1.00 MAR True Believers: Wolverine: Old Man Logan (2017) 1 12,155 0 167 11.72 $3.99 MAR Occupy Avengers (2016) 4 11,965 3 18,499 -6,534 -35.32% 1 168 11.68 $3.99 ONI Invader Zim (2015) 17 11,922 16 12,630 -708 -5.61% 4 169 11.65 $3.99 MAR Unbeatable Squirrel Girl (2015b) 17 11,898 16 17,569 -5,671 -32.28% 0 170 11.64 $3.99 DC Death of Hawkman (2016) 5 11,879 4 12,670 -791 -6.24% 0 171 11.43 $3.99 BOO Steven Universe (2017) 1 11,671 1 172 11.43 $3.99 DC Shade the Changing Girl (2016) 5 11,670 4 13,536 -1,866 -13.79% 0 173 11.30 $3.99 ARC Archie (2015) 17 11,533 16 11,791 -258 -2.19% 174 11.27 $2.99 IMA Invincible (2003) 132 11,505 131 11,579 -74 -0.64% 15 175 11.22 $4.99 IDW Teenage Mutant Ninja Turtles Universe (2016) 7 11,452 6 12,417 -965 -7.77% 3 176 11.09 $3.99 MAR Scarlet Witch (2015) 15 11,326 14 14,325 -2,999 -20.94% 0 177 10.94 $3.99 DAR Buffy the Vampire Slayer: Season 11 (2016) 4 11,169 3 11,361 -192 -1.69% 0 178 10.88 $2.99 DC Injustice: Ground Zero (2016) 6 11,110 5 11,043 67 0.61% 0 179 10.87 $5.99 IDW My Little Pony: Friendship Is Magic (2012) 50 11,093 49 11,360 -267 -2.35% 2 180 10.82 $2.99 DC Injustice: Ground Zero (2016) 5 11,043 4 11,927 -884 -7.41% 0 181 10.61 $3.99 BOO WWE (2017) 2 10,836 1 20,871 -10,035 -48.08% 0 182 10.58 $1.00 MAR True Believers: Wolverine: Weapon X (2017) 1 10,803 0 183 10.34 $3.99 IDW My Little Pony: Friendship Is Magic (2012) 51 10,552 50 11,093 -541 -4.88% 0 184 10.33 $1.00 MAR True Believers: Wolverine: Origin (2017) 1 10,543 0 185 10.26 $3.99 IMA Black Science (2013) 28 10,478 27 10,631 -153 -1.44% 1 186 9.96 $3.99 MAR Prowler (2016) 5 10,170 4 14,270 -4,100 -28.73% 187 9.86 $4.99 DC Astro City (2013) 41 10,066 40 9,568 498 5.20% 9 188 9.62 $3.99 MAR Great Lakes Avengers (2016) 5 9,823 4 13,763 -3,940 -28.63% 0 189 9.56 $3.99 IMA Deadly Class (2014) 26 9,760 25 8,567 1,193 13.93% 1 190 9.35 $3.99 DC Flintstones (2016) 8 9,551 7 10,099 -548 -5.43% 0 191 9.17 $3.99 DC Midnighter and Apollo (2016) 5 9,366 4 10,023 -657 -6.55% 0 192 9.16 $1.00 MAR True Believers: All New Wolverine (2017) 1 9,352 0 193 9.01 $3.99 IDW My Little Pony: Friends Forever (2014) 37 9,200 36 9,384 -184 -1.96% 1 194 8.82 $2.99 IMA Manifest Destiny (2013) 26 9,007 25 7,403 1,604 21.67% 0 195 8.69 $3.99 IMA Motor Crush (2016) 3 8,870 2 11,494 -2,624 -22.83% 0 196 8.52 $3.99 ONI Rick and Morty (2015) 23 8,702 22 8,616 86 1.00% 0 197 8.49 $5.99 DC Deadman: Dark Mansion of Forbidden Love (2016) 3 8,669 2 10,232 -1,563 -15.28% 0 198 8.45 $2.99 DC Gotham Academy: Second Semester (2016) 6 8,624 5 9,453 -829 -8.77% 0 199 8.42 $2.99 DC Teen Titans Go! (2013) 20 8,601 19 8,748 -147 -1.68% 0 200 8.32 $3.99 AFT Animosity (2016) 5 8,497 4 9,084 -587 -6.46% 7 201 8.27 $3.99 MAR Moon Girl and Devil Dinosaur (2015) 16 8,440 15 10,966 -2,526 -23.03% 0 202 8.26 $4.99 IMA Few (2017) 2 8,431 1 10,571 -2,140 -20.24% 0 203 8.17 $1.00 MAR True Believers: Wolverine: Enemy Of State (2017) 1 8,338 0 204 8.00 $1.00 MAR True Believers: Wolverine: Save Tiger (2017) 1 8,167 0 205 7.92 $3.99 IMA Belfry (2017) 8,084 0 206 7.87 $3.99 DAR Visitor: How And Why He Stayed (2017) 1 8,034 0 207 7.61 $2.99 DC Super Powers (2016) 4 7,770 3 8,313 -543 -6.53% 0 208 7.58 $3.99 DAR Aliens vs Predator: Life and Death (2016) 3 7,740 2 8,495 -755 -8.89% 0 209 7.57 $3.99 IDW Star Trek: Boldly Go (2016) 5 7,724 4 7,968 -244 -3.06% 1 210 7.49 $3.99 IDW Back to the Future (2015) 16 7,648 15 7,963 -315 -3.96% 4 211 7.44 $3.99 IDW Optimus Prime (2016) 4 7,600 3 8,274 -674 -8.15% 1 212 7.41 $1.00 MAR True Believers: Wolverine: X-Men (2017) 1 7,570 0 213 7.41 $3.99 IMA Fix (2016) 8 7,569 7 8,246 -677 -8.21% 6 214 7.38 $3.99 IDW Transformers: Lost Light (2016) 2 7,534 1 11,342 -3,808 -33.57% 1 215 7.38 $3.99 MAR Patsy Walker Aka Hellcat (2015) 15 7,532 14 9,957 -2,425 -24.35% 0 216 7.34 $3.99 VAL Harbinger: Renegade (2016) 4 7,497 3 8,228 -731 -8.88% 0 217 7.34 $3.99 VAL Divinity III: Stalinverse (2016) 3 7,496 2 7,848 -352 -4.49% 0 218 7.20 $3.99 DE John Carter: The End (2017) 1 7,348 219 7.16 $3.99 MAR Mosaic (2016) 5 7,313 4 11,003 -3,690 -33.54% 0 220 7.16 $4.69 IMA Sex Criminals (2013) 16 7,310 15 25,967 -18,657 -71.85% 0 221 7.10 $3.99 DE James Bond: Hammerhead (2016) 5 7,253 4 7,421 -168 -2.26% 0 222 7.04 $2.99 IMA Green Valley (2016) 5 7,187 4 7,553 -366 -4.85% 0 223 7.01 $3.99 IDW Back to the Future (2015) 17 7,156 16 7,648 -492 -6.43% 3 224 6.97 $3.99 DC Lucifer (2015) 15 7,120 14 7,442 -322 -4.33% 0 225 6.88 $2.99 IMA Birthright (2014) 22 7,025 21 7,147 -122 -1.71% 0 226 6.84 $3.99 IDW Highlander: American Dream (2017) 1 6,979 0 227 6.83 $3.99 DE James Bond: Felix Leiter (2017) 2 6,976 1 8,261 -1,285 -15.56% 0 228 6.75 $3.99 VAL Divinity III: Shadowman (2017) 1 6,890 0 229 6.74 $1.00 ONI Invader Zim ($1 Edition) (2017) 1 6,886 0 230 6.71 $3.99 DC Justice League/Power Rangers (2017) 1 * 6,854 231 6.63 $3.99 IDW Transformers: Lost Light (2016) 3 6,770 2 7,534 -764 -10.14% 0 232 6.56 $2.99 MAR Marvel’s Guardians of Galaxy (2017): Prelude 2 6,702 1 9,654 -2,952 -30.58% 0 233 6.54 $3.99 DAR Angel: Season 11 (2017) 2 6,681 1 9,318 -2,637 -28.30% 0 234 6.54 $3.99 MAR Enchanted Tiki Room (2016) 5 6,672 4 7,271 -599 -8.24% 0 235 6.45 $3.99 ARC Josie and the Pussycats (2016) 4 6,583 3 8,211 -1,628 -19.83% 236 6.44 $2.99 IMA Nailbiter (2014) 29 6,574 28 6,666 -92 -1.38% 0 237 6.44 $3.99 MAR Foolkiller (2016) 4 6,573 3 10,234 -3,661 -35.77% 0 238 6.43 $3.99 TTN Tank Girl Gold (2016) 4 6,560 3 7,514 -954 -12.70% 239 6.39 $3.99 DC Lost Boys (2016) 5 6,527 4 7,383 -856 -11.59% 0 240 6.36 $3.99 DE Kiss (2016) 5 6,493 4 7,069 -576 -8.15% 0 241 6.34 $3.99 MAR Dark Tower: Drawing of Three Sailor (2016) 5 6,471 4 6,558 -87 -1.33% 0 242 6.29 $3.99 IDW Transformers: Till All Are One (2016) 7 6,426 6 6,558 -132 -2.01% 4 243 6.20 $3.99 IMA Revival (2012) 47 6,325 46 4,661 1,664 35.70% 1 244 6.09 $3.99 DE Kiss: Demon (2017) 2 6,215 1 10,693 -4,478 -41.88% 0 245 6.09 $3.99 MAR Slapstick (2016) 3 6,214 2 10,813 -4,599 -42.53% 0 246 6.08 $3.99 DC Frostbite (2016) 6 6,211 5 6,578 -367 -5.58% 0 247 6.05 $3.99 IMA Beauty (2015) 12 6,179 11 7,210 -1,031 -14.30% 1 248 6.05 $3.99 ARC Jughead (2015) 13 6,177 12 6,702 -525 -7.83% 0 249 6.03 $3.99 VAL Savage (2016) 4 6,156 3 5,860 296 5.05% 0 250 6.01 $3.99 DAR Baltimore: The Red Kingdom (2017) 1 6,141 0 251 5.91 $3.99 DE Spirit: Corpse Makers (2017) 1 6,033 2 252 5.89 $3.99 VAL Faith (2016b) 8 6,018 7 6,434 -416 -6.47% 0 253 5.84 $2.99 DC Scooby Doo Team Up (2013) 23 5,959 22 6,521 -562 -8.62% 0 254 5.78 $7.99 IDW Rom (2017) Annual 5,901 3 255 5.76 $4.99 IMA Sun Bakery (2016) 1 5,876 0 256 5.74 $3.99 IMA Loose Ends (2017) 2 5,858 1 10,847 -4,989 -45.99% 0 257 5.68 $3.99 BON Simpsons Comics (1993) 237 5,799 236 5,797 2 0.03% 0 258 5.65 $3.99 VAL Ninjak (2015) 24 5,768 23 5,850 -82 -1.40% 0 259 5.63 $3.99 IMA Planetoid Praxis (2017) 1 5,753 0 260 5.51 $3.99 BOO Big Trouble in Little China/Escape from New York (2016) 5 5,627 4 6,081 -454 -7.47% 261 5.44 $3.99 DE Red Sonja (2017) 1 * 5,549 0 262 5.42 $3.99 IDW Darkness Visible (2017) 1 5,534 1 263 5.42 $3.99 IDW Revolutionaries (2017) 2 5,532 1 8,850 -3,318 -37.49% 6 264 5.29 $3.99 DC Everafter (2016) 6 5,399 5 5,877 -478 -8.13% 0 265 5.28 $3.99 AFT Blood Blister (2017) 1 5,389 1 266 5.28 $3.99 UDO Street Fighter vs Darkstalkers (2017) 0 5,388 267 5.23 $3.99 IMA Black Road (2016) 7 5,340 6 5,748 -408 -7.10% 0 268 5.08 $3.99 DAR World of Tanks (2016) 5 5,185 4 5,390 -205 -3.80% 6 269 5.06 $3.99 TTN Doctor Who: The 10th Doctor: Year Three (2017) 2 5,161 1 6,507 -1,346 -20.69% 2 270 5.03 $4.00 AAR Cerebus in Hell (2016) 1 5,139 0 6,896 -1,757 -25.48% 3 271 5.02 $3.99 IMA Violent Love (2016) 4 5,130 3 5,707 -577 -10.11% 0 272 5.02 $3.99 TTN Doctor Who: The 11th Doctor: Year Three (2017) 2 5,122 1 6,514 -1,392 -21.37% 11 273 4.98 $7.99 IDW Jem and the Holograms (2017) Annual 5,088 1 274 4.95 $3.99 JOE Disney Frozen (2016) 5 5,056 4 5,277 -221 -4.19% 9 275 4.93 $3.99 IMA God Country (2017) 1 * 5,035 5 276 4.91 $3.99 BLA Black (2016) 4 5,012 3 7,206 -2,194 -30.45% 6 277 4.90 $3.99 TTN Doctor Who: The 12th Doctor: Year Two (2016) 14 5,003 13 5,511 -508 -9.22% 9 278 4.80 $3.99 MAR Solo (2016) 5 4,903 4 8,055 -3,152 -39.13% 0 279 4.79 $3.99 AFT Rough Riders: On the Storm (2017) 1 4,887 280 4.76 $3.99 IDW Jem Misfits (2016) 2 4,860 1 7,205 -2,345 -32.55% 2 281 4.73 $3.99 TTN Torchwood (2017) 1 4,825 7 282 4.70 $3.99 DAR Ether (2016) 4 4,795 3 5,157 -362 -7.02% 0 283 4.64 $3.99 DC Clean Room (2015) 16 4,741 15 5,107 -366 -7.17% 0 284 4.59 $3.99 BOO Adventure Time (2012) 61 4,683 60 4,867 -184 -3.78% 0 285 4.57 $3.99 BOO Lumberjanes (2014) 35 4,666 34 4,789 -123 -2.57% -1 286 4.55 $7.99 IDW Ghostbusters (2017) Annual 4,648 2 287 4.52 $3.99 TTN Doctor Who: The 3rd Doctor (2016) 5 4,618 4 4,517 101 2.24% 9 288 4.50 $3.99 TTN Forever War (2017) 1 4,593 289 4.48 $5.99 ZEN Grimm Fairy Tales: Steampunk Alice In Wonderland (2017) 4,573 290 4.46 $3.99 ASP All New Fathom (2017) 1 4,549 0 291 4.45 $3.99 BLA Quantum Teens Are Go (2017) 1 4,541 0 292 4.44 $3.99 AVA Uber: Invasion (2016) 3 4,532 2 4,548 -16 -0.35% -1 293 4.36 $3.99 UNI Spongebob Comics (2011) 65 4,456 64 4,527 -71 -1.57% 0 294 4.33 $3.99 DAR Empowered: Soldier of Love (2017) 1 4,425 0 295 4.27 $2.99 DC Scooby Doo, Where Are You? (2010) 78 4,362 77 4,557 -195 -4.28% 0 296 4.27 $3.99 IDW Uncle Scrooge (2015) 23 4,356 22 4,359 -3 -0.07% 0 297 4.21 $3.99 BOO Death Be Damned (2017) 1 4,300 0 298 4.21 $3.99 AVA War Stories (2014) 22 4,296 21 4,509 -213 -4.72% 10 299 4.01 $3.99 DAR Dept H (2016) 11 4,097 10 4,201 -104 -2.48% 0 300 3.96 $4.99 ACT Zombie Tramp (2014) 32 4,044 30 4,198 -154 -3.67% 0 303 3.91 $3.99 VAL Generation Zero (2016) 7 3,997 6 4,210 -213 -5.06% 0 306 3.76 $3.99 VAL A & A (2016) 12 3,839 11 3,935 -96 -2.44% 0 308 3.60 $3.99 ZEN Grimm Fairy Tales: Van Helsing ss The Mummy of Amun Ra (2017) 1 3,676 3 313 3.52 $3.99 ZEN Grimm Fairy Tales: Day of the Dead (2017) 1 3,589 322 3.08 $4.99 ACT Dollface (2017) 2 3,146 1 11,674 -8,528 -73.05% 325 3.02 $3.99 AFT Alters (2016) 4 3,081 3 3,664 -583 -15.91% 2 326 3.01 $3.99 ZEN Evil Heroes (2016) 5 3,078 4 3,261 -183 -5.61% 12 332 2.87 $3.99 AME Stargate: Atlantis: Gateways (2016) 2 2,929 1 3,906 -977 -25.01% 11 333 2.86 $3.99 ZEN Grimm Fairy Tales: Robyn Hood: I Love Ny (2016) 9 2,925 8 3,112 -187 -6.01% 334 2.85 $3.99 CRE Heathen (2017) 1 2,913 1 336 2.83 $3.99 JOE Disney Pixar Cars (2017) 1 2,885 4 339 2.80 $3.99 ZEN Grimm Fairy Tales: Van Helsing vs Frankenstein (2016) 5 2,858 4 2,933 -75 -2.56% 341 2.78 $3.99 ZEN Grimm Fairy Tales: Van Helsing ss The Mummy of Amun Ra (2017) 2 2,839 1 3,676 -837 -22.77% 349 2.53 $5.99 ZEN Grimm Fairy Tales Presents Apocalypse (2016) 5 2,585 4 2,585 0.00% 359 2.42 $4.99 ZEN Grimm Fairy Tales: Van Helsing Cover Gallery (2017) 1 2,473 362 2.36 $3.99 ZEN Grimm Fairy Tales: Red Agent: Human Order (2017) 3 2,409 2 2,505 -96 -3.83% 365 2.22 $5.99 AVA Hellina: Scythe (2017) 1 2,266 -2 366 2.18 $3.99 AME Bedtime Stories for Impressionable Children (2017) 1 2,229 0 367 2.14 $4.50 SPA Evil Dead 2: Revenge of Evil Ed (2017) 1 2,189 0 368 2.14 $5.99 AVA Jungle Fantasy Ivory (2016) 6 2,183 2 2,602 -419 -16.10% 1 369 2.14 $4.99 ACT Vampblade ’98 Special Edition (2017) 1 2,181 373 2.09 $5.99 KEN Knights of the Dinner Table (1994) 240 2,137 239 2,105 32 1.52% 2 375 2.07 $3.99 COF La Muerta Pin Ups (2017) 1 2,109 -1 377 2.02 $7.99 AVA Hellina: Scythe (2017) 1 2,065 -2 378 2.01 $3.99 ZEN Spirit Hunters (2017) 4 2,054 3 1,940 114 5.88% 380 1.99 $3.99 AFT Black Eyed Kids (2016) 11 2,027 10 2,121 -94 -4.43% -1
Legend: Qty Rank = Quantity Rank, Index = Diamond Order Index, Pub = Publisher, # = Issue Number, R = Reorder, Est Sales = Estimated Sales, Prev Issue = Previous Issue, Prev Issue Est Sales = Previous Issue Estimated Sales, WL = Weeks Late
TOP TRADES
Qty Rank Index Price Pub Title Est Sales Total Reported Est Sales 1 8.73 $9.99 IMA Seven To Eternity v1 8,911 8,911 2 6.71 $9.99 IDW Love Is Love 6,852 8,597 3 5.80 $16.99 DC Batman Detective v1: Rise Ot Batmen (Rebirth) 5,920 5,920 4 5.39 $9.99 IMA Snotgirl v1: Green Hair Dont Care 5,504 5,504 5 5.14 $16.99 DC Wonder Woman v1: The Lies (Rebirth) 5,252 5,252 6 4.82 $19.99 IDW March v3 4,923 14,072 7 4.02 $16.99 DC Superman Action Comics v1: Path Of Doom (Rebirth) 4,102 4,102 8 3.67 $17.99 DC Hal Jordan And The Glc v1: Sinestros Law (Rebirth) 3,743 3,743 9 3.66 $14.99 IMA Outcast v4 3,738 3,738 10 3.02 $50.00 MAR Civil War Ii 3,086 3,086 11 2.99 $16.99 DC Scooby Apocalypse v1 3,052 3,052 12 2.62 $16.99 MAR Deadpool Back In Black 2,671 2,671 13 2.59 $16.99 DC Harley Quinn And Her Gang Of Harleys 2,641 2,641 14 2.49 $16.99 IMA Autumnlands v2: Woodland Creatures 2,547 2,547 15 2.45 $16.99 DC Future Quest v1 2,499 2,499 16 2.37 $16.99 DC Sheriff Of Babylon v2: Pow Pow Pow 2,420 2,420 17 2.25 $9.99 DC Wonder Woman Her Greatest Battles 2,298 2,298 18 2.19 $15.99 MAR Deadpool And Mercs For Money v1: Mo Mercs Mo Monkey 2,236 2,236 19 2.14 $24.99 MAR Rawhide Kid v1 2,188 2,859 20 2.14 $9.99 IMA Saga v1 2,185 229,074 21 2.14 $24.99 DC Batman Night Of The Monster Men 2,183 2,183 22 2.10 $16.99 DC Injustice Gods Among Us Year Five v1 2,149 2,149 23 2.03 $19.95 IDW March v2 2,075 18,260 24 2.00 $19.99 ONI Rick And Morty v4 2,047 2,047 25 1.98 $16.99 DC Batman v1: I Am Gotham (Rebirth) 2,017 11,139 26 1.97 $14.99 IMA Saga v6 2,011 51,543 27 1.96 $14.99 IDW Locke And Key Small World #1 2,005 2,005 28 1.96 $29.99 MAR Wolverine Vs Deadpool 2,001 2,001 29 1.93 $29.99 MAR Wolverine Old Man Logan 1,973 70,891 30 1.88 $125.00 MAR Daredevil Omnibus v1 1,921 1,921 31 1.82 $24.99 IDW Wind In The Willows Illus David Petersen 1,863 1,863 32 1.82 $39.99 MAR Star Wars Darth Vader v2 1,855 1,855 33 1.79 $16.99 IMA Black History In Its Own Words 1,826 1,826 34 1.75 $14.99 IMA Nameless 1,788 1,788 35 1.72 $34.99 MAR Wolverine Old Man Logan 1,755 1,755 36 1.72 $12.99 VIZ Tokyo Ghoul v11 1,753 1,753 37 1.66 $9.99 IMA Eclipse v1 1,698 1,698 38 1.64 $15.99 MAR Daredevil Back In Black v3: Dark Art 1,674 1,674 39 1.64 $24.99 MAR Doctor Strange v3: Blood In Aether 1,674 1,674 40 1.64 $15.99 MAR All New All Different Avengers v3: Civil War Ii 1,673 1,673 41 1.62 $9.99 IMA Monstress v1 1,655 31,154 42 1.62 $16.99 DC Wonder Woman v9: Resurrection 1,649 1,649 43 1.59 $16.99 MAR Captain Marvel v2: Civil War Ii 1,621 1,621 44 1.56 $17.99 MAR Extraordinary X-Men v3: Kingdoms Fall 1,592 1,592 45 1.56 $9.99 IMA Paper Girls v1 1,591 40,001 46 1.55 $125.00 MAR Star Wars Marvel Yrs Omnibus v1 1,582 3,469 47 1.55 $19.99 DC New Teen Titans v6 1,579 1,579 48 1.54 $19.99 ONI Rick And Morty Lil Poopy Superstar v1 1,575 1,575 49 1.52 $34.99 MAR Spider-Gwen v1 1,547 1,547 50 1.48 $24.99 MAR Empress Book One 1,516 1,516 51 1.48 $19.99 DC Robin War 1,511 1,511 52 1.47 $100.00 MAR Alpha Flight By John Byrne Omnibus 1,502 1,502 53 1.47 $17.99 DC Flash v1: Lightning Strikes Twice (Rebirth) 1,497 7,381 54 1.43 $9.99 MAR Color Your Own Wolverine 1,457 1,457 55 1.41 $16.99 DC Superman v1: Son Of Superman (Rebirth) 1,441 7,026 56 1.40 $24.99 DC Injustice Gods Among Us Year Five v2 1,426 1,426 57 1.40 $14.99 IMA Saga v2 1,426 140,250 58 1.39 $12.99 IMA Paper Girls v2 1,421 14,965 59 1.38 $15.99 MAR All New X-Men v3: Inevitable Hell Hath So Much Fury 1,413 1,413 60 1.36 $125.00 MAR Star Wars Marvel Yrs Omnibus v2 1,388 2,899 61 1.35 $15.99 DC Batgirl An Adult 1,382 1,382 62 1.32 $14.99 DAR Angel Catbird v2: Castle Catula 1,346 1,346 63 1.32 $15.99 MAR X-Men Legacy v1: Prodigal 1,343 2,881 64 1.30 $29.99 DAR He-Man And Masters Of Universe Newspaper Comic Strips 1,324 1,324 65 1.29 $14.99 IMA Walking Dead v1: Days Gone Bye 1,319 403,380 66 1.29 $10.99 DAR How Train Your Dragon v1: Serpents Heir 1,318 1,318 67 1.27 $9.99 VAL Britannia 1,300 1,300 68 1.27 $29.99 MAR Deadpool And Secret Defenders 1,293 1,293 69 1.24 $16.99 DC Wonder Woman 77 v2 1,262 1,262 70 1.22 $99.99 MAR Hawkeye By Matt Fraction And David Aja Omnibus 1,249 2,931 71 1.22 $16.99 DC Green Lantern v8: Reflections 1,247 1,247 72 1.22 $100.00 MAR Uncanny X-Men v10 1,246 1,246 73 1.22 $14.99 IMA Saga v5 1,242 74,097 74 1.19 $125.00 MAR War Of Kings Aftermath Realm Of Kings Omnibus 1,219 1,219 75 1.19 $39.99 MAR Star Wars Legends Epic Collection Empire v3 1,218 1,218 76 1.19 $29.99 DC Batman The Golden Age v2 1,211 1,211 77 1.18 $16.99 DC Robin Son Of Batman v2: Dawn Of The Demons 1,201 1,201 78 1.17 $19.99 MAR Star Wars Darth Vader v1: Vader 1,192 36,901 79 1.16 $16.99 IMA Lake Of Fire 1,180 1,180 80 1.11 $14.99 DC Batman Beyond v3: Wired For Death 1,130 1,130 81 1.11 $14.99 IMA Saga v4 1,130 92,856 82 1.10 $39.99 DC Batgirl A Celebration Of 50 Years 1,127 1,127 83 1.10 $24.99 DC Invisibles v1 1,119 1,119 84 1.08 $19.99 IDW My Little Pony Friends Forever v8 1,106 1,106 85 1.08 $16.99 DC Teen Titans v4: When Titans Fall 1,099 1,099 86 1.06 $39.99 MAR Wolverine Epic Collection Shadow Of Apocalypse 1,086 1,086 87 1.06 $9.99 IMA Kill Or Be Killed v1 1,083 8,301 88 1.06 $16.99 DC Jla Gods And Monsters 1,080 1,080 89 1.05 $9.99 VIZ One Piece v81 1,075 1,075 90 1.04 $99.99 MAR Captain America Return Of Winter Soldier Omnibus 1,063 2,078 91 1.04 $125.00 MAR X-Men Avengers Onslaught Omnibus 1,061 2,148 92 1.02 $19.99 DC Watchmen 1,037 31,504 93 1.01 $14.99 IMA Saga v3 1,036 110,921 94 1.00 $16.99 DC Justice League v1: The Extinction Machine (Rebirth) 1,025 6,120 95 0.99 $12.95 RAN Junji Itos Dissolving Classroom 1,015 1,015 96 0.99 $125.00 MAR Star Wars Marvel Yrs Omnibus v3 1,008 2,411 97 0.98 $125.00 MAR Annihilation Conquest Omnibus 996 2,392 98 0.95 $15.99 MAR Ghost Rider Wolverine Punisher Hearts Of Darkness 974 974 99 0.94 $17.99 ARC Jughead v2 964 964 100 0.94 $17.99 DC Batman The Killing Joke Special Edition 959 213,884 101 0.94 $39.99 MAR Daredevil Epic Collection Brother Take My Hand 955 955 102 0.93 $16.99 DC Earth 2 v6: Collision 951 951 103 0.93 $125.00 MAR Guardians Of Galaxy Solo Classic Omnibus 946 1,578 104 0.92 $29.99 RAN Ghost In Shell Dlx Rtl Ed v1 943 943 105 0.91 $29.99 MAR Captain Marvel v3: Earths Mightiest Hero 927 927 105 0.91 $29.99 MAR Captain Marvel v3: Earths Mightiest Hero 927 927 106 0.91 $125.00 MAR Werewolf By Night Omnibus 926 2,273 107 0.91 $16.99 DC Green Arrow v1: Death And Life Of Oliver Queen (Rebirth) 925 5,398 108 0.91 $14.99 IMA Walking Dead v26: Call To Arms 924 26,924 109 0.90 $14.99 BOO Adventure Time Comics v1 923 923 110 0.90 $39.99 MAR Wolverine Prehistory 918 918 111 0.89 $15.99 MAR Punisher And Bullseye Deadliest Hits 912 912 112 0.88 $49.99 DC Batman And The Outsiders v1 903 903 113 0.88 $9.99 IMA Descender v1: Tin Stars 902 28,956 114 0.88 $19.99 IDW Revolution 899 899 115 0.88 $16.99 DC Nightwing v1: Better Than Batman (Rebirth) 898 5,161 116 0.88 $24.99 DE James Bond v2: Eidolon 896 896 117 0.87 $14.99 TTN Penny Dreadful 890 890 118 0.87 $16.99 MAR Black Panther v1: Nation Under Our Feet 885 13,188 119 0.86 $24.99 DAR Moby Dick 883 883 120 0.86 $12.99 TTN Sherlock A Study In Pink 874 874 121 0.85 $9.99 IMA I Hate Fairyland v1: Madly Ever After 865 17,477 122 0.84 $34.99 DC Cosmic Odyssey Deluxe Edition 860 860 123 0.84 $99.99 MAR Shield Complete Collection Omnibus 856 856 124 0.82 $24.99 MAR Invincible Iron Man v3: Civil War Ii 837 837 125 0.81 $16.99 DC Batman v1: The Court Of Owls 827 93,378 126 0.81 $34.99 DC Superman Batman v5 823 823 127 0.80 $14.99 IMA Sex v5: Reflexology 819 819 128 0.79 $14.95 IDW March v1 804 21,768 129 0.78 $17.99 DAR Weird Detective 797 797 130 0.77 $9.99 IMA Wicked And Divine v1: The Faust Act 789 51,131 131 0.76 $9.99 VIZ My Hero Academia v7 779 779 132 0.76 $29.99 RAN Ghost In Shell Dlx Rtl Ed v2 777 777 133 0.75 $99.99 MAR Fantastic Four Omnibus v2 768 2,822 134 0.74 $9.99 VIZ Assassination Classroom v14 759 759 135 0.74 $34.99 MAR Cloak And Dagger Shadows And Light 757 757 136 0.73 $125.00 DC Wonder Woman By Azzarello And v1 749 749 137 0.73 $19.99 IMA Black Monday Murders v1: All Hail God Mammon 747 5,207 138 0.73 $9.99 IMA Rat Queens v1: Sass And Sorcery 744 48,250 139 0.73 $16.99 DC Aquaman v1: The Drowning (Rebirth) 743 4,683 140 0.72 $14.99 IMA Walking Dead v2: Miles Behind Us 733 227,229 141 0.72 $16.99 BOO Kong Of Skull Island v1 730 730 142 0.71 $19.99 MAR Star Wars Darth Vader v2: Shadows And Secrets 722 17,933 143 0.71 $17.99 MAR Vision v1: Little Worse Than Man 722 11,174 144 0.69 $24.99 MAR Guardians Of Galaxy v3: New Guard Civil War Ii 705 705 145 0.69 $9.99 IMA East Of West v1: The Promise 701 58,445 146 0.68 $99.99 MAR Avengers Omnibus v2 698 2,167 147 0.68 $19.99 MAR Star Wars Darth Vader v4: End Of Games 692 7,832 148 0.68 $16.99 DC Green Lanterns v1: Rage Planet (Rebirth) 691 4,328 149 0.67 $125.00 MAR Avengers By Busiek And Perez Omnibus v2 683 1,699 150 0.66 $14.99 IMA Walking Dead v25: No Turning Back 672 34,662 151 0.66 $24.99 MAR Thanos Death Sentence Prose Novel 671 671 152 0.65 $24.99 DC Batman Hush Complete 667 109,949 153 0.65 $49.99 MAR Young Avengers By Gillen And Mckelvie Omnibus 667 3,378 154 0.64 $125.00 MAR Oz Omnibus 656 2,769 155 0.64 $19.99 RAN Ghost In Shell Dlx Rtl Ed v15 654 654 156 0.64 $24.99 DC Kid Eternity v1 651 651 157 0.64 $75.00 MAR Ultimate Comics Spider-Man Dosm Omnibus 650 2,549 158 0.63 $14.99 TTN Vikings 643 643 159 0.63 $14.99 IMA Scooter Girl 640 640 160 0.62 $125.00 MAR Iron Man By Kurt Busiek And Sean Chen Omnibus 638 2,155 161 0.62 $99.99 MAR Uncanny Avengers Omnibus 631 1,791 162 0.62 $99.99 MAR Fantastic Four By Matt Fraction Omnibus 630 1,274 163 0.62 $9.99 IMA Low v1: The Delirium Of Hope 629 27,464 164 0.62 $19.99 VIZ Jojos Bizarre Adventures Stardust Crusaders v2 629 629 165 0.60 $14.99 IMA I Hate Fairyland v2: Fluff My Life 615 5,938 166 0.60 $99.99 DC Green Lantern The Silver Age Omnibus v1 611 611 167 0.59 $99.99 MAR Captain America Trial Of Captain America Omnibus 606 3,781 168 0.59 $39.99 MAR Elektra By Milligan Hama And Deodato Jr Comp Collect 606 606 169 0.59 $16.99 DC Red Thorn v2: Mad Gods And Scotsmen 605 605 170 0.58 $15.99 MAR Wolverine Old Man Logan v3: Last Ronin 593 3,614 171 0.58 $9.99 IMA Tokyo Ghost v1: Atomic Garden 592 17,548 172 0.57 $19.99 MAR Star Wars Vader Down 582 13,688 173 0.57 $9.99 VIZ Food Wars Shokugeki No Soma v16 581 581 174 0.57 $29.99 IDW Flight Of The Raven 580 580 175 0.57 $49.99 IDW March Trilogy Slipcase Set 579 1,018 176 0.57 $125.00 MAR New Avengers Omnibus v1 579 4,175 177 0.56 $14.99 IMA Descender v2 570 12,246 178 0.55 $16.99 DC Flash v1: Move Forward 565 37,513 179 0.55 $49.99 IDW Teenage Mutant Ninja Turtles Ongoing Coll v4 565 565 180 0.55 $15.99 ONI Another Castle Grimoire v1 565 565 181 0.55 $19.99 TTN Doctor Who Supremacy Of The Cybermen 564 564 182 0.55 $14.99 VAL Ninjak v5: The Fist And The Steel 563 563 183 0.55 $19.99 MAR Star Wars v4: Last Flight Of The Harbinger 562 4,907 184 0.55 $12.99 IMA Pix v1: One Weirdest Weekend 561 561 185 0.55 $19.99 DC Y The Last Man v1 558 18,341 186 0.55 $19.99 DC Sandman v1: Preludes And Nocturnes 557 68,402 187 0.54 $150.00 MAR Stand Omnibus Slipcase 556 1,696 188 0.54 $125.00 MAR Fantastic Four By John Byrne Omnibus v2 555 2,757 189 0.54 $17.99 MAR Vision v2: Little Better Than Beast 554 6,220 190 0.54 $9.99 DC Dc Super Hero Girls v1: Finals Crisis 550 13,943 191 0.54 $17.99 MAR Spider-Man Deadpool v1: Isnt It Bromantic 550 11,694 192 0.54 $19.99 AVA Crossed Plus 100 v3 549 549 193 0.53 $16.99 MAR Star Wars Darth Vader v3: Shu Torun War 544 10,641 194 0.53 $39.99 MAR New Avengers By Bendis Complete Collection v2 541 541 195 0.52 $14.99 MAR Deadpool Kills Marvel Universe 533 71,931 196 0.52 $9.99 IMA Goddamned v1: The Flood 529 4,936 197 0.52 $14.99 IMA Walking Dead v3: Safety Behind Bars 528 138,560 198 0.52 $16.99 DC Flashpoint 527 22,931 199 0.51 $9.99 IMA Bitch Planet v1: Extraordinary Machine 523 26,301 200 0.51 $14.99 IMA Wicked And Divine v4: Rising Action 522 10,000 201 0.51 $99.99 MAR Fantastic Four Omnibus v3 519 519 202 0.51 $14.99 IMA Rat Queens v3: Demons 518 14,877 203 0.50 $15.95 DRA Wilson 515 515 204 0.50 $19.99 IMA Land Called Tarot 515 515 205 0.50 $16.99 DC Harley Quinn v1: Hot In The City 514 26,209 206 0.50 $19.99 DC V For Vendetta New Edition 513 51,275 207 0.50 $9.99 IMA Deadly Class v1: Reagan Youth 510 27,540 208 0.50 $16.99 MAR Star Wars Han Solo 510 5,170 209 0.50 $125.00 MAR Golden Age Captain America Omni v1: Weeks Cvr 509 2,759 210 0.50 $15.99 MAR Wolverine Old Man Logan v2: Bordertown 508 5,609 211 0.49 $14.99 MAR Runaways v2: Teenage Wasteland 505 505 212 0.49 $24.99 DE George Rr Martin Wild Cards Hard Call 504 2,942 213 0.49 $17.99 MAR Moon Girl And Devil Dinosaur v1: Bff 504 4,549 214 0.49 $14.99 ARC Archie 1000 Page Comics Compendium 502 502 215 0.49 $19.99 IDW Ghostbusters International v2 502 502 216 0.49 $9.99 JOE Disney Moana Comics Coll 501 501 217 0.49 $12.99 DAR Trekker Rites Of Passage 500 500 218 0.49 $24.99 MAR Infinity Gauntlet 498 53,056 219 0.49 $9.99 IMA Black Science v1: How To Fall Forever 497 35,844 220 0.48 $14.99 IMA Descender v3: Singularities 495 6,188 221 0.48 $99.99 MAR Howard Duck Omnibus 495 4,094 222 0.48 $19.99 IMA Head Lopper v1: Island Or A Plague Of Beasts 492 5,045 223 0.48 $9.99 VIZ One Punch Man v1 487 17,479 224 0.47 $14.99 IDW Teenage Mutant Ninja Turtles Amazing Adventures v4 481 481 225 0.47 $14.99 VIZ Mobile Suit Gundam Thunderbolt v2 480 480 226 0.47 $14.99 IMA Fuse v4: Constant Orbital Revolutions 479 479 227 0.47 $24.99 DC Injustice Gods Among Us Year One Complete Col 478 3,114 228 0.46 $19.99 DC Preacher v1 474 43,681 228 0.46 $19.99 DC Preacher v1 474 34,433 229 0.46 $17.99 DC Superman Red Son New Edition 471 22,000 230 0.46 $9.99 MAR Marvel Universe Guardians Of Galaxy Digest v4 468 468 231 0.46 $24.99 IDW Jay Disbrow Monster Invasion 467 467 232 0.46 $14.99 IMA Rat Queens v2: Far Reaching Tentacles Of Nrygoth 467 24,349 233 0.45 $9.99 IMA Wytches v1 462 27,263 234 0.45 $9.99 VIZ Haikyu v8 462 462 235 0.45 $16.99 IMA Chew v12 461 4,112 236 0.45 $12.99 SCO Once Our Land 458 458 237 0.45 $14.99 IMA Walking Dead v4: Hearts Desire 455 141,616 238 0.45 $15.99 MAR Ms Marvel v1: No Normal 455 47,060 239 0.45 $17.99 MAR Wolverine Old Man Logan v0: Warzones 455 5,846 240 0.44 $99.99 MAR X-Force Omnibus v1 452 4,319 241 0.44 $16.99 DC Batman v3: Death Of The Family 451 46,521 242 0.44 $14.99 IMA Wicked And Divine v2: Fandemonium 450 25,102 243 0.44 $16.99 DC Batman v2: The City Of Owls 448 60,125 244 0.44 $16.99 RAN Beatles All Our Yesterdays 445 445 245 0.43 $14.99 IMA Sunstone Ogn v5 439 4,221 246 0.43 $9.99 DC Dc Super Hero Girls v2: Hits And Myths 438 7,756 247 0.43 $14.99 IMA East Of West v6 438 7,610 248 0.42 $125.00 MAR Marvel Firsts 1990S Omnibus 432 432 249 0.42 $10.95 RAN Fukufuku Kitten Tales v2 426 426 250 0.41 $24.99 MAR Civil War 423 198,280 251 0.41 $19.99 IDW X-Files Origins 416 416 252 0.41 $24.99 MAR Avengers K v4: Secret Invasion 416 416 253 0.41 $49.99 DAR Eerie v23 415 415 254 0.41 $39.99 FAN My Favorite Thing Is Monsters 415 415 255 0.40 $24.99 BOO Killer v5 413 413 256 0.40 $29.99 DAR Edgar Burroughs Tarzan Jesse Marsh Omnibus v1 404 404 257 0.39 $99.99 MAR Ultimate Marvel Omnibus v1 403 403 258 0.39 $49.99 DAR Ec Valor 397 397 259 0.39 $17.99 DAR Neil Gaimans Forbidden Brides Slaves Dread Desire 397 3,318 260 0.39 $24.99 DC Batman The Long Halloween 395 65,690 261 0.38 $12.99 VIZ Ultraman v7 393 393 262 0.38 $12.99 IDW Donald Duck Big Sneeze 387 387 263 0.38 $19.99 MAR Star Wars v1: Skywalker Strikes 385 39,966 264 0.38 $15.99 IMA Hinges v3: Mechanical Men 384 384 265 0.37 $19.99 DC Dark Knight Returns New Edition 382 913 266 0.37 $19.99 BOO Mighty Morphin Power Rangers v1 381 3,201 267 0.37 $14.99 DC Sheriff Of Babylon v1: Bang Bang Bang 379 4,029 268 0.37 $14.99 IMA Tokyo Ghost v2 377 7,274 269 0.37 $14.99 IMA Wicked And Divine v3 376 16,572 270 0.36 $9.99 IMA Injection v1 367 8,495 271 0.36 $9.99 IMA Outcast v1 367 30,261 272 0.36 $11.99 DAR Fate Zero v4 366 366 273 0.36 $12.99 IDW Strawberry Shortcake v2: Strawberry Noir 364 364 274 0.36 $10.99 RAN Say I Love You v17 363 363 275 0.35 $14.99 IMA Low v3: Shore Of The Dying Light 360 6,036 276 0.35 $10.99 TOK Disney Manga Kilala Princess v4 360 360 277 0.35 $14.99 IMA Low v2: Before The Dawn Us 358 9,771 278 0.35 $125.00 MAR Avengers By Busiek And Perez Omnibus v1 356 1,131 279 0.34 $59.99 IMA Walking Dead Compendium v1 352 73,040 280 0.34 $14.99 MAR Deadpool v1: Secret Invasion 352 22,684 281 0.34 $9.99 IMA Sex Criminals v1 350 58,275 282 0.34 $15.99 MAR Moon Knight v1: Lunatic 348 4,467 283 0.34 $14.99 DAR Harrow County v1: Countless Haints 346 4,787 284 0.34 $24.99 DC Injustice Gods Among Us Year Two Complete Coll 346 2,321 285 0.34 $34.99 MAR X-23 Complete Collection v1 345 2,148 286 0.34 $24.99 DC Batman Teenage Mutant Ninja Turtles 344 11,279 287 0.33 $17.99 ST. Decelerate Blue 342 342 288 0.33 $19.99 DC Blackest Night 340 47,767 289 0.33 $75.00 IDW Alex Toth Bravo For Adventure Artist Ed 338 338 290 0.33 $19.99 DC Kingdom Come 337 34,701 291 0.33 $11.99 ONI Oh Joy Sex Toy 336 336 292 0.33 $14.95 HUM Snow Day 334 334 293 0.33 $14.99 DAR Berserk v1: Black Swordsman 332 6,333 294 0.33 $15.99 DE Shaft Imitation Of Life 332 332 295 0.32 $12.99 VIZ Tokyo Ghoul v1 331 13,407 296 0.32 $24.99 DAR Mass Effect Omnibus v2 330 330 297 0.32 $17.99 DAR Sabertooth Swordsman v1: (2Nd Ed) 330 330 298 0.32 $9.99 VIZ Black Clover v5 329 329 299 0.32 $14.99 IMA Walking Dead v5: Best Defense 328 116,687 300 0.32 $14.99 IMA East Of West v2: We Are All One 327 24,837 301 0.32 $9.99 VIZ Magi v22 326 326 306 0.32 $9.99 VIZ One Punch Man v10 322 3,072 310 0.31 $12.99 ST. Girl From Other Side Siuil Run v1 316 513 311 0.31 $12.99 SCH Newsprints v1 315 315 312 0.31 $17.99 AFT Second Sight v1 313 313 314 0.30 $25.00 POC Judge Dredd Cursed Earth Saga Uncensored 309 309 317 0.30 $14.99 JOE Disney Beauty And The Beast Cinestory 308 308 322 0.30 $12.99 ST. Magical Girl Site v1 304 304 326 0.29 $44.95 HUM The Incal 299 2,276 331 0.29 $14.99 DAR Berserk v4 293 4,879 332 0.29 $12.99 ST. Magika Swordsman And Summoner v6 293 293 333 0.28 $10.99 VIZ Monster Hunter Flash Hunter v6 290 290 334 0.28 $19.99 ARC Archie v1 290 6,307 337 0.28 $22.50 DIA Serpieri Collection v4 288 288 338 0.28 $30.00 HAC Erased v1 288 288 344 0.28 $14.99 VIZ Bleach 3In1 v18 282 282 347 0.27 $12.99 ST. Theres A Demon Lord On Floor v1 277 277 349 0.27 $17.99 VIZ Legend Of Zelda Legendary Ed v1: Ocarina Time 275 3,085 350 0.27 $19.99 PAN Doctor Who Highgate Horror 275 275 353 0.27 $12.99 RAN Happiness v3 274 274 355 0.27 $12.99 ASP Fathom #2 273 273 356 0.27 $19.99 ST. Jason Shiga Demon v2 273 273 360 0.26 $13.00 HAC Smokin Parade v1 266 266 361 0.26 $22.95 ABR Haddon Hall When David Invented Bowie 266 266 366 0.26 $13.00 HAC Spirits And Cat Ears v1 264 264 367 0.26 $12.99 RAN Nekogahara Stray Cat Samurai v2 262 262 377 0.25 $20.99 ST. Kindred Spirits On Roof Complete Collection 257 257 384 0.24 $9.99 VIZ Kamisama Kiss v23 249 249 386 0.24 $12.99 VIZ Ten Count v3 248 248 387 0.24 $13.99 UDO Persona 4 v6 248 248 389 0.24 $19.99 ZEN Charmed Season 10 v3 247 247 392 0.24 $14.99 ST. Time Museum v1 244 244 396 0.24 $29.99 FAN Starseeds 242 242 402 0.23 $12.99 ST. Re Monster v2 238 238 405 0.23 $14.99 VIZ Yu Gi Oh 3In1 v9 235 235 414 0.23 $20.00 HAC Fruits Basket v10 231 231 419 0.22 $9.99 VIZ Yona Of The Dawn v4 229 229 421 0.22 $12.99 ST. Love In Hell Death Life v2 228 228 423 0.22 $19.99 ARC Archie v2 226 2,499 425 0.22 $9.99 ACT Athena Voltaire Volcano Goddess 225 225 427 0.22 $19.99 ST. Freezing Omnibus v7 224 224 429 0.22 $12.99 ST. How To Build Dungeon Book Of Demon King v2 223 223 435 0.22 $12.99 ST. My Pathetic Vampire Life v2 221 221 438 0.22 $14.99 ST. Please Tell Me Galko Chan v2 220 220
The post Darth Maul #1 in Sales, Batman Dips Below 100K in February 2017 appeared first on CBR.com.
http://ift.tt/2lTjwy7
0 notes
Text
Tumblr media
3 notes · View notes