Recently a student of mine pointed out a common web page layout problem that I had been unaware of. Of course, once it was pointed out to me, I couldn’t unsee it, and had to find a solution. On the same day, Šime Vidas made me aware of a subtle new CSS addition to control typographic layout. This article introduces both.

Eliminating Spaces After Last Letters

In web page layout, letter-spacing also adds space after the last letter of the HTML content. With normal-sized type - left-justified paragraph text, for example - this end-space is invisible and unimportant. But on large, centered text, such as a heading, its presence can throw off the alignment of text. For example, using this CSS:

body { 
    margin: 0;
    min-height: 100vh;
    border-left: 25rem solid black; 
    border-right: 25rem solid black;
}
h1 { 
    text-align: center; 
    text-transform: uppercase; 
    font-family: Agency FB, Helvetica, sans-serif; 
    font-size: 8rem;
    letter-spacing: 2rem;
}

Produces this effect on an h1 element:

The text appears out of alignment due to the letter-spacing on the last letter, visible when you select or highlight the text:

The Solution

Move the text to the right using the same distance as the letter-spacing:

h1 {
    margin-left: 2rem; 
}

This will offset the effect of the errant letter-spacing on the last letter, producing correctly aligned text.

text-align-last

When text is set flush both sides (text-align: justify) there is always the question of what to do with the last line. This CSS for the blockquote element:

blockquote { 
    font-family: Avenir, Helvetica, sans-serif;
    margin: 0 auto;
    width: 20%;
    text-align: justify;
    font-size: 1.3;
    line-height: 1.5;
}

…will always have the last line left-aligned.

Newly supported in Chrome Canary, coming soon to mainline Chrome and supported for some time in Firefox (under a vendor prefix) and IE/Edge, text-align-last allows you to determine the alignment of that last line with a value of left (the default), center or right. Using the last value, in conjunction with the CSS above:

p { 
    -moz-text-align-last: right;
    text-align-last: right;
}

Produces:

This can add a subtle but effective finish to text, especially text set in a thin, tall column.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.