Better justified text on your website

Read this in:

Learn how to make a more aesthetically pleasing justified text using tracking

Tabla de contenidos

Share this post

Share on facebook
Share on linkedin
Share on twitter
Share on email

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:

As you can see here this is an extreme case but sometimes justified text looks quite horrible.

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.

Better text justification in Elementor - TwipSend Notifications

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.

You can see that the white spaces in the first photo have been reduced considerably by using only the spacing between characters.

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.

Subscribe to our newsletter

Receive more articles like this on your email

Search for more content

More to Explore

Boost your leads and sales

Create your free TwipSend account