CSS Font-size to maintain same word width

Question

I'm trying to get the words "Hello", "Projects", "Social" and "Contact" to responsively adjust their font-size so that the words are all the same width rather than having to go in pixel by pixel.

I thought I was on to something with using viewport width but that isn't having the effect I'm after.

See image for the desired effect.

Answer 1

You can use JavaScript to wrap each letter in a span. Then you can use flexbox to distribute the spans evenly inside the p.

The words in the example below are inside a div with a fixed width in px. You can use other units as you need - %, vw etc

Example

const words = document.querySelectorAll('.tracking');

for (let i = 0; i < words.length; i++) {
  const text = words[i].textContent.split('');
  words[i].innerHTML = '';

  text.forEach((letter, index) => {
    const span = document.createElement('span');
    const textnode = document.createTextNode(letter);
    span.appendChild(textnode);
    words[i].appendChild(span);
  });
}

div {
  width: 150px;
  margin: 0 auto;
}

.tracking {
  margin: 0;
  padding: .5rem;
  font-family: sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: #FFF;
  display: flex;
  justify-content: space-between;
}

div div:nth-of-type(1) {
  background: red;
}
div div:nth-of-type(2) {
  background: orange;
}
div div:nth-of-type(3) {
  background: lightgrey;
}
div div:nth-of-type(4) {
  background: black;
}

<div>
  <div>
    <p class="tracking">Hello</p>
  </div>
  <div>
    <p class="tracking">Projects</p>
  </div>
  <div>
    <p class="tracking">Social</p>
  </div>
  <div>
    <p class="tracking">Contact</p>
  </div>
</div>

Answer 2

var d = document.getElementById("master");
// set your margin... depends from font style
  var margin= 2;
  function font(){
  var lett = document.getElementById("master").clientWidth;
  

  setInterval(function(){font()},0)}

 function getCount(matchResult) {
  return matchResult ? matchResult.length : 0;
}


function alert(){
var pm = document.getElementById("master").querySelectorAll('*');
  var num ;
  for (num = 0; num < pm.length; num++){
  var str = pm[num].textContent;
var countA = getCount(str.match(/A/g));
var countB = getCount(str.match(/B/g));
var countC = getCount(str.match(/C/g));
var countD = getCount(str.match(/D/g));
var countE = getCount(str.match(/E/g));
var countF = getCount(str.match(/F/g));
var countG = getCount(str.match(/G/g));
var countH = getCount(str.match(/H/g));
var countI = getCount(str.match(/I/g));
var countJ = getCount(str.match(/J/g));
var countK = getCount(str.match(/K/g));
var countL = getCount(str.match(/L/g));
var countM = getCount(str.match(/M/g));
var countN = getCount(str.match(/N/g));
var countO = getCount(str.match(/O/g));
var countP = getCount(str.match(/P/g));
var countQ = getCount(str.match(/Q/g));
var countR = getCount(str.match(/R/g));
var countS = getCount(str.match(/S/g));
var countT = getCount(str.match(/T/g));
var countU = getCount(str.match(/U/g));
var countV = getCount(str.match(/V/g));
var countW = getCount(str.match(/W/g));
var countX = getCount(str.match(/X/g));
var countY = getCount(str.match(/Y/g));
var countZ = getCount(str.match(/Z/g));
var counta = getCount(str.match(/a/g));
var countb = getCount(str.match(/b/g));
var countc = getCount(str.match(/c/g));
var countd = getCount(str.match(/d/g));
var counte = getCount(str.match(/e/g));
var countf = getCount(str.match(/f/g));
var countg = getCount(str.match(/g/g));
var counth = getCount(str.match(/h/g));
var counti = getCount(str.match(/i/g));
var countj = getCount(str.match(/j/g));
var countk = getCount(str.match(/k/g));
var countl = getCount(str.match(/l/g));
var countm = getCount(str.match(/m/g));
var countn = getCount(str.match(/n/g));
var counto = getCount(str.match(/o/g));
var countp = getCount(str.match(/p/g));
var countq = getCount(str.match(/q/g));
var countr = getCount(str.match(/r/g));
var counts = getCount(str.match(/s/g));
var countt = getCount(str.match(/t/g));
var countu = getCount(str.match(/u/g));
var countv = getCount(str.match(/v/g));
var countw = getCount(str.match(/w/g));
var countx = getCount(str.match(/x/g));
var county = getCount(str.match(/y/g));
var countz = getCount(str.match(/z/g));
var countspace = getCount(str.match(/ /g));
var groupa = 22*(counti+countj+countl);
var groupb = 28*(countI+countf+countt);
var groupc = 33*(countr);
var groupd = 50*(countJ+countc+countk+counts+countv+countx+county+countz);
var groupe = 56*(countL+counta+countb+countd+counte+countg+counth+countn+counto+countp+countq+countu);
var groupf = 61*(countF+countT+countZ);
var groupg = 67*(countA+countB+countE+countK+countP+countS+countV+countX+countY);
var grouph = 72*(countC+countD+countH+countN+countR+countU+countw);
var groupi = 78*(countG+countO+countQ);
var groupj = 83*(countM+countm);
var groupk = 94*(countW);
var groupl = 28*(countspace);

var totalsize = (groupa+groupb+groupc+groupd+groupe+groupf+groupg+grouph+groupi+groupj+groupk+groupl)/100;
var lett = pm[num].clientWidth;
var final = Math.floor(lett / totalsize) ;
pm[num].style.fontSize=final-margin+"px";
}
setInterval(function(){alert()},0)
}


window.onload = function(){ 
  
  font();
  alert();

}


	

div {text-align:center;
width:350px;
margin:0px;
padding:0px;}
p{
background-color:gray;
margin:0px;
padding:0px;
color:white}
.orange{
background-color:orange;}
.red{
background-color:red;}

<body>
<div id="master">
 <p>Text using font-master.js </p>
 <p>How simply is that </p>
 <p class="orange">Hello</p>
 <p class="red">Project</p>
</div>

</body>

you can use my js. plug in it is easy and free to use: https://github.com/foxreaper/font-master

Text will fit to your div or sreen size... If you will have any issue let me know.

Answer 3

You may adjust font-size and also letter-spacing using vw unit

.title {
  font-size: 15vw;
  padding: 20px 0;
  font-family: arial;
}

.title:first-child {
  letter-spacing:5vw;
}

<div>
  <div class="title">
    Hello
  </div>
  <div class="title">
    Projects
  </div>
</div>