Add width utility to limit line length for readability (#2410)

* Add class to limit max-width to 65ch

* Update layout.md with example of new class

* Update layout.scss

* Create .changeset/shy-cats-hug.md

---------

Co-authored-by: simurai <[email protected]>

Author: dylanatsmith

.changeset/shy-cats-hug.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Add width utility to limit line length for readability

docs/content/utilities/layout.md

@@ -204,6 +204,14 @@ Use `.width-auto` to reset width to `auto` (initial value). Typically used with
 </div>
 ```
 
+Use `.width-comfortable` to set width to `65ch`. This can be used on text elements to shorten the line length for better readability.
+
+```html live
+<p class="width-comfortable">
+  Bacon ipsum dolor amet meatball flank beef tail pig boudin ham hock chicken capicola. Shoulder ham spare ribs turducken pork tongue. Bresaola corned beef sausage jowl ribeye kielbasa tenderloin andouille leberkas tongue. Ribeye tri-tip tenderloin pig, chuck ground round chicken tongue corned beef biltong.
+</p>
+```
+
 Use `.height-fit` to set max-height 100%.
 
 ```html live

src/utilities/layout.scss

@@ -71,13 +71,15 @@
 // Width and height utilities, helpful in combination
 // with display-table utilities and images
 /* Max width 100% */
-.width-fit   { max-width: 100% !important; }
+.width-fit         { max-width: 100% !important; }
 /* Set the width to 100% */
-.width-full  { width: 100% !important; }
+.width-full        { width: 100% !important; }
+/* Set the max-width to 65 characters */
+.width-comfortable { max-width: 65ch !important; }
 /* Max height 100% */
-.height-fit  { max-height: 100% !important; }
+.height-fit        { max-height: 100% !important; }
 /* Set the height to 100% */
-.height-full { height: 100% !important; }
+.height-full       { height: 100% !important; }
 
 /* Remove min-width from element */
 .min-width-0 { min-width: 0 !important; }