Legible paragraphs using the CH unit

Use the character unit to limit the number of characters per line in a text element.

layout-design
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

The CH unit (character unit) lets us set the maximum width on text elements (e.g., headings or paragraphs) by limiting the number of characters (including spaces) per line. This constrains text to a smaller area and prevents eye strain associated with reading back and forth across the screen for each line of text.

The CH unit is equal to the number of zeros in a particular font (e.g., 10ch in Times New Roman font will limit the width of a text element to be equal to the width of 10 Times New Roman zeros).

The difference in width of 10ch in Times New Roman font versus Verdana font is visualized by showing 10 zeros in a line in each font. Verdana font’s zeros are wider so it has a greater width.

To set the CH unit:

  1. Select a text element (e.g., a heading, paragraph, etc.)
  2. Open Style panel > Size
  3. Type the CH unit in Max W (e.g., 60ch)
  4. Press Enter

Learn more about the CH unit in our lesson on Typography.

Cheers! You are the champion of changing CH!

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?