Type Jam: Neue Haas, CSS blends and the rotate property.

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, from memory this came from a session creating textures and tat on a knackered photocopier in a run-down gas station in Huddersfield nearly 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);
}