Re-creating the ‘His Darkish Supplies’ Brand in CSS

I like the brand new BBC adaptation of Philip Pullman’s His Darkish Supplies trilogy of novels. There’s additionally some fairly good graphic design to understand. I’m a sucker for a stupendous title sequence (I would like to observe the opening credit of Recreation of Thrones in full, each single time), and this one actually suits the invoice, in addition to the hanging brand. After watching a latest episode, I believed I’d have a go at re-creating this brand with CSS!

Typography

Though it’s basically a plain textual content brand, there’s a lot to unpack on the subject of constructing it for the net. The brand consists of two font weights, and most notably, is “fractured” into two components by a diagonal slash by the center. The textual content on the left of the fracture consists of an everyday font weight, except for the primary phrase (“His”). The textual content on the proper, and the primary phrase, use a daring variant of the identical font.

I don’t know what the precise font used within the brand is, however a number of individuals on Twitter have prompt it may be Neutraface by Home Industries. I opted towards paying $125 for the aim of a enjoyable demo, so I’ve substituted this for Josefin Sans, obtainable from Google Fonts.

HTML

I wished to construct the brand in a method that may guarantee it really works on any background – that’s to say, the background can be seen by the clear areas of the brand – so hiding issues with black gradients or pseudo parts was a no-no.

Though that is only a enjoyable train, I wished to keep away from duplicating the HTML if attainable. One (probably simpler) path would have been to make use of two spans with the identical textual content inside and <h1>, like this:

<h1>
  <span>His Darkish Supplies</span>
  <span aria-hidden="true">His Darkish Supplies</span>
</h1>

I might then use place: absolute on the second merchandise to superimpose it on the primary, and magnificence them independently. There’s nothing inherently mistaken about this – aria-hidden ensures the textual content gained’t be learn out twice by a screenreader –, however I most well-liked to maintain it to a single textual content factor if I might. I made a decision to utilize pseudo parts (::earlier than and ::after) and use the content material property as a substitute.

We are able to use CSS customized properties to duplicate the textual content content material into the pseudo parts:

<h1 type="--text: 'His Darkish Supplies'">His Darkish Supplies</h1>

h1::earlier than,
h1::after {
  content material: var(--text);
}

This give us (successfully) two extra “copies” of our textual content to work with. I put this in inverted commas as a result of they’re not really copies of the HTML, solely the textual content content material – and so they’re not selectable or, for that matter, accessible on their very own. However that’s superb, as a result of our textual content content material nonetheless exists in accessible type contained in the <h1>.

If we place these completely, then they may overlay the unique heading and we are able to type them individually.

h1::earlier than,
h1::after {
  content material: var(--text);
  place: absolute;
  high: 0;
  left: 0;
  width: 100%;
  text-align: heart;
  shade: white;
  z-index: -1;
}

CSS

Now we are able to use clip-path() on the pseudo parts to create the fracture impact:

h1 {
  --high: 80%;
  --low: 20%;
  --gap: 0.5rem;
}

h1::after {
  -webkit-clip-path: polygon(
    calc(var(--high) + var(--gap)) 0,
    100% 0,
    100% 100%,
    calc(var(--low) + var(--gap)) 100%
  );
  clip-path: polygon(
    calc(var(--high) + var(--gap)) 0,
    100% 0,
    100% 100%,
    calc(var(--low) + var(--gap)) 100%
  );
}

h1::earlier than {
  font-weight: 400;
  -webkit-clip-path: polygon(
    calc(var(--high) - var(--gap)) 0,
    calc(var(--low) - var(--gap)) 100%,
    0 100%,
    0 0
  );
  clip-path: polygon(
    calc(var(--high) - var(--gap)) 0,
    calc(var(--low) - var(--gap)) 100%,
    0 100%,
    0 0
  );
}

The ::earlier than pseudo factor is clipped diagonally in order that solely the left portion is seen, and ::after is clipped in order that the reverse is seen, permitting a small hole between then (which can create the slash impact). As some browsers nonetheless require clip-path` to be prefixed, we are able to leverage customized properties to chop down on our general code:

h1 {
  --high: 80%;
  --low: 20%;
  --gap: 0.5rem;

  --clipLeft: polygon(
    calc(var(--high) - var(--gap)) 0,
    calc(var(--low) - var(--gap)) 100%,
    0 100%,
    0 0
  );

  --clipRight: polygon(
    calc(var(--high) + var(--gap)) 0,
    100% 0,
    100% 100%,
    calc(var(--low) + var(--gap)) 100%
  );
}

h1::earlier than {
  font-weight: 400;
  -webkit-clip-path: var(--clipLeft);
  clip-path: var(--clipLeft);
}

h1::after {
  -webkit-clip-path: var(--clipRight);
  clip-path: var(--clipRight);
}

The unique textual content remains to be seen beneath the clipped pseudo parts, so I’m setting the color to clear. The pseudo parts even have a decrease z-index — that method the textual content will nonetheless be selectable, however the viewer will solely see the clipped textual content under.

h1 {
  shade: clear;
}

Lastly, whereas many of the textual content on the left of the slash is within the common font weight, the primary phrase must be daring. Sadly we are able to’t type this as a separate entity utilizing content material, so it wants a little bit of hackery, in addition to altering the markup to permit us to pick the primary phrase (within the absence of a ::first-word selector!):

<h1 type="--text: 'His Darkish Supplies'"><span>His</span> Darkish Supplies</h1>

Now I could make the textual content of the primary phrase seen and set the font weight to daring, which successfully hides the corresponding pseudo factor content material:

h1 > span {
  font-weight: 700;
  shade: white;
}

I’m not eager on this resolution, as it is vitally restricted. If we had a case the place the primary phrase wanted to be styled in a special font, or a lighter weight, then hiding the pseudo factor content material wouldn’t work. However it’s adequate for our goal this time.

Take a look at the total demo:

See the Pen His Darkish Supplies TV collection brand with CSS by Michelle Barker
(@michellebarker) on CodePen.