Using ch (character) unit on font-size

Question

My question is very different from this question: Font scaling based on width of container

This previous question and answers do not mention the ch unit.

CSS Tricks shows an example of using the ch unit to size text, https://css-tricks.com/almanac/properties/f/font-size/.

I had assumed that setting font-size to say 75ch would set the font size so that a maximum of 75 characters (or zeros) would fit on a line, within its container. So that when the container width grows or shrinks, the font-size adapts accordingly, so that there is always 75 characters per line.

See The Elements of Typographic Style Applied to the Web http://webtypography.net/2.1.2 "Anything from 45 to 75 characters is widely regarded as a satisfactory length of line"

However it doesn't work like that. I can see the max-width: 75ch limits the width of the text to 75 characters. But that is an entirely different thing.

If the ch unit can't be used on font-size to create responsive font sizes depended on the width of the container, then what is ch based on when used on font-size (as per the CSS Tricks example)?

<div class="text-content">
    <p>Nus moluptatur? Quid eum in nosandit, ut voluptae num dit faccumquis qui vollab inctaquam, undis antis et voluptae. Itatenditem qui tem nonecus repedi doluptae pre explautessum is dolupta doluptatum que perunt lant rero te dolestium fugitat emporeiur, ipit est od minim dolesti asitati onsedisci dit magnatecatur se nimini repe est voluptat. Alitatur seruptat. Dercipis nonsequ iandae venim erum que rerionectas ad quate aut undi dis es alit adis dia dio te miligen tinvelis nustis mi, ut militatur atiosam, etur aut eum ut ad qui nonet fugiam facculpa pro molenis et, consenim volorer ercienis endaniste est ut exeria dis voluptam si dolorat. Tationsed maximpellant maximod eiunt undisque imustruntus mintio blant lamet ea volupta tiores ducita qui dolut aut ex ex enitas soluptur? Ebit eium et et exeruntur? At autatisquas siti cone cuptaspedit lamusae sequidi coreperion ea illaut liquaec tusamus, aborepra qui to ellabore vellace atemporemqui ulparchilia nis sit utet is abo. Sa susdaerumquo voluptatibus corro que et laboribus repudipid es is vid maio. Ut doluptate conseniet que volumquia quam excerib erspernamet dolorio. Itaturehenti sum, estiur sinusciliquo bla es enimus autate ex entotas consendio. Ut lit optatibustes vit ute que mo milliciati re, odi dolum re velesto rercitae re elenis exerit omniate et, cuptibusdae quamus.</p>
</div>

.text-content {
    max-width: 700px;
}

p {
font-size: 75ch;
}

See JS Fiddle https://jsfiddle.net/n98oq5Lc/

Answer 1

ch as a unit really only makes sense in most cases if you are dealing with a monospaced font - then 75ch max-width really would mean dont let the width go beyond 75 characters. But with non monospaced fonts CSS isn't going to count the characters it's going to use what it deems the width ch to mean (see e.g. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units If your text is lots of i characters it will have a different number of characters in the element than if it has lots of M.

You can however get a sort of responsive font size by defining it in terms of vw and your element width in terms of vw too. It wont gaurantee how many characters you get in a line (unless you go back to the monospaced idea) though.

Answer 2

I tried CH and it sucks, cause lets say you have word: LISBON ... first 2 characters LI are the same size as S, so based on max-width: 2ch; => LI-S-B-O-N

if you try ch3, then it will be LIS-B-ON

basically doesn't work as intented.

Answer 3

No.

ch is a width but font size is a height.

So 75ch merely adjust the vertical size of the font, not the width in respect to the container.