Why letter M or W indent are different than other letters?

Looking by this example:

HTML

<input type="checkbox" name="jour_semaine[]" id="lundi" value="Lundi"/>
<label class="checkbox-inline weekday" for="lundi" >L</label>

<input type="checkbox" name="jour_semaine[]" id="mardi" value="Mardi"/>
<label class="checkbox-inline weekday" for="mardi" >M</label>

<input type="checkbox" name="jour_semaine[]" id="mercredi" value="Mercredi"/>
<label class="checkbox-inline weekday" for="mercredi" >W</label>

<input type="checkbox" name="jour_semaine[]" id="jeudi" value="Jeudi"/>
<label class="checkbox-inline weekday" for="jeudi" >J</label>

<input type="checkbox" name="jour_semaine[]" id="vendredi" value="Vendredi"/>
<label class="checkbox-inline weekday" for="vendredi" >V</label>

CSS

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute!important;
  left: -9999px!important;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 40px;
  padding-top:6px;
  margin-bottom:20px;
  cursor: pointer;
  font-family:'arial';
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left:0; top: 0;
  width: 32px; height: 32px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 3px;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: ' '; 
  background:#ccc;
  width:20px;
  height:20px;
  border-radius:3px;
  position: absolute;
  top: 6px; left: 6px;
  font-size: 24px;
  line-height: 0.8;
  color: #000;
  transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
.checkbox-inline{display:inline-block;}
.weekday{text-indent:-29px; margin-right:60px; font-weight:bold; }
.weekday::before{background:none!important;}
.weekday::after{z-index:-1;}

Results

I'm indenting the letter negatively to center it inside my box. As you can see, all letters except M and W are centered.

I've tried many font-family and nothing, still having this offset. Any typography guru out there that could explain why those twos act differently?

Note that these are <label> with a text-indent set to negative.

Fiddle : https://jsfiddle.net/warface/pLLr8pbq/

All characters have different widths except in mono-space fonts.

Rather than fighting with changing the indent, since you already have an exact width set on those boxes, you can set your label width to match your box width, center your text, and remove your text-indent and left-padding and it should solve your alignment issue for all letters:

[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-top:6px;
  margin-bottom:20px;
  cursor: pointer;
  font-family:'arial';
  width:32px;
  text-align:center;
}
.weekday{margin-right:60px; font-weight:bold; }

https://jsfiddle.net/pLLr8pbq/3/