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.

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.

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.

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>

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>

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.

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; }

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…"); }

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; }

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>

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; }

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; }

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.

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>

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; }

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.

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. 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; }
}

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; }

Read More From The Series

• Inspired Design Decisions: Avaunt Magazine
• Inspired Design Decisions: Pressing Matters
• Inspired Design Decisions: Ernest Journal
• Inspired Design Decisions: Alexey Brodovitch
• Inspired Design Decisions: Bea Feitler
• Inspired Design Decisions: Neville Brody
• Inspired Design Decisions: Otto Storch
• Inspired Design Decisions: Herb Lubalin
• Inspired Design Decisions: Max Huber
• Inspired Design Decisions: Giovanni Pintori

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)

While good use of type helps people to read, great typography can do so much more. Typography can eloquently articulate an idea and colourfully communicate a message in ways which are as powerful as any illustration or photograph.

I’m someone who loves cinema as much as I admire typography. Few things inspire me as much as seeing movie poster typography which either evokes the atmosphere of a film and adds to the telling of its story.

More recently, typography in Quentin Tarantino’s film posters perfectly reflects the atmosphere and character of his movies. In Pulp Fiction, the title’s Aachen Bold typeface is as hardboiled as the film itself. For Once Upon a Time in Hollywood, although the typesetting of the iconic sign deviates from reality as much as other parts of the film, the poster conjures up the spirit of Hollywood.

Saul Bass is possibly the best-known graphic designer of his era and for 1950s and ’60’s Hollywood he created movie posters which are as recognisable as the sign itself. For his poster design for Hitchcock’s Vertigo in 1958, Bass used hand-cut typography which evokes German expressionist films of the 1920s. In 1960, Bass’s slashed title typography for Pyscho — again for Alfred Hitchcock — is both clever and obvious. While Saul Bass is often incorrectly credited with designing one of my favourite film posters from West Side Story, — Bass did design the title sequence — the poster was actually designed by Joseph Caroff who also created James Bond’s famous 007 logo.

Although we don’t yet have the same control over typography on the web as we do in print, new file formats, font delivery services, and web fonts have meant far more typographic flexibility than we had ten years ago. Typography controls in CSS have helped us be more creative with type too. On top of basic font style properties, we can now reliably fine-tune OpenType figures, hyphenation, ligatures, and even kerning.

It’s rare to find such creative uses for type online, studying the work of graphic designers and talented typographers can open our eyes to what we can achieve using today’s type technologies. One of my personal favourite designers and typographers is Herb Lubalin, and learning about him and his work has transformed my own approach to typography.

Read More From The Series

• Inspired Design Decisions: Avaunt Magazine
• Inspired Design Decisions: Pressing Matters
• Inspired Design Decisions: Ernest Journal
• Inspired Design Decisions: Alexey Brodovitch
• Inspired Design Decisions: Bea Feitler
• Inspired Design Decisions: Neville Brody
• Inspired Design Decisions: Otto Storch

Inspired By Herb Lubalin

Herb Lubalin was an American graphic designer who spent his career designing everything from advertising, posters, and even postage stamps. He was fascinated by the look of words and how typographic design can make them sound. Lubalin understood how by combining art, copy, and typography, graphic designers add conviction when communicating messages. He said:

“The better people communicate, the greater will be the need for better typography-expressive typography.”

— Herb Lubalin

Having narrowly passed the entrance exam to the Cooper Union art school in New York, Herbert (Herb) Lubalin was fired from his first job as a graphic artist for asking for a $2 per week raise. In pre-war American advertising agencies, the job of a layout artist was simply to place headlines, copy, and images into available space, but that changed after WW2 with an influx of immigrant designers from Europe. They included Austrian Herbert Bayer, Russian Mehemed Fehmy Agha, and Belarusian Alexey Brodovitch.

These designers imported new processes which brought art directors, layout artists, and writers together to form the creative teams made popular by the famous advertising creative director Bill Bernbach in the 1960s and 1970s.

In 1945, Lubalin became art director at Sudler & Hennessey — a creative studio which specialised in the pharmaceutical industry — where he led a team of designers, illustrators, and photographers. The process which Lubalin established first at Sudler & Hennessey and from 1964 in his own studio is fascinating. He drove the design process by making “tissues” — pen and ink sketches which established the spacial arrangement of its elements — and detailed notes on typographic designs including typeface choices, sizes, and weights.

At the start of any new project, Lubalin began by sketching arrangements of headlines, copy, and images onto tissue paper. Then, he’d lay another tissue on top to refine his ideas, then another, and another, to rapidly develop his design. After his assistants recovered discarded tissues from the floor or trash, they became collectors’ items.

Lubalin was an obsessive perfectionist about typography. For “Let’s talk type” — a trade advertisement for Sudler & Hennessey — Lubalin precisely placed the only paragraph. This copy sits perfectly on the baseline alongside the word “let” and its size and leading allow for the descender from the letter “y” above.

Lubalin was equally as precise about the placement of text in a poster which announced the Avant Garde anti-war poster competition. He would frequently take a scalpel blade to type, adjusting the spacing between letters and altering the height of ascenders and descenders to fit his designs. Letters in the headline for “No More War” are precisely sized and aligned. The tracking of the uppercase blue standfirst creates a block of copy which perfectly fits into its space.

In “The fourth of July means picnics…” Lubalin used perspective to represent the road ahead. This meant considering the tracking of every line of text, sometimes altering words to fit the design. Working with Lubalin’s designs wasn’t easy, and as one of his assistants later described:

“To make everything line up, you’ve got to do it over and over again, and then, if the client alters the text, you’ve got to redo the whole thing. To him (Lubalin,) it was worth it. How long it took or how much it cost wasn’t as important to him as it was to other designers.”

Because of his relentless conviction as well as his talent, Lubalin went on to become one of the most celebrated graphic designers and typographers of the twentieth century. There’s plenty we can learn from how he approached his work and his conviction that design can compellingly communicate.

There are two books on Herb Lubalin and his work you should add to your collection. “Herb Lubalin: Art Director, Graphic Designer and Typographer” (1985) by Gertrude Snyder and Alan Peckolick is out of print, but good copies are available on eBay. Better still is “Herb Lubalin: American Graphic Designer” (2013) by Adrian Shaughnessy and published by Unit Editions. A limited edition of 2000, Shaughnessy’s book features hundreds of examples of Lubalin’s work.

Pre-Formatting Headlines

Headlines are a perfect place to begin being more adventurous with type. Expressive typography needn’t need fancy fonts. You can create an eye-catching headline by using different styles and weights found within many everyday font families. Look for extended families like Montserrat — designed by Julieta Ulanovsky and available on Google Fonts — with its variety of weights ranging from thin and light, to extra-bold, and even black.

For this first Herb Lubalin inspired design, my headline uses black and light weights from this sans-serif typeface. Negative tracking (letter-spacing) and tight leading (line-height) combine to create a block of type which demands attention.

In the past, developing headlines like this involved hard-coding the design into your HTML by adding breaks between individual words, like this:

<h1><strong>UK’s <br>
best-<br>
selling <br>
car</strong> <br>
during <br>
the <br>
1970s</h1>

Other times, you might use wrap each word with an inline span element and then change its display property to block:

<h1><strong><span>UK’s</span>
<span>best-</span>
<span>selling</span>
<span>car</span></strong>
<span>during</span>
<span>the</span>
<span>1970s</span></h1>

Instead of these presentational elements, I add explicit line breaks in my HTML:

<h1><strong>UK’s 
best-
selling
car</strong>
during
the
1970s</h1>

Browsers ignore anything more than a single space between words, so on small viewports, this headline reads like a sentence. I only need foundation styles which style its colours, size, and weights, as well as the negative tracking and tight leading which makes this headline distinctive:

