Better justified text on your website

When we want to use justified text in a web page, sometimes the result is not the desired one. Many times we get a justified text in which the words are too far apart or too close together as you can see in the following example:

Solutions to improve html text justification

To solve the problem of text justification in web pages, we have several options

1. Change the spacing between words or between characters (tracking)
2. Change the text size if possible
3. Change the size of the container/column
4. A combination of the above

Change the spacing between words or characters

This is the most recommended option to improve text justification in html. We can do it using CSS manually or using the settings of our text editor such as Elementor. If we do it using CSS, we only have to use the following code to control the spacing between characters (tracking) assuming that we are creating the styles of a paragraph of text:

p {letter-spacing: 1px;}

p {leter-spacing: 0.04em}

If you use em units in many cases you will have more control over the spacing, since it is a relative unit and in many cases 1px is too much spacing.

If you use Elementor, we don’t have to use CSS code, since the editor itself offers us the possibility to change the tracking of almost any text widget. Continuing with the previous example, inside Elementor we go to the Style tab and select Typography. Click the pencil icon to edit, and at the bottom of the panel you will find the spacing options.

If we are working on a publication in which we cannot change the size of the text or modify the width of the columns, this is the best option to improve the justification of text in html. Just by changing the letter spacing we were able to greatly improve the appearance of the justified text in our example. Take a look.

Change the size of the container/column

If the size of the text container or column of your text is something you can change, try to make it slightly wider or narrower until you find the optimum width and then adjust the text tracking and/or text size if possible.