Notes: I tried all questions & answers related to this topic.

My Question very simple and clear 1ch = how many px?

My sample code

Relatest search article

1. Understanding-css-units
2. css Units
3. css-unit-conversion-calculator

Notes: I tried all questions & answers related to this topic.

My Question very simple and clear 1ch = how many px?

My sample code

Relatest search article

1. Understanding-css-units
2. css Units
3. css-unit-conversion-calculator

• javascript
• html
• css

• what do you want to know? 1ch = how many px? or you wanted to solve your issue? – Siful I Commented Jun 22, 2020 at 5:37
• 1 Ch is a function of font-width so there is no set conversion calculation. – Paulie_D Commented Jun 22, 2020 at 6:40

1 Answer 1

There is no constant ch to px conversion because, like rem and em, ch is a relative unit. 1ch is equal to the width of the 0 glyph (ZERO, U+0030) of the current font.

So if the 0 glyph is 8px wide, then 1ch = 8px (in the example below, this happens to be equal to 0.5em, but this is not a guarantee).

html {
  font-size: 16px;
}

.font-20 {
  font-size: 20px;
}

.em { 
  background: red;
  height: 1em;
  width: 1em;
}

.rem { 
  background: blue;
  height: 1rem;
  width: 1rem;
}

.ch { 
  background: green;
  height: 2ch;
  width: 2ch;
}

.px {
  background: orange;
  height: 16px;
  width: 16px;
}

<div>
  <h1>font-size: 16px (root size)</h1>
  <div class="ch" title="2ch"></div>  
  <div class="em" title="1em"></div>
  <div class="rem" title="1rem"></div>
  <div class="px" title="16px"></div> 
</div>
<div class="font-20">
  <h1>font-size: 20px</h1>
  <div class="ch" title="2ch"></div>  
  <div class="em" title="1em"></div>
  <div class="rem" title="1rem"></div>
  <div class="px" title="16px"></div>
</div>