h1 {
font-size: 6vmax;
font-weight: 300;
line-height: .75;
letter-spacing: -.05em;
text-transform: uppercase;
color: #fff; }

h1 strong {
font-weight: 600;
color: #bd1f3a; }

Whereas HTML’s pre element respects pre-formatted text and presents it exactly as written in a document, the CSS white-space property enables similar results without sacrificing semantics. Of the six available white-space values, these are the four I use these most often:

1. white-space: normal;
   Text fills line-boxes and breaks as required
2. white-space: nowrap;
   The text won’t wrap, and it may overflow its container
3. white-space: pre;
   Explicit line-breaks are respected, text breaks with new lines and br elements
4. white-space: pre-wrap;
   White-space is respected, but the text will also wrap to fill line-boxes

I only need the effects of the white-space property on larger viewports, so I isolate it with a media query:

@media (min-width: 64em) {

h1 {
white-space: pre; }
}

Using several styles from one font family adds visual interest. My Lubalin-inspired design incorporates light, bold, and black weights, plus condensed and regular styles of this sans-serif typeface to produce a variety of text-treatments.

First, I need two structural elements to accomplish my design, main and aside:

<main>…</main>
<aside>…</aside>

While the main element includes my headline and running text, the aside contains four images in a division and five articles about versions of the classic Cortina:

<aside>
<div>
<img src="img-1.svg" alt="Ford Cortina Mark 1 front profile">
<img src="img-2.svg" alt="Ford Cortina Mark 3 rear">
<img src="img-3.svg" alt="Ford Cortina Mark 4 front">
<img src="img-4.svg" alt="Ford Cortina Mark 5 rear profile">
</div>

<article>…</article>
<article>…</article>
<article>…</article>
<article>…</article>
<article>…</article>
</aside>

First, I specify the styles of paragraphs in each of my articles using pseudo-class selectors. Each paragraph uses a different combination of font styles and weights, with mixed-case and uppercase letters:

article:nth-of-type(1) p {
font-family: 'light';
text-transform: uppercase; }

article:nth-of-type(2) p {
font-family: 'bold-condensed';
font-weight: 600;
text-transform: uppercase; }

article:nth-of-type(3) p {
font-family: 'bold-condensed';
font-weight: 600; }

article:nth-of-type(4) p {
font-family: 'light';
text-transform: uppercase; }

article:nth-of-type(5) p {
font-family: 'bold-condensed';
font-weight: 600; }

With those foundation styles in place for every screen size, I introduce layout to the aside element which will be visible on for medium-size screens. For layouts like this, where elements don’t overlap, I often grid-template-areas for their simplicity. This design has nine grid areas. While I could give these areas names which describe the content I’ll place into them — for example, “mark-1” — instead I use letters which makes moving items around my grid a little easier:

@media (min-width: 48em) {

aside {
display: grid;
grid-template-areas: 
"a b c"
"d e f"
"g h i";
grid-gap: 1.5rem; }
}

I need to place the four images into my template areas, and not the division which contains them. I change the display property of that element to contents, which effectively removes it from the DOM for styling purposes:

aside div {
display: contents; }

I place those images using area names. Moving them into another area only involves referencing a different area name and no change to their order in my HTML:

aside img:nth-of-type(1) {
grid-area: a; }

aside img:nth-of-type(2) {
grid-area: e; }

aside img:nth-of-type(3) {
grid-area: g; }

aside img:nth-of-type(4) {
grid-area: i; }

Then, I place articles into the five remaining areas to complete my layout:

aside article:nth-of-type(1) {
grid-area: b; }

aside article:nth-of-type(2) {
grid-area: c; }

aside article:nth-of-type(3) {
grid-area: d; }

aside article:nth-of-type(4) {
grid-area: f; }

aside article:nth-of-type(5) {
grid-area: h; }

On small and medium-size screens, the main and aside elements stack vertically in the order they appear in my HTML. The extra space available in larger viewports allows me to place them side-by-side so visual weight is balanced across both sides of a screen. First, I apply a five-column symmetrical grid to the body element:

@media (min-width: 64em) {

body {
display: grid;
grid-template-columns: repeat(5, 1fr); }
}

Then, I place both main and aside elements using line numbers. This creates an asymmetrical design with a column of white space between my main content and the articles which support it:

main {
grid-column: 1; }

aside {
grid-column: 3 / -1; }
}

Reordering And Rotating

CSS Grid is now the best tool to use for implementing inspired layouts, and its powerful properties are also useful for developing intricate typographic designs.

My header contains a headline followed by two paragraphs and their order in HTML means they make sense when read without any styling applied:

<header>
<h1>Cortina</h1>
<p>UK’s best-selling car</p>
<p>From <span>1962–1983</span></p>
</header>

To begin this design, I add foundation styles for both elements, setting their alignment, colours, and sizes:

header h1,
header p {
margin: 0;
text-align: center; }

header h1 {
font-size: 10vmax;
color: #ebc76a;
line-height: 1; }

header p {
font-size: 4vmax;
line-height: 1.1;
text-transform: uppercase; }

I ordered my HTML for a semantic sentence structure, rather than any visual presentation, so to allow me to reorder the elements visually, I add Flexbox properties to my header and a flex-direction value of column:

header {
display: flex;
flex-direction: column; }

By default, elements appear in the order they occur in HTML, but in my design, the last paragraph in this header appears first, above the headline.

The default order value for all elements is 0, so to change the position of this paragraph without altering my HTML, I add a negative value of -1, which places it at the top:

header p:last-of-type {
order: -1; }

My design for medium-size screens includes two large bands of background colours, developed using a CSS gradient. So next, I change the foreground colours of my headline and paragraphs to contrast them against this new background:

@media (min-width: 48em) {

body {
background-image: linear-gradient(to right, 
#0a0a08 0%, 
#0a0a08 50%, 
#fff 50%, 
#fff 100%); }

header h1 {
color: #fff; }

header p {
color: #ebc76a; }
}

The unusual alignment of the three elements in this header is possible by combining CSS Grid with Flexbox. Although it might not be obvious at first, I place the headline and paragraphs in this header onto a four-column symmetrical grid. Leaving one column in the first and last rows empty creates a dynamic diagonal which adds interest to this header:

@media (min-width: 64em) {

header {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: start;
padding-top: 0; }
}

My headline spreads across all four columns:

header h1 {
grid-column: 1 / -1; }

While the first — which appears at the bottom of my header — leave the first column empty:

header p:first-of-type {
grid-column: 2 / -1; }

The final paragraph—now placed at the top of the header — spans the first three columns, leaving a space on the left:

header p:last-of-type {
grid-column: 1 / 4; }

It’s unusual to see rotated text elements on the web, but when you do, they’re often memorable and always a nice a surprise. I want my headline rotated anti-clockwise, so I add a transform which rotates it negatively by 30 degrees and moves it vertically down by 150px:

header {
transform: rotate(-30deg) translateY(150px);
transform-origin: 0 100%; }

transform-origin specifies the point around which transforms happen. You can choose an origin in the centre or any of the four corners of an element — top-left (0 0), top-right (100% 0), bottom-right (100% 100%) or bottom-left (0 100%). You might also specify an origin in pixels, em, or rem units.

For an extra element of surprise, I add a subtle transition to that transform and reduce the amount of rotation when someone passes their cursor over my headline:

header {
transition: transform .5s ease-in; }

header:hover {
transform: rotate(-25deg) translateY(150px); }

Combining Header Elements

In my next Lubalin-inspired design, I combine an ordered list of Cortina models with a multi-coloured headline to make a powerful statement with this header:

<header>
<div>
<h1>…</h1>
<ol>…</ol>
</div>
</header>

This headline includes three lines of text. Whereas I previously avoided using additional elements, to style these lines differently I need three inline span elements:

<h1>
<span>Best</span>
<span>Selling</span>
<span>Cortina</span>
</h1>

The most semantic choice to mark up my list of Cortina models and the years during which they were manufactured, is an ordered list. To strongly emphasise each model name, I enclose them within strong elements, which deliver semantic value as well as a bold appearance from default browser styles:

<ol>
<li><strong>Mark I</strong> 1962–1966</li>
<li><strong>Mark II</strong> 1966–1970</li>
<li><strong>Mark III</strong> 1970–1976</li>
<li><strong>Mark IV</strong> 1976–1979</li>
<li><strong>Mark V</strong> 1979–1983</li>
</ol>

For small viewports, I need only a few foundation styles. The large font size and minimal leading create a solid block of text. Then, I change the span element’s display value from inline to block and use pseudo-class selectors to change the foreground colours of the first and third lines:

h1 {
font-size: 18vmin;
line-height: .9;
color: #fff; }

h1 span {
display: block; }

h1 span:nth-of-type(1) {
color: #ba0e37; }

h1 span:nth-of-type(3) {
color: #31609e; }

I want items in my ordered list to form a two-column symmetrical grid where each column occupies an equal amount of available space:

ol {
list-style-type: none;
display: grid;
grid-template-columns: 1fr 1fr; }

Then, I tighten the items’ leading and add a solid blue border to the bottom of all but the last list-item:

li {
display: inline-block;
line-height: 1.2; }

li:not(:last-of-type) {
border-bottom: 1px solid #31609e; }

Conveniently, there’s no need to specify column or row numbers for each list-item because CSS Grid arranges them automatically because of normal flow. To add greater emphasis, I change the strong elements’ display values to block and set them in uppercase:

li strong {
display: block;
font-size: 1.266rem;
font-weight: 600;
text-transform: uppercase; }

Centring an element both horizontally and vertically used to be tricky, but thankfully, Flexbox has made this alignment trivial to implement. Flexbox has two axes — main axis and cross axis — which change direction if you change the default flex-direction value from a row.

The flex-direction of my header remains row, so I align-items centre on the cross axis (vertical,) then justify-content centre along the main axis (horizontal:)

@media (min-width: 48em) {

header {
display: flex;
align-items: center;
justify-content: center; }
}

With content now entered in the header, I apply a grid which contains three columns and two rows. Their dimensions will be defined by their content and will resize automatically:

header > div {
display: grid; 
grid-template-columns: repeat(3, min-content);
grid-template-rows: auto auto; }

The three multi-coloured lines in the headline are the foundation for this header design. I want to place them into specific columns and rows in this grid, so I add display: contents; to the headline:

h1 {
display: contents; }

Then, I place that multi-coloured text into columns and rows using line numbers:

h1 span:nth-of-type(1) {
grid-column: 1;
grid-row: 2; }

h1 span:nth-of-type(2) {
grid-column: 2;
grid-row: 1 / 3; }

h1 span:nth-of-type(3) {
grid-column: 3;
grid-row: 1 / 3; }

I want the text in my header to appear vertical, so I rotate each span clockwise by 180 degrees, then change their writing-mode to vertical left–right:

h1 span {
transform: rotate(180deg); 
writing-mode: vertical-lr; }

The headline and ordered list in my design form a solid block. To pack these elements tightly together, I change the list’s display property from grid to block. Then, I align content in each list-item to the right, so they sit on my headline’s baseline:

ol {
display: block; }

li {
text-align: right; }

SVG And Text

It’s taken me a long time to appreciate SVG and to become familiar with how to get the best value from it, and I’m still learning. SVG is capable of producing far more than basic shapes, and one of its most exciting features is the text element.

Like HTML text, SVG text is accessible and selectable. It’s also infinitely styleable by using clipping paths, fills including gradients, filters, masks, and strokes. Adding text to SVG is just like including it in HTML, using the text element. Only content inside these text elements is rendered by browsers, and they ignore anything outside them. You can add as many text elements as you need, but my next headline needs only one:

<svg>
<text>’70’s best-selling Cortina British car</text>
</svg>

SVG includes a set of properties and attribute values which can be applied to text. Many SVG properties — like letter and word spacing, and text-decoration — are also in CSS. But it’s styling features unique to SVG which help to make SVG text so appealing.

For example, textLength sets the width of rendered text, which will shrink and stretch to fill the space depending on the lengthAdjust value you choose.

• textLength
  The text will be scaled to fit. Set textLength in percentages or use any numerical values. I prefer to use text-based units, em or rem.
• lengthAdjust
  Defines how the text will be compressed or stretched to fit the width defined in the textLength attribute.

When used directly on a text element, SVG properties act the same as inline styles:

<svg>
<text textLength="400">’70’s best-selling Cortina British car</text>
</svg>

But just as with inline styles, the best value is achieved by styling SVG elements using CSS, whether in an external stylesheet or embedded in HTML. You can even use a style element in an external SVG file or a block of SVG included alongside HTML:

<svg>
<text class="display">’70’s best-selling Cortina British car</text>
</svg>

<style>
.display {
font-size: 100px;
font-family: 'black-extended';
font-weight: 600;
letter-spacing: -1px;
text-anchor: middle;
text-transform: uppercase; }
</style>

HTML has its span element and SVG includes a similar element which is useful for separating text into smaller elements so they can be styled uniquely. For this headline, I divide the content of the text element between six tspan elements:

<text>
<tspan>’70’s</tspan>
<tspan>best-</tspan>
<tspan>selling</tspan>
<tspan>Cortina</tspan>
<tspan>British</tspan>
<tspan>car</tspan>
</text>

By splitting my headline into multiple elements, I’m able to style each individual word. I can even position them precisely within my SVG, according to the baseline or even relative to each other.

• x is the horizontal starting point for the text baseline;
• y is the vertical starting point for the text baseline;
• dx shifts text horizontally from a previous element;
• dy shifts text vertically from an earlier element.

For my headline, I position the first tspan element 80px from the top, then each subsequent element appears 80px below it:

<text>
<tspan y="80">’70’s</tspan>
<tspan dy="80">best-</tspan>
<tspan dy="80">selling</tspan>
<tspan dy="80">Cortina</tspan>
<tspan dy="80">British</tspan>
<tspan dy="80">car</tspan>
</text>

tspan elements are useful for precise positioning and individual styling, but they’re not without accessibility concerns. Assistive technology pronounce tspan elements as individual words and even spell them when a tspan wraps a single letter. For example, a screen reader will pronounce this series of tspan elements:

<tspan>C</tspan>
<tspan>o</tspan>
<tspan>r</tspan>
<tspan>t</tspan>
<tspan>i</tspan>
<tspan>n</tspan>
<tspan>a</tspan>

As:

“C”, “o”, “r”, “t”, “i”, “n”, “a”

We shouldn’t inconvenience people who use assistive technology or worse make our content inaccessible because of our styling choices. So avoid using tspan unnecessary and never for single letters.

Stroking Text With CSS And SVG

Adding a stroke often helps legibility when text is placed in front of a background image, and it can also make subtle and striking results. You won’t find an official way to stroke text in any CSS specification. But there is an experimental property which uses a Webkit vendor prefix and is widely supported by contemporary browsers.

text-stroke is shorthand for two properties: text-stroke-color and text-stroke-width. For my stroked headline, I first set foundation typography styles for family, size, and weight, then adjust the leading and tracking:

h1 {
font-size: 100px;
font-family: 'black-extended';
font-weight: 600;
letter-spacing: -6px;
line-height: .8;
color: #fff; }

Then I apply text-stroke and add the text-fill-color property with a value of transparent which overrides the white foreground colour:

h1 {
/* -webkit-text-stroke-color: #fff; */
/* -webkit-text-stroke-width: 5px; */
-webkit-text-stroke: 5px #fff;
-webkit-text-fill-color: transparent; }

Although text-stroke is an experimental property and not in a W3C specification, now that browsers have implemented it, there’s little chance of it being removed. But if you’re still concerned about supporting a legacy browser, consider using a feature query to test for text-stroke support and provide an appropriate fallback for them.

SVG has stroke properties too, plus a few options which aren’t available in CSS. If you need more options and the widest browser support, SVG is the answer. My SVG header includes six tspan elements:

<svg>
<text>
<tspan>’70’s</tspan>
<tspan>best-</tspan>
<tspan>selling</tspan>
<tspan>Cortina</tspan>
<tspan>British</tspan>
<tspan>car</tspan>
</text>
</svg>

On top of foundation typography styles, I add the equivalent SVG properties for text-stroke-color and text-stroke-width. I also reduce the opacity of my stroke, which is an option unavailable in CSS:

text {
stroke: #fff;
stroke-width: 1.5px;
stroke-opacity=".8"; }

SVG includes other properties which fine-tune aspects of a stroke. Unlike CSS, SVG strokes can be dashed using the stroke-dasharray property. Alternate values define filled areas and blank areas, so the dashes around my headline text are one unit filled, then ten units blank:

text {
stroke-dasharray: 1, 10; }

Should you need more complex patterns, add extra numbers to the pattern, so a stroke-dasharray value of 1, 10, 1 results in a dashed stroke which is 1 (filled,) 10 (blank,) 1 (filled,) 1 (blank,) 10 (filled,) 1 (blank,) and repeats.

Optimize SVG Accessibility

CSS typography controls are now more powerful than ever, but there are occasions when a design calls for more than styled HTML text. Image replacement techniques have fallen out of fashion, but SVG — whether in an external file or inline within HTML — can deliver scalable text effects. SVG can also be useful for overall performance when optimised well and can be made accessible.

This header contains two typefaces. One is Magehand, a decorative retro-style script by Indonesian type designer Arief Setyo Wahyudi. The other is Mokoko, a slab serif by London-based Dalton Maag which is available in seven weights from thin to black.

Embedding these two fonts in both Web Open Font Format (WOFF) and WOFF2 formats would add over 150kb to my page. Whereas, by converting these fonts to outlines in a graphics editor and delivering the header as an optimised SVG image would add only 17kb.

The SVG image in my header contains three paths:

<svg xmlns="http://www.w3.org/2000/svg">
<path id="top">…</path>
<path id="bottom">…</path>
<path id="middle">…</path>
</svg>

The order of these paths matters, because just as in HTML, elements are stacked in the order they’re written. SVG includes a set of properties and attribute values which can be applied to any element. I use the fill property to colour each path in my header:

<path fill="#bd1f3a">…</path>
<path fill="#31609e">…</path>
<path fill="#fff">…</path>

For an even more stylish effect, I can define a linear gradient with two colour stops, and reference that to fill my decorative script:

<defs>
<linearGradient id="cortina" gradientTransform="rotate(90)">
<stop offset="0%"  stop-color="#bd1f3a" />
<stop offset="100%" stop-color="#31609e" />
</linearGradient>
</defs>

<path fill="#fff">…</path>
<path fill="#fff">…</path>
<path fill="url('#cortina')">…</path>

SVG files are frequently smaller than bitmap images or the combined size of several font files, but they nevertheless need careful optimisation to achieve the best performance.

Every element, handle, and node increases the size of an SVG file, so replace paths with basic shapes like circles, ellipses, or rectangles where possible. Simplify curves to reduce the number of nodes and use fewer handles. Popular graphic software like Adobe Illustrator, Affinity Designer, and Sketch export files bloated by unoptimised elements and unnecessary metadata. But, tools like SVGOMG by developer Jake Archibald will strip away unneeded items and can often reduce SVG file size substantially.

SVG images which contain text outlines can also be made accessible by using alternative text and ARIA properties. When linking to an external SVG file, add alternative text as you should with any non-decorative image:

<img src="header.svg" 
alt="Cortina. ’70s best-selling British car">

The best way to help people who use assistive technology is to embed SVG into HTML. Add an ARIA role and a descriptive label and screen readers will treat the SVG as a single element and read the label description aloud:

<svg role="img" aria-label="Cortina. ’70s best-selling British car">
…
</svg>

Adding a title element helps assistive technology to understand the difference between several blocks of SVG, but this title won’t be displayed in a browser:

<svg>
<title>Cortina. ’70s best-selling british car</title>
</svg>

When there are several blocks of SVG in a document, give each one a unique ID and add that to its title:

<svg>
<title id="header">…</title>
</svg>

ARIA has several attributes which help SVG accessibility. When SVG is purely decorative and has no semantic value, hide it from assistive technology by adding an aria-hidden attribute:

<svg aria-hidden="true">
…
</svg>

For my design, I use SVG in place of an HTML heading. To replace the missing semantics for assistive technology, use an ARIA role attribute and a value of heading. Then add a level attribute which matches the missing HTML:

<svg role="heading" aria-level="1">
…
</svg>

Clipping Type

The CSS background-clip property defines whether an element’s background extends underneath its border-box, padding-box, or content-box, according to the CSS box model:

• border-box
  Background extends to the outside edge of the border (and underneath the border).
• padding-box
  Background extends to the outside edge of the padding only.
• content-box
  The background is rendered within (clipped to) the content box only.

But, there’s one more value which offers many more opportunities for inspiring typography. Using text as a value for background-clip clips an element’s background to the space occupied by the text it contains.

In my next example, the brake disk background image is visible only where there’s text in the headline. When my headline includes more content or its text size increases, more of that background image will be visible:

h1 {
background-image: url(pattern.svg);
background-clip: text;
-webkit-background-clip: text;
color: transparent; }

You can apply the text value for background-clip to any element except the :root, HTML. As support forbackground-clip is limited, I use a feature query which delivers those styles only to supporting browsers:

h1 {
color: #fff; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
h1 {
background-color: #fff;
background-image: url(pattern.svg);
background-position: 50% 100%;
background-repeat: no-repeat;
background-size: 50%;
background-clip: text;
-webkit-background-clip: text;
color: transparent; }
}

Inspired by Lubalin, I want to place images inside the letters of my next headline, and the SVG image element allows me to do just that.

As this SVG image represents a heading, I add alternative text plus an ARIA role and level to ensure it remains accessible:

<img src="header.svg" alt="Cortina" 
role="heading" aria-level="1">

In SVG, the defs element stores graphical objects which can be referenced from elsewhere in a file. These include the patterns which contain my images and I add one for each letter:

<svg>
<defs>
<pattern id="letter-c">…</pattern>
<pattern id="letter-o">…</pattern>
<pattern id="letter-r">…</pattern>
…
</defs>
…
</svg>

Content in the defs element is not rendered directly and to display it I reference them with either a use attribute or url. My SVG contains one path for each of the seven letters in the word “Cortina,” and I fill each path with a pattern using its unique ID:

<svg>
<defs>…</defs>
<path fill="url(#letter-c)">…</path>
<path fill="url(#letter-o)">…</path>
<path fill="url(#letter-r)">…</path>
…
</svg>

Image elements allow either bitmap or vector images to be rendered within an SVG. My design incorporates three car part blueprint images which I link to using a standard href attribute:

<defs>
<pattern id="letter-c" width="100%" height="100%">
<image href="pattern-c.png" height="250" width="250"/>
</pattern>
…
</defs>

These three car part pattern images fill each letter, and the result is a striking headline design which demands attention.

Combining Techniques

There’s no doubt that Herb Lubin had a masterful ability to make type talk. For this final Lubin-inspired example, I put together the techniques I’ve demonstrated to create a compelling design for this classic ’70s Ford.

To develop this design, I need two structural elements which should be very familiar by now, a main and aside:

<main>…</main>
<aside>…</aside>

My main element contains a header element with an SVG headline followed by a division which includes my running text. I add an ARIA role and level to my headline to ensure its SVG text is accessible:

<main>

<header>
<svg role="heading" aria-level="1">…</svg>
</header>

<div>…</div>

</main>

To serve a full image to small screens and half to larger viewports, I use a picture element and a minimum width media query:

<aside>
<picture>
<source srcset="half.svg" media="(min-width: 74em)">
<img src="full.svg" alt="Ford Cortina">
</picture>
</aside>

Lubalin’s designs are often energetic, so to fill my main element with energy, I apply grid properties and use three columns and five rows to develop an asymmetrical layout.

main {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(5, 1fr); }

This design is dominated by an outline of the charismatic Cortina, and a text-based background image which covers the main element. I scale this SVG to fill the element’s background, and change the background-origin so it appears only behind the content and not its border or padding:

main {
background-image: url(main.svg);
background-origin: content-box;
background-position: top right;
background-repeat: no-repeat;
background-size: 100% 100%; }

Leaving columns around my header and text division empty creates negative space which helps to lead someone’s eye around the composition. The header occupies the first two of my three columns while the division fills the last two:

header {
grid-column: 1 / 3;
grid-row: 2 / 3; }

main div {
grid-column: 2 / 4;
grid-row: 3 / 6; }

One of the benefits of using the SVG text element is the ability to position text according to its baseline or relative to each elements. My headline SVG includes two text elements for the name of this car, and a third for the period it was manufactured. I want to place this final text element precisely 250px from the left and 60px from the top of my SVG:

<svg>
<text x="0" y="60">Ford</text>
<text x="0" dy="70">Cortina</text>
<text x="250" y="60">1962–1983</text>
</svg>

This dazzling design becomes more memorable on larger viewports when the text-based SVG background image and my Cortina outline fit alongside each other. I apply a two-column symmetrical grid to the body element:

@media (min-width: 74em) {

body {
display: grid;
grid-template-columns: [main] 1fr [aside] 1fr; }
}

Then, I place the main and aside elements onto my grid using line names:

main {
grid-column: main; }

aside {
grid-column: aside; }
}

On the web, inspiring typography should be attractive and readable, but the readability of running text can easily be affected by the background behind it.

The backdrop-filter applies CSS filter effects to elements behind the text. These filters include blur, brightness and contrast, and colour effects which can all help to make the running text more readable against either background images, graphics, or patterns.

Apply one or multiple filters using the same CSS filter syntax I demonstrated in a previous issue:

main {
backdrop-filter: brightness(25%); }

main {
backdrop-filter: brightness(25%) contrast(50%); }

backdrop-filter is part of the Filter Effects Module Level 2 specification. It already has solid support in contemporary browsers, although some still require the Webkit vendor prefix:

main div {
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px); }

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 along with every other issue from Andy’s website.

Read More From The Series

• Inspired Design Decisions: Avaunt Magazine
• Inspired Design Decisions: Pressing Matters
• Inspired Design Decisions: Ernest Journal
• Inspired Design Decisions: Alexey Brodovitch
• Inspired Design Decisions: Bea Feitler
• Inspired Design Decisions: Neville Brody
• Inspired Design Decisions: Otto Storch
• Inspired Design Decisions: Herb Lubalin

(vf, ra, yk, il)

Although I was born in North West England, I grew up in Corby, a steel working town in the middle of the country. From the 1930s, Corby had grown to rely on steel production, with working-class families — a large number of them from Scotland — flocking to the area. During the Second World War, burning oil to produce thick smoke prevented all but a few German bombs, but when I was in my teens, a different toxic cloud, Thatcherism, hung over Corby as it did many industrial and manufacturing centres across the UK.

Corby had become part of the nationalised British Steel Corporation during the 1960s, but within twenty years, the Conservative government announced the closure of the Corby plant. This lead to 11,000 job losses and an unemployment rate in the town of over 30%.

As a teenager growing up in Corby in the early 1980s, my prospects were as grim as many thousands of others in the town. Music was one form of distraction and clubs and pubs around Corby had a thriving local music scene. Bands with names like Bandits At 7 O’Clock, The Laughing Mothers, and Play The Joker, were inspired by the dark themes of post-punk, rockabilly and classic rock.

Music wasn’t only for escapism, it was also a way to express political opinions and support the causes we cared about. As part of the Corby Music Collective, my band, The Inline, played gigs in support of the anti-apartheid movement and even supported Billy Bragg on his first national tour in support of striking miners. I still have the backstage pass which Billy signed for me.

Local bands designed their own publicity and the mostly two-colour artwork was edgy and unpolished. Local screen-printing workshops offered affordable flyers and posters. Music magazines were popular too. Not mainstream publications like Melody Maker or teen titles like titles, but titles like Sounds, which covered counter-culture, and of course The Face. I knew there was something special about it, although at the time I didn’t know what an art director did or who Neville Brody was.

The Face became a pop culture mirror to the political and social turmoil in Britain at that time. Its unconventional and thought-provoking designs and Brody’s subsequent work redefined the British music press from the 1980s onwards and influenced a generation of designers. Even twenty-five years after he created them, Brody’s pages from The Face magazine are still remarkable designs. I’m still inspired by them every day and in this issue, I’m going to explain some of the ways how.

Previously On “Inspired Design Decisions”

1. Inspired Design Decisions: Avaunt Magazine
2. Inspired Design Decisions: Pressing Matters
3. Inspired Design Decisions: Ernest Journal
4. Inspired Design Decisions: Alexey Brodovitch
5. Inspired Design Decisions: Bea Feitler

Inspired by Inspired by Neville Brody

British punk was a reaction to mass unemployment and a reflection of the social unrest in 1970s Thatcherite Britain. Punk rejected anything it considered self-indulgent, and its DIY approach stripped music back to basics.

In 1977 — at the height of punk’s influence on British culture — Brody began studying graphics at The London College of Printing, where he soon found the environment frustrating and out of step with what was happening around them. Tutors at the LCP emphasised commercial applications for graphic design and Brody’s experimental work was condemned by them as “uncommercial.”

But Brody’s fast-paced, DIY approach to approach to design and especially his use of homemade typography were perfectly suited to the band posters he made while still at the LCP. After leaving, Brody designed record sleeves for Rocking Russian before moving to Stiff Records, and ultimately to The Face. The Face was a culture, fashion, and music magazine published in Britain until 2004 and Brody worked as its art director until 1986.

The Face was a living laboratory where I could experiment and have it published. Our golden rule was to question everything. If a page element existed just as taste or style, it could be abandoned. Page numbers could be letters or shapes increasing in size. We could start the headline on the page before. We had disasters and near misses every issue. We had two weeks to art direct everything, then a week to lay it out. It was pre-computer so everything was traced by hand. […] It certainly wasn’t a nine-to-five job. You had to be obsessed to make it work.

— Neville Brody

Good typography is often described in terms of rules, but Brody wasn’t interested in rules, so he skipped typography classes at the LCP. Not knowing the conventional rules of typography meant that Brody wasn’t limited by them. Instead, Brody studied typography he saw around him, from the Dadaism movement, Futurism, and the work of Alexander Rodchenko, whom I introduced in a previous issue.

Brody saw typography as a medium for commenting ideas and so should be expressive and entertaining. Widely spaced letters became a familiar part of Brody’s designs for The Face. He used this extra whitespace for its aesthetic, and to emphasise the horizontal, vertical, and sometimes diagonal direction of lines of type. His wide letter-spacing also slowed down the reading experience and created spaces for people to pause and consider the content.

But despite Brody’s lack of traditional typography training, his priority was still that people should be able to easily read the magazine. With that in mind, he worked closely with the editorial team at The Face.

The Face maintained punk’s rebellious attitude, but its original aesthetic wasn’t just superficial. With The Face, Brody questioned the structure of a magazine and how people experience it. I find plenty of parallels between how he explored the multi-page experience of reading a magazine and how people use the web.

In The Face, bleeding images and type off the edges of a page does more than making the magazine look unique. It suggests that there’s more to see outside the visible page and that what someone sees is part of something bigger.

The layout grid throughout The Face uses just two or three columns, but Brody’s execution shows just how flexible even the simplest grids can be when combined with imagination. The Face demonstrates how a system for design is the structure on which you start building a design. It should support a design, not define, nor dictate the end result.

On the web, we’re told to not make someone look more than once, to not make them think. But, one of the reasons I find Brody’s work so fascinating is it makes people look twice. His spread designs for The Face were often self-contained and encouraged people to linger on them rather than quickly turn the page. While you might think this runs counter to the principles of user experience design, in reality, it can be a factor in making your designs more memorable because people spend more time considering them.

This rule-breaking attitude needn’t be at the expense of usability. Brody’s designs for The Face use a grid, which provides structure to a page and continuity throughout the magazine. They also include features which guide someone through an article, from where to start reading, to knowing they’ve reached the end. Drop-caps are a traditional device for helping someone know where to start, but Brody became obsessed with finding alternatives, including graphic symbols, alternative type treatments, and whitespace. As Brody explained to Jon Wozencroft in 1987, “Once you have broken down the rules, literally anything is possible.”

For a lot of designers, The Face became the perfect graphic phrase-book, but its success, I hope, is also an indication that you can go against the grain and make it work commercially.

— Neville Brody

Brody wanted his work to demonstrate that breaking with traditional approaches to design is possible, even when what you’re designing is commercial. He didn’t want people to merely imitate his designs or use them to create new rules or traditions. I feel the same way about exploring ideas from print and other media and applying them to the web without questioning what we’re aiming to achieve and why we’re doing it.

After five years, Brody left The Face in 1986 and became one of Britain’s most influential and prolific designers. In the 1990s, Brody co-founded the FUSE project with Jon Wozencroft, and their groundbreaking magazine ran for twenty issues. He also co-founded FontFont, the typeface library, alongside Erik Spiekermann. In 2018, Brody stepped down from his position as Dean of the School of Communication at the Royal College of Art.

Jon Wozencroft — Brody’s partner at FUSE — published two volumes of ‘The Graphic Language of Neville Brody’ in 1988 and 1994. You can still find copies available on eBay. ‘The Story of The Face: The Magazine that Changed Culture’ by Paul Gorman is more readily available, as is a compendium of all twenty issues of FUSE. They’ll all make fabulous additions to your graphic design library.

Blends add depth and richness

For my first Brody-inspired design, the main content contrasts with a colourful and chaotic background image. I need only two structural elements to implement this energetic design; a header which contains the iconic Ford logo, a headline, and the tagline from a 1970s Capri advertisement. The main content includes an SVG profile of the Capri which sits on top of my running text:

<header>
<img src="logo.svg" alt="Ford">
<h1>Capri</h1>
<p>You might get wolf-whistles from the car next door</p>
</header>

<main>
<p><svg>…</p>
</main>

Using an inline SVG for this graphic image means one fewer requests to a server, and provides the ability to change the Capri’s paint colour to match any colour background. I start by adding background and foreground colours to the body of this page. Setting its minimum height ensures this background will fill the full height of the page at every screen size:

body {
padding: 0 1rem;
min-height: 100vh;
background-color: #ba0e37;
color: #fff; }

The Ford logo may be a classic, but I don’t want it to dominate this page when seen on small screens. I limit its maximum width to one-third of any viewport. This selector targets an image where “logo” occurs somewhere in an image’s source attribute:

[src*="logo"] {
max-width: 33vw; }

I add a double shadow to ensure my heavy headline and tagline spring out from the page. While the first shadow uses positive X and Y values, the second uses negative values. When combined, these shadows spread all around my text:

h1,
h1 + p {
margin-bottom: 0;
font-weight: 900;
text-shadow:
4px 4px 2px rgba(0,0,0,.35), 
-4px -4px 2px rgba(0,0,0,.35); }

h1 {
font-size: 3.4rem; }

h1 + p {
font-size: 1.802rem; }

My design should raise someone’s blood pressure as much as driving a Capri, so I add an adrenaline-filled background image which covers the entire page:

body {
background-image: url(body.png);
background-size: cover; }

This image may be monochrome, but adding a background-blend-mode property with a value of multiply crams this page with colour:

body {
background-blend-mode: multiply; }

Introducing background-blend-mode

Blend modes were proposed initially by the Adobe Web Platform team. They allow web designers the same control over blending colours that have been a feature of graphics software like Adobe Photoshop for years. These modes determine how two elements or more elements combine with each other.

The CSS Compositing and Blending module includes three properties; background-blend-mode, mix-blend-mode, and isolation. To implement this design, I use background-blend-mode which allows blending an element’s background colours and images:

body {
background-color: #ba0e37;
background-image: url(body.png);
background-blend-mode: multiply; }

There are fifteen background-blend-mode options; color, color-burn, color-dodge, darken, difference, exclusion, hard-light, hue, lighten, luminosity, overlay, saturation, soft-light, and screen.

Blend modes can be used to blend a background colour with a single background image, or when an element has more than background image, they can be applied differently to each which can add depth to a design. This background-blend-mode applies to all background images:

body {
background-image: url(body-1.png), url(body-2.png);
background-blend-mode: multiply; }

Whereas, to blend these two images differently, I apply two background-blend-mode values, making sure to list them in the same order as my images:

body {
background-image: url(body-1.png), url(body-2.png);
background-blend-mode: screen, multiply; }

CSS blend modes don’t merely save time on trips to an image editor, they’re also a fabulous way to add depth and texture to a design which can be refreshing when the majority of websites are flat and two-dimensional.

To implement the rest of this small screen design. I add a background image of a spark plug silhouette which fills the main element which contains my running text:

main {
background-image: url(main-1.svg);
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100%; }

Then, I use a mixture of rem-based and viewport width padding to solidify that content into a narrow column:

main p {
padding: 8rem 20vw 6rem; }

Text which is justified to both left and right edges often creates unsightly rivers of white space between words. These gaps can interrupt the reading experience. It’s for this reason, justified text is rarely used online.

Hyphenation wraps words onto multiple lines and splits a line’s last word with a hyphen. There are three values for hyphenation in CSS:

• none: Words aren’t broken, so longer words will flow onto a new line, sometimes leaving an unattractive gap at the end of a line.
• manual: Words are broken when either a hard hyphen or an invisible soft hyphen (­) inside them suggests an opportunity.
• auto: A browser inserts hyphens according to its own rules and the language used. Browsers vary in how they apply these rules.

Sadly, not all browsers support hyphenation, so to avoid unsightly rivers within the text, I should only apply the hyphens property to supporting browsers. For this, I use a feature query.

Introducing feature queries

You’ll probably already know all about @media queries and use them to adjust styles across different screen sizes. While @media queries test whether a device is a printer or screen, and tests for height, width, or orientation, the @supports at-rule tests browsers’ features.

A basic feature query tests both a property and a value. For example, this query tests whether a browser supports the column-count property and a value of 2 before applying them to a main element:

@supports (column-count: 2) {
main { column-count: 2; }
}

Browsers which don’t support column-count will ignore this style. Occasionally, I may need to also style an element when the browser doesn’t support a feature, can apply those styles using a :not operator:

@supports not (column-count: 2) {
main { padding: 0 3rem; }
}

I might also need to test support for two features at the same time using an and operator. Styles will apply to this main element when a browser supports both column-count and hyphens:

@supports (column-count: 2) and (hyphens: auto) {
main p { hyphens: auto; }
}

Otherwise, I might test whether a browser supports one or more in a series of features using the or operator:

@supports (column-count: 2) or (hyphens: auto) {
main p { hyphens: auto; }
}

The feature you test needn’t be the same as the style you want to apply. For example, in this design, I only want to justify my main paragraphs if a browser supports hyphenation:

@supports (hyphens: auto) {

.mk1 main p {
hyphens: auto;
text-align: justify;
text-align-last: left; }
}

For larger screens, I want the main content placed on the right, so I apply a symmetrical two-column grid with a 5vw gap between columns:

@media screen and (min-width : 64em) {

body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5vw; }
}

As the visual order of the header and main is the same as the document flow, there’s no need for me to place those elements on my grid.

I remove the limit on the Ford logo’s maximum width, then apply a second background image to the main. I use two different sets of background-position values to offset this white spark plug picture:

[src*="logo"] {
max-width: none; }

main {
min-height: auto;
background-image: url(main-1.svg), url(main-2.svg);
background-size: cover;
background-position: 0 4rem, 5vw 6rem;  }

Finally, I adjust the padding on my main paragraphs to accommodate the width of that second background image:

main p {
padding: 18rem 12vw 0; }

Theming using CSS Custom Properties

Previously only pre-processing tools like LESS and Sass enabled developers to use variables in stylesheets, but now Custom Properties have brought variables natively to CSS. CSS Custom Properties are a fabulous new feature and have widespread support in contemporary browsers.

To write a custom property, simply add two dashes to the start of a style rule:

--color-text-default : #272732;

Hyphens or underscores are allowed in property names, but not spaces. Property names are also case-sensitive, so –color-text-default and –Color_Text_Default are two distinct properties.

To use a custom property in a stylesheet, var() tells a browser to retrieve the value of a property. Here, a browser retrieves the dark colour from the –color-text-default variable and applies it to the body element:

body {
color : var(--color-text-default); }

CSS Custom Properties are fabulous tools for theming, so to change the body background colour and the fill colour of my SVG Capri, I apply a shared custom property:

--theme: #ba0e37; }

body {
background-color: var(--theme); }

svg path {
fill: var(--theme); }

Vertical text for impact

This very different design shares much of the same HTML, but has an altogether different look and feel. I use a header which contains a heading, a Ford logo, and the large brake disk image:

<header>
<div>
<img src="logo.svg" alt="Ford">
<img src="brake.svg" alt="Brake disk">
</div>

<h1>Ford Capri <spanvMK1</span></h1>
</header>

The main element includes a headline and a division which contains my running text:

<main>
<h2><span>Get wolf-whistles</span> from the car next door</h2>

<p>…</p>

<div>
<p>…</p>
<p>…</p>
<p>…</p>
</div>
</main>

Background and foreground colours are the starting point for implementing this design:

body {
padding: 1rem;
background-color: #fff;
color: #272732; }

I then add two abstract background images, placing the first in the top-left of my body element, the second in the bottom-right. Both background images will be contained within the body while preserving their aspect ratio:

body {
background-image: url(body-1.png), url(body-2.png);
background-position: 0 0, 100% 100%;
background-repeat: no-repeat;
background-size: contain; }

My design includes a variety of typography treatments, including columns, drop-caps, and vertical text. I start by super-sizing the light grey main headline, and setting it uppercase. Using a span element within this headline allows me to change that part to blue:

h1 {
font-size: 3.4rem;
line-height: 1.2;
text-transform: uppercase; 
color: #dedddd; }

h1 span {
color: #2c5f9d; }

I apply the same text-transform to the second-level headline, then turn the paragraph which immediately follows it into a standfirst by adding two thick borders:

h2 {
font-size: 1.424rem;
line-height: 1.2;
text-transform: uppercase; }

h2 + p {
padding: 1rem 0;
border-top: 10px solid #e9e9e9;
border-bottom: 10px solid #e9e9e9;
font-size: 0.889rem;
font-weight: 600;
text-transform: uppercase; }

Although paragraph indentation is a common print typography technique, paragraph spacing is more popular on the web. Because I want to give this design an editorial feel, I remove the margins from paragraphs in my main, then indent every following paragraph by 1em. By using a text-based unit, this space will stay in proportion with the size of my text:

main div > p {
margin: 0;
font-family: 'Vollkorn', serif;
font-style: italic; }

main div > p + p {
text-indent: 1em; }

Drop caps add personality to a design, but are also an obvious pointer to where someone should start reading. Implementing drop caps online previously involved a mixture of font-size, line-height, and margin styles, but now we can use the initial-letter property instead.

Initial letter reduces styling to a single property, and a value which defines the number of line heights the letter occupies. Initial letter automatically adjusts the font size to span this number of lines.

I want to apply initial-letter to the first letter of the first paragraph in my main element. Not all browsers support initial-letter, so to avoid non-supporting browsers applying any styles relating to my drop cap, I use a feature query. Because Apple’s Safari requires a vendor specific prefix, that query includes both prefixed and unprefixed properties and an or argument:

@supports (initial-letter: 1) or (-webkit-initial-letter: 1) {

main div > p:first-of-type::first-letter {
margin: 0 .5rem;
font-family: Arial, Helvetica, sans-serif;
-webkit-initial-letter: 2;
initial-letter: 2;
color: #2C5F9D; }
}

A long-standing Safari bug renders an initial letter using system fonts instead of web fonts, so choose a system font which looks most similar to your intended drop cap style.

For larger screens, I apply a symmetrical two-column grid to the body and reduce the size of my two background images to 55%. Because the visual order of this design again matches the order of my HTML, I don’t need to place my header and main elements explicitly:

@media screen and (min-width : 64em) {

body {
display: grid;
grid-template-columns: 1fr 1fr;
background-size: 55%; }
}

One of the most obvious aspects of this design is the large vertical headline in the centre of the page. Vertical text elements are common in magazines, but I rarely see them on the web, except in Chinese, Japanese, Korean, and other scripts, which use vertical writing modes.

Before implementing my vertical headline, I make space for it by applying grid properties to my header. The second column is just wide enough to take my vertical headline, while the first column occupies all remaining space:

header {
display: grid;
grid-template-columns: 1fr 6rem;
padding: 1rem 0 1rem 2rem; }

To develop my vertical headline, I need do nothing more than switch its default writing mode to vertical (right–left:)

h1 {
writing-mode: vertical-lr; }

My headline fits in the centre of this page, and the reading direction starts at the top. To make it read bottom-up, I can spin it around by 180 degrees and justify it right, so it starts at the top of the column:

h1 {
text-align: right; 
transform: rotate(180deg); }

Text orientation

Using transform:rotate(); and text-align:right; to change an element’s reading direction feels like a hack, and it is.

You won’t need that hack for long, though, because a new set of writing mode values are coming.

To improve someone’s reading this block of running text, I introduce columns using the column-count property. This design divides my content into two columns, with a gutter and a solid rule between them:

main div {
column-count: 2;
column-gap: 4rem;
column-rule: 1px solid #e9e9e9; }

Browsers adjust the widths of these two columns to fill the available space. When I want to specify column width instead of the number of columns, I use the column-width property with a text-based unit value, including ch, em, ex, rem, vw, vmax, and vmin.

There’s one final touch I want to add to the vertical headline in this design; blending it with the body behind. Alongside background-blend-mode, the Compositing and Blending module includes mix-blend-mode which blends elements with each other. You can use the same fifteen blend modes with either property. Using a multiply value on my vertical headline allows the abstract background image on my body element to bleed through this headline:

h1 {
mix-blend-mode: multiply; }

Beyond Primitive Clipping Paths

You probably won’t be surprised to learn that this design uses the same header and main elements as my previous examples. This time, both contain a figure:

<header>
<figure>…</figure>
<h1>The car you <span>always</span> promised <span>yourself</span></h1>
</header>

<main>
<figure>…</figure>
<p>…</p>
<div>
<p>…</p>
</div>
</main>

Each figure contains four pictures of my colourful Capris:

<figure>
<img src="capri-front-red.png" alt="">
<img src="capri-back-green" alt="">
<img src="capri-back-brown" alt="">
<img src="capri-front-lime" alt="">
</figure>

I arrange these pictures in a 2x2 grid, then I add a background colour and abstract background image, blending them together with a background-blend-mode:

figure {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
background-color: #2c5f9d;
background-image: url(figure.png);
background-size: cover;
background-blend-mode: multiply; }

Good typography is as important for personality, as it is for readability. Brody’s designs are distinctive partly because of the original typefaces he created for The Face and other magazines. I set my headline using TokyoTwo — a facsimile of one Brody typeface — to bring a little of his style to my design.

h1 {
font-family: 'TokyoTwoSolid';
font-size: 7vmax;
text-transform: uppercase; }

I highlight specific words by adding span elements around them:

h1 span {
color: #2C5F9D; }

In newspapers and magazines, online and in print, a standfirst is the ‘first’ few lines of an article and should be designed to ‘stand’ out. You might also see standfirst paragraphs referred to as “decks,” “kickers” because they kick readers into the content, “riders,” “summaries” as they often summarise the content of an article, or &mdahs; my personal favourite — “the sell” because one of its jobs is selling content to a reader.

While a standfirst paragraph is often “larger, bolder,” or “in capitals,” that’s not necessarily how it always looks. There’s no rule book to dictate its size or style, or even its position. That’s something important to bear in mind when you’re designing layouts for many different devices or screen sizes. The design of a standfirst should help it do its job and should be designed to catch someone’s eye, encourage people to read on, give people an idea of what an article contains, and improve understanding and share-ability.

To add zig-zag lines and transform this default paragraph into a standfirst, I add :before and :after pseudo-elements, each containing an SVG image which stays crisp no matter how large someone’s device or screen:

main figure + p:before {
content: url(line-1.svg);
display: block;
margin-bottom: .75rem; }

main figure + p:after {
content: url(line-2.svg);
display: block;
margin-top: .75rem; }

I introduced you to the clip-path property alongside Alexey Brodovitch. It enables you to clip an element so that only part of it remains visible. These paths can be any shape, from basic circles and eclipses to complex polygon shapes with any number of coordinates.

My design uses zig-zags around its standfirst and at the sides of my colour-filled figures. But, those shapes aren’t part of any image attached to a figure, they’re the result of clipping these figures with a polygon path:

figure {
-webkit-clip-path: polygon(0% 10%, 5% 20%, 0% 30%,…);
clip-path: polygon(0% 10%, 5% 20%, 0% 30%,…); }

All that remains is to add background images to the body, adjusting their position and size, plus apply a two-column symmetrical grid for larger screens:

body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem; }

body {
background-image: url(body-small.svg);
background-position: 50% 0;
background-repeat: no-repeat;
background-size: cover; }

@media screen and (min-width : 64em) {

body {
background-image: url(body-large.svg);
background-position: 0 12rem;
background-size: contain; }
}

Responsive grids and rotation

To implement my final Brody-inspired design, my aim is to use the most minimal set of structural elements:

<img src="logo.svg" alt="Ford">

<h1>Get a Capri… if you’re quick</h1>

<header>
<picture>
<source media="(min-width: 48em)" srcset="header-lg.png">
<img src="header-small.png" alt="Ford Capri">
</picture>
</header>

<main>
<p>…</p>
<p>…</p>
</main>

<figure>…</figure>
<aside>…</aside>
<div></div>

Whereas my earlier designs introduced grid properties at larger screen sizes, this final design uses them from the beginning. In this three-column grid, the two outer column widths are text-based, while the centre column occupies all remaining space:

body {
display: grid;
grid-template-columns: 3rem 1fr 3rem;
background-color: #f0f0f1; }

I start by placing the Ford logo into that centre column and on the first row:

[src*="logo"] {
grid-column: 2;
grid-row: 1;
justify-self: center; }

The header with its Capri image spans every column, and occupies the full page width. I place it in the second row, under my logo:

header {
grid-column: 1 / -1;
grid-row: 2; }

A division acts as an abstract back-drop to my header. It fits neatly into the second column, and spans the first two rows:

body > div {
grid-column: 2;
grid-row: 1 / 3;
z-index: 1; 
background-color: #2c5f9d;
background-blend-mode: multiply;
background-image: url(div.png);
background-size: cover; }

By adding a low z-index value to this division pushes it into the background, and to ensure my logo and header spring into the foreground, I give them a higher value:

[src*="logo"],
header {
z-index: 2; }

That layered header adds depth to small screens, but when more space is available, this design comes to life. The two-column grid is simple, but the row pattern is more intricate and includes a mixture of text-based, flexible length, and intrinsic units:

@media screen and (min-width : 48em) {

body {
grid-template-columns: 1fr 1fr;
grid-template-rows: 16rem 8fr 16rem auto auto auto; 
grid-column-gap: 5vw; }
}

I place the header into the third row and allow it to span the full width of my grid. Then, I slot the remaining elements into their places using grid line numbers:

header {
grid-column: 1 / -1;
grid-row: 3; }

h1 {
z-index: 1;
grid-column: 1;
grid-row: 1 / 3; }

main {
grid-column: 1;
grid-row: 4 / 6; }

aside {
grid-column: 1;
grid-row: 6 / 7; }

body > div {
grid-column: 2;
grid-row: 1 / 4;
border-top: 10px solid #e9e9e9; }

I don’t need to style this figure, only its img and figcaption. By applying display: contents;, I’m able to place those child elements onto my grid:

figure {
display: contents; }

figure img {
grid-column: 2;
grid-row: 5 / 7; }

figure figcaption {
grid-column: 2;
grid-row: 4 / 5; }

Now I can rotate my header image and move it up so that it overlaps other elements in my design.

header {
z-index: 2;
transform: rotate(-20deg) translateY(-6rem); }

I’ve always thought of responsive design not as a challenge, but as a chance to be creative. Each breakpoint provides an opportunity to make designs which make the most from every screen size.

For large screens, I replace the previous grid properties with a five column layout where four of the columns are flexible and the other is text-based. I use the repeat value to create six rows which all have intrinsic height. Whereas the default align-items value is stretch, I align my grid items to the start:

@media screen and (min-width : 64em) {

body {
grid-template-columns: 1fr 1fr 1fr 6rem 1fr;
grid-template-rows: repeat(6, auto); 
gap: 1rem;
align-items: start; }
}

I reposition each element onto this new grid using line numbers which separate my content across each column.

[src*="logo"] {
grid-column: 1;
grid-row: 1; }

h1 {
grid-column: 2;
grid-row: 2; }

main {
grid-column: 1 / 2;
grid-row: 2 / 5; }

header {
grid-column: 2 / -1;
grid-row: 2; }

figure img {
grid-column: 3;
grid-row: 1; }

figure figcaption {
grid-column: 3;
grid-row: 4; }

aside {
grid-column: 5 / -1;
grid-row: 3 / 5; }

body > div {
grid-column: 3;
grid-row: 2 / 4;
align-self: stretch; }

Using line numbers enables some elements to occupy the same columns and rows, so they overlap. The higher z-index value I gave to the header earlier, brings the large picture of my Capri into the foreground, where I can adjust its rotation and vertical offset:

header {
transform: rotate(-20deg) translateY(3rem); }

A subtle transition and a series of transform values, add up to a little surprise when someone hovers over the profile of this classic Ford:

header {
transition: transform .25s ease; }

header:hover {
transform: rotate(-21deg) scale(1.025) translateY(3rem); }

Bonus: Introducing CSS masks

In my first Capri design, I added a spark plug silhouette as a background image to my content, but changing its colour would involve exporting a new asset.

Depending on the mask image, there are two types of masks in CSS:

• luminance
  White areas are transparent, black ones are opaque, and everything in between is semi-transparent.
• alpha
  The default, alpha-channels.

Masking is a fabulous time-saver which involves a single mask-image with an alpha-channel. Whereas with clip-path, parts of an element or either invisible or visible, using mask-image means parts of an element can be rendered with several levels of opacity.

Elements in parts of a mask which are 100% black will be fully visible. In sections where the mask is 100% transparent, contents will be completely hidden. Any percentage in-between will partially mask an element.

When a mask is applied, only the areas inside it are visible, which allows me to change an element’s background colour or image whenever I need to.

Applying a mask-image is as simple as specifying a mask URL. CSS masks use similar properties and values to background images, so first I specify a mask‘s position, then repeat properties, and its size. mask-position uses X and Y values which are the same as background-position.

As well as common values like repeat, repeat-x, repeat-y, and no-repeat, are mask-repeat also accepts the lesser known tiling values, space and round.

mask-size options include one or two number values, plus contain and cover. I put these properties together to apply a spark plug silhouette mask to my main content:

main {
mask-image: url(mask.png);
mask-position: 0 4rem;
mask-repeat: no-repeat;
mask-size: cover; }

It’s also possible to define which area of a box is affected by a mask by using the mask-clip and mask-origin properties in similar ways to how background-origin and background-position affect background images. You might choose to clip a mask to either the border-box, content-box, or padding-box, plus several other options.

I’m also excited by the possibilities from mask-border, an experimental property which will combine the flexibility of border images with masks.

Masks can add depth to text too. To make my header content shine, I could use a bitmap or a SVG gradient image. But remember, CSS generated linear and radial gradients are also background images, so can be mask images too. They add style with almost no impact on performance:

main {
mask-image: linear-gradient(
transparent, 
rgb(0,0,0) 50%, 
transparent 100%); }

I want a circular radial-gradient to fade the edges of my header content:

main {
mask-image: radial-gradient(
circle at 50% 50%, 
rgba(0,0,0,1), 
rgba(0,0,0,.15) 80%); }

By fine-tuning my alpha channel values and colour stop points, I can create the perfect look to fit my design.

NB: Smashing members have access to a beautifully designed PDF of Andy’s Inspired Design Decisions magazine and full code examples from this article.

(ra, yk, il)

Even if you didn’t study graphic design at art school, you might know a few famous names. With over a century of commercial art direction, there are plenty more names to discover. People who have done astonishing work which can encourage and inspire us to think about the web more creatively.

Discovering people with incredible talent has been one of the most rewarding aspects of studying art direction. Learning about one designer often leads me to another, and when I find someone who’s work I admire, I want to understand not just what they made, but why they made it.

Previously On “Inspired Design Decisions”

1. Inspired Design Decisions: Avaunt Magazine
2. Inspired Design Decisions: Pressing Matters
3. Inspired Design Decisions: Ernest Journal
4. Inspired Design Decisions: Alexey Brodovitch

After learning about Alexey Brodovitch’s influential work on Harper’s Bazaar until the 1950s, I wanted to know the impact his legacy had on the magazine. This led me to Bea Feitler and her creative partner Ruth Ansel who directed Harper’s Bazaar throughout the 1960s.

Feitler has been described as “the pioneering female art director you’ve never heard of.” I’ve never heard her mentioned at a design conference or seen her referenced in an article about web design.

But, Feitler’s confident and energetic designs are only part of what makes her life and work fascinating. Even more important was how her work reflected changes in society in America during the 1960s and the choices she made to influence it.

Only one exhibition has been staged about her work and one retrospective book published. “O Design de Bea Feitler,” written by her nephew, was published in her native Brazil in 2012. It took me months to track down a copy, but eventually, I found one. It’s the most expensive book I’ve bought.

Feitler has as much to teach people who design for the web as she did the magazine designers who followed her. I hope that in some small way, I can help people fall in love with Bea Feitler’s work the way I did.

Inspired By Bea Feitler

Bea Feitler was born in Rio de Janeiro in 1938. After working on album covers, book jackets, magazines, and poster designs, she left Brazil and moved to Manhattan. In 1961 — and still only 25 years old — she became an art assistant, then one of the youngest and first female co-art directors at Harper’s Bazaar alongside Ruth Ansel.

Just like Alexey Brodovitch — who’d stepped down from Harper’s Bazaar before her move to the United States — Feitler’s collaborations with artists and photographers helped define her work. At Harper’s Bazaar, Richard Avedon’s photograph of model Jean Shrimpton in her famous pink space helmet, then Annie Leibovitz’s naked John Lennon on the cover of Rolling Stone.

Although Feitler never met Brodovitch, it’s fascinating to see how she respected then developed his legacy. Feitler understood that magazine pages should be deliberately and individually constructed, yet at the same time should be connected to one another to form a harmonious rhythm.

A magazine should flow. It should have rhythm. You can’t look at one page alone, you have to visualize what comes before and after. Good editorial design is all about creating a harmonic flow. — Bea Feitler

Feitler combined Brodovitch’s mastery of the double-page spread with her choices of bold colors which were inspired by pop artists Jasper Johns, Roy Lichtenstein, and Andy Warhol, as well as street fashion and youth culture.

She wasn’t afraid to experiment with color or to break with conventions, twice placing lurid green text onto a neon pink background, first for a Harper’s Bazaar cover in April 1965 and later for feminist magazine Ms. in December 1972.

At the Harper’s Bazaar studio she shared with Ruth Ansel, a continually changing collage filled their inspiration wall; something I wish I had space for in my tiny studio. Feitler wasn’t afraid to mix media, and when she felt that one of her most iconic spreads wasn’t working, she combined one of Avedon’s most well-known photographs with a panel from a comic book she’d bought from a newsstand in the street below.

Feitler’s designs influenced and reflected the changes in American society in the 1960s. The magazines she art directed had a fast-paced, almost cinematic quality which perfectly suited the culture of the time but is also relevant to our work online today. Feitler believed that good editorial design is about creating a harmonious flow. This is as relevant to designing engaging user experiences and customer journeys as it is magazine pages.

Even though some people continue to recite the mantra that the web isn’t print, there’s a lot we can learn from Feitler’s work. Her designs can help us improve not only editorial design online but e-commerce websites and digital product designs too.

Feitler said that a book was “50/50 image to text.” On the web, we need to allow for interactive features and video too. Understanding how to successfully combine these components to create a consistent, engaging experience is a fundamental skill which every digital designer should develop.

As a mentor and teacher, Feitler shared many principles with Alexey Brodovitch. She encouraged her students to develop their own direction, and many themselves became prominent art directors. Feitler was demanding and accepted nothing less than the very highest standards of design excellence from everybody.

Hold on to your passions and dig deep while trusting your instincts. Step outside of what is expected. Embrace accidents, and know that eventually you will discover the perfect solution to a creative dilemma and be very joyous while doing it. — Ruth Ansel

Sadly, Bea Feitler died from cancer in 1982 aged just 44. I believe she has as much to teach those of us who design for the web as she did the magazine art directors who followed her. I hope her life and work will influence us to have courage in our convictions and make our own brave and confident choices.

Beauty Blast Off

Harper’s Bazaar’s hadn’t had a guest editor before, but for its April 1965 edition, long-time collaborator Richard Avedon edited and photographed the entire issue.

Inside, Avedon photographed Donyale Luna — the first black woman to be featured on the cover of a mainstream fashion magazine — and Paul McCartney wearing a spacesuit borrowed from NASA. For the cover, Avedon chose an image of contemporary supermodel Jean Shrimpton wearing a space helmet which had been made by one of New York’s most famous milliners.

Avedon later recalled that at 11 PM — after their deadline had passed — the photograph he’d shot for the cover wasn’t working. So, Feitler cut the shape of a helmet from pink Day-Glo paper and placed it over Avedon’s photograph. No focus groups, no research, no audience testing, just a gutsy and intuitive design decision.

The result was a cover which went on to win the New York Art Director's Club medal and was placed at number fifteen in the American Society of Magazine Editor’s 2005 list of Top 40 Magazine Covers.

⁵⁰⁄₅₀ Image To Text

To implement my first Feitler-inspired design, my aim is to use the most minimal set of structural elements; a header plus main and aside elements for content. My header contains the split image of an iconic Volkswagen Beetle and a headline which includes an inline SVG Volkswagen logo. As this headline contains no text, I use an ARIA label to describe it. This will help people who use assistive technologies:

<header>
  <h1 aria-labelledby="Volkswagen logo">
    <svg>…</svg>
  </h1>
  <picture>…</picture>
</header>

<main>…</main>
<aside>…</aside>

For smaller screens, I need only foundation styles as the normal flow, handles my single column layout. First, I add a linear gradient behind the header image. Gradients are incredibly flexible, but despite their usefulness they’re surprisingly under-used:

header {
padding: 1rem 2vw;
background-image: linear-gradient(
to right,
#444 0%,
#444 50%,
#fff 50%,
#fff 100%);
text-align: center; }

My gradient starts on the left with a dark grey and ends on the right with white. Without color stops, the result would be a smooth gradient between those colors, but I want a hard line in the center of my header. To achieve this effect, I place two color stops at the same 50% position. To change the direction of my gradient, I needn’t adjust those percentages. I can simply change the gradient direction from to right to to left.

It’s important to maintain a consistent balance of visual weight while adapting designs to several size screens. I don’t want my header image so tall it pushes my running text off the first screen, so I set a maximum height of 75vh or three quarters the height of a small screen:

header img {
max-height: 75vh; }

To complete my small screen design, I establish the header as a positioning context. Then, I absolutely position the Volkswagen emblem and ensure its width will adapt to the screen by using a viewport width unit of 5vw:

header {
position: relative; }
h1 {
position: absolute;
top: 1rem;
left: 1rem;
width: 5vw; }

My portrait orientation image fits well into tall screens, but I need a wider format image for screens which are wider than they are tall. Orientation is a fabulous, but seldom used media query which tests the orientation of a viewport. This media query can be used in stylesheets as an alternative to more conventional width queries. It can also be applied to the source of a picture element. This query swaps my portrait image for a landscape alternative whenever width exceeds height, whether on a small phone or desktop size display:

<picture>
<source srcset="landscape.png"
media="(orientation: landscape)">
<img src="portrait.png" alt="Volkswagen Beetle">
</picture>

For my alternative landscape design, I use Grid to place the header, main, and aside elements. There are several options for placing these elements — including columns and rows, and template areas — but I’ve chosen to use grid-template-columns to define a symmetrical two-column grid on the body. I apply the linear gradient again and set its minimum height to the match the full viewport:

@media screen and (orientation: landscape) {
body {
display: grid;
grid-template-columns: [main] 1fr [aside] 1fr;
min-height: 100vh;
background-image: linear-gradient(
to right,
#444 0%,
#444 50%,
#fff 50%,
#fff 100%); }
}

In landscape orientation, my header fills the entire width of the screen. As I no longer need the linear gradient background image on this element, I can simply remove it:

header {
grid-column: 1 / -1;
background-image: none; }

Now, because this grid is so simple, I place my main and aside elements onto the grid using named lines:

main {
grid-column: main; }
aside {
grid-column: aside; }

The end result is a design which adapts its layout depending on whether a browser or device screen is in landscape or portrait orientation.

Comic Book Art

Bea Feitler regularly combined photographs with illustrations, and comic book art appears in work throughout her career.

For Harper’s Bazaar, she placed one of Avedon’s photographs of Jean Shrimpton wearing a spacesuit onto a comic book background. Later, she commissioned legendary comic artist Marie Severin to create this cover for Ms. Magazine in 1973.

Emphasize Scale

The Volkswagen Beetle was a small car with a big personality. I want my next design to have a character to match. The large screen design uses an enormous picture of the Beetle’s wheel to emphasize the smallness of that little car. But, before I get to large screens, I want to make sure I maintain a similar contrast in scale on small screens.

Three structural elements make up the markup I need to implement this design; a header for the large wheel picture, a figure which contain the smaller image of the car, and a main for my running text. As the header has no meaning for anyone who uses a screen reader, I choose to hide it by using an aria-hidden attribute:

<header aria-hidden="true">
<img src="header.png" alt="">
</header>

<figure>
<img src="figure.png" alt="Volkswagen Beetle">
</figure>

<main>…</main>

Foundation styles and normal flow take care of most aspects of my small screen design, but that doesn’t mean I can ignore what makes it the overall concept distinctive; the contrast between the large wheel and the small Volkswagen. To ensure my header always occupies one-third of the viewport height with identical whitespace between it and my content, I use viewport height units for both height and margin:

header {
margin-bottom: 33vh;
height: 33vh; }

One problem I often encounter when developing flexible layouts is the unintentional resizing of images. With a fixed height on my header and 100% width on its image, the giant wheel can distort. Fortunately, there’s a way to preserve its aspect ratio using the object-fit property. There are four possible options, plus none:

1. contain
   Preserves an image’s aspect ratio while fitting inside a parent’s content box.
2. cover
   Preserves an image’s aspect ratio but this time fills the whole box. When this happens, parts of the image outside the content box will be hidden.
3. fill
   An image will be distorted so its width and height match its parent.
4. scale-down
   Similar to contain, reduces the size of an image or video to fit inside its parent.

I want my large wheel to fill the header completely without altering its aspect ratio. I’m also not concerned some parts of the image will be clipped, which makes cover the right choice for object-fit:

header img {
object-fit: cover;
object-position: center bottom;
width: 100%;
height: 100%; }

Now the wheel image is in position, I provide scale by contrasting its large size with a small image of the whole car. I restrict the Beetle’s maximum size to half the viewport width and centre it horizontally using its margins:

figure {
margin: 0 auto;
max-width: 50vw; }

This design uses a solid grey background to represent the road, so I add a background color and move the figure down by 10px, so the Beetle’s wheels sit firmly on the tarmac:

main {
padding: 2rem;
background-color: #f0f0f1; }

figure {
transform: translateY(10px); }

Bigger screens provide an opportunity to make a big impression, and for this design, I want the header image to occupy half the width and the full height of a large screen. I apply the same 6+4 compound grid I’ve used for many designs in this series. It has eight columns to which I add three rows. I give the middle and bottom rows a fixed height and allow the first row to occupy all remaining vertical space:

@media screen and (min-width : 64em) {
body {
display: grid;
grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr;
grid-template-rows: 1fr 155px 155px;
grid-column-gap: 2vw; }
}

I want the body to always fill the full viewport height, so I apply a minimum height of 100vh and use a linear gradient to create the illusion of a road:

body {
min-height: 100vh;
background-image: linear-gradient(
to top,
#f0f0f1 0%,
#f0f0f1 155px,
#fff 155px,
#fff 100%); }

Using line numbers, I place the header on the grid, so it occupies half the columns and all the rows. The alignment of the small figure places it at the end of its grid module. Then, the main forms a single narrow column of running text:

header {
grid-column: 5 / -1;
grid-row: 1 / 4;
margin-bottom: 0;
height: auto;
background-color: #444; }

figure {
grid-column: 1 / 4;
grid-row: 2;
align-self: end;
max-width: auto; }

main {
grid-column: 4;
grid-row: 1 / 3;
align-self: center;
background-color: transparent; }

Knowing how scale influences someone’s understanding of a story is essential to telling it well. Sheer size is rarely enough on its own, so to make a significant impact, largeness must be relative to the size of other elements.

Bea Feitler understood scale and used it well. She often contrasted large foreground elements with smaller ones in the background to create designs which contained incredible depth. We can now follow in her footsteps by using scale to add impact to product and websites designs.

Confident Color Choices

Bea Feitler’s confident choice of colors was one of the hallmarks of her work, and it attracted me immediately. For my next Feitler-inspired design, I contrast a deep red with a vibrant yellow and reverse those colors on both sides of the design.

While this page is big on color, it is also small on markup. I need just two structural elements; a header and main. Inside both are a figure and a division:

<header>
<figure>…</figure>
<div>…</div>
</header>

<main>
<figure>…</figure>
<div>…</div>
</main>

Background and text colors are the starting point for implementing this design. I can leave everything else to the normal flow:

body {
background-color: #ba0e37;
color: #f8d72e; }

main {
background-color: #f8d72e;
color: #272732; }

For medium-size screens, I want the figures and divisions inside my header and main to occupy half the height and width of any viewport, so I apply a symmetrical two-column grid and a minimum height:

@media screen and (min-width : 48em) {
header, main {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 50vh; }
}

I place the header’s figure in the second column and the division in the first. Because this is the opposite of the content order, I need to assign both to the same row to avoid one column dropping below the other:

header figure {
grid-column: 2;

header div {
grid-column: 1;
grid-row: 1; }

The main element’s figure and division follow the content order, so I needn’t specify a grid-row for them:

main figure {
grid-column: 1;
align-self: end; }
main div {
grid-column: 2; }

I want to fill screens with color from edge to edge. For larger screens, I apply asymmetrical two-column grid which extends the full height of my body:

@media screen and (min-width : 64em) {
body {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh; }
}

In this large-screen design, the figure and division in my header and main stack vertically instead of horizontally. I change the display property from grid to flex and set the direction to column. But, the visual order of the main is opposite to its content order, so I change its direction from column to column-reverse:

header, main {
display: flex;
flex-direction: column; }

main {
flex-direction: column-reverse; }

Then, to improve the readability of my running text, I use multi-column layout and specify a column width of 18em. A browser will generate as many columns of that width as will fit inside its parent element:

main div {
column-width: 18em;
column-gap: 2vw; }

Large blocks of solid color can be tiring for the eye, so I want to break them up by adding a playful, repeating background image pattern to the body using SVG:

body {
background-image: url("data:image/svg+xml"); }

Within the SVG, I specify both the fill color and set a low fill opacity for a subtle effect:

fill='#f8d72e'
fill-opacity='0.1'

I apply the same SVG image to the yellow background of my main, this time changing its fill color to white and increasing the fill-opacity:

main {
background-image: url("data:image/svg+xml"); }

fill='#fff'
fill-opacity='0.2'

Pattern and texture play a big part in many of Bea Feitler’s iconic magazine spreads, and yet they’ve fallen out of favor on the web. Next, I’ll show you how to use CSS and SVG patterns which will add depth to your designs.

Pattern And Texture Adds Depth

In this next Feitler-inspired design, I want to convey the curvaceousness of the Volkswagen Beetle by using circles. I need minimal HTML to implement this shapely design, just three elements; a header, main and aside:

<header aria-hidden="true">
<picture>…</picture>
</header>

<aside>
<div><img></div>
<div><img></div>
</aside>

<main>
<h1 aria-labelledby="Volkswagen logo">
<svg>…</svg>
</h1>
<p>…</p>
</main>

I don’t want the header announced by screen readers, so I add an aria-hidden attribute with a value of true. I do want screen readers to describe my top-level heading, so I add an aria-labelledby attribute to that.

Half-tone style dots add texture to this page, and it’s easy to implement patterns like this using multiple background gradients, and combinations of background-size and background-position:

body {
background-color: #ba0e37;
color: #fff;
background-image:
radial-gradient(rgba(255,255,255,.25) 15%, transparent 16%),
radial-gradient(rgba(255,255,255,.25) 15%, transparent 16%);
background-size: 6vw 6w;
background-position: 0 0, 3vw 3vw; }

I’ll break this style into three steps:

1. Two radial gradients, separated by a comma. Each gradient includes two color steps, the first at 15%, and the second at 16% which form the dots.
2. By using viewport width units to size the resulting pattern, I keep the dot size proportionate to the page width.
3. Position the first radial gradient to the top left of the viewport (0 0), and the second using viewport width units which are half the background sizes.

Lea Verou has been busy compiling a gallery of useful patterns which she developed using linear and radial gradients. As clever as Lea’s gallery is, there’s something about convoluted gradients being used to produce image-like patterns which bother me.

SVG patterns seem much more appropriate. They’re just as lightweight and are far more flexible. Add SVG to a background image using a URL, and if you’re concerned about HTTP requests, embed an SVG into a stylesheet as a data:image:

body {
background-image: url("data:image/svg+xml"); }

The aside in this design includes two divisions which each contain pictures of the Beetle’s fabulous front. I clip those divisions into circles to compliment its curves:

aside div {
-webkit-clip-path: circle();
clip-path: circle(); }

By making the pictures’ backgrounds fully transparent, I can change the color of their parent divisions whenever I need to. I add slightly transparent background colors which allow hints of the dot pattern to show through:

aside div:first-child {
background-color: rgba(57,135,106,.9); }

aside div:last-child {
background-color: rgba(248,215,46,.9); }

With so much color and texture in this design, my layout needs to be simple, so I apply a two-column asymmetrical grid where the narrowest column can never shrink below 260px:

@media screen and (min-width : 64em) {
body {
display: grid;
grid-template-columns: 4fr minmax(260px, 1fr); }
}

To improve the accessibility and readability of my paragraphs of running text against the red pattern, I add a subtle drop shadow in a color which matches my background:

p {
filter: drop-shadow(0 0 5px #ba0e37); }

In the past, filtering a picture to apply a blur, color change, or drop shadow, required adding destructive effects in an image editor, but today, many of those same filters are available in CSS. You can apply filters to other HTML elements too.

Applying a CSS filter is straightforward. First, declare the filter-function and then a value in parentheses. To reduce an element’s opacity to 25% using a filter — instead of the opacity property — I use the opacity filter:

.ihatetimvandamme {
filter: opacity(.25); }

Those values differ with each filter. Some filters use degrees, accept use pixels, percentages, or their equivalent decimal. For example, .25 is equal to 25%, and 1 is the equivalent of 100%.

There are ten stock CSS filters to choose from: blur, brightness, contrast, drop-shadow, greyscale, hue-rotate, invert, opacity, saturate, and sepia. You can also use the URL function to use a custom filter from SVG.

I want to remove all color from my header and reduce its opacity to 80%. I can combine any number of filters by separating them with a space. It’s important to remember that a browser will apply filters in the order they’re specified, so for my header, color will be removed before opacity is altered:

header {
filter: grayscale(1) opacity(.8); }

When I need a smooth shift between CSS filters and values, I can add a transition between states, perhaps by increasing the opacity of my header for an :hover pseudo-class:

header {
filter: grayscale(1) opacity(.8);
transition: filter 1s linear; }

header:hover {
filter: grayscale(1) opacity(1); }

I can use CSS to develop a more elaborate animation between filters by first defining my keyframes, setting filter values at any percentage between 0 and 100% of the animation’s duration:

@keyframes beetle {
0% {
filter: grayscale(1) opacity(.8) blur(5px); }
50% {
filter: grayscale(1) opacity(1) blur(0); }
100% {
filter: grayscale(1) opacity(.8) blur(5px); }
}

I then assign this animation to my header, using the animation-name plus values for animation-duration, animation-delay, and other optional settings:

header:hover {
animation-name: beetle;
animation-delay: 0s;
animation-direction: alternate;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: linear; }

Una Kravets recreated Instagram filter effects using CSS filters and blend-modes for her CSSgram library. Building on Una’s work, developer Indrashish Ghosh made cssFilters, a tool for granular control over those Instagram-style effects, applying them to an uploaded image, and generating CSS values. Tools like Indrashish’s make it as easy to use CSS filters as any image editor.

A reaction to overly ornamental designs, flat design has been the dominant aesthetic for almost a decade. As gradients, patterns, shadows, and three-dimensional skeuomorphism fell out of fashion, designers embraced solid colors, square corners, and sharp edges.

Anti-skeuomorphism no doubt helped designers focus on feature design and usability without the distraction of what some might still see as flourishes. But, reducing both product and website designs to a bare minimum has had unfortunate repercussions. With little to differentiate their designs, products and websites have adopted a regrettable uniformity which makes it difficult to distinguish between them.

While I’m not advocating a return to the worst excesses of skeuomorphism, I hope product and website designers will realize the value of a more vibrant approach to design; one which appreciates how design can distinguish a brand from its competition. A method which uses gradients, patterns, shadows appropriately to tell stories and provide greater affordance. This will make products and websites not only easier to use but more enjoyable too.

Develop With SVG Filters

For this final inspired design, I need just two structural elements; a header which contains six brightly colored Beetles, and a main for my text:

<header>
<div><img src="car-red.png" alt=""></div>
<div><img src="car-green.png" alt=""></div>
<div><img src="car-cyan.png" alt=""></div>
<div><img src="car-magenta.png" alt=""></div>
<div><img src="car-yellow.png" alt=""></div>
<div><img src="car-black.png" alt=""></div>
</header>

<main>…</main>

Normal flow takes care of most of this design for small screens, but that doesn’t mean there’s nothing to do. I would lose the impact of those colorful cars if I were to shrink them all to fit a small screen. I also don’t want people to scroll past all six before they see my content, so my solution is to line them up horizontally in a scrolling panel.

Flexbox is the obvious choice for arranging those images, but the default left-right order would mean showing the back of the final car, instead of the front of the first. This is easily solved by changing the flex-direction from the default row to row-reverse:

header {
display: flex;
direction: row-reverse;
max-width: 100%;
overflow-x: scroll; }

I want all these cars to appear at the same size, so I use the flex-grow property and a value of 1. As I want to show the front of each car to indicate there’s more to see outside the viewport, I set the flex-basis value to 80%;

header div {
flex-grow: 1;
flex-grow: 0;
flex-basis: 80%;
/* flex: 1 0 80%; */  }

On medium-size screens, there’s space for a more elaborate layout for my collection of cars. For this design, I arrange my Beetles on an 8x12 modular grid, where each module is a 16:9 aspect ratio rectangle. The black Beetle furthest away from the viewer occupies a single module, and the cars appear progressively larger until the red Beetle in the foreground occupies the largest spacial zone.

To implement this modular grid, I apply Grid to my header element, followed by eight repeating evenly sized columns, and twelve rows which adapt to the minimum height of their content. By aligning the items to the end, rather than the start, of each row, the result looks more realistic:

@media screen and (min-width : 48em) {
header {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(12, min-content);
grid-row-gap: 10px;
align-items: end; }
}

My next task is to place each Beetle onto the grid. I use a combination of child (>) and nth-child selectors to place each element using line numbers:

header > :nth-child(1) {
grid-column: 3 / -1;
grid-row: 10 / -1; }

header > :nth-of-type(2) {
grid-column: 3 / 7;
grid-row: 7 / 9; }

header > :nth-of-type(3) {
grid-column: 1 / 4;
grid-row: 5 / 7; }

header > :nth-of-type(4) {
grid-column: 2 / 4;
grid-row: 3; }

header > :nth-of-type(5) {
grid-column: 6 / 8;
grid-row: 2; }

header > :nth-of-type(6) {
grid-column: 3;
grid-row: 1; }

A design like this cries out for typographic details. Padding on the main element adds space around my running text, so to add interest to my type, I set column widths of 24em, and a browser will automatically create the right number of columns to fit the viewport:

p {
column-width: 24em;
column-gap: 2vw; }

To add extra interest to my type, I combine a first-of-type pseudo-class selector with a first-line pseudo-element to transform that first line into uppercase letters:

p:first-of-type::first-line {
text-transform: uppercase; }

To implement my design for larger screens, I double the number of columns from eight to sixteen and reposition my images to the new line numbers:

@media screen and (min-width : 64em) {
header {
grid-template-columns: repeat(16, 1fr); }

header > :nth-child(1) {
grid-column: 8 / 15;
grid-row: 9 / 13; }

header > :nth-of-type(2) {
grid-column: 6 / 11;
grid-row: 5 / 8; }

header > :nth-of-type(3) {
grid-column: 1 / 5;
grid-row: 4 / 6; }

header > :nth-of-type(4) {
grid-column: 4 / 6;
grid-row: 3; }

header > :nth-of-type(5) {
grid-column: 11;
grid-row: 2; }

header > :nth-of-type(6) {
grid-column: 5;
grid-row: 1; }
}

Compared to today’s Beetle — which weighs almost 3000lbs — the Volkswagen Type 1 was a lightweight and speedy little car for its time. I’d like to create the impression these cars are speeding past the viewer by adding motion blur. Blurring an element using a CSS filter is straightforward:

header > div {
filter: blur(5px); }

This filter allows me to blur an element by any amount using several length values, including pixels which seem to me to be the most appropriate unit. But, CSS filters only allow me to blur an element using the same amount horizontally and vertically, much like an image editor’s Gaussian blur. To add realistic motion to my design, I need to swap CSS for an SVG filter.

I cover just a small amount of detail about SVG filters in this issue, but SVG expert Sara Soueidan has written about them extensively. Start with Sara’s SVG Filters 101 tutorial.

While its ten stock filters are a relatively recent addition to CSS, their history goes way back to their SVG origins. Filters in SVG offer far greater flexibility with six more filters available and incredible customization possibilities. Whereas CSS blur allows just one value for both horizontal and vertical axes (X/Y,) in SVG I can use two values; one for the X-axis, the other for Y.

In SVG, every filter has its own identity, so to blur to an HTML element, reference its ID using the URL value in the filter property from a stylesheet:

.blur {
filter: url(#blur); }

Filters have their own element in SVG, it’s the filter element. Even though a filter won’t be visible in a browser, giving SVG a height of 0 will ensure it takes up no space:

<svg height="0">
<filter id="blur">…</filter>
</svg>

Each SVG filter primitive has its own name which is prefixed by fe, an abbreviation of “filter effect.” Unsurprisingly, the name for a blur is feGaussianBlur. The amount of blur is applied as a stdDeviation using either one uniform value or two separate values for horizontal and vertical. To reproduce the previous uniform 5px Gaussian blur in SVG, I add one value:

<filter id="blur">
<feGaussianBlur in="SourceGraphic"
stdDeviation="5"/>
</filter>

I’m looking for a more realistic motion effect where the image is blurred on just the horizontal axis. I apply blur to only the X-axis, leaving the Y-axis at zero:

<filter id="blur">
<feGaussianBlur in="SourceGraphic"
stdDeviation="15, 0"/>
</filter>

Now my car is speeding across the viewport, but when you look more closely. the result isn’t altogether realistic. That’s because the edges of my blurred elements are clipped by the bounding box. This is the rectangle which surrounds every element.

To make the entire filter effect visible, I need to increase the size of my filter region using x, y, width, and height values. I use negative values of -10% on both horizontal and vertical axes, then increase the width and height to 120% which allows more visible space for my images’ blurred edges:

<filter id="blur"
x="-10%" y="-10%"
width="120%" height="120%">
…
</filter>

When you watch cars speeding past, or you look out of a moving train window, objects closest to you appear to move faster than those further away. To make my design seem more realistic, I need a different set of blur values for objects in the foreground, middle ground, and background.

Foreground elements like the closet red Beetle need the highest amount of horizontal blur. I give this filter an identity of blur-foreground:

<filter id="blur-foreground"
x="-10%" y="-10%"
width="120%" height="120%">
<feGaussianBlur in="SourceGraphic" stdDeviation="15,0"/>
</filter>

Then, Beetles in the middle ground receive a slightly lower stdDeviation of 10:

<filter id="blur-medium"
x="-10%" y="-10%"
width="120%" height="120%">
<feGaussianBlur in="SourceGraphic" stdDeviation="10,0"/>
</filter>

Finally, objects in the background receive the least blurring. I give this filter an identity of blur-background so I can apply it in my stylesheet:

<filter id="blur-background"
x="-10%" y="-10%"
width="120%" height="120%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5,0"/>
</filter>

With all my filters specified, in my stylesheet I apply them to Beetles in the foreground, middle ground, and background:

<img src="car-red.png" class="blur-foreground">
<img src="car-green.png" class="blur-medium">
<img src="car-cyan.png" class="blur-medium">
<img src="car-magenta.png" class="blur-medium">
<img src="car-yellow.png" class="blur-background">
<img src="car-black.png" class="blur-background">

.blur-foreground { filter: url(#blur-foreground); }
.blur-medium { filter: url(#blur-medium); }
.blur-background { filter: url(#blur-background); }

My set of six colorful Beetles are now racing across the viewport and my final Feitler-inspired design is a winner too.

NB: Smashing members have access to a beautifully designed PDF of Andy’s Inspired Design Decisions magazine and full code examples from this article.

Related Reading

1. Inspired Design Decisions: Avaunt Magazine
2. Inspired Design Decisions: Pressing Matters
3. Inspired Design Decisions: Ernest Journal
4. Inspired Design Decisions: Alexey Brodovitch

(vf, ra, yk, il)

Before writing Art Direction for the Web, I began to study Alexey Brodovitch when I became fascinated by editorial and magazine design. I was drawn to his precision, in particular, the way Brodovitch brought photographs and text together.

Then, I became intrigued by his design process, how he sketched layouts, arranged them into spreads, and created a rhythm which flowed through his magazines. Later, I appreciated his rebellious rejection of anything he considered mediocre. I still love the advice he gave his students to look beyond his medium to inspiration from other forms of art, architecture, and design.

I like to think I share a little of Brodovitch’s rebelliousness, because I want to develop the web into a creative medium, rather than as merely a platform for products. An innovative approach to website design matters because it creates more engaging experiences and attractive visual designs. Those things can help our digital products and websites appeal to audiences and communicate better. In practical terms, better communication teaches how to use a product. It also helps them to understand why they should choose that product. This approach aids editorial, marketing, and news to communicate, and is crucial to developing an affinity between a brand and its audience.

There are few books currently available on Alexey Brodovitch’s work, the most definitive being Kerry William Purcell’s 2011 “Alexey Brodovitch.”

This monograph contains collections from throughout Brodovitch’s life, most interesting to me are his designs for Harper’s Bazaar magazine, some of which I’ll explore in this issue. This book will make a fabulous addition to your design collection.

1. Inspired Design Decisions: Avaunt Magazine
2. Inspired Design Decisions: Pressing Matters
3. Inspired Design Decisions: Ernest Journal
4. Inspired Design Decisions: Alexey Brodovitch

Inspired by Alexey Brodovitch

Alexey Brodovitch was born in Russia in 1898. As a young man, Brodovitch fought in the White Army again the Bolsheviks during the Russian Civil War, which wasn’t the start in life I’d expected for someone who went on to become one of the most influential art directors of the twentieth century.

Forced into exile, Brodovitch moved to Paris where — while working as a scene painter — he met artists including Marc Chagall and was exposed to movements including Bauhaus, Constructivism, Dadaism, and Futurism.

Constructivism

Whereas autonomous art was driven by the subconscious, and painters like Wassily Kandinsky and Joan Miro suppressed conscious control of the painting process, the constructivist movement sought to consciously and deliberately construct art.

This meant deliberately placing lines and shapes using geometry. The results were often striking, which lead to constructivism’s use in political art and propaganda. Constructivism influenced artists and designers throughout the twentieth century, including Neville Brody, who’s work on The Face Magazine I’ll cover later in this series.

Alexander Rodchenko

Seven years his senior, Alexander Rodchenko was a significant influence on Brodovitch and generations of artists, graphic designers, and photographers. Rodchenko was one of the founders of the constructivist movement.

In order to educate man to a new longing, everyday familiar objects must be shown to him with totally unexpected perspectives and in unexpected situations.

— Alexander Rodchenko

Photomontage — the technique of cutting and rearranging multiple images into a new work — was popular in Constructivism. This approach to composition inspired Brodovitch throughout his life, where he became renowned for the way he deliberately and precisely brought photography and typography together.

When Brodovitch began working part-time designing layouts for Cahiers d’Art — a contemporary art journal — and the influential design magazine Arts et Métiers Graphiques, he refined his techniques, creating striking magazine and poster designs. After beating Pablo Picasso into second place in a poster competition, Brodovitch established his own design studio and while still in his thirties became one of the most respected commercial artists in Paris.

Disillusioned by the art scene in Paris, in 1930 Brodovitch moved to the United States where he taught advertising design at what is today the Philadelphia University of the Arts. His goal was to develop American advertising to the level of design in Europe. He exposed his students to French and German magazines and taught them to reexamine their techniques. In the spirit of the Bauhaus School, Brodovitch took his students outside the classroom to find inspiration elsewhere, encouraging them to find their own creative style.

Brodovitch was “intolerant of mediocrity” and frequently asked his students to “astonish me.” Brodovitch’s courses focussed on design and photography in equal measure, so as well as influencing a generation of art directors and graphic designers, he taught photographers including Diane Arbus and Richard Avedon. He’d work with them later at Harper’s Bazaar magazine.

Brodovitch was asked by The Art Directors Club of New York to design their 1934 Annual Art Directors Exhibition. There, Carmel Snow — who at the time was editor-in-chief at the US edition of Harper’s Bazaar magazine — saw Brodovitch’s work for the first time. She said:

I saw a fresh, new conception of layout technique that struck me like a revelation: pages that “bled” beautifully cropped photographs, typography and design that were bold and arresting.

— Carmel Snow (The World of Carmel Snow. McGraw-Hill, 1962)

Astonish me

Harper’s Bazaar became Brodovitch’s most well-known project. Determined to keep his designs fresh, he frequently commissioned work from European artists including Jean Cocteau, Marc Chagall, and Man Ray. To keep Harper’s Bazaar readers surprised, Brodovitch explained:

Surprise quality can be achieved in many ways. It may be produced by a certain stimulating geometrical relationship between elements in the picture, or through the human interest of the situation photographed, or by calling our attention to some commonplace but fascinating thing we have never noticed before, or it can be achieved by looking at an everyday thing in a new interesting way.

— Alexey Brodovitch

It’s Brodovitch’s art direction for Harper’s Bazaar which has influenced designers since the 1940s. His designs were elegant, something Carmel Snow once described as “good taste, plus a dash of daring.” His knowledge of photography gave his work its classic feel. Brodovitch often cropped photographs in unexpected ways, and he placed them off-centre — sometimes bleeding them outside the margins of a page — to create compositions which were full of energy and movement.

Throughout his career at Harper’s Bazaar and beyond, Brodovitch frequently used content in photographs or illustrations to inform his placement and shape of the text. His colour choices were often bold, and he used large blocks of colour for emphasis.

I find Brodovitch’s design process as fascinating as his finished work because I learn more about how someone thinks by looking at their work-in-progress. Brodovitch began by designing his layouts as sketches on paper. Then, he arranged his spreads on the floor of his studio to create a well-paced magazine.

Scattering images

Early in his career, Brodovitch was inspired by Mehemed Fehmy Agha — the influential art director who designed the first double-page spread — and frequently scattered pictures across his pages like playing cards.

These might seem at first like a random arrangement of pictures, but they were deliberately placed and filled Brodovitch’s designs with movement. We can use the same technique today, even when designing flexible layouts.

For my first Brodovitch-inspired design, I scatter four differently sized images across the viewport. I can arrange these pictures either horizontally, vertically or even diagonally according to the screen dimensions.

To help me design a consistent experience across screen sizes, I form a storyboard from a short series of sketches.

To develop this design, I use a combination of CSS Grid, Flexbox, and transforms. My markup is minimal and meaningful, using only three elements for layout; a top-level heading, a main element for my running text, and a figure element which contains my four images:

<h1 aria-label="Vespa"><svg>…</svg></h1>

<main>
<h2>It looks like a wasp!</h2>
<div>…</div>
</main>

<figure>…</figure>

For smaller screens, I need only foundation styles for colour and typography as the normal flow, handles my single column layout. In normal flow, elements display one after another, depending on a document’s writing mode. If you’re new to these concepts, Rachel Andrew wrote an excellent primer.

To develop a small screen design consistent with larger screen sizes, I rotate images alternately within a horizontally scrolling figure element. As the browser default sets a flex container to no-wrap and arranges its flex items along a horizontal axis, I need only apply display: flex; to my figure element:

figure {
display: flex; }

By ensuring my figure never exceeds the width of my viewport and setting the horizontal overflow to scroll, I develop a simple scrolling panel which may contain as many images as I need:

figure {
max-width: 100vw;
overflow-x: scroll; }

My figure element contains four SVG images. To maintain their aspect ratio when using Flexbox, I enclose each one in its own division:

<figure>
<div><img src="img-1.svg" alt=""></div>
<div><img src="img-2.svg" alt=""></div>
<div><img src="img-3.svg" alt=""></div>
<div><img src="img-4.svg" alt=""></div>
</figure>

To fill all the horizontal space with images, I use the flex-grow property. flex-grow controls the ratio by which elements expand to occupy available space in a container, flex-shrink does the opposite. This property specifies the ratio that elements reduce in size when a container is narrower than their combined widths. I want my flex items to grow to fill any available space, but not shrink:

figure div {
flex-grow: 1;
flex-shrink: 0; }

Both flex-grow and flex-shrink allow the widths of elements to be completely fluid, with no restriction on how wide or narrow they can be. There are occasions when a flex item should start at a certain size before it grows or shrinks. In Flexbox, flex-basis provides a starting width for an element before it flexes:

figure div {
flex-basis: 40%;
/* flex: 1 0 40%; */ }

To shave a few bytes from my style sheet, I can combine those three properties into one by using the flex shorthand.

Choosing between Flexbox and Grid

People often ask me when to use Flexbox or Grid. Of course my answer depends on the style of element they’re implementing. For my set of four figure images, I can use Flexbox or Grid to develop a 2x2 arrangement where every image appears the same size. But, when I add or remove an image, the result using Flexbox isn’t what I’m looking for, as the final image expands to fill the entire width of my figure. By changing Flexbox to Grid, every item aligns to the grid which maintains their size.

It’s common in print to see design elements which overlap to create the illusion of depth. On the web, achieving this effect has been tricky, so design elements mostly stay separate. Grid enables designs which in the past were either difficult or even impossible to implement.

When a screen’s large enough to render my main and figure elements side-by-size, I apply display: grid; to the body element with column widths which match the 6+4 compound grid, I showed you in issue 2. I also set the gap between columns and rows:

@media screen and (min-width : 48em) {

body {
display: grid;
grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr;
grid-column-gap: 2vw;
grid-row-gap: 4vh; }
}

Then, I place the heading, main, and figure elements onto that grid using line numbers:

h1 {
grid-column: 7;
grid-row: 1;  }

main {
grid-column: 6 / -1;
grid-row: 2;  }

figure {
grid-column: 1 / 6;
grid-row: 1 / 3;  }

Finally, when a screen’s large enough and I can get the biggest impact from my scattered pictures, I reposition the heading, main, and figure elements into new positions on my grid:

@media screen and (min-width : 64em) {

h1 {
grid-column: 8;
grid-row: 1; }

main {
grid-column: 2 / 6;
grid-row: 1; }

figure {
grid-column: 1 / -1;
grid-row: 2; }
}

Then, I apply grid properties to my figure element to create four columns, each one larger than the last:

figure {
grid-template-columns: 1fr 2fr 3fr 4fr;
grid-gap: 0;
align-items: end; }

I align my items to the end of their grid container, then nudge and rotate my images to give them the scattered look which Brodovitch inspired:

figure div:nth-of-type(1) {
transform: translate(20px, -20px) rotate(-20deg); }

figure div:nth-of-type(2) {
transform: rotate(-5deg); }

figure div:nth-of-type(3) {
transform: rotate(10deg); }

figure div:nth-of-type(4) {
transform: translate(-60px, -80px) rotate(-20deg); }

People have told me that designs like these are appropriate for editorial design but not for products or websites which promote or sell them. This isn’t the case at all. Graphic design principles matter as much to a digital medium as they do for print. Diverse and interesting designs stand out whichever medium you choose to deliver them.

Alexey Brodovitch instinctively knew how to combine photographs with written content, often turning text into shapes that contrasted with or mirrored the forms in his photography. Over the next few pages, I’ll show you how to adapt his inspired design techniques to the web.

Lesson 2: Mirroring pictures and text

Aexey Brodovitch made the double-page spread his playground, using its large canvas to carefully construct his compositions. Facing pages allowed Brodovitch the possibility to contrast or connect both sides of a spread.

I need three structural elements to implement this next Brodovitch inspired design; a heading, main, and aside:

<h1 aria-label="Vespa"><img></h1>
<main>…</main>
<aside>…</aside>

Normal flow again handles my single column layout for small screens, and I need only foundation styles for colour and typography. These include background and foreground colours for the inverted aside:

aside {
background-color: #ba0e37;
color: #fff; }

Medium-size screens share those same foundation styles. I also reuse the same 6+4 compound grid from my previous design. To implement the asymmetric layout of elements inside my main and aside elements, I use Grid with four columns and a set of rows with a mixture of pixel and rem units:

@media screen and (min-width : 48em) {

main,
aside {
display: grid;
grid-template-columns: 2fr 1fr 1fr 2fr;
grid-template-rows: 10rem 200px 10rem auto; }
}

I add another unit, a viewport height unit, to those elements to ensure they always fill the full height of a screen:

main,
aside {
min-height: 100vh; }

My main and aside elements each contain a figure element and an SVG image and caption. To place those child elements on my grid, I apply display:contents; to my figure, and effectively remove it from the DOM for styling purposes, so its descendants take its place:

main figure {
display: contents; }

Then, I place the images and captions into columns and rows using line numbers:

main img {
grid-column: 1 / 4;
grid-row: 1 / 5; }

main figcaption {
grid-column: 4 / -1;
grid-row: 3; }

aside img {
grid-column: 2 / -1;
grid-row: 1 / 5; }

aside figcaption {
grid-column: 1;
grid-row: 3;
align-self: center; }

Next, I apply styles for larger screens, first by creating a grid with two symmetrical columns, then placing my main and aside elements onto that grid using named lines:

@media screen and (min-width : 64em) {

body {
display: grid;
grid-template-columns: [main] 1fr [aside] 1fr; }

main {
grid-column: main; }

aside {
grid-column: aside; }
}

All that remains is for me to position the heading containing the two-tone Vespa logo. As I only need this version of the logo on larger screens, I use the picture element to swap a standard version for my two-tone variation:

<h1>
<picture>
<source srcset="logo-2-tone.svg" media="(min-width: 64em)">
<img src="logo.svg" alt="ihatetimvandamme">
</picture>
</h1>

Although Flexbox and Grid have mostly taken over as my main layout tools, there are still good uses for CSS positioning. As I want my logo in the centre of my layout, I position it half-way across the viewport, then use a transform to move it left, so its centre matched the background behind it:

h1 {
position: absolute;
top: 14rem;
left: 50vw;
z-index: 2;
transform: translateX(-95px); }

Carving text into shapes

Shapes add movement to a design which draws people in. They help to connect an audience with your story and make tighter connections between your visual and written content.

I’ve seen very few examples of using CSS Shapes which go beyond Basic Shapes, including circle(), ellipse(), inset(). Even instances of a polygon() are few and far between. Considering the creative opportunities CSS Shapes offer, this is disappointing. But, I’m sure that with a little inspiration and imagination, we can make more distinctive and engaging designs.

Inspired by Alexey Brodovitch, in my next design, the shape of the running text reflects shapes in the header image opposite. It often needs surprisingly little markup to develop dynamic and original layouts.

To implement this design, I need just two structural elements; a header which also contains a picture element, and the main element for my running text:

<header>
<picture>…</picture>
</header>

<main>…</main>

I’ve made a simple small screen design, so I only need colour and typography foundation styles. By using a picture element in my header, browsers swap the portrait orientation image — which best suits small screens — with a landscape variation when I introduce layout styles.

For larger screens, I apply an asymmetrical two-column grid to the body and place the header and main elements using named lines. I also ensure the grid extends to the full viewport height, regardless of the amount of content:

@media screen and (min-width : 64em) {

body {
display: grid;
grid-template-columns: [header] 1fr [main] 1fr;
max-width: 100vw; }

header {
grid-column: header; }

main {
grid-column: main; }
}

I needn’t make a polygon path to flow my text around. Instead, I use a mask image which I add to the page using Generated Content applied to a pseudo-element:

main:before {
content: "";
display: block;
float: left;
width: 170px;
height: 800px;
shape-outside: url('mask.svg'); }

Note: Watch out for CORS (cross-origin resource sharing) when using images to develop your shapes. You must host images on the same domain as your product or website. If you use a CDN, make sure it sends the correct headers to enable shapes. It’s also worth noting that the only way to test shapes locally is to use a web server. The file:// protocol simply won’t work.

When you need content to flow around a shape, use the shape-outside property. You must float an element left or right for shape-outside to have any effect.

You can also use Shapes to sculpt structural shapes from solid blocks of running text, in the style of Alexey Brodovitch.

The markup I need to implement this design is similar to my previous example, a header which again contains a picture element, and the main element for running text:

<header>
<picture>…</picture>
</header>

<main>…</main>

Inside my main element are two SVG images which I use to carve my running text into its shape. To prevent these presentational images being announced by screen readers, I give them both an aria-hidden attribute and a value of true:

<img src="shape-1.svg" alt="" aria-hidden="true">
<img src="shape-2.svg" alt="" aria-hidden="true">
<p>…</p>

Using what should be by now a familiar 6+4 compound grid, I apply Grid to the body element and place the header and main elements using line numbers:

@media screen and (min-width : 64em) {

body {
display: grid;
grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr; }

header {
grid-column: 1 / 5; }

main {
grid-column: 5 / 9; }
}

Next, I rotate the header image clockwise by twenty degrees and place its transform-origin in the centre horizontally and vertically to ensure it stays in the middle of my header:

header picture {
transform: rotate(20deg);
transform-origin: 50% 50%; }

Finally, I float the first image left, and the second image right, so that my running text flows between them and mirrors the shape of the rotated image opposite. I don’t need a class attribute on these images. Instead, I use an attribute selector which targets the image source:

[src*="shape-1"],
[src*="shape-2"] {
width: 200px;
height: 100vh; }

[src*="shape-1"] {
float: left;
shape-outside: url('mask-1.svg'); }

[src*="shape-2"] {
float: right;
shape-outside: url('mask-2.svg'); }

Tools like CSS Shapes now give us countless opportunities to capture readers’ attention and keep them engaged. I hope by now, you’re as excited about them as I am.

Developing pictures and text

When Brodovitch became frustrated with the commercial constraints of working on Harper’s Bazaar, in 1949, he began collaborating on Portfolio, the short-lived, but significant graphic design magazine. Running to just three issues, Portfolio allowed Brodovitch to focus on not just a magazine, but a “graphic experience.”

In issue 2 of Portfolio, Brodovitch designed a spread on the work of abstract-expressionist artist Jackson Pollock. In his design, shapes flow between columns which extend the full height of the page. I want to achieve the same style in my next Brodovitch inspired design, but whereas Brodovitch’s spread includes no copy, mine has two columns of running text. I also want the image behind my text to grow and shrink as the viewport changes size.

My markup for implementing this design contains only the bare minimum of main and aside elements:

<main>…</main>
<aside>…</aside>

The aside also contains a division which I use to place the running text onto my grid, and a figure element containing the images I need to accomplish the design:

<aside>
<div>…</div>
<figure>
<img src="clip-left.svg" alt="">
<img src="clip-center.svg" alt="">
<img src="clip-right.svg" alt="">
</figure>
</aside>

This design feature should be visible at any screen size, so before implementing layout styles, I set up the figure’s three separate images. The left and right images are white on a red background, and the centre image has red outlines on a white background. My first task is to establish the figure element as a positioning context for its descendants and position them absolutely in the top-left of my figure:

figure {
position: relative; }

figure img {
position: absolute;
top: 0;
left: 0; }

Next, I use the clip-path property to clip each of the images so that only one-third of them is visible:

figure img:nth-of-type(1) {
z-index: 2;
clip-path: polygon(0% 0%, 0% 100%, 33.33% 100%, 33.33% 0%); }

figure img:nth-of-type(2) {
z-index: 1;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }

figure img:nth-of-type(3) {
z-index: 2;
clip-path: polygon(100% 0%, 66.66% 0%, 66.66% 100%, 100% 100%); }

With these images positioned, I add layout styles for larger screens to place the main and aside elements onto my grid:

@media screen and (min-width : 64em) {

body {
grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr; 
grid-column-gap: 2vw; } 

main {
grid-column: 1 / 3; }

aside {
grid-column: 3 / -1; }
}

To create the effect of three columns which extend to the full height of my page, I specify the full viewport height on my body element, then use a CSS gradient background image to give my aside element its column style. The percentage stop values in this gradient match the 33.33% widths of my clipped images:

body {
height: 100vh; }

aside {
background-image: linear-gradient(to right, 
#ba0e37 33.33%, 
#fff 33.33%, 
#fff 66.66%, 
#ba0e37 66.66%); }

All that remains is to place my column of running text and figure in the aside, so I apply grid values to the aside and place the division and figure using line numbers. As these elements overlap on my grid, I use z-index to push the figure backwards and my running text forward:

aside {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr; }

aside div {
z-index: 2;
grid-column: 2;
grid-row: 1 / 3; }

figure {
z-index: 1;
grid-column: 1 / -1;
grid-row: 2; }

This design may look complicated and on a first glance may not seem achievable across a range of screen sizes, but it’s surprisingly simple to develop. It retains its personality from small screens to larger ones and is flexible at every size in-between.

Flexible designs which include precisely positioned elements were previously tricky to implement using floats and CSS positioning. Modern CSS techniques have made these designs much more straightforward to accomplish, which I hope will result in a new generation of inspired designs.

My final design is again inspired by a spread from Portfolio’s second issue. Here, Brodovitch used a striking combination of black and white columns and a bold splash of colour. Implementing this design needs just two structural elements; a main and footer element:

<main>…</main>
<footer>…</footer>

My main element contains a headline logo, an image, and a block of running text. The footer includes two divisions, each containing a set of SVG images to accomplish the effect:

<main>
<h1 aria-label="Vespa"><svg>…</svg></h1>
<img src="vespa.svg" alt="Vespa">
<h2>…</h2>
<p>…</p>
</main>

<footer>
<div>…</div>
<div>…</div>
</footer>

For medium-size screens, I place these elements on my grid using named lines:

@media screen and (min-width : 48em) {

body {
display: grid;
grid-template-columns: [main] 1fr [footer] 1fr;
min-height: 100vh; }

main {
grid-column: main; }

footer {
grid-column: footer; }
}

To adjust my layout proportions for larger screens, I need only change values for grid-template-columns on the body element:

@media screen and (min-width : 64em) {

body {
grid-template-columns: [main] 2fr [footer] 3fr; }
}

Content in the main element needs only basic styling, but the footer which occupies the right half of larger screens requires more. To accomplish this footer’s striped column effect, I again use a linear gradient and four percentage-based colour stops:

footer {
background-image: linear-gradient(to right, 
#000 33.33%, 
#fff 33.33%, 
#fff 66.66%, 
#000 66.66%); }

Each footer division contains a set of three SVG images:

<footer>
<div>
<img src="top-left.svg" alt="">
<img src="top-center.svg" alt="">
<img src="top-right.svg" alt="">
</div>

<div>
<img src="bottom-left.svg" alt="">
<img src="bottom-center.svg" alt="">
<img src="bottom-right.svg" alt="">
</div>
</footer>

Styling the footer’s second division involves turning it into a flex container. As the browser’s default Flexbox styles include a horizontal flex-direction and no wrapping, I need just a single line of CSS:

footer div:nth-of-type(2) {
display: flex; }

To ensure my images grow to fill the columns, but never exceed their width, I apply the flex-grow property and a value of 1, plus a max-width value of 33% to match my columns:

footer div:nth-of-type(2) img {
flex: 1;
max-width: 33%; }

The CSS clip-path property enables you to clip and element so that only part of it remains visible. These clipping paths can be any shape, from basic circles and eclipses to complex polygon shapes with any number of coordinates.

• 1. For the first image, I clip the right side leaving only the portion on the left visible (black area.)
• 2. I position the second image absolutely and use a lower z-index value to send it to the bottom of my stacking order.
• 3. For the third and final image, I clip the left side leaving only the portion on the right visible.
• 4. My final result includes an SVG circle positioned over my images. A mix-blend mode tints the colour of elements below it in my stacking order.

For the images in the first division, I again position them absolutely within a positioning context, then use the clip-path property to clip each one so that only one-third of them is visible:

footer div:nth-of-type(1) {
position: relative;
min-height: 300px; }

footer div:nth-of-type(1) img {
position: absolute;
top: 0;
left: 0; }

footer div:nth-of-type(1) img:nth-of-type(1) {
clip-path: polygon(0% 0%, 0% 100%, 33.33% 100%, 33.33% 0%); }

footer div:nth-of-type(1) img:nth-of-type(2) {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }

footer div:nth-of-type(1) img:nth-of-type(3) {
clip-path: polygon(100% 0%, 66.66% 0%, 66.66% 100%, 100% 100%); }

My final task is to add an SVG circle which uses a mix-blend-mode to blend its colour with elements behind it:

footer div:nth-of-type(1) svg {
position: absolute;
mix-blend-mode: darken; }

Since I discovered his work, Alexey Brodovitch has been the most substantial influence on the work I make for the web and how I encourage my students to think about theirs. His inability to accept anything mediocre has pushed me to think beyond what’s expected from product and website design. I hope my designs include his dash of daring.

NB: Smashing members have access to a beautifully designed PDF of Andy’s Inspired Design Decisions magazine and full code examples from this article.

1. Inspired Design Decisions: Avaunt Magazine
2. Inspired Design Decisions: Pressing Matters
3. Inspired Design Decisions: Ernest Journal
4. Inspired Design Decisions: Alexey Brodovitch

(ra, yk, il)