Css: How to Adjust My Font Size Fill All the Space in a Justified Layout

CSS: How can I adjust my font size fill all the space in a justified layout?

First of all you need to use a mono-space font. You can find some pretty nice looking ones over at Google Fonts. The font in the image is Ubuntu Mono.

Secondly, we are going to be using Viewport Width, or 'vw' unit (If you clicked the link, you'd see that it is well supported by browsers). You need to make sure the top line of text is the width you need it be to fit the width. This also means that each line needs to be it's own element. Some example HTML:

<p style="font-size: 5vw;">How can I</p>
<p>Adjust my font size</p>
<p>to fill all the space</p>
<p>in a justified</p>
<p>layout?</p>

We can now use this initial place-holder to work out the 'vw' size for the rest of the lines using the following formula:

NewFontSize = BaseFontSize - (((NewLineNumberOfChars - BaseLineNumberOfChars) / NewLineNumberOfChars) * BaseFontSize)

I have created this example to show how this can be achieved programmatically with JavaScript (I used JQuery for ease). The code that it spits out is as follows:

<p style="font-size: 5vw;">How can I</p>
<p style="font-size: 2.36842vw;">Adjust my font size</p>
<p style="font-size: 2.14286vw;">to fill all the space</p>
<p style="font-size: 3.21429vw;">in a justified</p>
<p style="font-size: 6.42857vw;">layout?</p>

It should be noted that because Google Chrome rounds all font sizes to the nearest round pixel (boo-hiss), it's not exact and it can look off, especially at smaller sizes.

measurement unit in css for font size

Generally, you should not change the font size of body text. The user has configured his browser to suit his display and his eyesight. If you force the font size to something else, the user may not be able to read the text.

Option to use pt as unit to define font size is meant to be used with printers, but it is not good idea to use it for screen. It tries to set absolute size ( 1pt=1/72in). Even if the text is correct size on your desktop PC, it is most likely not correct on a small phone screen. (A phone screen is viewed from shorter distance, so the font needs to be smaller.)
In addition to that, pt size depends on the dpi setting on users computer. Many users have wrong dpi setting (it depends on the monitor used), so the size of the font will not be what you expect.

The unit px is not good since the size of pixels wary between displays, as does users eyesight. However, it is useful if you want the text to be aligned correctly with an image, since the image (when displayed in actual size) is dimensioned as pixels.

In most cases, the size of body text should be 100% (i.e. do not change it). For other elements, use relative sizing (e.g. as %). If you must change the font size for body, the other elements will automatically change relative to that. The size given as % is size relative to the font size on parent element.

How to determine largest possible font-size such that it fits on one line in CSS

I'm afraid that (AFAIK) you cannot accomplish that using only CSS.

A common CSS technique for adjusting font-size to achieve a pleasing text layout in responsive design is the media query. Just wait until the text breaks at a certain width, and add another media query. Such fun!

Example:

@media only screen and (max-width: 330px) {
    .inside-text { font-size: 1.1em; }
}
@media only screen and (max-width: 660px) {
    .inside-text { font-size: 1.3em; }
}
@media only screen and (max-width: 990px) {
    .inside-text { font-size: 1.5em; }
}

Like Pangloss mentioned in the comments above, biting the bullet and using a javascript library such as fittext.js is an alternative option.

Adjust spaces between text or words in html

I had a similar problem and the only "hacky" way I found is this:

"Put your text and separator (: in this case) in a wrapper (like <div>) and align them.

.cell {
  display: flex;
  justify-content: space-between;
  width: 50px; /* just to see. you can use another value depending on your table styles */
}

<tr>
  <td style="font-size:11px;">
    <div class="cell">Name <span>:</span></div>
  </td>
</tr>
<tr>
  <td style="font-size:11px;">
    <div class="cell">Date <span>:</span></div>
  </td>
</tr>

CSS text align justify big spaces

Consider using hyphenation (manual, CSS, server-side, or client-side JavaScript), see e.g. answers to Can I use CSS to justify text with hyphenating words at the end of a line?
Hyphenation tends to help a lot when there are long words in the text.

You can still keep text-justify: distribute, as it can improve the result on supporting browsers, and it can be expected to gain support, as it in the CSS standardization track (in CSS Text Module Level 3 WD).

CSS text justify with letter spacing

Here's a script which can do it. It isn't pretty, but maybe you can hack it to meet your needs. (Updated to handle resizing)

function SplitText(node) {  var text = node.nodeValue.replace(/^\s*|\s(?=\s)|\s*$/g, "");
  for (var i = 0; i < text.length; i++) {    var letter = document.createElement("span");    letter.style.display = "inline-block";    letter.style.position = "absolute";    letter.appendChild(document.createTextNode(text.charAt(i)));    node.parentNode.insertBefore(letter, node);
    var positionRatio = i / (text.length - 1);    var textWidth = letter.clientWidth;
    var indent = 100 * positionRatio;    var offset = -textWidth * positionRatio;    letter.style.left = indent + "%";    letter.style.marginLeft = offset + "px";
    //console.log("Letter ", text[i], ", Index ", i, ", Width ", textWidth, ", Indent ", indent, ", Offset ", offset);  }
  node.parentNode.removeChild(node);}
function Justify() {  var TEXT_NODE = 3;  var elem = document.getElementById("character_justify");  elem = elem.firstChild;
  while (elem) {    var nextElem = elem.nextSibling;
    if (elem.nodeType == TEXT_NODE)      SplitText(elem);
    elem = nextElem;  }}

#character_justify {  position: relative;  width: 40%;  border: 1px solid red;  font-size: 32pt;  margin: 0;  padding: 0;}
#character_justify * {  margin: 0;  padding: 0;  border: none;}

<body onload="Justify()">  <p id="character_justify">    Something<br/> Like    <br/> This  </p></body>

text-align: justify adding white space

One of the downsides of inline-block elements is that the browser adds some whitespace around them. You can get around this by setting the font-size of the parent to 0. You then need to set the appropriate font-size on any children elements, otherwise they will inherit the font-size: 0 from the parent.

nav {
    font-size: 0;
}

Updated codepen: http://codepen.io/sdsanders/pen/xGNmGJ?editors=110