Category Archives: CSS

Blue Notes: The remixes

A little bit blown away that my Blue Notes project was Netmag’s ‘Side project of the month’ last November, I thought I’d put a post together detailing some of the updates I’ve been making recently, especially with regard to CSS Grid.

Whilst this is primarily about layout and how, with the help of Grid, I arrived at hack-free solutions for occasionally complex designs, I also mention how I used psuedo-selectors, CSS filters and blend-modes to create aged and worn effects a little later in the post too. If you’d like to know more about how I made type responsive or perhaps better put, fluid, you can read about the methods I used to do this in my original post and in a recent post on creating fluid distressed text in CSS.

TL;DR

Having re-created the first batch of sleeves I’ve begun to focus on intrinsic layout and semantics. Essentially I’ve been re-visiting sleeves I’d made previously and removing what I saw as structural compromises.

By way of example  Cornbread was one of the most challenging and exciting sleeves to build, the sleeve below being built entirely in CSS Grid, featuring semantic, accessible mark-up with no hacks. I’ve made a quick screencast to demo the sleeve re-sizing in the browser and there’s a repo with the code for this and all the other sleeves I’ve made here. This and some of the other sleeves are on CodePen too. I’ll be posting the mark-up and a deep dive into how I built Cornbread soon.

A project review

Overall I was pretty happy with the first batch of sleeves I made.

By the time I’d finished the first twelve or so sleeves (aka phase one..) I’d developed a solid process, was able to match the originals almost identically and make layout and typography responsive. It was great to be able to re-create Reid Miles work in the browser and to produce some radically different layouts to those we see everyday too. That said there were some elements of production that I was less satisfied with.

Aside from problems sourcing fonts, three things irked me about the build of some of the sleeves, all of which were pretty much structural;

Marking up content hierarchically and then having to re-order this visually meant I often had to use absolute positioning. Whilst I was able to address this problem using Flexbox and the order property initially, this wasn’t without it’s pitfalls.

In addition I was unhappy that many of the layouts used background images. Whilst I would be ok with this if they were used to apply texture or a similar effects, from an accessibility perspective it seemed wrong to have such integral parts of the design removed from the HTML.

Finally and somewhat related to my second point, all the sleeves relied on the padding-bottom hack to ensure they maintained their shape at different viewport widths. Whilst not the end of the world this was something I would prefer not have incorporated.

Incorporating CSS Grid

Grid was a bit of a game changer. Easy to use, I could eliminate all the shortcomings outlined above.

The more I experimented with Grid the more I appreciated the creative freedom and sense of legitimacy that came with it. I could layout great designs without feeling those slight pinpricks  of shame that came from knowing I’d used a hack, trick or absolute positioning or that I might  have inadvertently compromised accessibility.

Working on an early version of the Three Sounds sleeve Feelin Good’.

Here’s how Grid enabled me to address the problems I identified above.

Source order and re-ordering layout

One of the things that excites me most about Grid is that we can separate source order from appearance easily and legitimately. We can create structural, semantic mark-up that presents information exactly as the document hierarchy requires and then re-order it on the page without having to use absolute positioning or layout hacks. We simply tell the browser which spaces we’d like elements or content to occupy.

Screengrabs of Blue Note's Sidewinder an Una Mas sleeves recreated with HTML and CSS

Re-ordering layout whilst maintaining source order was one of the main challenges of this project. I used Flexbox and flex-order on The Sidewinder sleeve and got great results with this, however I switched to CSS Grid to style new sleeves including Una Mas.

Una Mas is a great example of this. Using a mixture of colour, text sizing and placement Reid Miles design deliberately guides our eye. As we look at the sleeve we instinctively read the titling in a specific order; Una Mas > Kenny Dorham > Joe Henderson / Herbie Hancock / Butch Warren / Anthony Williams and then perhaps the Blue Note logo.

On the pre-grid version of Una Mas I had to use absolute positioning to place the <h1> and <footer> elements (Una Mas and the Blue Note logo) on the page, however using grid I was able to place these elements without using absolute positioning.

Here’s the HTML for this later version of Una Mas, it marks-up the page in a way that reflects the hierarchy of information I want to present to the browser and screen readers;

<main class="sleeve">
    <img src="images/una-mas.jpg" alt="Duotone image of Kenny Dorham holding the word Una Mas">
    
    <h1>Una<br />Mas</h1>
    
    <section>
	  <h2>Kenny Dorham</h2>
      <ul>
		  <li>/Joe Henderson</li><br />
		  <li>/Herbie Hancock</li>
		  <li>/Butch Warren</li>
		  <li>/Anthony Williams</li>
	  </ul>	
    </section>
        
    <footer class="logo group">
        <span class="rectangle"></span>
	    <span class="elipse"></span>
	    <span class="label">Blue Note</span>
    </footer>
</main>

Here’s the grid the layout was built on;

Screengrab of the Firefox inspector view of a CSS grid layout

And here’s the CSS for the typographic elements;

h1 {
	grid-column: 5 / 6;
	grid-row: 3 / 4;
}

section {
	grid-column: 2 / 6;
    grid-row: 2 / 4;
}

footer { 
    grid-column: 3 / 4; 
    grid-row: 2 / 4; 
} 

Background images

