I've recently in the last week come across a new CSS unit "ch" I haven't seen it before in any of the tutorials I've taken or websites I've inspected and have tried to look up information regarding it but honestly, there seems to be such little info on it and how to use it properly.
MDN describes it as "The advance measure (width) of the glyph "0" of the element's font."
I understand from this that the width of a ch unit is the width of the "0" in that element's font and size. I also understand that this works the best straight out of the box with monospaced fonts as the width of every character is the same as the "0" but with proportional fonts where the width of every character is different, it can take an extra bit to get it to work as you'd expect.
One article I found mentioned that with a proportional font, you could set the width of a text container to say for example to 45ch and afterward inspect both the containers width and the width of the text, you could then take the width of the container and divide it by the width of the text and take that answer and change the width of the container to be 45ch times that, and it would then count for the discrepancy and work as intended. Though this answer will vary by the font family being used, in my case of using the font family "Playfair Display" the equation I got to achieve the width of 45ch was to make the width "45ch * 0.9696" This has worked so far and I hope this is the correct approach if there is a different way of getting it to work with proportional fonts easier I would be interested to learn.
I then understand that the ideal character width for a line of text is anywhere between 45 to 75 so then the idea occurred of using a clamp for a container width with 45ch as the minimum and 75ch as the maximum so as to always achieve the perfect width for a container with text but then there's a couple of issues and several questions about ch units I still have.
Keeping with the clamp how in this case would I go about picking the preferred value for the clamp to scale by? I've seen examples online of people just using percentages but I'm not sure how they are getting the number for their percentages and what works best.
When at smaller screen sizes what if 45 ch is still too wide for the container and causes overflow, how would you offset this?
I understand as mentioned above that a ch unit is based on the width of a zero in the font of the element, but what would it be equal to if the element you place it on contains multiple fonts, such as making the width of a div in ch but the div contains two different paragraphs of texts that each use a different font family, what would the width of ch be then?
For question 2 When trying to make the width of a paragraph element a "clamp(45ch, 90%, 75ch)", (I also chose 90% randomly because I still don't understand how you would decide on the preferred value), when the width of the page gets too small like in my case right around 360px screen width, the text container would overflow the page. I understand why it is because it won't shrink anymore past 45ch but I am deadlocked with an issue, I need it to fit but I need it to not be less than 45ch a line. I'm using a clamp for my font size as well I thought that maybe changing what the minimum font size is would allow it to fit at that small screen size but it did not work.
For question 3 I also tried when experimenting, setting the "max-width: 75ch" on a paragraph element and then deciding I wanted the entire div container to be "max-width: 75ch" but got a completely different width result that was much smaller than the first test, I can't make sense of why it would be smaller when it is the same font family being used on the entire page but the div container also had header elements and I'm wondering if that caused a different result?
I hope these questions are concise enough, I've been trying to research through articles and videos all week but can't find the answer to some of these, I don't feel like I'm using ch properly or effectively as I'm a bit new to the concept of fluid typography. If there's any extra information or clarification I can provide let me know. Thanks.