Better type layouts with CSS

Today, I wanted to quickly share two newer CSS properties that make it easier to create nice, well-balanced layouts.

The text-wrap property has two newish values: balance and pretty.

The balance value is good for headings, and tries to balance the number of characters on each line so that each line of the heading is about the same length.

The pretty value attempts to reduce orphans (instances where one word is all by itself on a line).

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

article p {
	text-wrap: pretty;
}

Both properties are costly for browsers to calculate and have a negative impact on performance, so use them sparingly.