As mentioned earlier I was never happy with such fundamental elements being removed from my HTML. Whilst I could apply an <aria-label> to a containing element this didn’t seem right;  being able to place images in my mark-up and apply alt attributes was what I wanted.

Once again Grid made this easy. A quick look at the mark-up for Una Mas and we can see the image is one of the first elements in the source order, has an alt tag and is visible to screenreaders.

Avoiding the padding-bottom hack

Hub-tones was another of those sleeves that looked great but needed a series of hacks to make it work.

Screengrab of Blue Note's Hub Tones album sleeve recreated using HTML and CSS

As with all the sleeves I used the padding-bottom hack to re-size the sleeve whilst maintaining the layout whatever the viewport width. The only way I could make the vertical bars resize was to apply the hack to these elements too.

Here’s the SCSS I used to re-create the bars, it incorporates floated content, the padding-bottom hack and absolute positioning, it took a fair bit of time to figure out too!

.layout {
	padding: 1.6666% 2.5% 0; 

	.vert-bar {
		width: 9.3%;
		margin-right: 2.0%;
		margin-bottom: 5%;
		height: 0;
		padding-bottom: 77%;
		background-color: #000;
		float: left;
	}

	.vert-bar:nth-of-type(6) {
		position: relative;
		height: 72.0001%;
	   	margin-top: 10%;

	   	img {
	   		position: absolute;
	   		bottom: 0;
	   		max-width: 100%
	   	}
       }   	

	.vert-bar:last-of-type {
		margin-right: 0px;
	}
}

Here’s the CSS I used to define my columns and incorporate the bars using Grid!

.container{
		grid-template-columns: repeat(9, 1fr);
        grid-template-rows: 0.8rem 9.6rem 62.8rem 9.6rem 16.1rem;
		grid-column-gap: 1.833%;
}

And finally a screengrab of the grid defining the vertical bars. I found Firefox’s tools to be invaluable whilst working on this remixed batch of sleeves, being able to put my grid together live in the inspector was brilliant. The same can be said for using Firefox’s clipping path tools live in the browser too.

CSS filters and worn effects

Making the sleeves look worn and aged was something I was keen to incorporate into the project as time progressed and I love the fact that we can do this in the browser now.

On Feelin’ The Spirit I used a mixture of background images, pseudo selectors, blend modes and CSS filters to create the worn effects. Here’s a screengrab of the sleeve with the aged effects applied.

Whilst this sleeve uses some of the older techniques I was keen to discard (background images and the padding-bottom hack), I’m still quite proud of this as I feel I’d pretty much got the mark-up, styling and responsive elements dialled-in by this point.

Once again I was left a little blown away by how powerfully adaptable the HTML and CSS specs are (and have been for a long time) and that with a little bit of a thought how we can create lean, semantic, performant and great looking content for the web.

Here’s the HTML for the sleeve;

<div class="wrapper">
	<div class="container filter">
		<h1>
			<span class="feelin">Feelin'</span><br />
			<span class="spirit">The Spirit</span>
		</h1>
		<h2>Grant Green</h2>
		
		<ul class="band">
			<li>Herbie Hancock</li>
			<li>Butch Warren</li>
			<li>Billy Higgins</li>
			<li>Garvin Masseaux</li>
		</ul>
				
		<footer class="logo">
			<span class="rectangle"></span>
			<span class="elipse"></span>
			<span class="label">Blue Note</span>
		</footer>		
	</div><!-- closes container div -->
</div><!-- closes wrapper div -->

Here are the styles that matter. The .wrapper and .container classes create the fluid sleeve, the :after pseudo-selector overlays and blends the worn sleeve effect, the .filter class adds the aged effect.

/* --------------- layout --------------*/

.wrapper {
		width: 100%;
	  	max-width: 600px;
	  	border: 5px solid #fff;
	  	margin: 1rem auto 0;
	  	background-color: #0e1318;
	  }
		
.container{
		position: relative;
		height: 0;
	  	padding-bottom: 100%;
	 	background-image: url('images/feelin-the-spirit.jpg');
	  	background-repeat: no-repeat;
	  	background-size: cover
}

.container:after {
		content: '';
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background-image: url('images/worn-sleeve.jpg');
	  	background-repeat: no-repeat;
	  	background-size: cover;
	  	mix-blend-mode: lighten;
	  	opacity: 0.95;
}

/* ------------------ filters ------------- */

.filter {
  	-webkit-filter: sepia(0.35) contrast(0.9) brightness(1.1) hue-rotate(-10deg) saturate(1.5);
  	filter: sepia(0.35) contrast(0.9) brightness(1.1) hue-rotate(-10deg) saturate(1.5);
	opacity: 0.95;
}

Hey! Manchester: CSS flyers

Way back in 2015 I was wondering round Manchester’s Northern Quarter and happened on a stunningly simple flyer for a Deerhoof gig at the Deaf Institute. Being a bit of magpie for tat and found ephemera I kept the flyer safe with the intention of making it in the browser one day, then of-course lost it. Anyways, after a little bit of research I found more of Hey! Manchester’s flyers on-line and set about re-creating them in the browser.

Essentially I think these would make great HTML / CSS cards or especially cool author profiles in an underground (or even overground) online mag. Once again it’s amazing what you can achieve with a little bit of HTML and CSS.

