Kevin Powell - Community•2y ago

Alter letter spacing to make text fill screen width

In the image attached (designed in Figma), my font has letter spacing set to -6%. I was wondering if there was a way to make text fill the screens width (and with an offset) with vanilla CSS depending on the screen size, or maybe using JavaScript.

[On a mobile device in portrait mode, the words would be on two lines but I understand how I could do that. The font in use is Inter]

4 Replies

Myndi•2y ago

You mean, filling the entire space + a small gap? Justifying it wouldn't do the trick? I imagine a janky way is splitting each letter into a span, and using flex + justify-content: between for it to work. Something like:

.container {
  display: flex;
  justify-content: between;
  padding: 1rem;
}

.container {
  display: flex;
  justify-content: between;
  padding: 1rem;
}

XanOP•2y ago

Could there be a way to use js to alter only the letter-spacing based on the viewport?

Myndi•2y ago

Yes, there's a way. Somebody asked this same question, and they've got an answer already. I'm linking it: https://discord.com/channels/436251713830125568/1069898561254346773/1069969116934455407

XanOP•2y ago

Thank you very much!

Gaming

Programming

Alter letter spacing to make text fill screen width