Category Archives: CSS Blend Modes

Blue Notes: The remixes

A little bit blown away that my Blue Notes project is Netmag’s ‘Side project of the month’,  I thought I’d put a quick 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 CSS 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 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

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. 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. Cornbread and some of the other sleeves are on CodePen too.

A project review

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

I’d developed a solid process, was able to match the originals almost identically and make layout and typography fluid. 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 as the information on the sleeve required and then having to re-order this visually to match the original designs meant I had to use absolute positioning. Whilst I was able to address this problem using Flexbox and the order property 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 mark-up that presents information exactly as the document requires and then re-order it on the page without having to use absolute positioning. 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 the 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 the Blue Note logo.

The HTML for the grid version of Una Mas is below, it marks-up the page in a way that reflects the hierarchy of information I want to present to the browser and screen readers.

As a quick note I would have preferred to use an unordered list to mark up the band members, however this proved a little tricky to style (possibly a use case for sub-grids?). I’ve opted to use <h3> tags in the interim, but hope to sort the list rules in the near future.

<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>
    
    <h2>Kenny Dorham</h2>
    
    <h3 class="joe">Joe Henderson</h3>
    <h3 class="herbie">Herbie Hancock</h3>
    <h3 class="butch">Butch Warren</h3>
    <h3 class="anthony">Anthony Williams</h3>
    
    <footer class="logo group">
        <span class="rectangle"></span>
	    <span class="elipse"></span>
	    <span class="label">Blue Note</span>
    </footer>
</main>

Here’s a quick screenshot of the grid the layout was built on.

Screengrab of the Firefox inspector view of a CSS grid layout

And here’s the CSS I used to places elements on the page.

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

h2,
.joe {
	grid-column: 4 / 6;
	grid-row: 2 / 4;
}

.herbie
.butch,
.anthony  {
	grid-column: 2 / 6;
	grid-row: 3 / 4;
} 

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

*Mind blown*

Forgive my excitement, but I think this is amazing and has far reaching implications for the future of web design. Being able to place content ‘anywhere’ we want so easily without compromising source order or using absolute positioning means we have the potential to create pretty much any design we want. All of which means we can bring the visual language we’re used to seeing away from the web, in art, artwork, magazines, posters, on album sleeves and even walls into the browser.

Background images

As mentioned earlier I was never happy with such fundamental elements being removed from my HTML. Whilst I could add 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 be able to re-size the sleeve whilst maintaining the layout whatever the viewport width. However, the only way I could make the vertical bars resize was to apply the padding bottom hack to these elements too.

Here’s the SCSS I used to re-create the vertical bars, it’s pretty hacky – incorporating floated content, padding-bottom tricks and absolute positioning, it took a fair bit of time to figure out too. With Grid we’d simply define our grid and tell the browser the columns and rows we’d like the elements to fill.

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

Caveats

All of which brings me onto one of, for me, the trickier aspects of incorporating Grid into this project; defining the grid itself.

Whilst I know some of these sleeves are reasonably complex. I’m going to hold my hands up here and say that I’m not convinced the way I’ve created the grids for many of these sleeves is correct or at best in keeping with how the creators of the spec envisaged this being done.

It seems as though by using percentages to create columns and rems to create rows so explicitly I’ve made things harder and more complex than they needed to be. Essentially I still had to do a lot of maths.

Here’s an example of how I styled the grid for The Cooker, whilst it works brilliantly it seems overly complex.

.container {
    grid-template-columns: 15.9% 12.5% 0.75% 41.66% 1% 12.5% 15.6%;
    grid-template-rows: 13.16rem 13.33rem 0.15rem 41.66rem 0.75rem 13.33rem 17.5rem;
}

I’m guessing there must be a more efficient way to create the grid, or at least a way in I could make better use of fr units. If anyone of knows of this, or could point me in the right direction regarding this I’d love to hear from you!

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.

I should probably mention this sleeve wasn’t built using Grid, though that said I’ll be updating the repo with a grid version of this soon. Whilst this sleeve uses some of the older techniques I was keen to discard, I’m still quite proud of this as I feel I’d pretty much got the mark-up and styling dialled by this point. I love how powerful, flexible and brilliantly designed HTML and CSS are in that, with a little bit of a thought, we can build such a variety of cool things.

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

 

Neue Haas Grotesk: A lunchtime type jam!

We’re re-branding here at Tomango 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 blends, 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.

The code for the graphic is below, though as a caveat this only works fully in Chrome at the moment. I’m quite proud of the blended tat on the container pseudo element I used to create a bit of texture, which came from a day-long session making copies of copies on a delapitated photocopier in Huddersfield almost fifteen years ago.

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