Make a full screen title

  • It should be responsive
  • Should work without transforming the title into an SVG or something like that
  • It's oke if each font needs a different "preset"

Challenges

  • Each letter has a different width
  • Each font is different

You can find the attempts below

But this didn't work nice, so I made a tool for this to calculate the right value for each title/font pairing. You can find it here: Calculate full screen title

Because the ch value works based on the specific letter 0, let's start with a title with only that "letter" (30 times).
ch - The advance measure (width) of the glyph "0" of the element's font. (MDN)
font-size: calc((100vw / 30) * 1ch)

000000000000000000000000000000

This is a title with 30 charss

Let's ditch the use vw.

00000000000000000000000000000000000000000000000000

This s a title with 50 characters including spaces

Let's hand-pick a vw value for each title.

This works for a developer, but not really for a CMS.

This s a title with 50 characters including spaces

Let's do the same, but with ch and based on the amount of letters.

This doesn't work. Let's make a tool for this!

0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000