Big Text

by soulwire

CSS

html, body {
  background: #2b2b2b;
  margin: 0;
  font-family: 'Roboto Mono', ;
  font-family: 'Paytone One', sans-serif;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  line-height: 0.8;
}

Babel + JSX

const el = document.createElement('div')
document.body.appendChild(el)

el.style.cssText = `
	text-transform: uppercase;
  -box-shadow: inset 0 0 1px yellow;
  -font-size: 1em;
  font-size: 10px;
  white-space: nowrap;
  display: inline-block;
	color: #fff;
  opacity: 0.1;
`

const fitText = text => {
	let targetAspectRatio = window.innerWidth / window.innerHeight
  let lettersPerLine = 1
	let stepInterval
  let bestDelta = Number.MAX_VALUE
  const step = () => {
  	let re = new RegExp(`.{1,${lettersPerLine}}`, 'g')
  	let lines = text.match(re)
    el.innerHTML = lines.join('<br/>')
    let aspectRatio = el.offsetWidth / el.offsetHeight
    let currentDelta = Math.abs(targetAspectRatio - aspectRatio)
    if (currentDelta <= bestDelta) {
    	// Keep going
			bestDelta = currentDelta
    	lettersPerLine++
    } else {
    	clearInterval(stepInterval)
      let re = new RegExp(`.{1,${lettersPerLine - 1}}`, 'g')
  		let lines = text.match(re)
	    el.innerHTML = lines.join('<br/>')
      const tw = window.innerWidth
      const th = window.innerHeight
      const sw = el.offsetWidth
      const sh = el.offsetHeight
      const tr = tw / th
      const sr = sw / sh
      const scale = tr <= sr ?
      	tw / sw :
        th / sh
      //el.style.transformOrigin = '0 0'
      //el.style.transform = `scale(${scale})`
      el.style.fontSize = (10 * scale) + 'px'
      console.log('done', scale)
    }
  }
  stepInterval = setInterval(step, 100)
}

//fitText('plasmatic-isosurface')
//fitText('muscularhydrostats')
fitText('muscular-hydrostats')