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.