Here’s Jim Ghedi looking epic in a field..

Whilst there’s nothing complex about these flyers, reproducing them gave me the chance to play with CSS clipping paths and blend modes (again!) and I got great results. As regular readers have probably realised by now I’m a little bit fascinated by and passionate about bringing print design into (or should that be onto?) the web. Whilst I love the technical challenge, I feel it’s also really important to try new things, experiment with visual language from different media and to make use of the fantastic new (and not so new) CSS properties and browser capabilities we have at our disposal these days.

I’ve only attached the code for the Jim Ghedi flyer, simply because the clipping path on the image for this was the most ‘complex’, though with Firefox’s inspector tools as good as they are currently this was really easy to perfect in the browser. The code for all the flyers is in a repo should you want it and for those who want to know what the font is (and who wouldn’t.. ;)) it’s Gothic 725. None of the flyers and type are responsive or fluid, though I might sort that out soon. If anyone fancies a challenge fluid type would be incredibly easy to incorporate using the 1vw reset method I’ve described here.


<div class="container">
    <header>
	    <p>Hey Manchester Presents </p>
	    <p>Heymanchester.com </p>
    </header>	
		
    <img src="../images/jim-ghedi-crop-adj.jpg" alt="Jim Ghedi looking epic in a field">	
		
    <section>
	  <h1>
	    <span class="artist">Jim Ghedi </span> <br/ >
	    <span class="support">Plus DBH </span> 
	  </h1>
	  <h2>The Castle Hotel, Oldham Street < br /&gt 
          7.30pm Thursday 17 May 2018 </h2>
	  <p>Tickets £8 adv from The Bar and Seetickets.com </p>
    </section>
</div>



