[Go Make Things] Better type layouts with CSS

By rahmat hidayat

Friday, March 22, 2024

​

⏰🦉 Early Bird Sale! Today through Monday, get 40% off registration for Modern JS for Beginners.

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.

Cheers,
Chris

​

Want to share this with others or read it later? View it in a browser.​

​

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Share :

Facebook Twitter Google+ Lintasme