Skip to content

Commit 255229a

Browse files
committed
docs(typography0: Adds guidance for line length.
1 parent d13ede7 commit 255229a

2 files changed

Lines changed: 10 additions & 0 deletions

File tree

  • packages/documentation-site/patternfly-docs/content/design-guidelines

packages/documentation-site/patternfly-docs/content/design-guidelines/components/content/content.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ When using the content component, the content type that you use will align with
1313

1414
Margins will be automatically applied to the content component, based on its location in the overall page. If it's the first item on the page, there will be no top margin. If it's the final item on the page, there will be no bottom margin.
1515

16+
### Line length
17+
18+
Follow our [typography guidelines](/design-guidelines/typography#line-length) for line length, which recommend staying between 20 and 100 characters for better readability.
19+
1620
### When to use content vs. title
1721

1822
**Use content:**

packages/documentation-site/patternfly-docs/content/design-guidelines/styles/typography/typography.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,3 +97,9 @@ Your overall line height can be calculated by multiplying the font's built-in li
9797
For example, if your font has a line height of 1.5 and a size of 16px, the final height of a line of text would be 24px (16px * 1.5 = 24px). In this example, you would consider the final line height of 24px when creating designs.
9898

9999
![Correct and incorrect text spacing examples.](./line-height.png)
100+
101+
## Line length
102+
103+
Line length measures the number of characters in a single line of text, including spaces. To increase readability and contribute to well-balanced spacing on a screen, use line lengths between 20 and 100 characters.
104+
105+
Lines that are too long can be difficult to follow, while lines that only include a few words per line can use space inefficiently.

0 commit comments

Comments
 (0)