@font-face {
    font-family: 'Gothic725 Bd BT';
    src: url('../fonts/Gothic725BdBTRegular.woff2') format('woff2'),
    url('../fonts/Gothic725BdBTRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gothic725 Blk BT';
    src: url('../fonts/Gothic725BlkBTRegular.woff2') format('woff2'),
    url('../fonts/Gothic725BlkBTRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.group:after {
     content: '';
     display: table;
     clear: both;
}

body {
    padding-top: 1rem;
    text-transform: uppercase;
    line-height: 1.2;
}
		
.container {
    width: 568px;
    height: 800px;
    padding: 30px;
    margin: 0 auto;
    background-color: #cad5fe;
}	

header {
    width: 100%;
    height: 30px;
    padding: 6px;
    margin-bottom: 45px;
    font-family: Gothic725 Bd BT;
    font-size: 16px;
    color: #cad5fe;
    background-color: #010300;
}

header p:first-of-type {
    float: left;
}

header p:last-of-type {
    float: right;
}
 
img {
    display: block;
    width: 440px;
    margin: 0 auto 45px; 
    mix-blend-mode: multiply;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

section {
    border: 2px solid #010300;
}

section p {
    padding: 15px 0 1px 12px;
		}

/* ----------------- type -------------- */

h1 .artist {
    font-size: 71px;
    line-height: 0.75;
}
	
h1 .support {
	font-size: 30px;
}
		
h1, h2 {
    padding: 18px 0 0 12px;
    border-bottom: 2px solid #010300;
    font-family: Gothic725 Blk BT;
}

.support, 
h2 {
    font-weight: 400;
}

h2, h3 {
    font-size: 20px;
}

p {
    font-family: Gothic725 Bd BT;
}

Carson: Textured fluid type

Somewhat shamefully I haven’t blogged for a while so I thought I’d put together a quick post about a recent experiment to apply texture to fluid type.

I’m pretty happy with what I’ve managed to achieve with this: by using blend modes and pseudo-selectors to overlay texture on type I’ve managed to create a bespoke, distressed worn font of sorts. Using a mixture of vw units and em’s I was able to ensure the type scaled when required with the distressed effect staying true regardless of viewport width.

Here’s a screengrab of an early iteration, you can view a demo here

Background, ideas and influences

I’ve always had a massive thing for texture in design, especially type; from faded woodblock lettering, low-ink letterpress runs and screen-prints through to Photoshopped work blending multiple layers of distressed tat and ephemera.

Much of this initially came from music and counter-culture  – photocopied zines from the punk and hardcore scene, Swifty’s work for Chaser and Mo Wax, David Carson’s Raygun and skate mags such as Kingpin all had a massive influence on me well before I ever began to perceive myself as a creative. As my identity and confidence as a creative front end developer has grown I guess it was only a matter of time before I wanted to try and bring this into the browser.

When I began work on finding a way to apply texture to type I initially couldn’t stop thinking about David Carson’s titling for Blah Blah Blah magazine, though an album sleeve by Swifty and old street signage were influences too. Essentially I wanted to be able to re-create similarly distressed effects and apply these to my own work.

Inspirational Blah Blah Blah covers by Cavid Carson

Blah Blah Blah covers from the master.

Brasil Escola Do Jazz album sleeve by Swifty featuring distressed woodblock typography.

An old Swifty album sleeve for Straight No Chaser Magazine, I love the texture in this, though it was a t-shirt I bought a few years ago featuring this design (black text on red) that partly inspired this post.

Adding the distressed type effect

Adding the distressed or worn effect was reasonably straightforward; having styled the basic h1, I added a pseudo selector to this.  I then added a background image to the pseudo selector which I used to apply the texture, I added a hard-light blend mode and some opacity to this to complete the effect. For the background image I used some old photocopied tat that has served me well over the years.

As a caveat, it might sound obvious but make sure the background-size rule comes after background-image in the stack, if it doesn’t you could find the image won’t scale with the type.

Here’s the CSS for the h1 and it’s pseudo element.


h1 {
	position: relative;
	margin-bottom: 1.5rem;
	font-family: 'League Gothic';
	color: #201a92;
	font-size: 48em;
	line-height: .75;
	letter-spacing: -0.037em;
	text-transform: uppercase;
}

h1:after {
	content: 'carson';
	position: absolute;
	left: 0;
	background: url('dc-distressed-bg-1.jpg');
	background-size: cover;
	color: rgba(255, 255, 255, 0);
	mix-blend-mode: hard-light;
}

Here’s a quick comparison of the h1 before the pseudo selector is applied and after.  I doubt David Carson would ever use League Gothic but hey..

For those of you who are interested, here’s the photocopied tat I overlaid to create the texture;

Incorporating fluid type

Incorporating fluid type on the titling was a breeze. I used one of the methods that served me well in my Blue Notes project and reset font-size to 1vw on the HTML element. When I wanted the text to be fluid I styled it in ems and when I wanted it to be fixed I used a media query to lock font-size in pixels.

Here’s a quick walk-through how I applied fluid type to the titling:

I used an incredibly simple reset, the rule applied to the html element is the important bit here.

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

html {
font-size: 1vw;
}

Font-size and letter-spacing was set in ems.


h1 {
	position: relative;
	margin-bottom: 1.5rem;
	font-family: 'League Gothic';
	color: #201a92;
	font-size: 48em;
	line-height: .75;
	letter-spacing: -0.037em;
	text-transform: uppercase;
}

Media queries were used to lock font-size in pixels at specific viewport widths. This is essential if the type’s containing element doesn’t fill the screen: given our type was initially reset to VW we need to prevent it continuing to grow as screen size increases, hence the lock and switch to pixels at 900px.

@media (min-width: 900px) {
	h1 {
	    font-size: 430.75px;
	}
}

I styled the blockquote pretty crudely using the methods outlined above, however in production I would always pay more attention to the typography, readability and layout. Whether or not I’d make the blockquote fluid would depend on the design. I’d avoid applying fluid styling to body copy entirely and change font-size, line-height, padding etc with media queries at specific breakpoints.

As a rule of thumb I would only ever use the reset method on titling.

Kerning

To kern individual letters or pairs of letters I wrapped the element(s) I wanted to style in a <b> element, targetted them with nth-of-type selectors and then applied the rules I required to these. Once again when I wanted type to be fluid I used ems and then locked letters in pixels at the screen-width I wanted type to be fixed.

<h1 aria-label="Carson">
	<span aria-hidden="true">
		Ca<b>r</b>s<b>on</b>
	</span>
</h1>

b:nth-of-type(1),
b:nth-of-type(2) {
	letter-spacing: -0.0442em;
	}

Resources

It took a surprising amount of time to find blog posts and pens that helped me truly evolve this as an idea, though as ever CSS tricks proved to be a great starting point, especially a post by Preethi on techniques for knockout text. Mandy Michael’s Relax Pen and her talk on creating text effects with css were incredibly useful and inspirational.

A couple of books I’d recommend for visual inspiration are David Carson’s End of Print (of course) and Ladies of Letterpress, the latter being chock full of faded slabby typefaces!!

For those of you who might want it the code for all this is below, there’s also a demo of the text scaling in the browser here.

HTML


<div class="container">
	<section>
		<h1 aria-label="Carson"><span aria-hidden="true">Ca<b>r</b>s<b>on</b></span></h1>
	    <blockquote>I am a big believer in the emotion of design, and the message that is sent before somebody begins to read, before they get the rest of the information; what is the emotional response they get to the product, to the story, to the painting – whatever it is.</blockquote>
	</section>
</div>

CSS

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

html {
	font-size: 1vw;
}

.container {
	width: 100%;
	max-width: 1176px;
	padding-top: 21rem; 
	padding-bottom: 100rem;
	margin: 0 auto;
	background-image: url('carson-bg.jpg'); 
	background-size: contain;
	background-repeat: no-repeat;
	background-blend-mode: multiply; 
}

section {
	width: 100%;
	max-width: 900px;
	height: 70rem;
	margin: 0 auto;
	background: #fff;
	overflow: hidden;
}

h1 {
	position: relative;
	margin-bottom: 1.5rem;
	font-family: 'League Gothic';
	color: #201a92;
	font-size: 48em;
	line-height: .75;
	letter-spacing: -0.037em;
	text-transform: uppercase;
}

h1:after {
	content: 'carson';
	position: absolute;
	left: 0;
	background: url('dc-distressed-bg-1.jpg');
	background-size: cover;
	color: rgba(255, 255, 255, 0);
	mix-blend-mode: hard-light;
}

b:nth-of-type(1),
b:nth-of-type(2) {
	letter-spacing: -0.0442em;
}

blockquote { /* NB start blockquote lock at 15 px */		
	padding-left: 2.25rem;
	padding-right: 1.25rem;
	font-family: 'courier';
	color: #26282d;
	font-weight: 100;
	font-size: 3.2em;
	line-height: 1.2;
}

blockquote:before {
        content: open-quote;
  	font-size: 3em;
  	color: #444;
  	line-height: 0.1em;
  	margin-right: 0.1em;
  	vertical-align: -0.2em;
}

blockquote:after {
	content: close-quote;
  	font-size: 3em;
  	color: #444;
  	line-height: 0.7em;
  	margin-left: 0.1em;
  	vertical-align: -0.3em;
}

/* ----------------------- locks ------------------------*/  

@media (min-width: 900px) {

	.container {
		padding-top: 250px;
	}
			
	h1 {
		font-size: 430.75px;
	}

	b:nth-of-type(1),
	b:nth-of-type(2) {
		letter-spacing: -19px; 
	}

	blockquote {
		font-size: 28.5px;
	}
}

@media (min-width: 1176px) {
	
    .container {
		padding-top: 246.5px; 
	}	
}

 

WordCamp London: Photoshop effects with ACF

I’m at WordCamp London today speaking about how I used Advanced Custom Fields to bring a little bit of Photoshop-esque control to the dashboard, something that allows the user to put together print style graphics in the browser.

Full of control users can layer background and inline images and apply CSS properties such as blend-modes, rotate and opacity via the dashboard. Given my last post was about re-creating some classic Blue Note album sleeves, I figured I’d continue to keep it funky and work with an image of Bernard Purdie and a font from the legendary Swifty.

This image features two background texture layers with blend modes and custom colour attached to them. The drummer is a single image with a blend mode of screen applied to it. The bottom border is another custom element with a blend mode of multiply. All elements have been set in the dashboard using Advanced Custom Fields.

This image has two background texture layers with blend modes and custom colour applied. The drummer is comprised of two images, one of which, a halftone bitmap, has a blend mode of screen applied the other is a simple black and white image. The sine wave graphic beneath the drummer has rotate, blend mode and opacity applied. All set in the dashboard.

This image has two background texture layers and blends modes have been applied, colours have been changed and the drummer is comprised of three images; colour, black and white and halftone bitmap. All these have blend modes and opacity applied. Once again all this is controlled via the dashboard.

Repo:

You can install this as a micro theme and import the ACF field data or just take bits of code you want to use, whatever you choose to do I hope you have fun and find this useful!

https://github.com/stevehoneyman/wordcamp-london

Demo:

Here’s a short video below to demonstrate how easy it is control and change content in the dashboard;

Resources:

This was another piece of work inspired by Jen Simmons brilliant talk for An Event Apart challenging us to get out of design and layout ruts and was a great inspiration to try something different with layout and CSS properties.

Slides:

You can download my slides as .pdf or .pptx  files or view them on Speakerdeck

 

Blue Notes: Iconic album sleeves recreated in the browser

Over the last few months I’ve been busying myself trying to re-create some of Reid Miles iconic album sleeves in the browser.

As a bit of background Reid Miles was one of the first people to get me into design and thus web developement, it was his work, along with Swifty’s Straight No Chaser, that compelled me to change career and study for an MA in Interactive Multimedia Production way back in Y2K.

Whilst this project was part homage and part test of my chops it was also very much inspired by a desire to try and recreate radically different layouts from those that we see on the web everyday. For those of you that would like to see, use and play with the code for the sleeves I’ve set up a repo here. If you’d like to check out some of the sleeves out on CodePen you can find them here

Layout and design challenge

Where possible I wanted to create semantically sound, accessible code that worked in pretty much every browser, if that wasn’t possible, my baseline was that all the type and layouts should be fluid and responsive.

Fonts and typesetting

Slabs of type, BIG letters, killer kerning, innovative and juxtaposed placement characterised Reid Miles approach to typography, a process that in many ways sees type become it’s own hero image, in Richard Rutter’s words “a picture that creates an atmosphere and anchors your layout“.  Inspired by all this I was keen to try and replicate sleeves I was drawn to with nothing more than CSS and a bit of HTML. Overall it was an incredible buzz being able to focus so intently on type and see the different elements come together on the sleeves. At times, whisper it, I felt like a typographer.

One of the big goals of this project was to learn more about fluid or responsive typography. After some trial and error I was able to incorporate fluid type and kerning on all the sleeves I re-created.  I used viewport width as a unit of measurement and css locks to control font-size and letter-spacing, the maths of which I’ve written about below.

Each sleeve had it’s intricacies many of which were often not that readily apparent. As I got stuck into replicating designs I found I often had to control single letters, pairings and small groups of letters, invariably I achieved this with spans. Whilst this felt a little crude it yielded results. The type on ‘Art Blakey And The Jazz Messengers’ consists of a single h1 and multiple spans and remains one my favourite sleeves of those I’ve re-created so far.

The titling on Art (as this sleeve became affectionately known) consists of a h1 and multiple spans.

As a rule if I had access to the right fonts matching layout was reasonably straight forward, if I didn’t it was often hard to match layouts exactly.

Whilst some fonts or alternatives were readily available, custom weights were often used and couldn’t be sourced. There’s a gorgeous extended light gothic (most likley Trade) used in Feelin’ the Spirit which I just couldn’t find or match. In addition custom letters were often created and then used in conjunction with other fonts, the lip on the  ‘R’ on the original version of Sidewinder looks like it was descended from Helvetica, however trying to replicate this proved almost impossible. In an attempt to style individual letters I often experimented with transform 2D which whilst it got me close every now and then didn’t work too well. Letterforms are beautifully crafted things after all and don’t, it turns out,  respond that well to relatively crude transforms. As loathe as I was to admit I realised I might have to use SVG to create custom fonts for more challenging type, something I’ll be experimenting with on future sleeves.

Layout

Of the sleeves I choose I felt that layouts fell into two categories; bespoke and house (though I don’t like the word house..). Essentially bespoke sleeves had very unique layouts and very specific development challenges whereas house sleeves often used or re-used common patterns. Development challenges for all the sleeves included; creating fluid background images, matching mark-up to layout in visually and in a way that made sense screen readers, positioning individual typographic elements and incorporating fluid or responsive type.

Hub-Tones, Lee-Way and Cornbread are great examples of the more bespoke layouts, their designs offered great opportunities to explore lesser used CSS properties such as rotate, clipping path and Flexbox’s stretch, on occasion there were some fairly unique challenges with regard to accessibility too.

Examples of bespoke layouts

House sleeves used patterns common to other layouts, images would either fill the available space to the point where they became the sleeve or they’d take up a quarter or third of the height whilst spanning full width and leaving plenty of space.

Examples of sleeves that used house or recurring patterns and styles.

One consistent problem was matching mark-up to layout. The use of contrast, size and placement of type often meant the sleeve would often be read in a slightly different order to it’s actual layout. For example with The Sidewinder we tend to read the title first, followed by the artist’s name and then the band members names. When writing the HTML for this and other sleeves it became obvious I required a means of writing mark-up that would have a logical and hierarchical order that could be correctly interpreted by screen readers whilst also presenting elements in the order required visually. Flexbox provided a brilliant solution to this and other problems.

Images and the the padding-bottom trick

Creating a fluid square that would maintain it’s proportions at any given viewport width was a fundamental requirement for all the sleeves, and whilst its not really a hack, the padding-bottom trick outlined below proved to be an invaluable way of giving an element height without having to specify this in pixels, thus ensuring the container would scale.

Here’s the html for The Cooker (minimal eh?).



<div class="wrapper">
  <div class="container">

    <header>
      <h1 class="the-cooker">The Cooker</h1>
      <h2 class="lee-morgan">Lee<br />Morgan</h2>
    </header>
 
    <footer class="logo">
      <span class="rectangle"></span>
      <span class="elipse"></span>
      <span class="label">Blue Note</span>
    </footer>
  
  </div>
</div>

For the CSS, width is defined on the parent (.wrapper) element and no height is specified on either the parent or child element. Instead, height is achieved by setting  padding-bottom to 100% on the child (.container) element which also houses the background image.



.wrapper {
    width: 100%;
    max-width: 600px;
    margin: 1rem auto;
    border: 5px solid #fff;
    background-color: #1e0103;
 }
 
 .container{
    position: relative;
    height: 0;
    padding-bottom: 100%;
    background-image: url('the-cooker.jpg');
    background-size: cover;
 }

Flexbox, document flow and layout

I started experimenting with Flexbox late in the project and this proved to be brilliant at solving some of the layout ordering problems I’d encountered.

As alluded to earlier sometimes I could match (and style) HTML to a specific layout easily. Blackjack is a great examples of this. A quick glance at the sleeve and the necessary mark-up is readily apparent; an inline image, followed by a h1, h2 and h3, in that order. However, as mentioned, there was often a conflict between creating logical mark-up that made sense to screen readers and enabled the desired layout. The Sidewinder was a great example of this.

On The Sidewinder the flex order property allowed me to present content in a different order presentationally to how it was marked up in HTML. As a bonus, the space-between property allowed me to lay out the band members names effortlessly too – perfect!

The HTML below makes sense to a screen reader and is a logical representation of how we interact with the sleeve visually.



<div class="wrapper">
  <div class="container">

    <header>
      <img src="images/sidewinder-main-image.jpg">
    </header>

    <section class="type">
      <h1>The Sidewinder</h1>
      <h2><span>Lee</span> Morgan</h2>
      <h3>Joe Henderson</h3>
      <h3>Barry Harris</h3>
      <h3>Bob Crenshaw</h3>
      <h3>Billy Higgins</h3>
    </section>

  </div>
</div>

Getting the required layout with CSS was as simple as changing the order property. In addition I used space-between to align my h3 elements equally on a horizontal axis, no floats or working out padding or margins for elements!



section { 
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between; 
}

section h1 {
    order: 1;
}

section h2 {
    order: 3;
}

section h3 {
    order: 2;
}

Positioning elements

Positioning of titling and other elements (the logo for instance) was usually done in percentages, slightly old school in an age of ems perhaps, but fluid and inherently reliable. Photoshop allowed me to measure the required position to the pixel and conversion was a simple matter of dividing the pixel value into its containing element’s width and multiplying this by a hundred. often it was enough use padding or margins to place individual elements or blocks of text where required.

Responsive typography

One of the primary goals of this project was to get type to scale and look good regardless of viewport width. I used two methods of incorporating fluid responsive type to control font-size and letter-spacing, both involved viewport width as a unit that would scale. Where possible I used the fairly simple approach of re-setting font size to 1vw on the html element and then using ems on individual elements for both font-size and letter-spacing. Where space was tight, and precision paramount I’d opt to use css locks and calc().

The declaration below is all you need to reset your type.. (nifty!)



html {
    font-size: 1vw;
    }

This is all the CSS I needed to scale type on The Cooker. The media query is essential as it stops the type continuing to expand once the sleeve is at its max-width.



.the-cooker {
    margin-bottom: 0.25rem;
    font-size: 4.66em;
    letter-spacing: 0.107em;
    text-align: left;
}
	
.lee-morgan {
    font-size: 9.35em;
    letter-spacing: 0.0725em;
    text-align: right;
}

@media (min-width: 600px) {
				
    .the-cooker {
        font-size: 28px;
        letter-spacing: 3px;
    }

    .lee-morgan {
        font-size: 56px;
        letter-spacing: 4px;
    }
 }

I found incorporating calc and locks a little hard to get my head round at first so I thought I’d share how I worked out the calc for the h1 element in The Sidewinder,  Florens Verscalde’s excellent blog post proved immensely helpful with this.

Whilst calc can be used without css locks, I found it worked better with locks and was my preferred method of scaling type that was set to the very edge of it’s container.

Essentially locks fix the font-size in pixels at set widths, between these points we use vw as the unit of measure to allow the type to scale smoothly between our locked sizes. We use calc to apply a formula that will increase the font-size between the locks incrementally per unit of viewport width.

On the Sidewinder my first lock was set at 180px and the second was set at 600px. To enable the locks and the associated scaling I set a media query at a min-width of 180px followed by another at a min-width of 600px. As mentioned earlier this second lock is essential to prevent type continuing to grow and blowing out of it’s containing element as the screen widens.

Here’s what the code looks like for the h1 font-size property at the stages outlined above;



/* ------------------------------------------------------------------------
set a base font-size 
------------------------------------------------------------------------ */

h1 {
    font-size: 37px;
    }

/* ------------------------------------------------------------------------
set up your first lock, this is the point when the type starts to scale 
------------------------------------------------------------------------ */

@media (min-width: 180px) {
    h1 {
        font-size: /* calc() goes here */
    }
  }

/* -------------------------------------------------------------------------------------------
set up your second and in this case final lock, this is the point when the type stops scaling 
--------------------------------------------------------------------------------------------  */

@media (min-width: 600px) {
     h1 {
        font-size: 127px; 
     }
   }

Once locks have been set, we need to apply the calc() that will enable scaling between the locks.

Here’s the equation that ensured my type scaled between 180 and 600px



calc( 0.2142 * 100vw + -1.556px)

Whilst it looks a little scary, it’s relatively straightforward, here’s how to work it out..

Take the font-size of the element you want to style at your first designated lock, in this case 37px at 180px,

Subtract this from the font size at the second lock 600px, which in this case was 127px.  127px – 37px leaves 90px.

Next subtract the value of the first lock (180) from the second (600),  this gives 420. Divide 90 into this. This gives 0.2142.

This gives a crude figure that will allow scaling, however for much tighter control we need to;

Subtract the equation from the original starting font size and then times this by the starting viewport width in the case of this example this gives 37 – 0.2142 * 180

The sum above gives us  -1.556px which needs to be added to the equation as below;

font-size: calc( 0.2142 * 100vw + -1.556px)

I used pixels in the above though ems work equally well.

Creating the scaleable Blue Note logo from CSS shapes

I was, I have to confess, quite proud of this.

As the title suggests this how I marked-up and styled the Blue Note logo. Semantically it seemed to work best included as a footer, and whilst it was pretty much the last piece of mark-up in the document flow, presentationally it could appear anywhere on the page.



  <footer class="logo">
      <span class="rectangle"></span>
      <span class="elipse"></span>
      <span class="label">Blue Note</span>
  </footer>



footer {
    position: absolute;
    top: 10%;
    left: 12.25%;
    width: 19%;
    height: 6.3333%;
    color: #000;
}

.rectangle {
    position: relative;
    display: block;
    width: 63.6363%;
    height: 47.3684%; /* 18px / 38px */
    border: 1px solid #000;
    float: right;
}

.rectangle:after {
    content: 'The Finest in Jazz';
    position: absolute;
    bottom: 0;
    font-size: 2px;
    padding-left: 2%;
}
	
.elipse {
    display: block;
    width: 36.3636%;
    height: 52.6315%; /* 20px / 38px */
    margin-top: 15%; 
    margin-right: 0.01%;
    border-radius: 20px / 10px;
    border: 1px solid #000;
    margin-bottom: 8px;
    float: left;
}

.elipse:after {
    content: '';
    padding: 2%;
}

.label {
    padding-top: 3%;
    padding-left: 5%;
    font-family: 'Trade Gothic';
    text-transform: uppercase;
    font-size: 2px;
    font-weight: 400;
    color: #000;
    float: left;
}

		
/* ------- media queries and locks ------------ */


@media (min-width: 180px) {
	
    .label {
          font-size: calc(0.0238 * 100vw + -2.28px);
	}
					
    .rectangle:after {
	  font-size: calc(0.0166 * 100vw + -0.988px);
	}
}

@media (min-width: 600px) {
			
       .label {
	  font-size: 12px;
	}

       .rectangle:after {
           font-size: 9px;
	}
}

Resources

There are lots of really cool resources out there that inspired and helped me along the way,  Jen Simmons talk for Event Apart  and Richard Rutter’s article for 24 Ways inspired me to try and make something a little different with typography at it’s core. Florens Verscalde’s excellent blog post proved immensely useful when trying to my head round the maths of calc, Tim Brown’s article  got me started with CSS locks.  Fonts In Use was a great go-to resource and whilst I couldn’t find a link to a specific post, Zoe Gillenwater’s chapter on Flexbox in Smashing Magazine’s Real-Life Responsive Design was an excellent, easy to implement introduction to what was for me a relatively new technology.

Update

Since originally publishing this post I’ve been recreating a few of the more complex sleeves using CSS Grid with great results and a couple of these can be found on the repo. I’ve started adding texture and worn aged effects to sleeve using CSS filters and blend modes too and have begun to write all of this up here 

Neue Haas Grotesk: A lunchtime type jam!

We’re re-branding here at work swapping our old custom typeface for Neue Haas Grotesk. Inevitably this had me Googling and drooling over layouts that featured this.

The layout below was inspired by this leaflet and utilises CSS blend-modes, fonts and the transform rotate property amongst other things to create the layout. I set myself an hour to make this and came in well under time which just goes to show how easy it is to use some basic CSS to create great web typography.

 

HTML

<div id="container">

  <h1>
    <span class="neue">Neue</span>
    <span class="grotesk">Haas Grotesk</span>
  <h1>

  <h2>
    <span class="blue">G</span>
    <span class="red">G</span>
  </h2>

  <p class="copy-left">mager<p>
  <p class="copy-right">wohl durchdacht, ausgewogen, diskret und temperiet, sachlich, weich un flussig, mit ihren ausgefilten, harmonisch und logisch aufgebauten Formen ist die Schrift fur den taglichen Bedarf der fortschrittlichen</p>
  <p class="vert-one">Haas'sche SchiftgieBerei AG Munchenstein</p>
  <p class="vert-two">halbfertt</p>

</div>

CSS


@font-face {
    font-family: 'NeueHaasGrotesk-std';
    src: url('NHaasGroteskTXStd-55Rg.woff2') format('woff2'),
    url('fonts/NHaasGroteskTXStd-55Rg.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NeueHaasGrotesk-bold';
    src: url('NHaasGroteskTXStd-75Bd.woff2') format('woff2'),
    url('fonts/NHaasGroteskTXStd-75Bd.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    margin-top: 16px;
    color: rgba(0, 0, 0, 0.75);
}

#container {
    position: relative;
    width: 495px;
    height: 710px;
    margin: 0 auto;
    overflow: hidden; 
    background-color: #d7caba;
    background-image: url(nh-bg.jpg); 
    background-blend-mode: unset; 
}

#container:after {
    content: '';
    position: absolute;
    top: 0;
    width: 495px;
    height: 710px;
    z-index: 50;
    background-image: url(haas-tat.jpg); 
    mix-blend-mode: color-burn;
}

h1 {
    font-family: NeueHaasGrotesk-bold;
    font-weight: 200;	
}

.neue {
    position: absolute;
    z-index: 30;
    top: 318px;
    left: 114px;
}

.grotesk {
    position: absolute;
    z-index: 30;
    top: 318px;
    left: 276px;
    letter-spacing: 0.5px;
}

h2 {
    position: relative;
    margin-left: -395px;
    font-family: NeueHaasGrotesk-std;
    font-size: 910px; 
    line-height: .8;
    letter-spacing: -475px;
}

.blue {
    position: relative;
    color: #02a2cd;
    z-index: 20;
    opacity: 0.8;
    mix-blend-mode: normal;
}

.red {
    position: relative;
    color: #f33500;
    z-index: 10; 
    mix-blend-mode: normal;
    opacity: 0.8;
}

.copy-left,
.copy-right,
.vert-one,
.vert-two {
    position: absolute;
    z-index: 40;
    font-family: NeueHaasGrotesk-std;
}

.copy-left {
    top: 428px;
    left: 195px;
    font-size: 16px;
}

.copy-right {
    top: 430px;
    left: 276px;
    font-size: 12px;
    line-height: 1.45;
}
	
.vert-one {
    top: 120px;
    left: -50px;
    font-size: 12px;
    transform: rotate(270deg);
    color: rgba(0, 0, 0, 0.75);
}

.vert-two {
    top: 640px;
    left: 35px;
    font-size: 18px;
    transform: rotate(270deg);
    color: rgba(0, 0, 0, 0.75);
}

Update: Akin to many other creative front-enders I’ve been getting into grid of late and spent a fun few minutes putting the graphic below together. Call me predictable but I think I might’ve overdone it with the distressed effects on the second image, that aside I love how the blend modes work on the overlaid NHG letters. Once again the blend modes and texture have all been incorporated in the browser with CSS.