The Branding Store | Logo Design, Web Design and E-commerce specialists.| Pembroke Pines, Florida. | Inspired Archives - The Branding Store | Logo Design, Web Design and E-commerce specialists.| Pembroke Pines, Florida.

Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884

01 Oct

Inspired Design Decisions With Bradbury Thompson: The Art Of Graphic Design

by TBSCategories: News

The idea for this series — and the book which will follow it — was sparked by a casual conversation, but writing it has had a profound impact on me and the work I make for the web.

I’m more thoughtful in my approach to page layout and to the ways a page and its content adapt to different screen sizes. I have a far greater understanding of how composition helps communication and can improve the stories I tell about my clients’ businesses, products, or services.

I discovered how to better create a rhythm which flows from page to page. I learned how that rhythm produces more attractive visual designs and engaging experiences, and how flexible even the simplest grids can be when approached with imagination.

I became fascinated by the ways magazine art directors including Alexey Brodovitch and Bea Feitler brought images and text together. My knowledge of typography developed alongside my enthusiasm for expressive and entertaining type. I’m unlikely ever to make type as beautiful as Herb Lubalin, or as challenging as Neville Brody, but I am more confident to experiment.

This project gave me the confidence to — as Ruth Ansel suggested — “step outside of what is expected,” make confident choices, and and to trust my instincts when something feels right. I learned how to channel my often rebellious attitude to conventional design thinking to develop novel solutions to often everyday design problems.

We work in an industry which is now more dominated by the academic, mechanical, and technical aspects of design. Developing this series has reinforced for me that while those activities matter, as Giovanni Pintori wrote, we “need logic and imagination in equal measure.”

As Neville Brody explained, “Once you have broken down the rules, literally anything is possible.” Unconventional thinking needn’t come at the expense of usability. Learning how people interact with a website or use a product shouldn’t dictate a design but instead provide a platform on which to develop engaging, entertaining, and ultimately more memorable experiences.

Learning about the work of designers from different eras and various fields not only inspired my own ideas, it gave me enthusiasm to learn more. Finding new sources of inspiration has become an almost daily obsession, and while my studio walls might not yet be as full as Ruth Ansel’s and Bea Feitler’s, my bookcases, coffee tables, and desk are almost overflowing with my collection of design books.

For a long time, I had a nagging feeling the web can so much more than we’re making it. Every one of the designers I’ve featured throughout this series challenged perceptions, influenced the direction of their medium, and ultimately inspired others—myself included—to create better work. I hope in some small way, this series can do the same.

Inspired By Bradbury Thompson

Studying one of the most accomplished art directors and graphic designers of the last century seems like a fitting close to this series.

Bradbury Thompson was born in Kansas in 1911, and while he may not have been the best-known, there’s no doubt he was one of the most influential. Thompson studied at Washburn College in his home city of Topeka. From early on, he was inspired by print designs, especially magazines, and used this influence to design the college’s yearbooks.

After graduating from Washburn, Thompson worked for five years at Capper Publications, a local printing company. This first job as a printshop junior wouldn’t have been glamorous, but it gave Thompson a broad knowledge of design and printing techniques which he would use throughout his long career.

Kansas in the 1930s was well-known for its severe dust storms, but not as a creative centre, so in 1938 Thompson travelled the 1,200 miles east to New York City. Incredibly, for a young man fresh off the road from Kansas, one of his first projects was designing the 1939 World’s Fair catalogue.

Thompson worked for Rogers-Kellogg-Stillson—the printing firm responsible for that World’s Fair—and was assigned to work on Westvaco Inspirations for Printers. This series of promotional booklets were published by Westvaco Corporation to showcase its line of printing papers. Each issue consisted of just sixteen pages, but gave Thomson a “rare opportunity for experimentation provided a receptive designer.”

Westvaco had published Inspirations since the 1920s and was already widely circulated to an audience of 35,000 agencies, museums, printers, schools, and universities.

Thomson was given no budget to commission original artwork or photographs for the publication, but instead of letting this limit his ideas, he used it as an opportunity to be creative. Inspirations gave Thomson the freedom to experiment with ideas and techniques, and to explore creative concepts. He became “one of the best scroungers in my profession” by borrowing printed plates and separations from agencies, magazines, and even museums, to incorporate into his work.

These borrowed elements included historical photographs and illustrations which Thomson combined with contemporary typography and modern process colors. For Victory, a spread for Inspirations in 1953, Thomson incorporated arrow illustrations and integrated them into targets made from solid colors. He borrowed elements from folk and primitive art, turning them into original works which blended modern with traditional. Working on Inspirations stimulated Thompson’s creativity, and he went on to design over 60 editions.

During WW2, Thompson designed the final few issues of two wartime magazines—Victory and USA—which were published by the Office of War Information. Then in 1945 he became art director of Mademoiselle magazine and stayed in the role for the next fifteen years.

The eclectic tendencies Thompson had developed working on Inspirations continued at Mademoiselle and now with a budget to work with, he commissioned up-and-coming artists Andy Warhol, Joan Miro, Willem de Kooning, and my personal favourite pop artist Jasper Johns to illustrate for its fiction section.

Thomson’s magazine work didn’t begin or end with Mademoiselle and throughout his career he work on over thirty more including Business Week, the Harvard Business Review, and Smithsonian magazine.

Bradbury Thompson may not be among the most famous graphic designers but he was widely recognised in the his industry, receiving all three major design awards and more. His awards included the National Society of Art Directors of the Year Award (1950) and the AIGA Medal (1975.) In 1977 Thompson was inducted into Art Directors Club Hall of Fame, and during the 1980s he won first the Frederic W. Goudy Award and then the Type Director’s Club Medal.

From his earliest experiences working in Topeka, Thompson was a details-orientated designer who paid attention to the finest details in his typography and to the precise cropping and placement of his images. His clever use of often simple palettes of process colors along with black-and-white historical illustrations and geometric forms made his work at the same time classic and contemporary.

Type is a thing of constant interest to me. In short, type can be a tool, a toy, and a teacher. It can provide a means of livelihood, a hobby for relaxation, an intellectual stimulant—and a spiritual satisfaction. I believe an avid interest in type necessarily includes a zest for everyday life.
— Bradbury Thompson

Like architecture, typography is a blend of beauty with functional utility and Thompson’s designs often combined unusual typographic arrangements with colorful shapes. For Rain, Rain, Rain — a spread for Mademoiselle magazine in 1958 — he reproduced the same raincoat wearing figure carrying an umbrella as five colored silhouettes.

In Futural — a spread for Westvaco Inspirations for Printers in 1962 — Thompson mirrored the simplified shapes of aeroplanes across pages, using line-work on the verso and solid colors on the recto. He regularly overprinted his colorful shapes to add depth and interest to his designs.

Using his experience of printing technologies, Thompson’s signature designs often use just four process colors. In offset printing, process colors are comprised of percentages of cyan, magenta, yellow, and key (black) inks (CMYK). This process of four-color printing is capable of producing a wide range of colors.

Thompson’s best-known designs often use these colors in their purest form. He frequently separated the colors and printed them in different areas in his compositions. We use the RGB model when we design for screens, but separating those three colors in the way Thompson separated component CMYK colors can create inspiring designs for the web.

Thompson taught graphic design at Yale University’s School of Art from 1956 until his death in Connecticut in 1995.

The New York Times Book Review said that his artistic autobiography, “The Art of Graphic Design,” was a book in which “art and design are gloriously and daringly mixed”, which is a good representation of his design strategy in general. “The Art of Graphic Design,” was published 1988. While the original hardcover copy I’d like for my collection is now prohibitively expensive, reprinted paperback versions are available at more realistic prices.

