The Favourite

I love the movie The Favorite by Yorgos Lanthimos a lot. Upon seeing i the first time in the cinam I was taken by the title design. There is a great article on Vox about creating the typography for this movie (plus Suburbia and Sorry to Bother You). The designer Vasilis Marmatakis based the design on classic letterpress printing, his guiding rules were that each word in a given piece of text would be set on its own line, and that the longest word in that phrase would determine the width of every other word.

After reading an article by Michelle Barker on How to Accessibly Split Text I thought about recreating this design with HTML and CSS.

I Do Fear Confusion And Accidents

The HTML:

<h1 class="favourite" aria-label="This Mud Stinks">
  <span class="sentence" aria-hidden="true">
    <span class="word">
      <span class="letter">I</span>
    </span>
    <span class="word">
      <span class="letter">D</span>
      <span class="letter">o</span>
    </span>
    <span class="word">
      <span class="letter">F</span>
      <span class="letter">e</span>
      <span class="letter">a</span>
      <span class="letter">r</span>
    </span>
    <span class="word">
      <span class="letter">C</span>
      <span class="letter">o</span>
      <span class="letter">n</span>
      <span class="letter">f</span>
      <span class="letter">u</span>
      <span class="letter">s</span>
      <span class="letter">i</span>
      <span class="letter">o</span>
      <span class="letter">n</span>
    </span>
    <span class="word">
      <span class="letter">A</span>
      <span class="letter">n</span>
      <span class="letter">d</span>
    </span>
    <span class="word">
      <span class="letter">A</span>
      <span class="letter">c</span>
      <span class="letter">c</span>
      <span class="letter">i</span>
      <span class="letter">d</span>
      <span class="letter">e</span>
      <span class="letter">n</span>
      <span class="letter">t</span>
      <span class="letter">s</span>
    </span>
  </span>
</h1>

So everything’s wrapped in a h1 tag with the aria-label set for screen readers. Then it’s a bunch of spans: one for each letter, word and the whole sentence (with aria-hidden set to true so it’s ignored by screen readers).

The CSS:

@supports (display: flex) {
  .favourite {
    display: flex;
    justify-content: center;
  }

  .favourite .sentence {
    display: block;
  }

  .favourite .word {
    display: flex;
    justify-content: space-between;
  }

  .favourite .word + .word {
    margin-top: 1em;
  }
}

By using flex combined with space-between for each word the space between the letters is distributed equally. The width of the longest word then determines the width of the sentence, which is then centered. I’ve additionally added more vertical spacing between the words. If flexbox is not supported the text will be displayed without spacing.