Processing The Color Palette

I start implementing this first design by first considering my content, then the most appropriate HTML elements to describe it. For this Thompson-inspired design, I need only a few elements, a header, article, and aside, plus two figures:

<header>   <svg id="logo">…</svg>   <h1>…</h1>   <svg id="banner">…</svg>   </div> </header>  <article>   <main>…</main> </article>  <figure>…</figure> <aside>…</aside> <figure>…</figure>

As I’ve discussed throughout this series, my process always starts by applying foundation styles, which include colors and typography. I add a deep blue background color and contrasting white serif text:

body { padding: 2rem 0; background-color: #1f455f; font-family: 'serif'; color: #fff; }

I style my italic headlines, then add sizes for the heading levels and paragraphs:

h1, h2 { font-style: italic; }  h1 { font-size: 2.8rem; }  h2 { font-size: 2.027rem; }  p { font-size: .8rem; }

Finally, I color the captions which accompany both my figures’ images with a vibrant green and italicise the text to match my headline styles:

figcaption { font-size: .8rem; font-style: italic; text-align: center; color: #d2de4a; }

CMYK in RGB

To produce CMYK process colors—cyan, magenta, yellow, and key (black) in RGB (red, green, and blue) for screens, use maximum values for two out of those colors. If the result is too hard on the eyes, add black to create tints and soften the effect.

On even the smallest screens, some space needs to remain empty. This allows the eye to flow around content. Margins and padding are often all that’s needed to add empty space:

#logo { margin: 0 auto 1rem; }  #banner { margin: 1rem 1rem 1rem 0; }  main, aside { margin: 0 1rem; }  figure { margin: 2rem auto; }

Reducing the maximum width of graphic elements adds white-space and visual interest to small-screen designs:

#logo { max-width: 25vw; }  figure { max-width: 50vw; }

The extra space available on medium-size screens allows me to introduce the first set of layout styles to this design. By splitting my running text across two columns, I help to maintain consistency in its measure. Placing my two figures, side-by-side maintains their relative proportions to my text.

I start by applying grid properties and an unusual five-column symmetrical grid to the body element. Then, I add a data URI background image and position it to the right of my layout:

@media (min-width: 48em) {  body { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; background-image: url("data:image/svg+xml…"); background-position: 120% 50%; background-repeat: no-repeat; } }

I need to place the content of my header and article directly onto my grid, so I change those elements’ display property to contents, which effectively removes them for styling purposes:

header, article { display: contents; }

Then, I place each content elements into a different set of grid columns and rows using line numbers. First, I place the Ford logo into a single column. I can remove the maximum width I set earlier as its size will now depend on the width of its column:

#logo { grid-column: 2; margin: 0; max-width: none; }

The banner contains a Transit van profile, and the main headline occupies the first four of my five columns:

#banner, h1 { grid-column: 1 / 4; }

By leaving the first column empty, content in the main and aside elements are indented from the left. By setting their widths to match that of my banner, I add a pleasing asymmetry to the layout:

main, aside { grid-column: 2 / -1; }

Although my two figures are’t adjacent elements in my HTML, CSS Grid makes placing them side-by-side simple. I place them into different columns on the same row without needing to alter my HTML:

figure:nth-of-type(1) { grid-column: 2 / 4; grid-row: 5; }  figure:nth-of-type(2) { grid-column: 4 / -1; grid-row: 5; }

In many of my designs, I use indentation instead of paragraph spacing to create solid blocks from my running text. This effect is even more striking when setting text in multiple columns:

p { margin-bottom: 0; }  p + p { text-indent: 2ch; }  main { column-width: 16em; }

Figure elements can include one or more captions and images. Captions commonly appear under the pictures they describe, but there’s no reason captions need to stay underneath. I can place them above, or to the left or right of an image too.

When I place captions on either the left or right of an image, I immediately give designs the look of a magazine. I use Flexbox and then the flex-direction property to move them:

figure { display: flex; }

My first figure caption appear on the left, so I reverse the flex-direction of this figure from its default row:

figure:nth-of-type(1) { flex-direction: row-reverse; }

Flexbox allows me to arrange elements vertically as well as horizontally. To place my captions at the bottom edge of my images, I change their cross-axis alignment from the default stretch to flex-end:

figure { align-items: flex-end; }

For a finishing touch to this medium-size design, I align both captions in opposite directions:

figure:nth-of-type(1) figcaption { text-align: right; }  figure:nth-of-type(2) figcaption { text-align: left; }

Empty space helps to lead the eye at every stage of this layout. The extra space available on larger screens allows me to develop a distinctive asymmetric design.

Using a compound grid—two or more overlapping or stacked grids—on one page can create eye-catching compositions. The compound grid for this design overlaps a four-column and six-column grid which creates a rhythmic pattern of 2|1|1|2. I transfer that pattern to fr units and apply them as columns to the body element:

@media (min-width: 64em) {  body { grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr; } }

Then, I add four rows using a combination of pixels, rem units, and intrinsic sizing, before setting the minimum height of the page to fill the viewport:

body { grid-template-rows: 100px 14rem 14rem auto; min-height: 100vh; }

To complete the body styles, I add two new data URI background images and specify their sizes so they’re always contained within the viewport:

body { background-image: url("data:image/svg+xml…"), url("data:image/svg+xml…"); background-position: 0 50%, 100% 50%; background-size: contain; }

This asymmetric design is highly structured, and every element is precisely placed onto my grid. I use line numbers to place the structural elements, raising the overlapping headline above the banner image in the stacking order:

#logo { grid-column: 2 / 4; grid-row: 1; }  h1 { grid-column: 1 / 5; grid-row: 2 / 4; align-self: center; z-index: 2; }  #banner { grid-column: 1 / 5; grid-row: 2 / 4; z-index: 1; }

My main content occupies the last two columns and forms and island in the right of this design:

main { grid-column: 7 / -1; grid-row: 2 / 4; column-width: auto; }  aside { grid-column: 6 / -1; grid-row: 4 / 5; }

I place the two figures onto this new grid:

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

Then, I adjust the direction of their flex, setting the first figure vertically, so my caption appears above its sibling image:

figure:nth-of-type(1) { flex-direction: column-reverse; }

The content of my second figure is arranged horizontally with both the image and caption resting on the baseline:

figure:nth-of-type(2) { flex-direction: row; align-items: flex-end; }

I fine-tune the alignment of both caption and this first Thompson-inspired design is complete:

figure:nth-of-type(1) figcaption { text-align: center; }  figure:nth-of-type(2) figcaption { flex: 1; text-align: left; }

Colorfully Complementary

Despite the apparent complexity of this layout, I need only three structural elements in my HTML: a header which contains Transit vans in a variety of complementary colors, then two content elements, a main and an aside:

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

A colorfully complementary header is the centrepiece of this design. It might be tempting to implement this using a single large image. But, I want to develop various arrangements for different screen sizes, so using nine separate images allows me to make a scrolling panel for small screens, and arrange them in a grid for medium and large screens:

<header>   <img src="header-1.svg" alt="Ford Transit">   <img src="header-2.svg" alt="">   <img src="header-3.svg" alt="">   …   <img src="header-9.svg" alt=""> </header>

Both the main and aside elements include a headline, an exploded Transit parts SVG image, plus divisions for arranging my content into columns:

<main>   <h1>…</h1>   <div>…</div>   <div>…</div>   <svg>…</svg> </main>  <aside>   <h2>…</h2>   <div>…</div>   <div>…</div>   <svg>…</svg> </aside>

I start by applying a dark grey background color to the body element, and add stying to my headlines and paragraphs:

body { background-color: #262626; font-family: 'sans-serif'; color: #fff; }  h1, h2 { font-size: 2.027rem; font-style: italic; text-transform: uppercase; }  p { font-size: .8rem; }

Often, normal flow plus a few foundation styles are all I need to implement a small-screen version of my designs, but this one includes layout styles from the start. I begin by transforming my header and its nine images into a horizontally scrolling panel by adding flex and overflow properties:

header { display: flex; overflow-x: scroll; margin: 0 2rem 2rem; }  header img:not(:last-of-type) { margin-right: 1rem; }

The header isn’t the only element to get a layout on small screens, the main and aside elements get grids too:

main, aside { display: grid; margin: 0 2rem; }

First, I apply a two-column layout to the main element. The exploded Transit parts SVG image fit into the right column, so I fix its width at 100px. The left column expands to fill any remaining space.

main { grid-template-columns: [content] 1fr [svg] 100px; }

Then, I place main element items using grid lines with names which reflect their content:

h1 { grid-column: content; grid-row: 1; }  main > div:nth-of-type(1) { grid-column: content; grid-row: 2; }  main > div:nth-of-type(2) { grid-column: content; grid-row: 3; }  main > svg { grid-column: svg; grid-row: 1 / 4; }

The aside element also has a two-column layout, but this time the narrow column and its exploded Transit parts are on the left. To emphasise the distinction between my main and aside content areas, I add a solid border at the top of the aside:

aside { grid-template-columns: [svg] 100px [content] 1fr; padding-top: 1rem; border-top: 3px solid #b22f65; }

I use named lines to place its content into my grid:

h2 { grid-column: 1 / -1; grid-row: 1; }  aside > div:nth-of-type(1) { grid-column: content; grid-row: 2; }  aside > div:nth-of-type(2) { grid-column: content; grid-row: 3; }  aside > div:nth-of-type(3) { grid-column: svg; grid-row: 2 / 4; }

A horizontally scrolling header and grids in my content demonstrate how it’s sometimes beneficial to use more than a single-column layout for small screens. Those same elements can be arranged in very different ways in the extra space available on medium-size screens.

In this version of my design, a grid of nine colorfully complementary images fills the header. I apply grid properties and three symmetrical columns:

@media (min-width: 48em) {  header { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; overflow-x: visible; } }

Unlike other elements in this design, there’s no need to place the images into this grid, as the browser’s auto-placement algorithm arranges them automatically.

By default, browsers place elements horizontally across rows. But, by changing the grid-auto-flow value to column, a browser fills each column vertically before moving onto the next:

With more space available for my content, I increase the number of columns from two to four:

main, aside { grid-template-columns: 1fr [svg] 1fr 1fr 1fr; gap: 2rem; }

Then, I align content in my main element to the end, so it forms a solid block in the centre of my layout:

main { align-items: end; }

My main headline spans all four columns. Although it appears first in my HTML, I can place it visually below my running text and images by adding it to the second row:

h1 { grid-column: 1 / -1; grid-row: 2; border-bottom: 3px solid #b22f65; }

I place my first block of content into the left column:

main > div:nth-of-type(1) { grid-column: 1; grid-row: 1; }

The second block spans two columns on the right:

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

Next, I place the final division—which contains my SVG image — into the second column using its line name:

main > div:nth-of-type(3) { grid-column: svg; grid-row: 1; }

Implementing columns for the aside element follows a similar method. Again, I alter the visual placement of my headline using row line numbers:

h2 { grid-column: 3 / -1; grid-row: 2; }  aside > div:nth-of-type(1) { grid-column: 1; grid-row: 1 / 3; }  aside > div:nth-of-type(2) { grid-column: 3 / -1; grid-row: 1; }  aside > div:nth-of-type(3) { grid-column: svg; grid-row: 1 / 3; }

A full-page image filling one half of a spread is a common sight in magazine designs. Large images like these can be equally as effective on widescreen displays. I apply grid properties to the body element with two symmetrical columns, then name the left column verso and the right column recto:

@media (min-width: 64em) {  body { display: grid; grid-template-columns: [verso] 1fr [recto] 1fr; gap: 2rem; } }

These terms originate in Latin where two opposite pages are called folium rectum and folium versum. I place my header into the verso column, and the main and aside elements stack in the recto column:

header { grid-column: verso; grid-row: 1 / 4; }  main, aside { grid-column: recto; }

Finally, to improve the readability of my running text on very wide displays, I introduce a multi-column layout. A browser will automatically generate 10em-wide columns to fill the space available:

@media (min-width: 72em) {  main > div:nth-of-type(2), aside > div:nth-of-type(2) { column-width: 10em; column-gap: 2rem; } }

Masking Scalable Type

As someone who enjoys the creative aspects of typographic design — but also values accessibility and performance — SVG has become as much a part of my everyday development toolkit as CSS and HTML.

This next Thompson-inspired design combines SVG text with CSS masks and shapes, but needs very little HTML, just one header and a main element:

<header>   <div>     <svg>…</svg>   </div> <header>  <main>   <svg>…</svg> </main>

Before I start developing the striking SVGs, I add foundation styles which give the page a deep blue background color and contrasting white text:

body { background-color: #1f455e; font-family: 'sans-serif'; color: #fff; }

This header includes a scalable graphic where the repeating text is shaped by a Transit van outline. SVG includes its own method for clipping parts of an image. To define a clipping path I add a clipPath element to my SVG. This, in turn, contains a path which defines my clipped area. So I can reference this clipPath later in my SVG, I give it a unique identifier:

<svg>   <clipPath id="transit">     <path>…</path>   </clipPath> </svg>

Then, I add the path coordinates which make up my graphical text. I give this group of brightly colored paths a class attribute value which I can use to bind it to my clipPath:

<svg>   <clipPath id="transit">…</clipPath>     <g class="transit">       <path>…</path>     </g> </svg>

Whether I include this SVG in my HTML using an image element, or embed the SVG directly into my markup, I use the CSS clip-path property to clip my graphic text using its clipPath:

<style type="text/css"><![CDATA[ .transit { -webkit-clip-path: url(#transit); clip-path: url(#transit); } ]]></style>

Using clipPath, only areas within a clipping path are displayed. Anything outside the clipped area will remain invisible.

But, there’s another way to mask an element, one which works with all types of content, not just SVG. Similar to clip-path, CSS masks hide parts of an element using a black and white mask image.

header div { -webkit-mask-image: url("mask.svg"); mask-image: url("mask.svg"); }

When a mask is applied, only areas of an element which coincide with the black parts of the mask will be displayed. Everything outside these areas will disappear.

The properties of mask-image share many similarities with backgrounds in CSS. Just like background images, masks can be positioned, repeated, and sized, and can even be developed from background gradients. As I don’t need my mask image to repeat, I set its value to no-repeat, just as would with any background image:

header div { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

The contents of my SVG in the main element is entirely different. This graphic contains brightly colored lines of SVG text which explain the Transit van’s pedigree. I wrap each line inside a tspan element, each with its own x and y coordinates which tightly pack the text into a solid block:

<svg> <text> <tspan x="0" y="86">BUILT AS A PASSENGER VAN, MINIBUS, </tspan> <tspan x="0" y="156">CUTAWAY VAN CHASSIS, AND A PICKUP </tspan> <tspan x="0" y="226">TRUCK. OVER 8,000,000 TRANSIT VANS </tspan> <tspan x="0" y="296">HAVE BEEN SOLD, MAKING IT THE THIRD </tspan> <tspan x="0" y="366">BEST-SELLING VAN OF ALL TIME.</tspan> </text> </svg>

SVG text elements can be styled like any HTML text, so to emphasise the solidity of this block, I choose a heavyweight, condensed sans-serif, then adjust its tracking by reducing the letter spacing by -2px;

text { font-family: 'sans-serif-condensed'; font-size: 83px; font-weight: 700; letter-spacing: -2px; }

CSS pseudo-class selectors are as useful for styling elements in SVG as they are for HTML. I use nth-of-type selectors to give each line of tspan text its own color:

tspan:nth-of-type(1) { fill: #c43d56; }  tspan:nth-of-type(2) { fill: #f2c867; }  tspan:nth-of-type(3) { fill: #377dab; }  tspan:nth-of-type(4) { fill: #fff; }  tspan:nth-of-type(5) { fill: #c43d56; }

The solid style of this typographic design makes a stylish header element, but there are times when I might need to add more content to this page. For an alternative take on this design, I add a paragraph explaining the history of the Transit van’s production to my header:

<header>   <div>     <svg>…</svg>   </div>    <p>…</p> </header>

In my foundation styles, I add a font size and set the paragraph in uppercase to match my previous SVG text:

header p { font-size: .91rem; text-transform: uppercase; }

Then, I justify the paragraph text for people who use browsers which also support automatic hyphenation:

@supports (-webkit-hyphens: auto) or (hyphens: auto) { header p { -webkit-hyphens: auto; hyphens: auto; text-align: justify; } }

On small and medium-size screens, this new paragraph of text follows the header’s SVG as it does in the HTML. But, for larger screens, I want this text to float alongside the masked graphic.

I give the header graphic an explicit viewport-based width, then float it to enable me to wrap my text around it using CSS Shapes. As I want this shape to match my masked graphic, I use the same mask image for the shape-outside URL:

@media (min-width: 64em) {  header div { float: left; width: 65vw; margin-bottom: 0; shape-outside: url(mask.svg); shape-margin: 20px; } }

Splitting Symmetry

For the final inspired example in this issue—and in fact for the entire series—the split symmetrical layout means I need just two structural elements. By now, these header and main elements should feel very familiar. My header includes the classic Ford logo, an SVG image and a headline:

<header>   <svg id="logo">…</svg>   <img src="header.svg" alt="Ford Transit">   <h1>…</h1> </header>

The main element also includes a scalable image, plus a single paragraph of running text:

<main>   <p>…</p>   <img src="main.svg" alt=""> </main>

As always, I start small-screen first by adding color and typography foundation styles. This time, a light grey background, dark grey text, and a sans-serif typeface:

body { background-color: #ededef; font-family: 'sans-serif'; color: #262626; }  h1 { text-align: center; text-transform: uppercase; }

The header appears first in my HTML, so I’ll style it first too by giving it a dark grey background and lighter text which is the inverse of my body styles:

header { margin-bottom: 2rem; padding: 2rem; background-color: #262626; color: #ededef; }

Finally, for small screens, I centre that logo horizontally and limit its maximum width to half that of the viewport:

#logo { margin: 0 auto 2rem; max-width: 50vw; }

This design takes on more of a Thompson-inspired look with the extra space available on medium-size screens. I need to place elements in the header and main elements, so I add grid properties and four symmetrical columns to both:

@media (min-width: 48em) {  header, main { display: grid; grid-template-columns: repeat(4, 1fr); } }

Then, I add three explicit rows to my header. The first and last are 100px tall, while the middle row expands to fill all the space remaining:

header { grid-template-rows: 100px auto 100px; }

Now it’s time to place those header elements into my columns and rows using line numbers. The Ford logo comes first and fits into the two centre columns. The headline is last and sits at the bottom while spanning the full width. I give both elements a higher z-index value, so they appear closest to the viewer in the stacking order:

#logo { grid-column: 2 / 4; grid-row: 1; z-index: 2; }  h1 { grid-column: 1 / -1; grid-row: 3; z-index: 2; }

Then, I place the header image, so it covers every column and all the rows. By giving it a lower z-index value, I ensure it recedes to the bottom of the stacking order:

header img { grid-column: 1 / -1; grid-row: 1 / 4; z-index: 1; align-self: center; }

With styles for the header image in place, I add a selector which applies those exact same styles to the image in my main element:

header img, main img { grid-column: 1 / -1; grid-row: 1 / 4; z-index: 1; align-self: center; }

While vertical text won’t suit every design, it can turn a short passage into a strong visual statement. I change the paragraph’s writing-mode to vertical-rl and increase its leading using viewport-based units:

main p { line-height: 3vw; white-space: pre-wrap; writing-mode: vertical-rl; }

For a decorative finishing touch, I change its color and apply a blending mode with a value of difference which also increases the legibility of this text where it appears over the graphic background:

main p { color: #f4eBd5; mix-blend-mode: difference; }

I place the paragraph into the two centre columns, align it centrally, then add a higher z-index value to ensure it appears at the top of this element’s stacking order:

main p { grid-column: 2 / 4; grid-row: 1 / 4; align-self: center; z-index: 2; }

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 two symmetrical columns to the body:

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

Staying Inspired

When I set out to produce this series, I wanted to teach people about the importance of for inspiration outside the web. My aim was to demonstrate that looking at the challenges designers from other media have faced — and how they approached solving them — can help us make more distinctive, engaging, and ultimately successful products and websites.

Of course, this series barely scratches the surface, and you can find inspiring examples in plenty more places than I’ve described here. Take a trip to your nearest art gallery, bookstore, museum, or record shop, and you’ll find yourself surrounded by inputs and inspiration.

I hope this series has inspired you to think about how you design for the web differently. Are examples of design from other media and periods in history relevant to the modern web? Of course, they are. Can we learn from the past while inventing the future? Absolutely. Do we have the technologies and tools to deliver more inspired designs for the web? There’s no doubt about that.

I’ve been pleased the response to this series has been overwhelmingly positive, but I know there’s plenty more I can do. This series might be coming to a close, but work has started on a new book, Inspired Design for the Web. This book will begin where Art Direction for the Web ended, will showcase more examples of inspired design, and go deeper into how we can learn lessons and apply them to make our websites and products even better.

Inspired Design Decisions With Bradbury Thompson: The Art Of Graphic Design

by TBSCategories: News

The idea for this series — and the book which will follow it — was sparked by a casual conversation, but writing it has had a profound impact on me and the work I make for the web.

Inspired By Bradbury Thompson

Studying one of the most accomplished art directors and graphic designers of the last century seems like a fitting close to this series.

Westvaco had published Inspirations since the 1920s and was already widely circulated to an audience of 35,000 agencies, museums, printers, schools, and universities.

Thomson’s magazine work didn’t begin or end with Mademoiselle and throughout his career he work on over thirty more including Business Week, the Harvard Business Review, and Smithsonian magazine.

Type is a thing of constant interest to me. In short, type can be a tool, a toy, and a teacher. It can provide a means of livelihood, a hobby for relaxation, an intellectual stimulant—and a spiritual satisfaction. I believe an avid interest in type necessarily includes a zest for everyday life.
— Bradbury Thompson

Thompson taught graphic design at Yale University’s School of Art from 1956 until his death in Connecticut in 1995.

Processing The Color Palette

<header>   <svg id="logo">…</svg>   <h1>…</h1>   <svg id="banner">…</svg>   </div> </header>  <article>   <main>…</main> </article>  <figure>…</figure> <aside>…</aside> <figure>…</figure>

body { padding: 2rem 0; background-color: #1f455f; font-family: 'serif'; color: #fff; }

I style my italic headlines, then add sizes for the heading levels and paragraphs:

h1, h2 { font-style: italic; }  h1 { font-size: 2.8rem; }  h2 { font-size: 2.027rem; }  p { font-size: .8rem; }

Finally, I color the captions which accompany both my figures’ images with a vibrant green and italicise the text to match my headline styles:

figcaption { font-size: .8rem; font-style: italic; text-align: center; color: #d2de4a; }

CMYK in RGB

On even the smallest screens, some space needs to remain empty. This allows the eye to flow around content. Margins and padding are often all that’s needed to add empty space:

#logo { margin: 0 auto 1rem; }  #banner { margin: 1rem 1rem 1rem 0; }  main, aside { margin: 0 1rem; }  figure { margin: 2rem auto; }

Reducing the maximum width of graphic elements adds white-space and visual interest to small-screen designs:

#logo { max-width: 25vw; }  figure { max-width: 50vw; }

I start by applying grid properties and an unusual five-column symmetrical grid to the body element. Then, I add a data URI background image and position it to the right of my layout:

@media (min-width: 48em) {  body { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; background-image: url("data:image/svg+xml…"); background-position: 120% 50%; background-repeat: no-repeat; } }

I need to place the content of my header and article directly onto my grid, so I change those elements’ display property to contents, which effectively removes them for styling purposes:

header, article { display: contents; }

#logo { grid-column: 2; margin: 0; max-width: none; }

The banner contains a Transit van profile, and the main headline occupies the first four of my five columns:

#banner, h1 { grid-column: 1 / 4; }

By leaving the first column empty, content in the main and aside elements are indented from the left. By setting their widths to match that of my banner, I add a pleasing asymmetry to the layout:

main, aside { grid-column: 2 / -1; }

Although my two figures are’t adjacent elements in my HTML, CSS Grid makes placing them side-by-side simple. I place them into different columns on the same row without needing to alter my HTML:

figure:nth-of-type(1) { grid-column: 2 / 4; grid-row: 5; }  figure:nth-of-type(2) { grid-column: 4 / -1; grid-row: 5; }

In many of my designs, I use indentation instead of paragraph spacing to create solid blocks from my running text. This effect is even more striking when setting text in multiple columns:

p { margin-bottom: 0; }  p + p { text-indent: 2ch; }  main { column-width: 16em; }

When I place captions on either the left or right of an image, I immediately give designs the look of a magazine. I use Flexbox and then the flex-direction property to move them:

figure { display: flex; }

My first figure caption appear on the left, so I reverse the flex-direction of this figure from its default row:

figure:nth-of-type(1) { flex-direction: row-reverse; }

figure { align-items: flex-end; }

For a finishing touch to this medium-size design, I align both captions in opposite directions:

figure:nth-of-type(1) figcaption { text-align: right; }  figure:nth-of-type(2) figcaption { text-align: left; }

Empty space helps to lead the eye at every stage of this layout. The extra space available on larger screens allows me to develop a distinctive asymmetric design.

@media (min-width: 64em) {  body { grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr; } }

Then, I add four rows using a combination of pixels, rem units, and intrinsic sizing, before setting the minimum height of the page to fill the viewport:

body { grid-template-rows: 100px 14rem 14rem auto; min-height: 100vh; }

To complete the body styles, I add two new data URI background images and specify their sizes so they’re always contained within the viewport:

body { background-image: url("data:image/svg+xml…"), url("data:image/svg+xml…"); background-position: 0 50%, 100% 50%; background-size: contain; }

#logo { grid-column: 2 / 4; grid-row: 1; }  h1 { grid-column: 1 / 5; grid-row: 2 / 4; align-self: center; z-index: 2; }  #banner { grid-column: 1 / 5; grid-row: 2 / 4; z-index: 1; }

My main content occupies the last two columns and forms and island in the right of this design:

main { grid-column: 7 / -1; grid-row: 2 / 4; column-width: auto; }  aside { grid-column: 6 / -1; grid-row: 4 / 5; }

I place the two figures onto this new grid:

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

Then, I adjust the direction of their flex, setting the first figure vertically, so my caption appears above its sibling image:

figure:nth-of-type(1) { flex-direction: column-reverse; }

The content of my second figure is arranged horizontally with both the image and caption resting on the baseline:

figure:nth-of-type(2) { flex-direction: row; align-items: flex-end; }

I fine-tune the alignment of both caption and this first Thompson-inspired design is complete:

figure:nth-of-type(1) figcaption { text-align: center; }  figure:nth-of-type(2) figcaption { flex: 1; text-align: left; }

Colorfully Complementary

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

<header>   <img src="header-1.svg" alt="Ford Transit">   <img src="header-2.svg" alt="">   <img src="header-3.svg" alt="">   …   <img src="header-9.svg" alt=""> </header>

Both the main and aside elements include a headline, an exploded Transit parts SVG image, plus divisions for arranging my content into columns:

<main>   <h1>…</h1>   <div>…</div>   <div>…</div>   <svg>…</svg> </main>  <aside>   <h2>…</h2>   <div>…</div>   <div>…</div>   <svg>…</svg> </aside>

I start by applying a dark grey background color to the body element, and add stying to my headlines and paragraphs:

body { background-color: #262626; font-family: 'sans-serif'; color: #fff; }  h1, h2 { font-size: 2.027rem; font-style: italic; text-transform: uppercase; }  p { font-size: .8rem; }

header { display: flex; overflow-x: scroll; margin: 0 2rem 2rem; }  header img:not(:last-of-type) { margin-right: 1rem; }

The header isn’t the only element to get a layout on small screens, the main and aside elements get grids too:

main, aside { display: grid; margin: 0 2rem; }

main { grid-template-columns: [content] 1fr [svg] 100px; }

Then, I place main element items using grid lines with names which reflect their content:

h1 { grid-column: content; grid-row: 1; }  main > div:nth-of-type(1) { grid-column: content; grid-row: 2; }  main > div:nth-of-type(2) { grid-column: content; grid-row: 3; }  main > svg { grid-column: svg; grid-row: 1 / 4; }

aside { grid-template-columns: [svg] 100px [content] 1fr; padding-top: 1rem; border-top: 3px solid #b22f65; }

I use named lines to place its content into my grid:

h2 { grid-column: 1 / -1; grid-row: 1; }  aside > div:nth-of-type(1) { grid-column: content; grid-row: 2; }  aside > div:nth-of-type(2) { grid-column: content; grid-row: 3; }  aside > div:nth-of-type(3) { grid-column: svg; grid-row: 2 / 4; }

In this version of my design, a grid of nine colorfully complementary images fills the header. I apply grid properties and three symmetrical columns:

@media (min-width: 48em) {  header { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; overflow-x: visible; } }

Unlike other elements in this design, there’s no need to place the images into this grid, as the browser’s auto-placement algorithm arranges them automatically.

By default, browsers place elements horizontally across rows. But, by changing the grid-auto-flow value to column, a browser fills each column vertically before moving onto the next:

With more space available for my content, I increase the number of columns from two to four:

main, aside { grid-template-columns: 1fr [svg] 1fr 1fr 1fr; gap: 2rem; }

Then, I align content in my main element to the end, so it forms a solid block in the centre of my layout:

main { align-items: end; }

My main headline spans all four columns. Although it appears first in my HTML, I can place it visually below my running text and images by adding it to the second row:

h1 { grid-column: 1 / -1; grid-row: 2; border-bottom: 3px solid #b22f65; }

I place my first block of content into the left column:

main > div:nth-of-type(1) { grid-column: 1; grid-row: 1; }

The second block spans two columns on the right:

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

Next, I place the final division—which contains my SVG image — into the second column using its line name:

main > div:nth-of-type(3) { grid-column: svg; grid-row: 1; }

Implementing columns for the aside element follows a similar method. Again, I alter the visual placement of my headline using row line numbers:

h2 { grid-column: 3 / -1; grid-row: 2; }  aside > div:nth-of-type(1) { grid-column: 1; grid-row: 1 / 3; }  aside > div:nth-of-type(2) { grid-column: 3 / -1; grid-row: 1; }  aside > div:nth-of-type(3) { grid-column: svg; grid-row: 1 / 3; }

@media (min-width: 64em) {  body { display: grid; grid-template-columns: [verso] 1fr [recto] 1fr; gap: 2rem; } }

These terms originate in Latin where two opposite pages are called folium rectum and folium versum. I place my header into the verso column, and the main and aside elements stack in the recto column:

header { grid-column: verso; grid-row: 1 / 4; }  main, aside { grid-column: recto; }

Finally, to improve the readability of my running text on very wide displays, I introduce a multi-column layout. A browser will automatically generate 10em-wide columns to fill the space available:

@media (min-width: 72em) {  main > div:nth-of-type(2), aside > div:nth-of-type(2) { column-width: 10em; column-gap: 2rem; } }

Masking Scalable Type

This next Thompson-inspired design combines SVG text with CSS masks and shapes, but needs very little HTML, just one header and a main element:

<header>   <div>     <svg>…</svg>   </div> <header>  <main>   <svg>…</svg> </main>

Before I start developing the striking SVGs, I add foundation styles which give the page a deep blue background color and contrasting white text:

body { background-color: #1f455e; font-family: 'sans-serif'; color: #fff; }

<svg>   <clipPath id="transit">     <path>…</path>   </clipPath> </svg>

Then, I add the path coordinates which make up my graphical text. I give this group of brightly colored paths a class attribute value which I can use to bind it to my clipPath:

<svg>   <clipPath id="transit">…</clipPath>     <g class="transit">       <path>…</path>     </g> </svg>

Whether I include this SVG in my HTML using an image element, or embed the SVG directly into my markup, I use the CSS clip-path property to clip my graphic text using its clipPath:

<style type="text/css"><![CDATA[ .transit { -webkit-clip-path: url(#transit); clip-path: url(#transit); } ]]></style>

Using clipPath, only areas within a clipping path are displayed. Anything outside the clipped area will remain invisible.

But, there’s another way to mask an element, one which works with all types of content, not just SVG. Similar to clip-path, CSS masks hide parts of an element using a black and white mask image.

header div { -webkit-mask-image: url("mask.svg"); mask-image: url("mask.svg"); }

When a mask is applied, only areas of an element which coincide with the black parts of the mask will be displayed. Everything outside these areas will disappear.

header div { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

<svg> <text> <tspan x="0" y="86">BUILT AS A PASSENGER VAN, MINIBUS, </tspan> <tspan x="0" y="156">CUTAWAY VAN CHASSIS, AND A PICKUP </tspan> <tspan x="0" y="226">TRUCK. OVER 8,000,000 TRANSIT VANS </tspan> <tspan x="0" y="296">HAVE BEEN SOLD, MAKING IT THE THIRD </tspan> <tspan x="0" y="366">BEST-SELLING VAN OF ALL TIME.</tspan> </text> </svg>

text { font-family: 'sans-serif-condensed'; font-size: 83px; font-weight: 700; letter-spacing: -2px; }

CSS pseudo-class selectors are as useful for styling elements in SVG as they are for HTML. I use nth-of-type selectors to give each line of tspan text its own color:

tspan:nth-of-type(1) { fill: #c43d56; }  tspan:nth-of-type(2) { fill: #f2c867; }  tspan:nth-of-type(3) { fill: #377dab; }  tspan:nth-of-type(4) { fill: #fff; }  tspan:nth-of-type(5) { fill: #c43d56; }

<header>   <div>     <svg>…</svg>   </div>    <p>…</p> </header>

In my foundation styles, I add a font size and set the paragraph in uppercase to match my previous SVG text:

header p { font-size: .91rem; text-transform: uppercase; }

Then, I justify the paragraph text for people who use browsers which also support automatic hyphenation:

@supports (-webkit-hyphens: auto) or (hyphens: auto) { header p { -webkit-hyphens: auto; hyphens: auto; text-align: justify; } }

On small and medium-size screens, this new paragraph of text follows the header’s SVG as it does in the HTML. But, for larger screens, I want this text to float alongside the masked graphic.

@media (min-width: 64em) {  header div { float: left; width: 65vw; margin-bottom: 0; shape-outside: url(mask.svg); shape-margin: 20px; } }

Splitting Symmetry

<header>   <svg id="logo">…</svg>   <img src="header.svg" alt="Ford Transit">   <h1>…</h1> </header>

The main element also includes a scalable image, plus a single paragraph of running text:

<main>   <p>…</p>   <img src="main.svg" alt=""> </main>

As always, I start small-screen first by adding color and typography foundation styles. This time, a light grey background, dark grey text, and a sans-serif typeface:

body { background-color: #ededef; font-family: 'sans-serif'; color: #262626; }  h1 { text-align: center; text-transform: uppercase; }

The header appears first in my HTML, so I’ll style it first too by giving it a dark grey background and lighter text which is the inverse of my body styles:

header { margin-bottom: 2rem; padding: 2rem; background-color: #262626; color: #ededef; }

Finally, for small screens, I centre that logo horizontally and limit its maximum width to half that of the viewport:

#logo { margin: 0 auto 2rem; max-width: 50vw; }

@media (min-width: 48em) {  header, main { display: grid; grid-template-columns: repeat(4, 1fr); } }

Then, I add three explicit rows to my header. The first and last are 100px tall, while the middle row expands to fill all the space remaining:

header { grid-template-rows: 100px auto 100px; }

#logo { grid-column: 2 / 4; grid-row: 1; z-index: 2; }  h1 { grid-column: 1 / -1; grid-row: 3; z-index: 2; }

Then, I place the header image, so it covers every column and all the rows. By giving it a lower z-index value, I ensure it recedes to the bottom of the stacking order:

header img { grid-column: 1 / -1; grid-row: 1 / 4; z-index: 1; align-self: center; }

With styles for the header image in place, I add a selector which applies those exact same styles to the image in my main element:

header img, main img { grid-column: 1 / -1; grid-row: 1 / 4; z-index: 1; align-self: center; }

main p { line-height: 3vw; white-space: pre-wrap; writing-mode: vertical-rl; }

main p { color: #f4eBd5; mix-blend-mode: difference; }

I place the paragraph into the two centre columns, align it centrally, then add a higher z-index value to ensure it appears at the top of this element’s stacking order:

main p { grid-column: 2 / 4; grid-row: 1 / 4; align-self: center; z-index: 2; }

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

Staying Inspired

Inspired Design Decisions With Bradbury Thompson: The Art Of Graphic Design

by TBSCategories: News

The idea for this series — and the book which will follow it — was sparked by a casual conversation, but writing it has had a profound impact on me and the work I make for the web.

Inspired By Bradbury Thompson

Studying one of the most accomplished art directors and graphic designers of the last century seems like a fitting close to this series.

Westvaco had published Inspirations since the 1920s and was already widely circulated to an audience of 35,000 agencies, museums, printers, schools, and universities.

Thomson’s magazine work didn’t begin or end with Mademoiselle and throughout his career he work on over thirty more including Business Week, the Harvard Business Review, and Smithsonian magazine.

Type is a thing of constant interest to me. In short, type can be a tool, a toy, and a teacher. It can provide a means of livelihood, a hobby for relaxation, an intellectual stimulant—and a spiritual satisfaction. I believe an avid interest in type necessarily includes a zest for everyday life.
— Bradbury Thompson

Thompson taught graphic design at Yale University’s School of Art from 1956 until his death in Connecticut in 1995.

Processing The Color Palette

<header>   <svg id="logo">…</svg>   <h1>…</h1>   <svg id="banner">…</svg>   </div> </header>  <article>   <main>…</main> </article>  <figure>…</figure> <aside>…</aside> <figure>…</figure>

body { padding: 2rem 0; background-color: #1f455f; font-family: 'serif'; color: #fff; }

I style my italic headlines, then add sizes for the heading levels and paragraphs:

h1, h2 { font-style: italic; }  h1 { font-size: 2.8rem; }  h2 { font-size: 2.027rem; }  p { font-size: .8rem; }

Finally, I color the captions which accompany both my figures’ images with a vibrant green and italicise the text to match my headline styles:

figcaption { font-size: .8rem; font-style: italic; text-align: center; color: #d2de4a; }

CMYK in RGB

On even the smallest screens, some space needs to remain empty. This allows the eye to flow around content. Margins and padding are often all that’s needed to add empty space:

#logo { margin: 0 auto 1rem; }  #banner { margin: 1rem 1rem 1rem 0; }  main, aside { margin: 0 1rem; }  figure { margin: 2rem auto; }

Reducing the maximum width of graphic elements adds white-space and visual interest to small-screen designs:

#logo { max-width: 25vw; }  figure { max-width: 50vw; }

I start by applying grid properties and an unusual five-column symmetrical grid to the body element. Then, I add a data URI background image and position it to the right of my layout:

@media (min-width: 48em) {  body { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; background-image: url("data:image/svg+xml…"); background-position: 120% 50%; background-repeat: no-repeat; } }

I need to place the content of my header and article directly onto my grid, so I change those elements’ display property to contents, which effectively removes them for styling purposes:

header, article { display: contents; }

#logo { grid-column: 2; margin: 0; max-width: none; }

The banner contains a Transit van profile, and the main headline occupies the first four of my five columns:

#banner, h1 { grid-column: 1 / 4; }

By leaving the first column empty, content in the main and aside elements are indented from the left. By setting their widths to match that of my banner, I add a pleasing asymmetry to the layout:

main, aside { grid-column: 2 / -1; }

Although my two figures are’t adjacent elements in my HTML, CSS Grid makes placing them side-by-side simple. I place them into different columns on the same row without needing to alter my HTML:

figure:nth-of-type(1) { grid-column: 2 / 4; grid-row: 5; }  figure:nth-of-type(2) { grid-column: 4 / -1; grid-row: 5; }

In many of my designs, I use indentation instead of paragraph spacing to create solid blocks from my running text. This effect is even more striking when setting text in multiple columns:

p { margin-bottom: 0; }  p + p { text-indent: 2ch; }  main { column-width: 16em; }

When I place captions on either the left or right of an image, I immediately give designs the look of a magazine. I use Flexbox and then the flex-direction property to move them:

figure { display: flex; }

My first figure caption appear on the left, so I reverse the flex-direction of this figure from its default row:

figure:nth-of-type(1) { flex-direction: row-reverse; }

figure { align-items: flex-end; }

For a finishing touch to this medium-size design, I align both captions in opposite directions:

figure:nth-of-type(1) figcaption { text-align: right; }  figure:nth-of-type(2) figcaption { text-align: left; }

Empty space helps to lead the eye at every stage of this layout. The extra space available on larger screens allows me to develop a distinctive asymmetric design.

@media (min-width: 64em) {  body { grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr; } }

Then, I add four rows using a combination of pixels, rem units, and intrinsic sizing, before setting the minimum height of the page to fill the viewport:

body { grid-template-rows: 100px 14rem 14rem auto; min-height: 100vh; }

To complete the body styles, I add two new data URI background images and specify their sizes so they’re always contained within the viewport:

body { background-image: url("data:image/svg+xml…"), url("data:image/svg+xml…"); background-position: 0 50%, 100% 50%; background-size: contain; }

#logo { grid-column: 2 / 4; grid-row: 1; }  h1 { grid-column: 1 / 5; grid-row: 2 / 4; align-self: center; z-index: 2; }  #banner { grid-column: 1 / 5; grid-row: 2 / 4; z-index: 1; }

My main content occupies the last two columns and forms and island in the right of this design:

main { grid-column: 7 / -1; grid-row: 2 / 4; column-width: auto; }  aside { grid-column: 6 / -1; grid-row: 4 / 5; }

I place the two figures onto this new grid:

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

Then, I adjust the direction of their flex, setting the first figure vertically, so my caption appears above its sibling image:

figure:nth-of-type(1) { flex-direction: column-reverse; }

The content of my second figure is arranged horizontally with both the image and caption resting on the baseline:

figure:nth-of-type(2) { flex-direction: row; align-items: flex-end; }

I fine-tune the alignment of both caption and this first Thompson-inspired design is complete:

figure:nth-of-type(1) figcaption { text-align: center; }  figure:nth-of-type(2) figcaption { flex: 1; text-align: left; }

Colorfully Complementary

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

<header>   <img src="header-1.svg" alt="Ford Transit">   <img src="header-2.svg" alt="">   <img src="header-3.svg" alt="">   …   <img src="header-9.svg" alt=""> </header>

Both the main and aside elements include a headline, an exploded Transit parts SVG image, plus divisions for arranging my content into columns:

<main>   <h1>…</h1>   <div>…</div>   <div>…</div>   <svg>…</svg> </main>  <aside>   <h2>…</h2>   <div>…</div>   <div>…</div>   <svg>…</svg> </aside>

I start by applying a dark grey background color to the body element, and add stying to my headlines and paragraphs:

body { background-color: #262626; font-family: 'sans-serif'; color: #fff; }  h1, h2 { font-size: 2.027rem; font-style: italic; text-transform: uppercase; }  p { font-size: .8rem; }

header { display: flex; overflow-x: scroll; margin: 0 2rem 2rem; }  header img:not(:last-of-type) { margin-right: 1rem; }

The header isn’t the only element to get a layout on small screens, the main and aside elements get grids too:

main, aside { display: grid; margin: 0 2rem; }

main { grid-template-columns: [content] 1fr [svg] 100px; }

Then, I place main element items using grid lines with names which reflect their content:

h1 { grid-column: content; grid-row: 1; }  main > div:nth-of-type(1) { grid-column: content; grid-row: 2; }  main > div:nth-of-type(2) { grid-column: content; grid-row: 3; }  main > svg { grid-column: svg; grid-row: 1 / 4; }

aside { grid-template-columns: [svg] 100px [content] 1fr; padding-top: 1rem; border-top: 3px solid #b22f65; }

I use named lines to place its content into my grid:

h2 { grid-column: 1 / -1; grid-row: 1; }  aside > div:nth-of-type(1) { grid-column: content; grid-row: 2; }  aside > div:nth-of-type(2) { grid-column: content; grid-row: 3; }  aside > div:nth-of-type(3) { grid-column: svg; grid-row: 2 / 4; }

In this version of my design, a grid of nine colorfully complementary images fills the header. I apply grid properties and three symmetrical columns:

@media (min-width: 48em) {  header { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; overflow-x: visible; } }

Unlike other elements in this design, there’s no need to place the images into this grid, as the browser’s auto-placement algorithm arranges them automatically.

By default, browsers place elements horizontally across rows. But, by changing the grid-auto-flow value to column, a browser fills each column vertically before moving onto the next:

With more space available for my content, I increase the number of columns from two to four:

main, aside { grid-template-columns: 1fr [svg] 1fr 1fr 1fr; gap: 2rem; }

Then, I align content in my main element to the end, so it forms a solid block in the centre of my layout:

main { align-items: end; }

My main headline spans all four columns. Although it appears first in my HTML, I can place it visually below my running text and images by adding it to the second row:

h1 { grid-column: 1 / -1; grid-row: 2; border-bottom: 3px solid #b22f65; }

I place my first block of content into the left column:

main > div:nth-of-type(1) { grid-column: 1; grid-row: 1; }

The second block spans two columns on the right:

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

Next, I place the final division—which contains my SVG image — into the second column using its line name:

main > div:nth-of-type(3) { grid-column: svg; grid-row: 1; }

Implementing columns for the aside element follows a similar method. Again, I alter the visual placement of my headline using row line numbers:

h2 { grid-column: 3 / -1; grid-row: 2; }  aside > div:nth-of-type(1) { grid-column: 1; grid-row: 1 / 3; }  aside > div:nth-of-type(2) { grid-column: 3 / -1; grid-row: 1; }  aside > div:nth-of-type(3) { grid-column: svg; grid-row: 1 / 3; }

@media (min-width: 64em) {  body { display: grid; grid-template-columns: [verso] 1fr [recto] 1fr; gap: 2rem; } }

These terms originate in Latin where two opposite pages are called folium rectum and folium versum. I place my header into the verso column, and the main and aside elements stack in the recto column:

header { grid-column: verso; grid-row: 1 / 4; }  main, aside { grid-column: recto; }

Finally, to improve the readability of my running text on very wide displays, I introduce a multi-column layout. A browser will automatically generate 10em-wide columns to fill the space available:

@media (min-width: 72em) {  main > div:nth-of-type(2), aside > div:nth-of-type(2) { column-width: 10em; column-gap: 2rem; } }

Masking Scalable Type

This next Thompson-inspired design combines SVG text with CSS masks and shapes, but needs very little HTML, just one header and a main element:

<header>   <div>     <svg>…</svg>   </div> <header>  <main>   <svg>…</svg> </main>

Before I start developing the striking SVGs, I add foundation styles which give the page a deep blue background color and contrasting white text:

body { background-color: #1f455e; font-family: 'sans-serif'; color: #fff; }

<svg>   <clipPath id="transit">     <path>…</path>   </clipPath> </svg>

Then, I add the path coordinates which make up my graphical text. I give this group of brightly colored paths a class attribute value which I can use to bind it to my clipPath:

<svg>   <clipPath id="transit">…</clipPath>     <g class="transit">       <path>…</path>     </g> </svg>

Whether I include this SVG in my HTML using an image element, or embed the SVG directly into my markup, I use the CSS clip-path property to clip my graphic text using its clipPath:

<style type="text/css"><![CDATA[ .transit { -webkit-clip-path: url(#transit); clip-path: url(#transit); } ]]></style>

Using clipPath, only areas within a clipping path are displayed. Anything outside the clipped area will remain invisible.

But, there’s another way to mask an element, one which works with all types of content, not just SVG. Similar to clip-path, CSS masks hide parts of an element using a black and white mask image.

header div { -webkit-mask-image: url("mask.svg"); mask-image: url("mask.svg"); }

When a mask is applied, only areas of an element which coincide with the black parts of the mask will be displayed. Everything outside these areas will disappear.

header div { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

<svg> <text> <tspan x="0" y="86">BUILT AS A PASSENGER VAN, MINIBUS, </tspan> <tspan x="0" y="156">CUTAWAY VAN CHASSIS, AND A PICKUP </tspan> <tspan x="0" y="226">TRUCK. OVER 8,000,000 TRANSIT VANS </tspan> <tspan x="0" y="296">HAVE BEEN SOLD, MAKING IT THE THIRD </tspan> <tspan x="0" y="366">BEST-SELLING VAN OF ALL TIME.</tspan> </text> </svg>

text { font-family: 'sans-serif-condensed'; font-size: 83px; font-weight: 700; letter-spacing: -2px; }

CSS pseudo-class selectors are as useful for styling elements in SVG as they are for HTML. I use nth-of-type selectors to give each line of tspan text its own color:

tspan:nth-of-type(1) { fill: #c43d56; }  tspan:nth-of-type(2) { fill: #f2c867; }  tspan:nth-of-type(3) { fill: #377dab; }  tspan:nth-of-type(4) { fill: #fff; }  tspan:nth-of-type(5) { fill: #c43d56; }

<header>   <div>     <svg>…</svg>   </div>    <p>…</p> </header>

In my foundation styles, I add a font size and set the paragraph in uppercase to match my previous SVG text:

header p { font-size: .91rem; text-transform: uppercase; }

Then, I justify the paragraph text for people who use browsers which also support automatic hyphenation:

@supports (-webkit-hyphens: auto) or (hyphens: auto) { header p { -webkit-hyphens: auto; hyphens: auto; text-align: justify; } }

On small and medium-size screens, this new paragraph of text follows the header’s SVG as it does in the HTML. But, for larger screens, I want this text to float alongside the masked graphic.

@media (min-width: 64em) {  header div { float: left; width: 65vw; margin-bottom: 0; shape-outside: url(mask.svg); shape-margin: 20px; } }

Splitting Symmetry

<header>   <svg id="logo">…</svg>   <img src="header.svg" alt="Ford Transit">   <h1>…</h1> </header>

The main element also includes a scalable image, plus a single paragraph of running text:

<main>   <p>…</p>   <img src="main.svg" alt=""> </main>

As always, I start small-screen first by adding color and typography foundation styles. This time, a light grey background, dark grey text, and a sans-serif typeface:

body { background-color: #ededef; font-family: 'sans-serif'; color: #262626; }  h1 { text-align: center; text-transform: uppercase; }

The header appears first in my HTML, so I’ll style it first too by giving it a dark grey background and lighter text which is the inverse of my body styles:

header { margin-bottom: 2rem; padding: 2rem; background-color: #262626; color: #ededef; }

Finally, for small screens, I centre that logo horizontally and limit its maximum width to half that of the viewport:

#logo { margin: 0 auto 2rem; max-width: 50vw; }

@media (min-width: 48em) {  header, main { display: grid; grid-template-columns: repeat(4, 1fr); } }

Then, I add three explicit rows to my header. The first and last are 100px tall, while the middle row expands to fill all the space remaining:

header { grid-template-rows: 100px auto 100px; }

#logo { grid-column: 2 / 4; grid-row: 1; z-index: 2; }  h1 { grid-column: 1 / -1; grid-row: 3; z-index: 2; }

Then, I place the header image, so it covers every column and all the rows. By giving it a lower z-index value, I ensure it recedes to the bottom of the stacking order:

header img { grid-column: 1 / -1; grid-row: 1 / 4; z-index: 1; align-self: center; }

With styles for the header image in place, I add a selector which applies those exact same styles to the image in my main element:

header img, main img { grid-column: 1 / -1; grid-row: 1 / 4; z-index: 1; align-self: center; }

main p { line-height: 3vw; white-space: pre-wrap; writing-mode: vertical-rl; }

main p { color: #f4eBd5; mix-blend-mode: difference; }

I place the paragraph into the two centre columns, align it centrally, then add a higher z-index value to ensure it appears at the top of this element’s stacking order:

main p { grid-column: 2 / 4; grid-row: 1 / 4; align-self: center; z-index: 2; }

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

Staying Inspired

Inspired Design Decisions With Emmett McBain: Art Direction As Social Equity

by TBSCategories: News

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